"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, Check, Heart, Users, Shield, Refresh, FileText, Compass,
  Phone, Server, Sparkles, DollarSign, Database, Cart, Home, Gamepad, Palette, Truck, Code, Cloud,
} from "@/components/ui/icons";
import { useContactModal } from "@/components/providers/ContactModal";
import { Aurora, DotWave, Counter } from "../services/fx";
import Faq from "@/components/sections/home/Faq";
import { getIndustry, PROCESS } from "@/data/industries";

/**
 * Industry landing page (client). High-converting structure: hero → challenges
 * → solutions → case studies → services → features → tech stack → process →
 * why-us metrics → testimonials → FAQ → CTA. Brand-strict: dark tokens, Google
 * Sans, orange/gold, animated counters + scroll reveals.
 *
 * Receives only `slug` (serializable) and looks up the rich entry client-side
 * so icon components never cross the server/client boundary.
 */
const EASE = [0.21, 0.47, 0.32, 0.98];
const container = { hidden: {}, show: { transition: { staggerChildren: 0.08 } } };
const rise = {
  hidden: { opacity: 0, y: 28 },
  show: { opacity: 1, y: 0, transition: { duration: 0.6, ease: EASE } },
};

const ICONS = {
  heart: Heart, users: Users, shield: Shield, refresh: Refresh, file: FileText,
  compass: Compass, phone: Phone, server: Server, sparkles: Sparkles, dollar: DollarSign,
  database: Database, cart: Cart, home: Home, gamepad: Gamepad, palette: Palette, truck: Truck,
  code: Code, cloud: Cloud,
};
const Icon = ({ name, className }) => {
  const C = ICONS[name] || Sparkles;
  return <C className={className} />;
};

/* Icons for the (consistent, index-ordered) industry service list. */
const SERVICE_ICONS = ["palette", "code", "phone", "sparkles", "cloud", "refresh"];

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

