"use client";

import * as React from "react";
import { motion } from "framer-motion";
import { Search, Stethoscope, PencilRuler, Rocket, Repeat } from "lucide-react";
import { SectionHeading, Reveal } from "@/components/ui-stratops/reveal";
import { LoopingVideoBackground } from "@/components/ui-stratops/looping-video-background";

const phases = [
  {
    icon: Search,
    n: "01",
    title: "Discover",
    duration: "Week 1",
    description:
      "We sit with your leadership, read the documents, and walk the floor. The goal is a shared, honest picture of where you are — and where the real leverage sits.",
    outputs: ["Situation diagnostic", "Stakeholder map", "Hypothesis backlog"],
  },
  {
    icon: Stethoscope,
    n: "02",
    title: "Diagnose",
    duration: "Weeks 2–3",
    description:
      "We pressure-test the hypothesis with data — operational, financial, customer. We separate symptoms from causes and rank the opportunities by impact and effort.",
    outputs: ["Root-cause analysis", "Opportunity heat-map", "Investment case"],
  },
  {
    icon: PencilRuler,
    n: "03",
    title: "Design",
    duration: "Weeks 3–5",
    description:
      "We design the target state and the path to it — strategy, operating model, process, governance — co-created with the people who will run it after we leave.",
    outputs: [
      "Target operating model",
      "Roadmap with milestones",
      "Governance & decision rights",
    ],
  },
  {
    icon: Rocket,
    n: "04",
    title: "Deliver",
    duration: "Weeks 5+",
    description:
      "We lead delivery hands-on. Founders in the room. PMO discipline. RAID managed. Benefits tracked. Outcome-priced wherever the work allows it.",
    outputs: ["Milestone tracker", "Benefit dashboard", "Board reporting"],
  },
  {
    icon: Repeat,
    n: "05",
    title: "Adopt",
    duration: "Ongoing",
    description:
      "Adoption is not a phase at the end — it's designed in. We build capability in your team so the change sticks and the new way runs without us.",
    outputs: ["Capability curriculum", "Adoption scorecard", "Handover plan"],
  },
];

export function ApproachSection() {
  return (
    <section
      id="approach"
      className="relative border-t border-border/60 overflow-hidden py-20 sm:py-28 lg:py-32"
    >
      {/* Boardroom consulting video backdrop */}
      <LoopingVideoBackground
        src="/video/boardroom.mp4"
        poster="/markets/boardroom.png"
        alt="StratOps consultants presenting strategy to a client in a Johannesburg boardroom"
        className="-z-10"
        overlayStyle={{
          background:
            "linear-gradient(180deg, oklch(0.10 0.05 258 / 0.93) 0%, oklch(0.12 0.05 258 / 0.88) 50%, oklch(0.10 0.05 258 / 0.96) 100%)",
        }}
      />

      <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <SectionHeading
          eyebrow="How we work"
          title={
            <>
              Five phases.{" "}
              <span className="text-brand italic">One arc.</span>
            </>
          }
          description="Every engagement follows the same disciplined arc — calibrated to your context, your pace and your appetite for change. Not a template; a discipline."
          className="mb-14"
        />

        <div className="relative grid gap-3 lg:grid-cols-5">
          {/* Connector line (desktop) */}
          <div
            className="pointer-events-none absolute left-0 right-0 top-[3.5rem] hidden h-px lg:block"
            style={{
              background:
                "linear-gradient(90deg, transparent, var(--brand) 20%, var(--brand) 80%, transparent)",
              opacity: 0.4,
            }}
          />

          {phases.map((p, i) => {
            const Icon = p.icon;
            return (
              <Reveal key={p.n} delay={i * 0.08} as="div">
                <article className="group relative h-full rounded-2xl border border-border/60 bg-card p-5 transition-all duration-300 hover:border-brand/40 hover:bg-card/80">
                  <div className="flex items-center justify-between">
                    <span className="relative z-10 flex h-10 w-10 items-center justify-center rounded-xl bg-brand/15 text-brand ring-4 ring-card">
                      <Icon className="h-4.5 w-4.5" strokeWidth={1.6} />
                    </span>
                    <span className="font-mono-num text-[10px] uppercase tracking-[0.2em] text-muted-foreground">
                      {p.duration}
                    </span>
                  </div>
                  <div className="mt-4 flex items-baseline gap-2">
                    <span className="font-mono-num text-sm text-iris-deep">
                      {p.n}
                    </span>
                    <h3 className="font-display text-xl font-semibold text-foreground">
                      {p.title}
                    </h3>
                  </div>
                  <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
                    {p.description}
                  </p>
                  <ul className="mt-4 flex flex-col gap-1.5 border-t border-border/60 pt-3">
                    {p.outputs.map((o) => (
                      <li
                        key={o}
                        className="flex items-start gap-2 text-[11px] text-muted-foreground"
                      >
                        <span className="mt-1 h-0.5 w-1.5 flex-shrink-0 bg-brand" />
                        {o}
                      </li>
                    ))}
                  </ul>
                </article>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}