"use client";

import { useEffect, useRef, useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { motion, AnimatePresence, useScroll, useMotionValueEvent } from "framer-motion";
import { ArrowRight, Compass, Code, DollarSign } from "@/components/ui/icons";
import AnimatedButton from "@/components/ui/AnimatedButton";
import { useContactModal } from "@/components/providers/ContactModal";
import { Aurora, DotWave, Counter } from "../services/fx";

/**
 * About page — a credibility-building experience: immersive hero → metrics →
 * journey timeline → differentiators → build process → technologies → featured
 * case studies → client trust → leadership → awards → CTA. Brand-strict: dark
 * tokens, Google Sans, orange/gold, animated counters + scroll reveals.
 *
 * Props: projects (rich entries from src/data/projects.js).
 */
const EASE = [0.21, 0.47, 0.32, 0.98];
const container = { hidden: {}, show: { transition: { staggerChildren: 0.08 } } };
const heroContainer = { hidden: {}, show: { transition: { staggerChildren: 0.12 } } };
const word = {
  hidden: { yPercent: 120 },
  show: { yPercent: 0, transition: { duration: 0.7, ease: EASE } },
};
const rise = {
  hidden: { opacity: 0, y: 28 },
  show: { opacity: 1, y: 0, transition: { duration: 0.6, ease: EASE } },
};

const HERO_LEAD = ["Engineering", "digital", "products", "that"];

const METRICS = [
  { value: 150, suffix: "+", label: "Projects delivered" },
  { value: 40, suffix: "+", label: "Team members" },
  { value: 12, suffix: "+", label: "Countries served" },
  { value: 98, suffix: "%", label: "Client retention" },
];

const JOURNEY = [
  {
    year: "2018",
    title: "Where it began",
    desc: "Cerkel started as five senior engineers in a single room, tired of agencies that shipped slides instead of software. The promise was simple: build real products, own the outcome.",
    stat: "5",
    statLabel: "founding engineers",
    image: "/images/opt/Pillar1.webp",
  },
  {
    year: "2020",
    title: "Proving the model",
    desc: "Fifty products into the journey, our outcome-first approach was working. Startups we built for raised follow-on rounds and enterprises came back for their next launch.",
    stat: "50+",
    statLabel: "products shipped",
    image: "/images/opt/HeroBanner1.webp",
  },
  {
    year: "2022",
    title: "Going global",
    desc: "We opened distributed delivery pods and began serving clients across three continents — same senior bar, now in more time zones and more markets.",
    stat: "3",
    statLabel: "continents served",
    image: "/images/opt/HeroBanner2.webp",
  },
  {
    year: "2024",
    title: "A trusted partner",
    desc: "From seed-stage founders to listed enterprises, a hundred-plus teams now trust Cerkel end to end — from first prototype to production at scale.",
    stat: "100+",
    statLabel: "clients served",
    image: "/images/opt/Pillar2.webp",
  },
  {
    year: "2026",
    title: "The AI era",
    desc: "Generative AI and enterprise platforms are now at the core of what we build — and a 98% retention rate says our clients are growing right alongside us.",
    stat: "98%",
    statLabel: "client retention",
    image: "/images/opt/HeroBanner3.png",
  },
];

const DIFFERENTIATORS = [
  {
    icon: Compass,
    kicker: "We think before we build",
    title: "Product thinking",
    desc: "We decide what to build and why — discovery, validation and roadmaps before a line of code. You get a product, not just a deliverable.",
    image: "/images/opt/Pillar1.webp",
    note: "Discovery & strategy · User research · Outcome-driven roadmaps",
  },
  {
    icon: Code,
    kicker: "Built to last and scale",
    title: "Engineering excellence",
    desc: "Senior engineers, clean architecture and automated testing. Code that ships fast and keeps growing with you — no shortcuts, no tech debt.",
    image: "/images/opt/Pillar2.webp",
    note: "Senior-only teams · Scalable architecture · Automated testing & CI/CD",
  },
  {
    icon: DollarSign,
    kicker: "Measured in outcomes",
    title: "Business impact",
    desc: "We measure success in outcomes — activation, retention, revenue — not features. Analytics and growth are built in from day one.",
    image: "/images/opt/HeroBanner3.png",
    note: "Analytics from day one · Growth & retention focus · Measured on your KPIs",
  },
];

const PROCESS = [
  {
    title: "Discover & define",
    desc: "We map your goals, users and constraints — turning a brief into a validated product direction with a clear scope and roadmap.",
    image: "/images/opt/Pillar1.webp",
    deliverables: ["Product strategy", "Scope & roadmap"],
  },
  {
    title: "Design the experience",
    desc: "Information architecture, user flows and high-fidelity UI — tested with real users before a single line of production code.",
    image: "/images/opt/Pillar3.webp",
    deliverables: ["UX flows", "Hi-fi UI & prototype"],
  },
  {
    title: "Engineer & integrate",
    desc: "Senior engineers build in tested increments with clean architecture, CI/CD and weekly demos so you always see progress.",
    image: "/images/opt/Pillar4.webp",
    deliverables: ["Production code", "CI/CD & QA"],
  },
  {
    title: "Launch & scale",
    desc: "We ship to production, monitor and iterate — optimizing performance, reliability and growth as your user base expands.",
    image: "/images/opt/HeroBanner3.png",
    deliverables: ["Go-live & monitoring", "Growth & optimization"],
  },
];

const TECH = ["React", "Next.js", "Node.js", "Python", "Go", "AWS", "Docker", "Kubernetes", "OpenAI", "TensorFlow", "PostgreSQL", "MongoDB"];

const TRUST = [
  { value: 50, suffix: "M+", label: "Users impacted" },
  { value: 100, prefix: "$", suffix: "M+", label: "Revenue influenced" },
  { value: 150, suffix: "+", label: "Projects delivered" },
];

const LEADERS = [
  { name: "Aarav Mehta", role: "Founder & CEO", image: "/images/opt/Pillar2.webp" },
  { name: "Marcus Hale", role: "Chief Technology Officer", image: "/images/opt/HeroBanner2.webp" },
  { name: "Priya Sharma", role: "Head of Product", image: "/images/opt/HeroBanner1.webp" },
  { name: "Sara Whitman", role: "Design Director", image: "/images/opt/Pillar1.webp" },
];

const AWARDS = ["Top Dev Company 2025", "Clutch Top B2B", "AWS Partner", "Google Cloud Partner", "ISO 27001", "Great Place to Work"];

function Label({ children }) {
  return <span className="font-heading text-sm font-semibold uppercase tracking-wider text-primary">{children}</span>;
}

/**
 * Journey — scroll-driven "story rail". The section pins to the viewport and
 * the milestone (big year + framed image + content) advances as the user
 * scrolls through it. The year rail also lets you jump straight to a year.
 */
function JourneyTimeline() {
  const wrapperRef = useRef(null);
  const prevRef = useRef(0);
  const [active, setActive] = useState(0);
  const [dir, setDir] = useState(1);
  const last = JOURNEY.length - 1;

  const { scrollYProgress } = useScroll({ target: wrapperRef, offset: ["start start", "end end"] });
  useMotionValueEvent(scrollYProgress, "change", (v) => {
    const idx = Math.max(0, Math.min(last, Math.floor(v * JOURNEY.length)));
    if (idx !== prevRef.current) {
      setDir(idx > prevRef.current ? 1 : -1);
      prevRef.current = idx;
      setActive(idx);
    }
  });

  // Jump to a milestone by scrolling the window to its segment.
  const go = (i) => {
    const el = wrapperRef.current;
    if (!el) return;
    const clamped = Math.max(0, Math.min(last, i));
    const top = el.getBoundingClientRect().top + window.scrollY;
    const scrollable = el.offsetHeight - window.innerHeight;
    const target = top + ((clamped + 0.5) / JOURNEY.length) * scrollable;
    if (typeof window !== "undefined" && window.lenis) window.lenis.scrollTo(target);
    else window.scrollTo({ top: target, behavior: "smooth" });
  };

  const current = JOURNEY[active];
  const slide = {
    enter: (d) => ({ opacity: 0, y: d * 24 }),
    center: { opacity: 1, y: 0, transition: { duration: 0.5, ease: EASE } },
    exit: (d) => ({ opacity: 0, y: d * -24, transition: { duration: 0.3, ease: EASE } }),
  };

  return (
    <div ref={wrapperRef} style={{ height: `${JOURNEY.length * 90}vh` }} className="relative bg-background text-foreground">
      <div className="sticky top-0 flex h-svh flex-col justify-center overflow-hidden">
        <div className="pointer-events-none absolute right-[-6rem] top-1/4 h-80 w-[36rem] rounded-full bg-primary/[0.07] blur-[150px]" />
        <div className="container flex flex-col">
          {/* Heading + counter */}
          <div className="flex items-end justify-between gap-4">
            <div>
              <Label>Our journey</Label>
              <h2 className="mt-3 font-heading text-3xl font-bold tracking-tight sm:text-4xl">The Cerkel story.</h2>
            </div>
            <div className="hidden font-heading text-sm font-semibold text-muted-foreground sm:block">
              <span className="text-2xl font-bold text-primary">{String(active + 1).padStart(2, "0")}</span>
              <span className="mx-1">/</span>
              {String(JOURNEY.length).padStart(2, "0")}
            </div>
          </div>

          {/* Editorial panel */}
          <div className="mt-8 grid items-center gap-8 md:grid-cols-[minmax(0,28rem)_1fr] md:gap-12 lg:gap-16">
            {/* Content */}
            <div className="relative order-2 min-h-[16rem] md:order-1">
              <AnimatePresence mode="wait" custom={dir}>
                <motion.div key={current.year} custom={dir} variants={slide} initial="enter" animate="center" exit="exit">
                  <span className="block font-heading text-[clamp(3.5rem,9vw,7rem)] font-bold leading-none">
                    <span className="bg-gradient-to-br from-primary to-accent bg-clip-text text-transparent">{current.year}</span>
                  </span>
                  <h3 className="mt-5 font-heading text-2xl font-semibold sm:text-3xl">{current.title}</h3>
                  <p className="mt-4 max-w-md text-base leading-relaxed text-muted-foreground">{current.desc}</p>
                  <div className="mt-6 inline-flex items-baseline gap-2 rounded-full border border-border bg-surface/60 px-4 py-2 backdrop-blur">
                    <span className="font-heading text-xl font-bold text-primary">{current.stat}</span>
                    <span className="text-xs uppercase tracking-wide text-muted-foreground">{current.statLabel}</span>
                  </div>
                </motion.div>
              </AnimatePresence>
            </div>

            {/* Image */}
            <div className="relative order-1 md:order-2">
              {/* Ghost year behind */}
              <span aria-hidden className="pointer-events-none absolute -top-10 right-2 z-0 select-none font-heading text-[8rem] font-bold leading-none text-foreground/[0.04] sm:text-[11rem]">
                {current.year}
              </span>
              <div className="relative z-10 h-[clamp(16rem,44vh,30rem)] overflow-hidden rounded-3xl border border-border shadow-2xl shadow-black/40">
                <AnimatePresence mode="wait" custom={dir}>
                  <motion.div
                    key={current.year}
                    initial={{ opacity: 0, scale: 1.06 }}
                    animate={{ opacity: 1, scale: 1, transition: { duration: 0.55, ease: EASE } }}
                    exit={{ opacity: 0, transition: { duration: 0.3 } }}
                    className="absolute inset-0"
                  >
                    <Image src={current.image} alt={current.title} fill sizes="(min-width:768px) 45vw, 100vw" className="object-cover" />
                    <span className="absolute inset-0 bg-gradient-to-t from-background/55 via-transparent to-transparent" />
                  </motion.div>
                </AnimatePresence>
              </div>
              {/* Floating stat card */}
              <AnimatePresence mode="wait">
                <motion.div
                  key={current.year}
                  initial={{ opacity: 0, y: 14 }}
                  animate={{ opacity: 1, y: 0, transition: { duration: 0.4, ease: EASE, delay: 0.1 } }}
                  exit={{ opacity: 0, transition: { duration: 0.2 } }}
                  className="absolute -bottom-5 left-5 z-20 flex items-center gap-3 rounded-2xl border border-border bg-surface/90 px-5 py-3.5 shadow-xl shadow-black/40 backdrop-blur-xl"
                >
                  <span className="font-heading text-2xl font-bold text-primary">{current.stat}</span>
                  <span className="max-w-[7rem] text-[11px] uppercase leading-tight tracking-wide text-muted-foreground">{current.statLabel}</span>
                </motion.div>
              </AnimatePresence>
            </div>
          </div>

          {/* Year rail */}
          <div className="mt-12 flex items-center gap-4 sm:gap-6">
            <button
              onClick={() => go(active - 1)}
              disabled={active === 0}
              aria-label="Previous milestone"
              className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full border border-border text-foreground transition-all duration-300 hover:border-primary/50 hover:text-primary disabled:cursor-not-allowed disabled:opacity-30"
            >
              <ArrowRight className="h-4 w-4 rotate-180" />
            </button>

            <div className="relative flex-1">
              <div className="absolute inset-x-0 top-[7px] h-px bg-border" />
              <div className="absolute left-0 top-[7px] h-px bg-gradient-to-r from-primary to-accent transition-[width] duration-500 ease-out" style={{ width: `${(active / last) * 100}%` }} />
              <div className="relative flex justify-between">
                {JOURNEY.map((j, i) => {
                  const isActive = i === active;
                  const done = i < active;
                  return (
                    <button key={j.year} onClick={() => go(i)} className="group flex flex-col items-center" aria-label={`Go to ${j.year}`}>
                      <span className="flex h-4 items-center">
                        <span className={"rounded-full transition-all duration-300 " + (isActive ? "h-3.5 w-3.5 bg-gradient-to-br from-primary to-accent shadow-[0_0_14px_rgb(var(--primary)/0.7)]" : done ? "h-2.5 w-2.5 bg-primary/70" : "h-2 w-2 bg-muted group-hover:bg-primary/60")} />
                      </span>
                      <span className={"mt-3 font-heading text-sm font-bold transition-all duration-300 sm:text-base " + (isActive ? "scale-110 text-primary" : "text-muted-foreground group-hover:text-foreground")}>{j.year}</span>
                    </button>
                  );
                })}
              </div>
            </div>

            <button
              onClick={() => go(active + 1)}
              disabled={active === last}
              aria-label="Next milestone"
              className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full border border-border text-foreground transition-all duration-300 hover:border-primary/50 hover:text-primary disabled:cursor-not-allowed disabled:opacity-30"
            >
              <ArrowRight className="h-4 w-4" />
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

/**
 * Featured work — expanding image columns (the home page Projects design).
 * The active project unfolds wide to reveal its story while the rest compress
 * into slim slivers with vertical titles. Hover/click/focus selects;
 * auto-rotates (paused on interaction). Mobile gets fully-visible cards.
 */
function FeaturedWork({ projects }) {
  const [active, setActive] = useState(0);
  const [paused, setPaused] = useState(false);

  useEffect(() => {
    if (paused) return;
    const id = setTimeout(() => setActive((a) => (a + 1) % projects.length), 5000);
    return () => clearTimeout(id);
  }, [active, paused, projects.length]);

  return (
    <section className="relative overflow-hidden bg-background py-16 text-foreground md:py-24">
      <div className="pointer-events-none absolute -right-40 top-1/4 h-[28rem] w-[28rem] rounded-full bg-primary/10 blur-[150px]" />

      <div className="container relative">
        {/* Header */}
        <motion.div variants={rise} initial="hidden" whileInView="show" viewport={{ once: true, amount: 0.5 }} className="flex flex-col items-center text-center">
          <Label>Featured work</Label>
          <h2 className="mt-3 font-heading text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">Case studies, not claims.</h2>
        </motion.div>

        {/* Expanding image columns (desktop) */}
        <motion.div
          variants={rise}
          initial="hidden"
          whileInView="show"
          viewport={{ once: true, amount: 0.2 }}
          onMouseEnter={() => setPaused(true)}
          onMouseLeave={() => setPaused(false)}
          className="mt-14 hidden h-[32rem] gap-3 lg:flex"
        >
          {projects.map((p, i) => {
            const isActive = i === active;
            return (
              <div
                key={p.slug}
                onMouseEnter={() => setActive(i)}
                onFocus={() => setActive(i)}
                onClick={() => setActive(i)}
                tabIndex={0}
                role="button"
                aria-expanded={isActive}
                style={{ flexGrow: isActive ? 3.4 : 1, transition: "flex-grow 0.7s cubic-bezier(0.4, 0, 0.2, 1)" }}
                className={"group relative min-w-0 basis-0 cursor-pointer overflow-hidden rounded-3xl border outline-none " + (isActive ? "border-primary/50 shadow-2xl shadow-primary/10" : "border-border")}
              >
                {/* image */}
                <span
                  className={"absolute inset-0 bg-cover bg-center transition-transform duration-700 ease-out " + (isActive ? "scale-100" : "scale-110 group-hover:scale-105")}
                  style={{ backgroundImage: `url(${p.image})` }}
                />
                {/* washes */}
                <span className={"absolute inset-0 transition-opacity duration-500 " + (isActive ? "bg-gradient-to-t from-background/95 via-background/30 to-background/10" : "bg-background/55 group-hover:bg-background/40")} />

                {/* number — top left */}
                <span className={"absolute left-5 top-5 rounded-full border px-3 py-1 font-heading text-xs font-semibold backdrop-blur transition-colors duration-300 " + (isActive ? "border-primary/40 bg-background/70 text-primary" : "border-border bg-background/50 text-muted-foreground")}>
                  {String(i + 1).padStart(2, "0")}
                </span>

                {/* collapsed — vertical title */}
                <span
                  className={"absolute bottom-6 left-1/2 -translate-x-1/2 whitespace-nowrap font-heading text-lg font-semibold text-foreground transition-opacity duration-300 " + (isActive ? "opacity-0" : "opacity-100 delay-200")}
                  style={{ writingMode: "vertical-rl", transform: "rotate(180deg)" }}
                >
                  {p.title}
                </span>

                {/* expanded content — stays mounted (opacity only) */}
                <div className={"absolute inset-x-0 bottom-0 w-[30rem] max-w-full p-7 transition-opacity duration-300 " + (isActive ? "opacity-100 delay-300" : "pointer-events-none opacity-0")}>
                  <span className="inline-flex rounded-full border border-primary/40 bg-primary/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-wider text-primary">
                    {p.industry || p.category}
                  </span>
                  <h3 className="mt-3 font-heading text-2xl font-semibold leading-snug">{p.title}</h3>
                  <p className="mt-2.5 text-sm leading-relaxed text-foreground/85">{p.summary}</p>
                  {p.results?.[0] && (
                    <ul className="mt-4 flex flex-wrap gap-6">
                      {p.results.slice(0, 3).map((r) => (
                        <li key={r.label}>
                          <div className="font-heading text-lg font-bold text-primary">{r.prefix || ""}{r.value}{r.suffix || ""}</div>
                          <div className="text-[11px] text-muted-foreground">{r.label}</div>
                        </li>
                      ))}
                    </ul>
                  )}
                  <Link href={`/portfolio/${p.slug}`} className="group/link mt-5 inline-flex items-center gap-2 text-sm font-semibold text-primary">
                    <span className="relative">
                      View case study
                      <span className="absolute -bottom-0.5 left-0 h-px w-0 bg-primary transition-all duration-300 group-hover/link:w-full" />
                    </span>
                    <span className="flex h-8 w-8 items-center justify-center rounded-full border border-primary/40 transition-transform duration-300 group-hover/link:-rotate-45">
                      <ArrowRight className="h-3.5 w-3.5" />
                    </span>
                  </Link>
                </div>
              </div>
            );
          })}
        </motion.div>

        {/* Mobile — stacked cards, everything visible */}
        <motion.div variants={rise} initial="hidden" whileInView="show" viewport={{ once: true, amount: 0.1 }} className="mt-12 space-y-5 lg:hidden">
          {projects.map((p, i) => (
            <Link key={p.slug} href={`/portfolio/${p.slug}`} className="block overflow-hidden rounded-3xl border border-border bg-surface/70">
              <div className="relative h-44 overflow-hidden">
                <span className="absolute inset-0 bg-cover bg-center" style={{ backgroundImage: `url(${p.image})` }} />
                <span className="absolute inset-0 bg-gradient-to-t from-surface to-transparent" />
                <span className="absolute left-4 top-4 rounded-full border border-primary/40 bg-background/70 px-3 py-1 text-[11px] font-semibold uppercase tracking-wider text-primary">
                  {p.industry || p.category}
                </span>
              </div>
              <div className="p-6 pt-3">
                <h3 className="font-heading text-lg font-semibold">
                  <span className="mr-2 text-sm text-primary">{String(i + 1).padStart(2, "0")}</span>
                  {p.title}
                </h3>
                <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{p.summary}</p>
              </div>
            </Link>
          ))}
        </motion.div>

        {/* CTA */}
        <motion.div variants={rise} initial="hidden" whileInView="show" viewport={{ once: true }} className="mt-14 flex justify-center">
          <AnimatedButton href="/portfolio" size="sm">View all projects</AnimatedButton>
        </motion.div>
      </div>
    </section>
  );
}

export default function AboutView({ projects }) {
  const { open: openContact } = useContactModal();
  const cases = projects.slice(0, 4);

  // Scroll-linked progress for the differentiators timeline center line.
  const diffRef = useRef(null);
  const { scrollYProgress: diffProgress } = useScroll({ target: diffRef, offset: ["start 80%", "end 55%"] });

  return (
    <>
      {/* ── 1 · Hero (centered statement, matches Services hero) ───────── */}
      <section className="relative isolate overflow-hidden bg-background pb-12 pt-20 text-foreground md:pb-16 md:pt-28">
        {/* Background image + animated backdrop */}
        <Image src="/images/opt/HeroBanner2.webp" alt="" fill priority sizes="100vw" className="-z-20 object-cover opacity-45" />
        <span className="absolute inset-0 -z-10 bg-gradient-to-b from-background/40 via-background/70 to-background" />
        <Aurora className="opacity-50" />
        <DotWave />
        {/* soft top light beams */}
        <div className="pointer-events-none absolute -top-40 left-[28%] h-96 w-40 -rotate-[18deg] rounded-[50%] bg-foreground/[0.06] blur-3xl" />
        <div className="pointer-events-none absolute -top-40 right-[30%] h-96 w-32 rotate-[18deg] rounded-[50%] bg-foreground/[0.05] blur-3xl" />

        <div className="container relative">
          <motion.div variants={heroContainer} initial="hidden" animate="show" className="mx-auto max-w-3xl text-center">
            <motion.span variants={rise} className="inline-flex items-center gap-2 rounded-full border border-border bg-surface/60 px-4 py-1.5 text-xs font-semibold uppercase tracking-wider text-muted-foreground backdrop-blur">
              <span className="h-1.5 w-1.5 rounded-full bg-primary" /> About Cerkel
            </motion.span>

            <h1 className="mt-6 font-heading text-5xl font-bold leading-[1.05] tracking-tight sm:text-6xl md:text-7xl">
              {HERO_LEAD.map((w, i) => (
                <span key={i} className="inline-block overflow-hidden pb-[0.08em] align-bottom">
                  <motion.span variants={word} className="inline-block">{w}</motion.span>
                  <span>&nbsp;</span>
                </span>
              ))}
              <span className="inline-block overflow-hidden pb-[0.08em] align-bottom">
                <motion.span variants={word} className="animate-text-shimmer inline-block bg-gradient-to-r from-primary via-accent to-primary bg-[length:200%_auto] bg-clip-text text-transparent">
                  scale.
                </motion.span>
              </span>
            </h1>

            <motion.p variants={rise} className="mx-auto mt-6 max-w-2xl text-base leading-relaxed text-muted-foreground sm:text-lg">
              We partner with startups, enterprises and visionary founders to design,
              build and launch world-class digital experiences — one partner for every
              stage of your product.
            </motion.p>

            <motion.div variants={rise} className="mt-9 flex flex-wrap items-center justify-center gap-4">
              <AnimatedButton onClick={openContact}>Start your project</AnimatedButton>
              <Link
                href="/portfolio"
                className="group inline-flex items-center gap-3 rounded-full border border-border bg-surface/50 py-1.5 pl-5 pr-2 text-sm font-semibold text-foreground backdrop-blur transition-colors duration-300 hover:border-primary/50"
              >
                See our work
                <span className="flex h-9 w-9 items-center justify-center rounded-full bg-primary text-primary-foreground transition-transform duration-300 group-hover:translate-x-0.5">
                  <ArrowRight className="h-4 w-4" />
                </span>
              </Link>
            </motion.div>
          </motion.div>

          {/* Stats strip */}
          <motion.div
            variants={container}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true, amount: 0.4 }}
            className="mx-auto mt-16 grid max-w-5xl grid-cols-2 gap-px overflow-hidden rounded-2xl border border-border bg-border sm:grid-cols-4"
          >
            {METRICS.map((m) => (
              <motion.div key={m.label} variants={rise} className="bg-surface/60 px-6 py-7 text-center backdrop-blur">
                <div className="font-heading text-3xl font-bold text-primary sm:text-4xl"><Counter end={m.value} suffix={m.suffix} /></div>
                <div className="mt-1 text-xs uppercase tracking-wider text-muted-foreground">{m.label}</div>
              </motion.div>
            ))}
          </motion.div>
        </div>
      </section>

      {/* ── 2 · Journey ───────────────────────────────────────────────── */}
      <JourneyTimeline />

      {/* ── 4 · Differentiators ───────────────────────────────────────── */}
      <section className="relative overflow-hidden bg-background py-16 text-foreground md:py-24">
        <div className="pointer-events-none absolute left-1/2 top-0 h-72 w-[44rem] -translate-x-1/2 rounded-full bg-primary/[0.05] blur-[150px]" />
        <div className="container relative">
          <motion.div variants={rise} initial="hidden" whileInView="show" viewport={{ once: true, amount: 0.5 }} className="mx-auto max-w-2xl text-center">
            <Label>What makes us different</Label>
            <h2 className="mt-3 font-heading text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">More than an agency.</h2>
            <p className="mt-4 text-base leading-relaxed text-muted-foreground">Three principles that show up in every engagement — and in the products we ship.</p>
          </motion.div>
          <div ref={diffRef} className="relative mt-14 md:mt-20">
            {/* Continuous center line (desktop) + scroll-linked fill */}
            <div className="pointer-events-none absolute left-1/2 top-0 hidden h-full w-px -translate-x-1/2 overflow-hidden bg-gradient-to-b from-transparent via-border to-transparent lg:block">
              <motion.span style={{ scaleY: diffProgress }} className="absolute inset-0 origin-top bg-gradient-to-b from-primary to-accent" />
            </div>

            <div className="space-y-14 lg:space-y-0">
              {DIFFERENTIATORS.map((d, i) => {
                const isLeft = i % 2 === 0;
                const Icon = d.icon;
                return (
                  <motion.div
                    key={d.title}
                    variants={container}
                    initial="hidden"
                    whileInView="show"
                    viewport={{ once: true, amount: 0.3 }}
                    className="grid items-center gap-8 lg:grid-cols-[1fr_5rem_1fr] lg:gap-10 lg:py-12"
                  >
                    {/* Content */}
                    <motion.div variants={rise} className={"order-1 " + (isLeft ? "lg:order-1 lg:text-right" : "lg:order-3")}>
                      <div className={"flex items-center gap-3 " + (isLeft ? "lg:flex-row-reverse" : "")}>
                        <span className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl border border-primary/25 bg-primary/10 text-primary">
                          <Icon className="h-5 w-5" />
                        </span>
                        <span className="font-heading text-xs font-semibold uppercase tracking-[0.22em] text-primary">{d.kicker}</span>
                      </div>
                      <h3 className="mt-5 font-heading text-2xl font-semibold sm:text-3xl md:text-4xl">{d.title}</h3>
                      <span className={"mt-4 block h-px w-16 bg-gradient-to-r from-primary to-transparent " + (isLeft ? "lg:ml-auto lg:bg-gradient-to-l" : "")} />
                      <p className={"mt-5 text-base leading-relaxed text-muted-foreground " + (isLeft ? "lg:ml-auto lg:max-w-md" : "max-w-md")}>{d.desc}</p>
                      <p className={"mt-6 rounded-xl border border-border bg-surface/50 px-4 py-3 text-sm italic text-foreground/75 " + (isLeft ? "lg:ml-auto lg:max-w-md" : "max-w-md")}>
                        {d.note}
                      </p>
                    </motion.div>

                    {/* Center timeline node (desktop) */}
                    <div className="order-2 hidden flex-col items-center lg:order-2 lg:flex">
                      <span className="bg-background px-2 font-heading text-6xl font-bold leading-none text-primary/25">{String(i + 1).padStart(2, "0")}</span>
                      <span className="relative mt-5 flex h-5 w-5 items-center justify-center">
                        <span className="absolute h-5 w-5 animate-ping rounded-full bg-primary/30" />
                        <span className="h-3 w-3 rounded-full bg-gradient-to-br from-primary to-accent shadow-[0_0_14px_rgb(var(--primary)/0.7)]" />
                      </span>
                    </div>

                    {/* Image */}
                    <motion.div variants={rise} className={"relative order-2 " + (isLeft ? "lg:order-3" : "lg:order-1")}>
                      <span className={"pointer-events-none absolute -z-10 h-40 w-40 rounded-full bg-gradient-to-br from-primary/25 to-accent/15 blur-3xl " + (isLeft ? "-right-6 -top-6" : "-left-6 -top-6")} />
                      <div className="group relative aspect-[16/11] overflow-hidden rounded-2xl border border-border shadow-2xl shadow-black/40">
                        <Image src={d.image} alt={d.title} fill sizes="(min-width:1024px) 40vw, 100vw" className="object-cover transition-transform duration-700 group-hover:scale-105" />
                        <span className="absolute inset-0 bg-gradient-to-t from-background/50 via-transparent to-transparent" />
                      </div>
                      {/* corner accents */}
                      <span className="pointer-events-none absolute -left-1.5 -top-1.5 h-6 w-6 rounded-tl-lg border-l-2 border-t-2 border-primary/50" />
                      <span className="pointer-events-none absolute -bottom-1.5 -right-1.5 h-6 w-6 rounded-br-lg border-b-2 border-r-2 border-primary/50" />
                      {/* mobile number badge */}
                      <span className="absolute right-4 top-4 rounded-full border border-primary/40 bg-background/70 px-3 py-1 font-heading text-xs font-semibold text-primary backdrop-blur lg:hidden">
                        {String(i + 1).padStart(2, "0")}
                      </span>
                    </motion.div>
                  </motion.div>
                );
              })}
            </div>
          </div>
        </div>
      </section>

      {/* ── 5 · Build process ─────────────────────────────────────────── */}
      <section className="relative overflow-hidden bg-background py-16 text-foreground md:py-24">
        <div className="pointer-events-none absolute left-1/2 top-1/2 h-[22rem] w-[42rem] -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary/[0.06] blur-[150px]" />
        <div className="container relative">
          <motion.div variants={rise} initial="hidden" whileInView="show" viewport={{ once: true, amount: 0.5 }} className="mx-auto max-w-2xl text-center">
            <Label>How we build products</Label>
            <h2 className="mt-3 font-heading text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">A process built for momentum.</h2>
            <p className="mt-4 text-base leading-relaxed text-muted-foreground">Four phases, one continuous loop — every step de-risks the next and keeps you shipping.</p>
          </motion.div>

          <motion.div variants={container} initial="hidden" whileInView="show" viewport={{ once: true, amount: 0.1 }} className="relative mt-14 grid gap-6 sm:grid-cols-2 lg:grid-cols-4 lg:gap-5">
            {/* Connecting flow line across the top of the cards (desktop) */}
            <div className="pointer-events-none absolute left-[12.5%] right-[12.5%] top-[6.5rem] hidden h-px bg-gradient-to-r from-primary/40 via-primary/25 to-accent/40 lg:block" />

            {PROCESS.map((step, i) => (
              <motion.div key={step.title} variants={rise} className="group relative flex flex-col overflow-hidden rounded-2xl border border-border bg-surface/40 transition-all duration-300 hover:-translate-y-1 hover:border-primary/40">
                {/* Image header */}
                <div className="relative aspect-[16/10] overflow-hidden">
                  <Image src={step.image} alt={step.title} fill sizes="(min-width:1024px) 25vw, (min-width:640px) 50vw, 100vw" className="object-cover transition-transform duration-700 group-hover:scale-105" />
                  <span className="absolute inset-0 bg-gradient-to-t from-surface via-surface/40 to-transparent" />
                  {/* Step badge sits on the flow line */}
                  <span className="absolute -bottom-5 left-6 z-10 flex h-10 w-10 items-center justify-center rounded-xl border border-primary/40 bg-background font-heading text-sm font-bold text-primary shadow-[0_0_18px_-4px_rgb(var(--primary)/0.6)]">
                    {String(i + 1).padStart(2, "0")}
                  </span>
                </div>

                {/* Body */}
                <div className="flex flex-1 flex-col p-6 pt-8">
                  <h3 className="font-heading text-lg font-semibold">{step.title}</h3>
                  <p className="mt-2 flex-1 text-sm leading-relaxed text-muted-foreground">{step.desc}</p>
                  <ul className="mt-5 space-y-2 border-t border-border/60 pt-4">
                    {step.deliverables.map((d) => (
                      <li key={d} className="flex items-center gap-2 text-xs text-foreground/80">
                        <span className="h-1.5 w-1.5 rounded-full bg-primary" /> {d}
                      </li>
                    ))}
                  </ul>
                </div>
              </motion.div>
            ))}
          </motion.div>
        </div>
      </section>

      {/* ── 6 · Technologies ──────────────────────────────────────────── */}
      <section className="relative bg-background py-16 text-foreground md:py-24">
        <div className="container">
          <motion.div variants={rise} initial="hidden" whileInView="show" viewport={{ once: true, amount: 0.5 }} className="mx-auto max-w-2xl text-center">
            <Label>Technology excellence</Label>
            <h2 className="mt-3 font-heading text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">A modern, battle-tested stack.</h2>
          </motion.div>
          <motion.div variants={container} initial="hidden" whileInView="show" viewport={{ once: true, amount: 0.2 }} className="mt-12 flex flex-wrap justify-center gap-3">
            {TECH.map((t) => (
              <motion.span key={t} variants={rise} className="group inline-flex items-center gap-2 rounded-full border border-border bg-surface/60 px-5 py-2.5 text-sm font-medium text-foreground/80 transition-all duration-300 hover:-translate-y-0.5 hover:border-primary/40 hover:text-foreground">
                <span className="h-1.5 w-1.5 rounded-full bg-primary" />
                {t}
              </motion.span>
            ))}
          </motion.div>
        </div>
      </section>

      {/* ── 7 · Featured case studies ─────────────────────────────────── */}
      <FeaturedWork projects={cases} />

      {/* ── 8 · Client trust ──────────────────────────────────────────── */}
      <section className="relative overflow-hidden bg-background py-16 text-foreground md:py-24">
        <div className="pointer-events-none absolute left-1/2 top-1/2 h-[22rem] w-[44rem] -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary/[0.08] blur-[150px]" />
        <div className="container relative">
          <motion.div variants={rise} initial="hidden" whileInView="show" viewport={{ once: true, amount: 0.5 }} className="mx-auto max-w-2xl text-center">
            <Label>Trusted at scale</Label>
            <h2 className="mt-3 font-heading text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">Impact you can measure.</h2>
          </motion.div>
          <motion.div variants={container} initial="hidden" whileInView="show" viewport={{ once: true, amount: 0.3 }} className="mt-12 grid grid-cols-1 gap-x-8 gap-y-10 text-center sm:grid-cols-3">
            {TRUST.map((t) => (
              <motion.div key={t.label} variants={rise}>
                <div className="font-heading text-5xl font-bold text-primary sm:text-6xl"><Counter end={t.value} prefix={t.prefix || ""} suffix={t.suffix} /></div>
                <div className="mt-3 text-sm uppercase tracking-wider text-muted-foreground">{t.label}</div>
              </motion.div>
            ))}
          </motion.div>
        </div>
      </section>

      {/* ── 9 · Leadership ────────────────────────────────────────────── */}
      <section className="relative bg-background py-16 text-foreground md:py-24">
        <div className="container">
          <motion.div variants={rise} initial="hidden" whileInView="show" viewport={{ once: true, amount: 0.5 }} className="max-w-2xl">
            <Label>Leadership</Label>
            <h2 className="mt-3 font-heading text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">The people behind the work.</h2>
          </motion.div>
          <motion.div variants={container} initial="hidden" whileInView="show" viewport={{ once: true, amount: 0.15 }} className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
            {LEADERS.map((l) => (
              <motion.div key={l.name} variants={rise} className="group">
                <div className="relative aspect-[3/4] overflow-hidden rounded-3xl border border-border">
                  <Image src={l.image} alt={l.name} fill sizes="(min-width:1024px) 25vw, 50vw" className="object-cover grayscale transition-all duration-500 group-hover:grayscale-0" />
                  <span className="absolute inset-0 bg-gradient-to-t from-background/80 via-transparent to-transparent" />
                  <div className="absolute inset-x-0 bottom-0 p-5">
                    <p className="font-heading text-lg font-semibold">{l.name}</p>
                    <p className="text-sm text-primary">{l.role}</p>
                  </div>
                </div>
              </motion.div>
            ))}
          </motion.div>
        </div>
      </section>

      {/* ── 10 · Awards ───────────────────────────────────────────────── */}
      <section className="relative bg-background py-14 text-foreground md:py-16">
        <div className="container">
          <p className="text-center text-xs font-semibold uppercase tracking-wider text-muted-foreground">Recognized & certified</p>
          <motion.div variants={container} initial="hidden" whileInView="show" viewport={{ once: true, amount: 0.3 }} className="mt-8 flex flex-wrap items-center justify-center gap-4">
            {AWARDS.map((a) => (
              <motion.span key={a} variants={rise} className="rounded-xl border border-border bg-surface/50 px-5 py-3 text-sm font-medium text-muted-foreground">
                {a}
              </motion.span>
            ))}
          </motion.div>
        </div>
      </section>

      {/* ── 11 · CTA ──────────────────────────────────────────────────── */}
      <section className="relative overflow-hidden bg-background pb-16 md:pb-24">
        <div className="container">
          <div className="relative overflow-hidden rounded-3xl bg-gradient-to-br from-primary via-primary to-accent p-8 text-center sm:p-16">
            <div className="pointer-events-none absolute -right-10 -top-10 h-56 w-56 rounded-full bg-white/10 blur-2xl" />
            <div className="pointer-events-none absolute -bottom-12 -left-8 h-56 w-56 rounded-full bg-black/10 blur-2xl" />
            <div className="relative mx-auto max-w-2xl">
              <h2 className="font-heading text-3xl font-bold leading-tight tracking-tight text-background sm:text-5xl">
                Ready to build your next digital product?
              </h2>
              <p className="mt-4 text-base leading-relaxed text-background/80">
                Tell us where you are and where you want to be — we&apos;ll map the fastest, safest path to get there.
              </p>
              <div className="mt-8 flex flex-wrap items-center justify-center gap-4">
                <button onClick={openContact} className="group inline-flex items-center gap-2.5 rounded-full bg-background px-7 py-3.5 text-sm font-semibold text-foreground shadow-xl shadow-black/25 transition-all duration-300 hover:-translate-y-0.5">
                  Start your project
                  <span className="flex h-7 w-7 items-center justify-center rounded-full bg-primary text-primary-foreground transition-transform duration-300 group-hover:translate-x-0.5"><ArrowRight className="h-3.5 w-3.5" /></span>
                </button>
                <button onClick={openContact} className="rounded-full border border-background/40 px-7 py-3.5 text-sm font-semibold text-background transition-colors duration-300 hover:bg-background/10">
                  Book a strategy call
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}