function Stars({ className = "h-4 w-4" }) {
  return (
    <span className="flex gap-0.5 text-primary" aria-label="5 out of 5 stars">
      {Array.from({ length: 5 }).map((_, i) => (
        <svg key={i} className={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <path d="M12 2l2.92 6.26 6.58.62-4.97 4.73 1.44 6.68L12 16.9l-5.97 3.39 1.44-6.68L2.5 8.88l6.58-.62L12 2z" />
        </svg>
      ))}
    </span>
  );
}

/**
 * Featured case studies — auto-scrolling carousel pairing a results card
 * (image-backed) with a client quote card. Arrows + dots + pause-on-hover.
 */
function CaseStudies({ caseStudies, testimonials, openContact }) {
  const [idx, setIdx] = useState(0);
  const [dir, setDir] = useState(1);
  const [paused, setPaused] = useState(false);
  const len = caseStudies.length;

  useEffect(() => {
    if (paused || len < 2) return;
    const id = setTimeout(() => { setDir(1); setIdx((p) => (p + 1) % len); }, 6000);
    return () => clearTimeout(id);
  }, [idx, paused, len]);

  const go = (d) => { setDir(d); setIdx((p) => (p + d + len) % len); };
  const cs = caseStudies[idx];
  const quote = testimonials[idx % testimonials.length];

  const slide = {
    enter: (d) => ({ opacity: 0, x: d * 50 }),
    center: { opacity: 1, x: 0, transition: { duration: 0.5, ease: EASE } },
    exit: (d) => ({ opacity: 0, x: d * -50, transition: { duration: 0.3, ease: EASE } }),
  };

  return (
    <section className="relative overflow-hidden 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="flex items-end justify-between gap-4">
          <div className="max-w-2xl">
            <Eyebrow>Featured case studies</Eyebrow>
            <h2 className="mt-3 font-heading text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">Results, not promises.</h2>
          </div>
          {len > 1 && (
            <div className="hidden shrink-0 items-center gap-3 sm:flex">
              <button onClick={() => go(-1)} aria-label="Previous" className="flex h-11 w-11 items-center justify-center rounded-full border border-border text-foreground transition-all duration-300 hover:border-primary/50 hover:text-primary">
                <ArrowRight className="h-4 w-4 rotate-180" />
              </button>
              <button onClick={() => go(1)} aria-label="Next" className="flex h-11 w-11 items-center justify-center rounded-full border border-border text-foreground transition-all duration-300 hover:border-primary/50 hover:text-primary">
                <ArrowRight className="h-4 w-4" />
              </button>
            </div>
          )}
        </motion.div>

        <div className="relative mt-10 overflow-hidden" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
          <AnimatePresence mode="wait" custom={dir}>
            <motion.div key={idx} custom={dir} variants={slide} initial="enter" animate="center" exit="exit" className="grid gap-4 lg:grid-cols-2">
              {/* Results card (image background) */}
              <div className="group/story relative flex min-h-[22rem] flex-col justify-end overflow-hidden rounded-3xl border border-border p-6 sm:p-8">
                <Image src={cs.image} alt="" fill sizes="(min-width:1024px) 48vw, 100vw" className="object-cover transition-transform duration-700 group-hover/story:scale-105" />
                <span className="pointer-events-none absolute inset-0 bg-gradient-to-t from-background via-background/80 to-background/20" />
                <span className="pointer-events-none absolute inset-0 bg-gradient-to-r from-background/70 to-transparent" />
                <span className="absolute left-6 top-6 inline-flex items-center gap-1.5 rounded-full border border-primary/40 bg-background/60 px-3 py-1 text-[11px] font-semibold uppercase tracking-wider text-primary backdrop-blur">
                  <Sparkles className="h-3.5 w-3.5" /> Success story
                </span>
                <div className="relative">
                  <h3 className="font-heading text-xl font-semibold leading-snug text-foreground drop-shadow-[0_2px_16px_rgba(0,0,0,0.7)] sm:text-2xl">{cs.title}</h3>
                  <p className="mt-2 max-w-md text-sm leading-relaxed text-foreground/80">{cs.solution}</p>
                  {cs.metrics?.length > 0 && (
                    <div className="mt-5 flex items-end gap-6 border-t border-white/15 pt-4">
                      {cs.metrics.map((m) => (
                        <div key={m.label}>
                          <div className="font-heading text-xl font-bold text-primary sm:text-2xl">{m.value}</div>
                          <div className="mt-0.5 text-[11px] leading-tight text-foreground/70">{m.label}</div>
                        </div>
                      ))}
                    </div>
                  )}
                  <button onClick={openContact} className="mt-5 inline-flex items-center gap-2 text-sm font-semibold text-primary">
                    View success story
                    <span className="flex h-7 w-7 items-center justify-center rounded-full border border-primary/40 transition-all duration-300 group-hover/story:-rotate-45 group-hover/story:bg-primary group-hover/story:text-primary-foreground">
                      <ArrowRight className="h-3.5 w-3.5" />
                    </span>
                  </button>
                </div>
              </div>

              {/* Quote card */}
              <div className="flex flex-col justify-between rounded-3xl border border-border bg-surface/60 p-6 sm:p-8">
                <div>
                  <span className="font-heading text-5xl leading-none text-primary/40">&ldquo;</span>
                  <blockquote className="-mt-3 font-heading text-lg font-medium leading-relaxed text-foreground sm:text-xl">{quote.quote}</blockquote>
                </div>
                <footer className="mt-6 flex items-center gap-3 border-t border-border/70 pt-5">
                  <span className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-primary to-accent font-heading text-sm font-bold text-primary-foreground">
                    {quote.name.split(" ").map((w) => w[0]).join("").slice(0, 2)}
                  </span>
                  <span className="min-w-0">
                    <span className="block font-heading text-sm font-semibold text-foreground">{quote.name}</span>
                    <span className="block truncate text-xs text-muted-foreground">{quote.role}</span>
                  </span>
                  <Stars className="ml-auto h-4 w-4" />
                </footer>
              </div>
            </motion.div>
          </AnimatePresence>
        </div>

        {/* Dots */}
        {len > 1 && (
          <div className="mt-6 flex justify-center gap-2">
            {caseStudies.map((c, i) => (
              <button key={c.title} onClick={() => { setDir(i > idx ? 1 : -1); setIdx(i); }} aria-label={`Go to case study ${i + 1}`} className={"h-1.5 rounded-full transition-all duration-300 " + (i === idx ? "w-6 bg-primary" : "w-1.5 bg-muted hover:bg-primary/50")} />
            ))}
          </div>
        )}
      </div>
    </section>
  );
}

const PROCESS_IMAGE = "/images/opt/Pillar4.webp";

/**
 * Development process — full-bleed image section that pins to the viewport;
 * scrolling advances through the steps (active step shown large on the left,
 * full step list on the right). Arrows + dots also navigate.
 */
function ProcessSection({ steps, openContact }) {
  const wrapperRef = useRef(null);
  const prevRef = useRef(0);
  const [active, setActive] = useState(0);
  const last = steps.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 * steps.length)));
    if (idx !== prevRef.current) { prevRef.current = idx; setActive(idx); }
  });

  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) / steps.length) * scrollable;
    if (typeof window !== "undefined" && window.lenis) window.lenis.scrollTo(target);
    else window.scrollTo({ top: target, behavior: "smooth" });
  };

  const cur = steps[active];

  return (
    <div ref={wrapperRef} style={{ height: `${steps.length * 70}vh` }} className="relative bg-background text-foreground">
      <div className="sticky top-0 h-svh overflow-hidden">
        <Image src={PROCESS_IMAGE} alt="" fill sizes="100vw" className="object-cover" />
        <span className="absolute inset-0 bg-gradient-to-r from-background via-background/85 to-background/55" />
        <span className="absolute inset-0 bg-gradient-to-t from-background/80 via-transparent to-background/40" />

        <div className="container relative flex h-full flex-col justify-center py-20">
          {/* Top row */}
          <div className="flex items-center justify-between">
            <Eyebrow>How we build products</Eyebrow>
            <div className="flex items-center gap-3 font-heading text-sm font-semibold text-foreground/60">
              <span className="hidden h-px w-16 bg-foreground/20 sm:block" />
              <span><span className="text-primary">{String(active + 1).padStart(2, "0")}</span> / {String(steps.length).padStart(2, "0")}</span>
            </div>
          </div>

          {/* Main */}
          <div className="mt-8 grid flex-1 content-center gap-10 lg:grid-cols-[1.1fr_0.9fr] lg:gap-16">
            {/* Left — active step */}
            <div className="self-center">
              <h2 className="font-heading text-4xl font-bold leading-[1.05] tracking-tight sm:text-5xl md:text-6xl">
                Our development{" "}
                <span className="bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">process.</span>
              </h2>
              <span className="mt-6 block h-px w-24 bg-gradient-to-r from-primary to-transparent" />
              <AnimatePresence mode="wait">
                <motion.div
                  key={cur.title}
                  initial={{ opacity: 0, y: 16 }}
                  animate={{ opacity: 1, y: 0, transition: { duration: 0.45, ease: EASE } }}
                  exit={{ opacity: 0, y: -10, transition: { duration: 0.25 } }}
                  className="mt-8 max-w-md"
                >
                  <span className="font-heading text-sm font-bold uppercase tracking-[0.2em] text-primary">Step {String(active + 1).padStart(2, "0")}</span>
                  <h3 className="mt-3 font-heading text-2xl font-semibold sm:text-3xl">{cur.title}</h3>
                  <p className="mt-3 text-base leading-relaxed text-muted-foreground">{cur.desc}</p>
                </motion.div>
              </AnimatePresence>
              <span className="mt-10 inline-flex items-center gap-3 text-xs font-semibold uppercase tracking-wider text-foreground/50">
                Scroll to explore
                <span className="relative h-px w-10 overflow-hidden bg-foreground/20"><span className="absolute inset-y-0 left-0 w-1/2 animate-beam bg-primary" /></span>
              </span>
            </div>

            {/* Right — step list */}
            <ul className="self-center divide-y divide-border/60 rounded-2xl border border-border/60 bg-background/30 backdrop-blur">
              {steps.map((s, i) => {
                const isActive = i === active;
                return (
                  <li key={s.title}>
                    <button onClick={() => go(i)} className="group relative flex w-full items-center gap-4 px-5 py-4 text-left sm:px-6 sm:py-5" aria-current={isActive}>
                      <span className={"absolute left-0 top-1/2 h-0 w-0.5 -translate-y-1/2 rounded-full bg-gradient-to-b from-primary to-accent transition-all duration-300 " + (isActive ? "h-[60%]" : "")} />
                      <span className={"font-heading text-xs font-bold uppercase tracking-wider transition-colors duration-300 " + (isActive ? "text-primary" : "text-foreground/40")}>{String(i + 1).padStart(2, "0")}</span>
                      <span className={"flex-1 font-heading text-base font-semibold transition-colors duration-300 sm:text-lg " + (isActive ? "text-foreground" : "text-foreground/50 group-hover:text-foreground/80")}>{s.title}</span>
                      <ArrowRight className={"h-4 w-4 transition-all duration-300 " + (isActive ? "text-primary opacity-100" : "-translate-x-1 text-foreground/40 opacity-0 group-hover:translate-x-0 group-hover:opacity-100")} />
                    </button>
                  </li>
                );
              })}
            </ul>
          </div>

          {/* Bottom row */}
          <div className="mt-8 flex items-center justify-between">
            <button onClick={openContact} className="group inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-foreground/70 transition-colors hover:text-primary">
              Start your project
              <ArrowRight className="h-4 w-4 transition-transform duration-300 group-hover:translate-x-0.5" />
            </button>
            <div className="flex items-center gap-3">
              <button onClick={() => go(active - 1)} disabled={active === 0} aria-label="Previous step" className="flex h-11 w-11 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>
              <button onClick={() => go(active + 1)} disabled={active === last} aria-label="Next step" className="flex h-11 w-11 items-center justify-center rounded-full bg-gradient-to-br from-primary to-accent text-primary-foreground transition-all duration-300 hover:-translate-y-0.5 disabled:cursor-not-allowed disabled:opacity-40">
                <ArrowRight className="h-4 w-4" />
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default function IndustryView({ slug }) {
  const { open: openContact } = useContactModal();
  const ind = getIndustry(slug);
  if (!ind) return null;

  return (
    <>
      {/* ── 1 · Hero ──────────────────────────────────────────────────── */}
      <section className="relative isolate flex min-h-[calc(100svh-5rem)] items-center overflow-hidden bg-background pb-14 pt-24 text-foreground md:pb-20 md:pt-28">
        <Image src={ind.heroImage} alt="" fill priority sizes="100vw" className="-z-20 object-cover opacity-40" />
        <span className="absolute inset-0 -z-10 bg-gradient-to-b from-background/50 via-background/75 to-background" />
        <Aurora className="opacity-50" />
        <DotWave />
        <div className="container relative">
          <div className="grid items-center gap-12 lg:grid-cols-[1.1fr_0.9fr]">
            <motion.div variants={container} initial="hidden" animate="show">
              <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">
                <Icon name={ind.icon} className="h-4 w-4 text-primary" /> {ind.eyebrow}
              </motion.span>
              <motion.h1 variants={rise} className="mt-6 font-heading text-4xl font-bold leading-[1.06] tracking-tight sm:text-5xl md:text-6xl">
                {ind.headline}
              </motion.h1>
              <motion.p variants={rise} className="mt-6 max-w-xl text-base leading-relaxed text-muted-foreground sm:text-lg">
                {ind.subheadline}
              </motion.p>
              <motion.div variants={rise} className="mt-8 flex flex-wrap items-center gap-4">
                <button onClick={openContact} className="group inline-flex items-center gap-2.5 rounded-full bg-gradient-to-r from-primary to-accent px-7 py-3.5 text-sm font-semibold text-primary-foreground shadow-lg shadow-primary/30 transition-all duration-300 hover:-translate-y-0.5">
                  Start project
                  <ArrowRight className="h-4 w-4 transition-transform duration-300 group-hover:translate-x-0.5" />
                </button>
                <button onClick={openContact} className="rounded-full border border-border bg-surface/50 px-7 py-3.5 text-sm font-semibold text-foreground backdrop-blur transition-colors duration-300 hover:border-primary/50">
                  Schedule consultation
                </button>
              </motion.div>

              {/* Quick-win highlights */}
              {ind.heroHighlights?.length > 0 && (
                <motion.ul variants={rise} className="mt-9 flex flex-wrap gap-x-6 gap-y-3">
                  {ind.heroHighlights.map((h) => (
                    <li key={h} className="inline-flex items-center gap-2 text-sm text-foreground/85">
                      <span className="flex h-5 w-5 items-center justify-center rounded-full bg-primary/15 text-primary"><Check className="h-3 w-3" /></span>
                      {h}
                    </li>
                  ))}
                </motion.ul>
              )}
            </motion.div>

            {/* Why-us metrics preview card */}
            <motion.div variants={rise} initial="hidden" animate="show" className="hidden grid-cols-2 gap-px overflow-hidden rounded-3xl border border-border bg-border lg:grid">
              {ind.metrics.map((m) => (
                <div key={m.label} className="bg-surface/70 px-6 py-8 text-center backdrop-blur">
                  <div className="font-heading text-3xl font-bold text-primary"><Counter end={m.value} suffix={m.suffix} /></div>
                  <div className="mt-1 text-xs uppercase tracking-wider text-muted-foreground">{m.label}</div>
                </div>
              ))}
            </motion.div>
          </div>
        </div>
      </section>

      {/* ── 2 · Challenges (header + editorial row grid) ──────────────── */}
      <section className="relative overflow-hidden bg-background py-16 text-foreground md:py-24">
        <div className="pointer-events-none absolute right-[-8rem] top-1/4 h-80 w-[34rem] rounded-full bg-primary/[0.06] 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 gap-6 md:flex-row md:items-end md:justify-between">
            <div className="max-w-2xl">
              <Eyebrow>Industry challenges</Eyebrow>
              <h2 className="mt-3 font-heading text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">The problems we solve.</h2>
              {ind.intro && <p className="mt-5 text-base leading-relaxed text-muted-foreground">{ind.intro}</p>}
            </div>
            <button onClick={openContact} className="group inline-flex shrink-0 items-center gap-2 self-start text-sm font-semibold text-primary md:self-end">
              <span className="relative">Discuss your challenges<span className="absolute -bottom-0.5 left-0 h-px w-0 bg-primary transition-all duration-300 group-hover:w-full" /></span>
              <ArrowRight className="h-4 w-4 transition-transform duration-300 group-hover:translate-x-0.5" />
            </button>
          </motion.div>

          {/* Challenge rows */}
          <motion.ul variants={container} initial="hidden" whileInView="show" viewport={{ once: true, amount: 0.1 }} className="mt-12 grid gap-4 md:grid-cols-2">
            {ind.challenges.map((c, i) => (
              <motion.li
                key={c.title}
                variants={rise}
                className="group relative flex items-start gap-5 overflow-hidden rounded-2xl border border-border bg-surface/40 p-6 transition-all duration-300 hover:border-primary/40 hover:bg-surface/70 sm:p-7"
              >
                {/* accent bar */}
                <span className="absolute inset-y-5 left-0 w-1 origin-top scale-y-0 rounded-full bg-gradient-to-b from-primary to-accent transition-transform duration-300 group-hover:scale-y-100" />
                {/* icon chip */}
                <span className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary transition-colors duration-300 group-hover:bg-primary/20">
                  <Icon name={c.icon} className="h-5 w-5" />
                </span>
                <div className="min-w-0 flex-1">
                  <div className="flex items-baseline justify-between gap-3">
                    <h3 className="font-heading text-lg font-semibold">{c.title}</h3>
                    <span aria-hidden className="font-heading text-2xl font-bold leading-none text-foreground/[0.08] transition-colors duration-300 group-hover:text-primary/20">{String(i + 1).padStart(2, "0")}</span>
                  </div>
                  <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{c.desc}</p>
                  {c.impact && (
                    <p className="mt-3 inline-flex items-center gap-2 rounded-full border border-primary/25 bg-primary/[0.07] px-3 py-1 text-xs font-medium text-foreground/80">
                      <Sparkles className="h-3 w-3 text-primary" /> {c.impact}
                    </p>
                  )}
                </div>
              </motion.li>
            ))}
          </motion.ul>
        </div>
      </section>

      {/* ── 3 · Solutions ─────────────────────────────────────────────── */}
      <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">
            <Eyebrow>Our solutions</Eyebrow>
            <h2 className="mt-3 font-heading text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">What we build for {ind.name.toLowerCase()}.</h2>
          </motion.div>
          <motion.div variants={container} initial="hidden" whileInView="show" viewport={{ once: true, amount: 0.1 }} className="mt-12 grid grid-cols-1 gap-px overflow-hidden rounded-3xl border border-border bg-border sm:grid-cols-2 lg:grid-cols-3">
            {ind.solutions.map((s) => (
              <motion.div key={s.title} variants={rise} className="group relative flex min-h-[16rem] flex-col overflow-hidden bg-background p-7 sm:p-8">
                {/* hover image reveal */}
                <Image src={s.image} alt="" fill sizes="(min-width:1024px) 33vw, (min-width:640px) 50vw, 100vw" className="object-cover opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
                <span className="absolute inset-0 bg-gradient-to-t from-background via-background/75 to-background/45 opacity-0 transition-opacity duration-500 group-hover:opacity-100" />

                {/* icon */}
                <span className="relative flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary transition-all duration-300 group-hover:bg-gradient-to-br group-hover:from-primary group-hover:to-accent group-hover:text-primary-foreground group-hover:shadow-lg group-hover:shadow-primary/30">
                  <Icon name={s.icon} className="h-5 w-5" />
                </span>

                {/* content (anchored bottom) */}
                <div className="relative mt-auto pt-12">
                  <h3 className="font-heading text-xl font-semibold">{s.title}</h3>
                  <p className="mt-2 text-sm leading-relaxed text-muted-foreground transition-colors duration-300 group-hover:text-foreground/90">{s.desc}</p>
                </div>
              </motion.div>
            ))}
          </motion.div>
        </div>
      </section>

      {/* ── 4 · Featured case studies (carousel) ──────────────────────── */}
      <CaseStudies caseStudies={ind.caseStudies} testimonials={ind.testimonials} openContact={openContact} />

      {/* ── 5 · Services for this industry ────────────────────────────── */}
      <section className="relative overflow-hidden bg-background py-16 text-foreground md:py-24">
        <div className="pointer-events-none absolute right-0 top-1/4 h-72 w-[36rem] 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">
            <Eyebrow>Services for {ind.name.toLowerCase()}</Eyebrow>
            <h2 className="mt-3 font-heading text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">Everything under one roof.</h2>
          </motion.div>
          <motion.div variants={container} initial="hidden" whileInView="show" viewport={{ once: true, amount: 0.1 }} className="mt-12 overflow-hidden rounded-3xl border border-border bg-surface/30">
            {ind.services.map((sv, i) => (
              <motion.div key={sv.title} variants={rise} className={"group relative " + (i > 0 ? "border-t border-border/70" : "")}>
                <Link href="/services" className="relative flex flex-col gap-3 p-6 sm:flex-row sm:items-center sm:gap-6 lg:gap-10 lg:p-8">
                  {/* hover fill */}
                  <span className="pointer-events-none absolute inset-0 origin-left scale-x-0 bg-gradient-to-r from-primary/[0.12] to-transparent transition-transform duration-500 ease-out group-hover:scale-x-100" />

                  {/* index + icon + title */}
                  <div className="relative flex items-center gap-4 sm:w-[38%] sm:shrink-0">
                    <span className="font-heading text-3xl font-bold leading-none text-primary/25 transition-colors duration-300 group-hover:text-primary lg:text-4xl">{String(i + 1).padStart(2, "0")}</span>
                    <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary transition-all duration-300 group-hover:bg-gradient-to-br group-hover:from-primary group-hover:to-accent group-hover:text-primary-foreground">
                      <Icon name={SERVICE_ICONS[i] || "sparkles"} className="h-5 w-5" />
                    </span>
                    <h3 className="font-heading text-lg font-semibold transition-colors duration-300 group-hover:text-primary sm:text-xl">{sv.title}</h3>
                  </div>

                  {/* description */}
                  <p className="relative flex-1 text-sm leading-relaxed text-muted-foreground lg:text-[15px]">{sv.desc}</p>

                  {/* arrow */}
                  <span className="relative hidden h-10 w-10 shrink-0 items-center justify-center rounded-full border border-border text-muted-foreground transition-all duration-300 group-hover:border-primary group-hover:bg-primary group-hover:text-primary-foreground sm:flex">
                    <ArrowRight className="h-4 w-4 -rotate-45 transition-transform duration-300 group-hover:rotate-0" />
                  </span>
                </Link>
              </motion.div>
            ))}
          </motion.div>
        </div>
      </section>

      {/* ── 6 · Industry-specific features ────────────────────────────── */}
      <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">
            <Eyebrow>Industry features</Eyebrow>
            <h2 className="mt-3 font-heading text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">Built-in from day one.</h2>
          </motion.div>
          <motion.div variants={container} initial="hidden" whileInView="show" viewport={{ once: true, amount: 0.15 }} className="mt-12 grid auto-rows-fr gap-5 sm:grid-cols-2 lg:grid-cols-3">
            {ind.features.map((f, i) => (
              <motion.div
                key={f.title}
                variants={rise}
                className="group relative overflow-hidden rounded-3xl border border-border bg-surface/40 p-7 transition-all duration-300 hover:-translate-y-1 hover:border-primary/40 hover:bg-surface/70 sm:p-8"
              >
                {/* top accent line */}
                <span className="pointer-events-none absolute inset-x-0 top-0 h-0.5 origin-left scale-x-0 bg-gradient-to-r from-primary to-accent transition-transform duration-500 ease-out group-hover:scale-x-100" />
                {/* ghost number */}
                <span aria-hidden className="pointer-events-none absolute right-5 top-3 select-none font-heading text-6xl font-bold leading-none text-foreground/[0.04] transition-colors duration-300 group-hover:text-primary/10">{String(i + 1).padStart(2, "0")}</span>

                {/* gradient-ring icon */}
                <span className="relative inline-flex rounded-2xl bg-gradient-to-br from-primary to-accent p-px shadow-lg shadow-primary/10">
                  <span className="flex h-14 w-14 items-center justify-center rounded-2xl bg-surface text-primary transition-colors duration-300 group-hover:bg-transparent group-hover:text-primary-foreground">
                    <Icon name={f.icon} className="h-6 w-6" />
                  </span>
                </span>

                <h3 className="relative mt-5 font-heading text-lg font-semibold">{f.title}</h3>
                <p className="relative mt-2 text-sm leading-relaxed text-muted-foreground">{f.desc}</p>
              </motion.div>
            ))}
          </motion.div>
        </div>
      </section>

      {/* ── 7 · Technology stack ──────────────────────────────────────── */}
      <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.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">
            <Eyebrow>Technology stack</Eyebrow>
            <h2 className="mt-3 font-heading text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">A modern, proven stack.</h2>
          </motion.div>
          <motion.div variants={container} initial="hidden" whileInView="show" viewport={{ once: true, amount: 0.2 }} className="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
            {ind.stack.map((s) => (
              <motion.div key={s.group} variants={rise} className="rounded-2xl border border-border bg-surface/50 p-6">
                <div className="text-xs font-semibold uppercase tracking-wider text-primary">{s.group}</div>
                <ul className="mt-4 space-y-2">
                  {s.items.map((it) => (
                    <li key={it} className="flex items-center gap-2 text-sm text-foreground/85">
                      <span className="h-1.5 w-1.5 rounded-full bg-primary" /> {it}
                    </li>
                  ))}
                </ul>
              </motion.div>
            ))}
          </motion.div>
        </div>
      </section>

      {/* ── 8 · Development process (scroll-pinned) ───────────────────── */}
      <ProcessSection steps={PROCESS} openContact={openContact} />

      {/* ── 9 · Why choose us (metrics) ───────────────────────────────── */}
      <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">
            <Eyebrow>Why choose us</Eyebrow>
            <h2 className="mt-3 font-heading text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">A partner 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-2 gap-x-8 gap-y-10 text-center lg:grid-cols-4">
            {ind.metrics.map((m) => (
              <motion.div key={m.label} variants={rise}>
                <div className="font-heading text-4xl font-bold text-primary sm:text-5xl"><Counter end={m.value} suffix={m.suffix} /></div>
                <div className="mt-2 text-sm uppercase tracking-wider text-muted-foreground">{m.label}</div>
              </motion.div>
            ))}
          </motion.div>
        </div>
      </section>

      {/* ── 10 · Testimonials ─────────────────────────────────────────── */}
      <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">
            <Eyebrow>Testimonials</Eyebrow>
            <h2 className="mt-3 font-heading text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">Trusted by teams like yours.</h2>
          </motion.div>
          <motion.div variants={container} initial="hidden" whileInView="show" viewport={{ once: true, amount: 0.2 }} className="mt-12 grid gap-6 md:grid-cols-2">
            {ind.testimonials.map((t) => (
              <motion.figure key={t.name} variants={rise} className="relative overflow-hidden rounded-3xl border border-border bg-surface/50 p-8 sm:p-10">
                <span className="pointer-events-none absolute right-6 top-2 select-none font-heading text-8xl leading-none text-primary/10">&rdquo;</span>
                <blockquote className="relative font-heading text-lg font-medium leading-relaxed sm:text-xl">{t.quote}</blockquote>
                <figcaption className="mt-6 flex items-center gap-3">
                  <span className="flex h-11 w-11 items-center justify-center rounded-full bg-gradient-to-br from-primary to-accent font-heading text-sm font-bold text-primary-foreground">
                    {t.name.split(" ").map((w) => w[0]).slice(0, 2).join("")}
                  </span>
                  <div>
                    <div className="font-heading font-semibold">{t.name}</div>
                    <div className="text-sm text-primary">{t.role}</div>
                  </div>
                </figcaption>
              </motion.figure>
            ))}
          </motion.div>
        </div>
      </section>

      {/* ── 11 · FAQ (reuses the home FAQ component) ──────────────────── */}
      <Faq items={ind.faqs} emitSchema={false} subtitle={`Common questions about ${ind.name.toLowerCase()} software with Cerkel.`} />

      {/* ── 12 · Final 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">{ind.cta.headline}</h2>
              <p className="mt-4 text-base leading-relaxed text-background/80">{ind.cta.subtext}</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">
                  Book consultation
                  <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">
                  Get free estimate
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}