"use client";

import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { CheckCircle2, Clock, Layers, ArrowRight } from "lucide-react";
import { SectionHeading } from "./section-heading";
import { PROCESS } from "./site-data";

const STEP_DETAILS = [
  {
    duration: "1 – 2 Weeks",
    milestone: "Site Topography & Client Consultation",
    deliverables: ["Initial Site Reconnaissance", "Constraint Assessment", "Consultation Brief"],
  },
  {
    duration: "2 – 4 Weeks",
    milestone: "Engineering Design & Feasibility DPR",
    deliverables: ["CAD Blueprint Drawings", "Cost Estimation (BOQ)", "Structural Analysis"],
  },
  {
    duration: "2 – 3 Weeks",
    milestone: "Regulatory & Statutory Clearance",
    deliverables: ["EIA / IEE Environmental Reports", "Municipal Approvals", "Contract Agreement"],
  },
  {
    duration: "6 – 24 Months",
    milestone: "Mobilization & Turnkey Construction",
    deliverables: ["Heavy Machinery Mobilization", "RCC Superstructure Works", "QA/QC Material Testing"],
  },
  {
    duration: "1 – 2 Weeks",
    milestone: "Commissioning & Final Handover",
    deliverables: ["Final Inspection Report", "As-Built Drawings", "Warranty & Maintenance Support"],
  },
];

export function Process() {
  const [activeStep, setActiveStep] = useState(0);

  const currentStep = PROCESS[activeStep];
  const currentDetail = STEP_DETAILS[activeStep];

  return (
    <section id="process" className="section-pad bg-background">
      <div className="mx-auto max-w-7xl px-4 md:px-6">
        <SectionHeading
          eyebrow="How We Work"
          title="A clear path from concept to handover"
          description="Our proven five-step process keeps every project transparent, accountable and on track — so you always know what's happening and what comes next."
        />

        {/* Stepper Navigation */}
        <div className="mt-14 relative">
          <div className="hidden lg:block absolute top-[28px] left-[5%] right-[5%] h-0.5 bg-border -z-0" />
          
          <div className="grid grid-cols-2 gap-4 lg:grid-cols-5 relative z-10">
            {PROCESS.map((p, i) => {
              const active = activeStep === i;
              return (
                <button
                  key={p.step}
                  onClick={() => setActiveStep(i)}
                  className={`group flex flex-col items-center text-center p-4 rounded-xl border transition-all duration-300 ${
                    active
                      ? "border-primary bg-primary/10 shadow-lg shadow-primary/10"
                      : "border-border bg-card hover:border-primary/40 hover:bg-muted/40"
                  }`}
                >
                  <span
                    className={`flex h-14 w-14 items-center justify-center rounded-full text-base font-extrabold transition-transform group-hover:scale-105 ${
                      active
                        ? "bg-primary text-primary-foreground shadow-md shadow-primary/25"
                        : "bg-muted text-muted-foreground"
                    }`}
                  >
                    {p.step}
                  </span>
                  <h4 className={`mt-3 text-xs font-bold ${active ? "text-primary font-extrabold" : "text-foreground"}`}>
                    {p.title}
                  </h4>
                  <span className="mt-1 text-[10px] text-muted-foreground flex items-center gap-1">
                    <Clock className="h-3 w-3 text-primary" />
                    {STEP_DETAILS[i].duration}
                  </span>
                </button>
              );
            })}
          </div>
        </div>

        {/* Interactive Active Step Detail Card */}
        <div className="mt-10 overflow-hidden rounded-2xl border border-border bg-card p-6 sm:p-8 shadow-xl">
          <AnimatePresence mode="wait">
            <motion.div
              key={activeStep}
              initial={{ opacity: 0, y: 12 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -12 }}
              transition={{ duration: 0.25 }}
              className="grid gap-8 lg:grid-cols-12 items-center"
            >
              <div className="lg:col-span-7 space-y-4">
                <div className="inline-flex items-center gap-2 rounded-md bg-amber-400/15 px-3 py-1 text-xs font-bold text-amber-500">
                  <span>Phase {currentStep.step}</span>
                  <span>·</span>
                  <span>{currentDetail.duration} Estimated</span>
                </div>

                <h3 className="text-2xl font-extrabold text-foreground sm:text-3xl">
                  {currentStep.title}
                </h3>

                <p className="text-sm leading-relaxed text-muted-foreground sm:text-base">
                  {currentStep.description}
                </p>

                <div className="pt-2">
                  <h4 className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-2.5">
                    Phase Key Milestones & Objectives
                  </h4>
                  <div className="flex items-center gap-2 rounded-lg bg-muted/60 p-3 text-xs font-semibold text-foreground">
                    <Layers className="h-4 w-4 text-primary shrink-0" />
                    {currentDetail.milestone}
                  </div>
                </div>
              </div>

              <div className="lg:col-span-5 rounded-xl border border-border bg-muted/40 p-6 space-y-4">
                <h4 className="text-xs font-bold uppercase tracking-wider text-primary flex items-center justify-between">
                  <span>Deliverables Handed Over</span>
                  <CheckCircle2 className="h-4 w-4 text-primary" />
                </h4>

                <ul className="space-y-2.5">
                  {currentDetail.deliverables.map((item) => (
                    <li key={item} className="flex items-start gap-2 text-xs font-medium text-foreground">
                      <span className="h-1.5 w-1.5 rounded-full bg-primary mt-1.5 shrink-0" />
                      <span>{item}</span>
                    </li>
                  ))}
                </ul>

                <div className="pt-4 border-t border-border flex items-center justify-between">
                  <button
                    onClick={() => setActiveStep((prev) => (prev + 1) % PROCESS.length)}
                    className="text-xs font-bold text-primary hover:underline flex items-center gap-1"
                  >
                    Next Phase ({PROCESS[(activeStep + 1) % PROCESS.length].title})
                    <ArrowRight className="h-3.5 w-3.5" />
                  </button>
                </div>
              </div>
            </motion.div>
          </AnimatePresence>
        </div>
      </div>
    </section>
  );
}