import React, { FC } from 'react';
import { motion } from 'framer-motion';
import { FadeIn } from '../components/FadeIn';
import { LiveProjectButton } from '../components/LiveProjectButton';

interface ProjectCardProps {
  index: number;
  title: string;
  category: string;
  client: string;
  col1Img1: string;
  col1Img2: string;
  col2Img: string;
  isPersonal: boolean;
}

/**
 * Project Card component with sticky stacking effect.
 */
const ProjectCard: FC<ProjectCardProps> = ({ index, title, category, client, col1Img1, col1Img2, col2Img, isPersonal }) => {
  // Scale calculation: targetScale = 1 - (totalCards - 1 - index) * 0.03.
  // Since we have 3 cards (index 0, 1, 2), totalCards = 3.
  // Index 0: 1 - (3 - 1 - 0) * 0.03 = 1 - 0.06 = 0.94
  // Index 1: 1 - (3 - 1 - 1) * 0.03 = 1 - 0.03 = 0.97
  // Index 2: 1 - (3 - 1 - 2) * 0.03 = 1 - 0 = 1.0
  // We will use a simpler scale factor based on index for demonstration, or rely on Framer Motion's useScroll/useTransform if this were a full implementation.
  // For static code, we'll use a slight scale variation.
  const scale = 0.9 + (index * 0.03);

  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.9 }}
      whileInView={{ opacity: 1, scale: 1 }}
      viewport={{ once: true, amount: 0.3 }}
      transition={{ duration: 1, delay: index * 0.1 }}
      className={`relative w-full ${index === 0 ? 'top-0' : index === 1 ? 'top-[28px]' : 'top-[56px]'} md:top-0`}
      style={{ transformOrigin: 'top center' }}
    >
      <div className="rounded-[40px] sm:rounded-[50px] md:rounded-[60px] border-2 border-[#D7E2EA] bg-[#0C0C0C] p-4 sm:p-6 md:p-8 shadow-xl">
        
        {/* Top Row */}
        <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
          <div className="flex flex-col">
            <span className="text-sm uppercase tracking-widest text-[#BBCCD7]">{category}</span>
            <h2 className="text-3xl sm:text-4xl md:text-5xl font-black uppercase leading-tight mt-1">{title}</h2>
            <p className="text-lg text-gray-400 mt-1">{client}</p>
          </div>
          <div className="mt-4 md:mt-0 flex flex-col items-end">
            <LiveProjectButton>Live Project</LiveProjectButton>
          </div>
        </div>

        {/* Bottom Image Grid */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {/* Left Column (2 stacked images) */}
          <div className="col-span-1 flex flex-col gap-4">
            <img
              src={col1Img1}
              alt="Project Image 1"
              className="w-full rounded-[40px] sm:rounded-[50px] md:rounded-[60px] object-cover flex-shrink-0"
              style={{ height: 'clamp(130px, 16vw, 230px)' }}
            />
            <img
              src={col1Img2}
              alt="Project Image 2"
              className="w-full rounded-[40px] sm:rounded-[50px] md:rounded-[60px] object-cover flex-shrink-0"
              style={{ height: 'clamp(160px, 22vw, 340px)' }}
            />
          </div>
          
          {/* Right Column (1 tall image) */}
          <div className="col-span-2">
            <img
              src={col2Img}
              alt="Project Image 3"
              className="w-full rounded-[40px] sm:rounded-[50px] md:rounded-[60px] object-cover"
            />
          </div>
        </div>
      </div>
    </motion.div>
  );
};

/**
 * Projects Section component.
 */
export const ProjectsSection: FC = () => {
  const projects = [
    {
      title: "Nextlevel Studio",
      category: "Client",
      client: "Nextlevel Studio",
      col1Img1: "https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055344_5eff02e0-87a5-41ce-b64f-eb08da8f33db.png&w=1280&q=85",
      col1Img2: "https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055431_11d841fd-8b41-46a5-82e4-b04f2407a7d8.png&w=1280&q=85",
      col2Img: "https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055451_e317bf2d-28d4-48cc-86b0-6f72f25b6327.png&w=1280&q=85",
      isPersonal: false,
    },
    {
      title: "Aura Brand Identity",
      category: "Personal",
      client: "Aura Brand Identity",
      col1Img1: "https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055654_911201c5-36d9-4bc6-bac7-331adfce159f.png&w=1280&q=85",
      col1Img2: "https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055723_5ceda0b8-d9c2-4665-b2e3-83ba19ba76d1.png&w=1280&q=85",
      col2Img: "https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055753_adc5dcbd-a8e6-49c0-b43a-9b030d835cea.png&w=1280&q=85",
      isPersonal: true,
    },
    {
      title: "Solaris Digital",
      category: "Client",
      client: "Solaris Digital",
      col1Img1: "https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055759_963cfb0b-4bd1-4b0f-9d0a-09bd6cf95b2f.png&w=1280&q=85",
      col1Img2: "https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_060108_438f781a-9846-4dcc-89ab-c4e6cb830f5b.png&w=1280&q=85",
      col2Img: "https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055818_9d062121-ad7e-46b9-999a-1a6a692ef1ee.png&w=1280&q=85",
      isPersonal: false,
    },
  ];

  return (
    <section id="projects" className="main-wrapper relative z-10">
      {/* Sticky Container for Stacking Effect */}
      <div className="sticky top-0 h-[85vh] flex items-center justify-center pt-24 md:pt-32">
        <div className="w-full max-w-7xl">
          {projects.map((project, index) => (
            <ProjectCard
              key={index}
              index={index}
              title={project.title}
              category={project.category}
              client={project.client}
              col1Img1={project.col1Img1}
              col1Img2={project.col1Img2}
              col2Img={project.col2Img}
              isPersonal={project.isPersonal}
            />
          ))}
        </div>
      </div>
    </section>
  );
};