"use client";

import { motion } from "framer-motion";
import {
  MapTrifold,
  Ruler,
  FileText,
  Wrench,
  ChartLineUp,
} from "@phosphor-icons/react";
import {
  AnimatedSection,
  AnimatedItem,
} from "@/components/ui/AnimatedSection";
import EyebrowBadge from "@/components/ui/EyebrowBadge";
import ParallaxImage from "@/components/ui/ParallaxImage";

const STEPS = [
  {
    n: "01",
    day: "Day 1",
    icon: MapTrifold,
    title: "Remote roof study",
    body: "We pull satellite imagery and a decade of local irradiance data, then model shading hour by hour across the year. No one visits yet.",
  },
  {
    n: "02",
    day: "Day 3–5",
    icon: Ruler,
    title: "On-roof survey",
    body: "A structural engineer checks rafter spacing, membrane condition and load path, and confirms the array layout against the model.",
  },
  {
    n: "03",
    day: "Week 2",
    icon: FileText,
    title: "Permits & interconnection",
    body: "We file the building permit, utility interconnection agreement and every incentive claim. You sign twice; we handle the rest.",
  },
  {
    n: "04",
    day: "Week 5",
    icon: Wrench,
    title: "Installation",
    body: "One to two days on site. Flashed mounts, sealed penetrations, conduit run inside where we can. Your power stays on throughout.",
  },
  {
    n: "05",
    day: "Ongoing",
    icon: ChartLineUp,
    title: "Commission & monitor",
    body: "Panel-level monitoring goes live the day we energise. If a single module underperforms for a week, we see it before you do.",
  },
];

export default function Process() {
  return (
    <section
      id="process"
      data-nav-dark
      className="relative z-10 overflow-hidden bg-zinc-950 px-6 py-24 md:px-8 md:py-32"
    >
      {/* Full-bleed aerial solar farm background */}
      <ParallaxImage
        src="/images/process/bg.jpg"
        alt=""
        strength={0.08}
        className="z-0"
      />

      {/* The image arrived without a scrim, which is what stripped the white
          type of its backing. This section's cards are glass-on-dark, so the
          overlay restores the dark ground they and the copy were built for
          while the photograph still reads through it. */}
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-0 z-0 bg-gradient-to-b from-zinc-950/88 via-zinc-950/70 to-zinc-950/88"
      />

      {/* Ambient warmth so the dark band still reads as part of the palette */}
      <div
        className="pointer-events-none absolute top-0 left-1/2 h-[500px] w-[900px] -translate-x-1/2 opacity-40 blur-3xl"
        style={{
          background:
            "radial-gradient(ellipse, rgba(245,158,11,0.35), transparent 70%)",
        }}
      />

      <AnimatedSection className="relative mx-auto max-w-[1400px]">
        <AnimatedItem className="mb-16 flex flex-col items-center text-center">
          <EyebrowBadge tone="dark" className="mb-6">
            How it works
          </EyebrowBadge>
          <h2 className="max-w-[20ch] text-3xl font-bold tracking-tighter text-white md:text-5xl">
            Five weeks from first call to first kilowatt.
          </h2>
          <p className="mt-5 max-w-[55ch] text-base leading-relaxed text-zinc-300 md:text-lg">
            The same sequence on every job, with a named project manager who
            stays with you from survey through commissioning.
          </p>
        </AnimatedItem>

        {/* Connector rail — draws itself in as the section enters view */}
        <div className="relative">
          <svg
            className="pointer-events-none absolute top-[68px] right-0 left-0 hidden lg:block"
            height="2"
            aria-hidden="true"
          >
            <motion.line
              x1="10%"
              y1="1"
              x2="90%"
              y2="1"
              stroke="url(#railGradient)"
              strokeWidth="2"
              strokeDasharray="6 6"
              initial={{ pathLength: 0, opacity: 0 }}
              whileInView={{ pathLength: 1, opacity: 1 }}
              viewport={{ once: true, margin: "-100px" }}
              transition={{ duration: 1.4, ease: "easeOut" }}
            />
            <defs>
              <linearGradient id="railGradient" x1="0" x2="1">
                <stop offset="0%" stopColor="rgba(245,158,11,0)" />
                <stop offset="20%" stopColor="rgba(245,158,11,0.7)" />
                <stop offset="80%" stopColor="rgba(234,88,12,0.7)" />
                <stop offset="100%" stopColor="rgba(234,88,12,0)" />
              </linearGradient>
            </defs>
          </svg>

          <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-5">
            {STEPS.map((step) => {
              const Icon = step.icon;
              return (
                <AnimatedItem
                  key={step.n}
                  className="group relative rounded-[20px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-xl transition-colors duration-500 hover:border-white/20 hover:bg-white/[0.07]"
                >
                  <div className="relative mb-5 flex h-12 w-12 items-center justify-center rounded-2xl bg-gradient-to-br from-amber-500 to-orange-600 shadow-[0_8px_24px_-8px_rgba(234,88,12,0.8)]">
                    <Icon size={22} weight="duotone" color="#ffffff" />
                  </div>
                  <div className="mb-2 flex items-center gap-2">
                    <span className="font-mono text-xs font-semibold text-amber-400">
                      {step.n}
                    </span>
                    <span className="rounded-full border border-white/10 px-2 py-0.5 text-[10px] tracking-wider text-zinc-400 uppercase">
                      {step.day}
                    </span>
                  </div>
                  <h3 className="text-lg font-semibold tracking-tight text-white">
                    {step.title}
                  </h3>
                  <p className="mt-2 text-sm leading-relaxed text-zinc-400">
                    {step.body}
                  </p>
                </AnimatedItem>
              );
            })}
          </div>
        </div>

        <AnimatedItem className="mt-12 flex flex-wrap items-center justify-center gap-x-10 gap-y-4 text-sm text-zinc-500">
          {[
            "NABCEP-certified installers",
            "Fully insured, ₹5 crore liability",
            "No subcontracted crews",
            "Roof penetrations warranted 25 years",
          ].map((t) => (
            <span key={t} className="flex items-center gap-2">
              <span className="h-1 w-1 rounded-full bg-amber-500" />
              {t}
            </span>
          ))}
        </AnimatedItem>
      </AnimatedSection>
    </section>
  );
}