KLC-Website-Frontend/src/components/WhitepapersSection.tsx

import { motion } from "motion/react";
import { FileText, Target, BarChart3, Download, Eye } from "lucide-react";
import { BrandedTag } from "./about/BrandedTag";
import { PrimaryCTAButton } from "./PrimaryCTAButton";
import { navigateTo } from "./Router";

interface Resource {
  id: number;
  title: string;
  description: string;
  type: string;
  category: string;
  icon: any;
  color: string;
}

const resources: Resource[] = [
  {
    id: 1,
    title: "Leadership Assessment Framework",
    description: "Comprehensive self-leadership evaluation tool with detailed scoring methodology.",
    type: "PDF Guide",
    category: "Stage",
    icon: FileText,
    color: "#8B5CF6"
  },
  {
    id: 2,
    title: "Executive Decision Making Toolkit",
    description: "Strategic frameworks and templates for complex organizational decision making.",
    type: "Toolkit",
    category: "B Frame",
    icon: Target,
    color: "#3B82F6"
  },
  {
    id: 3,
    title: "Team Performance Metrics Dashboard",
    description: "Ready-to-use Excel template for tracking and improving team performance indicators.",
    type: "Excel Template",
    category: "Dashboard",
    icon: BarChart3,
    color: "#10B981"
  }
];

interface ResourceCardProps {
  resource: Resource;
  index: number;
}

function ResourceCard({ resource, index }: ResourceCardProps) {
  const IconComponent = resource.icon;

  return (
    <motion.div
      className="bg-white rounded-xl border border-gray-100 p-8 hover:shadow-lg transition-all duration-300 group"
      initial={{ opacity: 0, y: 30 }}
      whileInView={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.6, delay: index * 0.1 }}
      viewport={{ once: true }}
    >
      {/* Icon and Category */}
      <div className="flex items-center justify-center mb-6">
        <div 
          className="w-16 h-16 rounded-xl flex items-center justify-center"
          style={{ backgroundColor: `${resource.color}20` }}
        >
          <IconComponent 
            className="w-8 h-8"
            style={{ color: resource.color }}
          />
        </div>
      </div>

      {/* Type and Category Tags */}
      <div className="flex items-center justify-center gap-2 mb-4">
        <span 
          className="px-3 py-1 text-xs font-semibold rounded-full"
          style={{ 
            backgroundColor: `${resource.color}15`,
            color: resource.color
          }}
        >
          {resource.type}
        </span>
        <span 
          className="px-3 py-1 text-xs font-semibold rounded-full"
          style={{ 
            backgroundColor: 'var(--color-brand-primary)',
            color: 'white'
          }}
        >
          {resource.category}
        </span>
      </div>

      {/* Title */}
      <h3 
        className="text-xl font-bold text-center mb-4 leading-tight"
        style={{ 
          color: 'var(--color-brand-black)',
          display: '-webkit-box',
          WebkitLineClamp: 2,
          WebkitBoxOrient: 'vertical',
          overflow: 'hidden',
          minHeight: '3.5rem'
        }}
      >
        {resource.title}
      </h3>

      {/* Description */}
      <p 
        className="text-sm text-center leading-relaxed mb-8"
        style={{ color: '#6B7280' }}
      >
        {resource.description}
      </p>

      {/* Download Button - Updated to redirect to learning resources */}
      <button 
        className="w-full flex items-center justify-center space-x-2 px-6 py-3 font-semibold text-sm transition-all duration-300 hover:shadow-lg hover:-translate-y-1"
        style={{ 
          borderRadius: '10px',
          backgroundColor: 'var(--color-brand-primary)',
          color: 'white'
        }}
        onClick={() => navigateTo('/self-learner-signup')}
        onMouseEnter={(e) => {
          e.currentTarget.style.backgroundColor = 'var(--color-brand-accent)';
          e.currentTarget.style.color = 'var(--color-brand-black)';
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.backgroundColor = 'var(--color-brand-primary)';
          e.currentTarget.style.color = 'white';
        }}
      >
        <Download className="w-4 h-4" />
        <span>Free Download</span>
      </button>
    </motion.div>
  );
}

export function WhitepapersSection() {
  return (
    <section 
      className="py-20"
      style={{ backgroundColor: 'var(--color-brand-bg-light)' }}
    >
      <div className="max-w-7xl mx-auto section-margin-x">
        {/* Section Header */}
        <div className="mb-16">
          {/* Branded Tag */}
          <motion.div 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
          >
            <BrandedTag text="Free Leadership Resources" />
          </motion.div>

          {/* Heading and CTA Container */}
          <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between mb-6 gap-6">
            {/* Main Heading */}
            <motion.h2 
              className="text-5xl font-bold leading-tight max-lg:text-4xl max-md:text-3xl"
              style={{ color: 'var(--color-brand-black)' }}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.7, delay: 0.2 }}
              viewport={{ once: true }}
          >
              Free Leadership Downloads
            </motion.h2>

            {/* Browse All Resources Button - Updated to redirect to articles */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.4 }}
              viewport={{ once: true }}
            >
              <PrimaryCTAButton 
                text="Browse All Resources"
                onClick={() => navigateTo('/self-learner-signup')}
                ariaLabel="Browse all leadership resources"
              />
            </motion.div>
          </div>

          {/* Description */}
          <motion.p 
            className="text-lg leading-relaxed max-w-2xl"
            style={{ color: '#6B7280' }}
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.6 }}
            viewport={{ once: true }}
          >
            Access our collection of premium leadership tools, frameworks, and templates at no cost. Start implementing proven leadership strategies today.
          </motion.p>
        </div>

        {/* Resources Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {resources.map((resource, index) => (
            <ResourceCard
              key={resource.id}
              resource={resource}
              index={index}
            />
          ))}
        </div>
      </div>
    </section>
  );
}