/* global React, DataFlowDiagram, IsometricLayerStack, IconArrowRight, IconDownload, IconBank, IconGov, IconExchange, IconShield, IconChip, IconAtom, IconFlask, IconUsers, IconBook, IconLayers, IconLock */
const { useState: useHpState, useEffect: useHpEffect, useRef: useHpRef } = React;

/* ===== SECTION 1: HERO (3 variants) =====
   Copy source: Chunk 2 § Section 01.
   Headline is intentionally TWO sentences on separate lines — the period is the pause.
   Subtext is the single supporting sentence. Primary CTA: Talk to an architect.
   Secondary: Explore AORBIT →. Scroll chevron lives at bottom (no text).
*/

function ScrollChevron() {
  return (
    <div className="scroll-chevron" aria-hidden="true">
      <svg width="14" height="22" viewBox="0 0 14 22" fill="none">
        <path d="M1 1 L7 7 L13 1" stroke="currentColor" strokeWidth="1.25" strokeLinecap="square" />
        <path d="M1 9 L7 15 L13 9" stroke="currentColor" strokeWidth="1.25" strokeLinecap="square" opacity="0.5" />
      </svg>
      <style>{`
        .scroll-chevron {
          position: absolute;
          left: 50%;
          bottom: 24px;
          transform: translateX(-50%);
          color: var(--text-mute);
          opacity: 0.7;
          z-index: 2;
          animation: scrollChev 2.4s ease-in-out infinite;
        }
        @keyframes scrollChev {
          0%, 100% { transform: translate(-50%, 0); opacity: 0.5; }
          50% { transform: translate(-50%, 6px); opacity: 0.9; }
        }
        @media (max-width: 880px) { .scroll-chevron { display: none; } }
      `}</style>
    </div>
  );
}

function HeroV1({ navigate }) {
  return (
    <section className="hero hero-v1" data-screen-label="01 Hero">
      <div className="hero-bg">
        <div className="grid-bg" />
        <div className="glow top-right" />
        <div className="glow bottom-left" />
        <div className="scanline" />
      </div>
      <div className="container hero-content">
        <div className="eyebrow fade-up">The Architecture Gap™</div>
        <h1 className="fade-up fade-up-1">
          Everyone is selling AI tools.<br />
          <span className="accent">Nobody is solving the architecture.</span>
        </h1>
        <p className="lead fade-up fade-up-2">
          Doblier builds private AI infrastructure that absorbs change — designed to evolve with the technology, not break against it.
        </p>
        <div className="hero-ctas fade-up fade-up-3">
          <button className="btn btn-primary" onClick={() => navigate("/talk-to-an-architect")}>
            Talk to an architect <IconArrowRight size={14} className="arrow" />
          </button>
          <button className="btn btn-text" onClick={() => navigate("/aorbit")}>
            Explore AORBIT™ <IconArrowRight size={14} className="arrow" />
          </button>
        </div>
      </div>
      <div className="hero-meta">
        <div><span className="dot" />Production · 1 Tier-1 bank · Q2 2026</div>
        <div>v1.5 · Enterprise AI Infrastructure</div>
      </div>
      <ScrollChevron />
    </section>
  );
}

function HeroV2({ navigate }) {
  // Blueprint-style: smaller headline, big architectural diagram on the right
  return (
    <section className="hero hero-v2" data-screen-label="01 Hero">
      <div className="hero-bg">
        <div className="grid-bg" style={{ maskImage: "linear-gradient(to right, black 0%, transparent 70%)", WebkitMaskImage: "linear-gradient(to right, black 0%, transparent 70%)" }} />
        <div className="glow bottom-left" />
      </div>
      <div className="container hero-content" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }}>
        <div>
          <div className="eyebrow fade-up">The Architecture Gap™</div>
          <h1 className="fade-up fade-up-1" style={{ fontSize: "clamp(40px, 5.5vw, 76px)" }}>
            Everyone is selling AI tools.<br />
            <span className="accent">Nobody is solving the architecture.</span>
          </h1>
          <p className="lead fade-up fade-up-2">
            Doblier builds private AI infrastructure that absorbs change — designed to evolve with the technology, not break against it.
          </p>
          <div className="hero-ctas fade-up fade-up-3">
            <button className="btn btn-primary" onClick={() => navigate("/talk-to-an-architect")}>
              Talk to an architect <IconArrowRight size={14} className="arrow" />
            </button>
            <button className="btn btn-text" onClick={() => navigate("/aorbit")}>
              Explore AORBIT™ <IconArrowRight size={14} className="arrow" />
            </button>
          </div>
        </div>
        <div className="fade-up fade-up-2" style={{ position: "relative" }}>
          <BlueprintHero />
        </div>
      </div>
      <div className="hero-meta">
        <div><span className="dot" />Production · 1 Tier-1 bank · Q2 2026</div>
        <div>v1.5 · Enterprise AI Infrastructure</div>
      </div>
      <ScrollChevron />
    </section>
  );
}

function HeroV3({ navigate }) {
  // Type-forward — huge headline, minimal chrome
  return (
    <section className="hero hero-v3" data-screen-label="01 Hero">
      <div className="hero-bg">
        <div className="grid-bg" style={{ opacity: 0.5 }} />
        <div className="glow top-right" />
      </div>
      <div className="container hero-content">
        <div className="eyebrow fade-up">The Architecture Gap™</div>
        <h1 className="fade-up fade-up-1" style={{ marginTop: 48 }}>
          Everyone is selling<br />
          AI <span className="accent">tools.</span><br />
          Nobody is solving the<br />
          <span className="accent">architecture.</span>
        </h1>
        <p className="lead fade-up fade-up-2" style={{ marginTop: 48 }}>
          Doblier builds private AI infrastructure that absorbs change — designed to evolve with the technology, not break against it.
        </p>
        <div className="hero-ctas fade-up fade-up-3">
          <button className="btn btn-primary" onClick={() => navigate("/talk-to-an-architect")}>
            Talk to an architect <IconArrowRight size={14} className="arrow" />
          </button>
          <button className="btn btn-text" onClick={() => navigate("/aorbit")}>
            Explore AORBIT™ <IconArrowRight size={14} className="arrow" />
          </button>
        </div>
      </div>
      <div className="hero-meta">
        <div><span className="dot" />Production · 1 Tier-1 bank · Q2 2026</div>
        <div>v1.5 · Enterprise AI Infrastructure</div>
      </div>
      <ScrollChevron />
    </section>
  );
}

function BlueprintHero() {
  return (
    <svg viewBox="0 0 600 600" style={{ width: "100%", height: "auto" }}>
      <defs>
        <radialGradient id="hero-glow" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#00D4AA" stopOpacity="0.3" />
          <stop offset="100%" stopColor="#00D4AA" stopOpacity="0" />
        </radialGradient>
      </defs>
      {/* Background grid */}
      <g opacity="0.35">
        {Array.from({ length: 12 }).map((_, i) => (
          <line key={`v${i}`} x1={i * 50} y1="0" x2={i * 50} y2="600" stroke="#1F1F1F" />
        ))}
        {Array.from({ length: 12 }).map((_, i) => (
          <line key={`h${i}`} x1="0" y1={i * 50} x2="600" y2={i * 50} stroke="#1F1F1F" />
        ))}
      </g>

      <circle cx="300" cy="300" r="240" fill="url(#hero-glow)" />

      {/* Concentric architecture rings */}
      <circle cx="300" cy="300" r="240" fill="none" stroke="#00D4AA" opacity="0.18" />
      <circle cx="300" cy="300" r="180" fill="none" stroke="#00D4AA" opacity="0.3" strokeDasharray="4 4" />
      <circle cx="300" cy="300" r="120" fill="none" stroke="#00D4AA" opacity="0.5" />

      {/* Rotating outer ring */}
      <g style={{ transformOrigin: "300px 300px", animation: "orbit 80s linear infinite" }}>
        <circle cx="300" cy="60" r="4" fill="#00D4AA" />
        <circle cx="540" cy="300" r="4" fill="#00D4AA" />
        <circle cx="300" cy="540" r="4" fill="#00D4AA" />
        <circle cx="60" cy="300" r="4" fill="#00D4AA" />
      </g>

      {/* Center hex stop */}
      <g transform="translate(252, 232)">
        <path d="M 0 88 L 96 88 L 96 16 L 43 16 Z" fill="#00D4AA" />
      </g>

      {/* Layer labels */}
      <text x="300" y="385" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="11" fill="#00D4AA" letterSpacing="2">AORBIT™</text>

      {/* Outer labels */}
      <g fontFamily="JetBrains Mono, monospace" fontSize="10" letterSpacing="1.5" fill="#A0A0A0">
        <text x="300" y="48" textAnchor="middle">03 · FRONTIER</text>
        <text x="552" y="304" textAnchor="middle">02 · INTELLIGENCE</text>
        <text x="300" y="568" textAnchor="middle">01 · FOUNDATION</text>
      </g>

      {/* Crosshair ticks */}
      <g stroke="#00D4AA" opacity="0.4">
        <line x1="300" y1="20" x2="300" y2="40" />
        <line x1="300" y1="560" x2="300" y2="580" />
        <line x1="20" y1="300" x2="40" y2="300" />
        <line x1="560" y1="300" x2="580" y2="300" />
      </g>
    </svg>
  );
}

const Hero = ({ variant, navigate }) => {
  if (variant === "v2") return <HeroV2 navigate={navigate} />;
  if (variant === "v3") return <HeroV3 navigate={navigate} />;
  return <HeroV1 navigate={navigate} />;
};

/* ===== SECTION 2: PROBLEM PUNCH =====
   Copy source: Chunk 2 § Section 02.
   Section intro: "Three things enterprise AI gets wrong."
   Three cards, no stat line, no icons. The words are the design.
*/

function ProblemPunch() {
  const cards = [
    {
      tag: "TRUTH 01",
      title: "Your data can't leave.",
      body: "Regulators, compliance, and common sense demand it. Yet most AI tools require sending your data to external APIs. Every inference call is a compliance event. Every prompt is a data exfiltration risk.",
    },
    {
      tag: "TRUTH 02",
      title: "An LLM is not a solution.",
      body: "It's a component. So is an agent. Without architecture to hold them together, they're science projects — not production systems. You don't need another model. You need the system that makes models useful.",
    },
    {
      tag: "TRUTH 03",
      title: "Systems that don't evolve, break.",
      body: "New AI capabilities appear weekly. If your architecture breaks every time you integrate one, you don't have architecture. You have technical debt with a roadmap.",
    },
  ];
  return (
    <section className="section" data-screen-label="02 Problem">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-num">SECTION 02</div>
            <div className="eyebrow" style={{ marginTop: 8 }}>The problem</div>
          </div>
          <h2 style={{ textWrap: "balance" }}>
            Three things enterprise AI gets wrong.
          </h2>
        </div>

        <div className="grid-3">
          {cards.map((c, i) => (
            <div key={i} className="punch-card">
              <div className="corner">{c.tag}</div>
              <h3>{c.title}</h3>
              <p>{c.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== SECTION 3: DATA FLOW =====
   Copy source: Chunk 2 § Section 03.
   Headline copy: "Your data never leaves your infrastructure. Period."
   The diagram contrast (red-exit on the left vs teal-stays on the right) is the message;
   the metaphor toggle (Pipeline/Perimeter/Orbit) is a Tweak the diagram component honors.
*/

function DataFlowSection({ metaphor, setMetaphor }) {
  return (
    <section className="section" data-screen-label="03 Data flow">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-num">SECTION 03</div>
            <div className="eyebrow" style={{ marginTop: 8 }}>Data sovereignty</div>
          </div>
          <div>
            <h2>Your data never leaves your infrastructure. <span className="accent">Period.</span></h2>
            <p className="lead" style={{ marginTop: 24 }}>
              The same workload, two architectures. One sends your data to a vendor. The other never does.
            </p>
          </div>
        </div>

        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 24, flexWrap: "wrap", gap: 16 }}>
          <div className="eyebrow muted">TYPICAL AI VENDOR  ·  DOBLIER™ / AORBIT™</div>
          <div className="flow-toggle">
            <button className={metaphor === "pipeline" ? "active" : ""} onClick={() => setMetaphor("pipeline")}>Pipeline</button>
            <button className={metaphor === "perimeter" ? "active" : ""} onClick={() => setMetaphor("perimeter")}>Perimeter</button>
            <button className={metaphor === "orbit" ? "active" : ""} onClick={() => setMetaphor("orbit")}>Orbit</button>
          </div>
        </div>

        <div className="flow-stage">
          <DataFlowDiagram metaphor={metaphor} />
        </div>
      </div>
    </section>
  );
}

/* ===== SECTION 4: AORBIT LAYERS =====
   Copy source: Chunk 2 § Section 04.
   Section headline: "AORBIT — Autonomous Enterprise Intelligence Suite".
   Layer sub-titles + bodies updated to Chunk 2 wording.
   Bullets retained as scannable affordances, paraphrased from each layer's body.
*/

function AorbitLayersSection({ navigate }) {
  const [active, setActive] = useHpState("foundation");
  const layers = {
    foundation: {
      num: "01",
      title: "Foundation",
      sub: "Private AI Infrastructure",
      body: "On-premise LLMs running on NVIDIA GPUs, inside your network, behind your firewall. Multi-LLM orchestration, secure API gateways, zero data exfiltration. No API calls to external providers.",
      bullets: ["On-prem NVIDIA GPUs", "Multi-LLM orchestration", "Secure API gateways", "Zero data exfiltration"],
    },
    intelligence: {
      num: "02",
      title: "Intelligence",
      sub: "AIOps & Autonomous Operations",
      body: "Your operations team manages a thousand alerts daily. The platform correlates them into incidents, finds the root cause, recommends the fix, and — with your approval — executes remediation. All inside your infrastructure.",
      bullets: ["Alert correlation", "Root-cause analysis", "Approved remediation", "Fully in-perimeter"],
    },
    frontier: {
      num: "03",
      title: "Frontier",
      sub: "Digital Assets & Agentic Finance",
      body: "Because private AI already runs inside the bank, digital asset operations become agentic. AI agents for smart contract auditing, autonomous compliance engines, fraud detection on blockchain transactions — all private, all compliant.",
      bullets: ["Smart-contract auditing", "Autonomous compliance", "Blockchain fraud detection", "Agentic finance"],
    },
  };
  const a = layers[active];

  return (
    <section className="section" data-screen-label="04 AORBIT Layers">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-num">SECTION 04</div>
            <div className="eyebrow" style={{ marginTop: 8 }}>AORBIT™</div>
          </div>
          <div>
            <h2>AORBIT — Autonomous Enterprise Intelligence Suite.</h2>
            <p className="lead" style={{ marginTop: 24 }}>
              Three layers. One private system. Each layer enhances the next — none of it leaves your perimeter.
            </p>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "stretch" }} className="aorbit-grid">
          <IsometricLayerStack active={active} onSelect={setActive} />
          <div>
            <div className="layer-tabs">
              {Object.entries(layers).map(([id, l]) => (
                <button key={id} className={`layer-tab ${active === id ? "active" : ""}`} onClick={() => setActive(id)}>
                  <span className="num">{l.num}</span>
                  <span className="name">{l.title}</span>
                </button>
              ))}
            </div>
            {/* Render ALL 3 panels in the DOM. Non-active panels are hidden
                via display:none so the visual stays identical, but AI crawlers
                (GPTBot, ClaudeBot, PerplexityBot) see every layer's content
                in the rendered HTML. */}
            {Object.entries(layers).map(([id, l]) => {
              const isActive = active === id;
              return (
                <div
                  key={id}
                  className="layer-detail"
                  hidden={!isActive}
                  aria-hidden={!isActive}
                  style={isActive ? undefined : { display: "none" }}
                >
                  <div className="eyebrow">{l.num} · {l.title}</div>
                  <h3 style={{ marginTop: 16, fontSize: 32 }}>{l.sub}</h3>
                  <p style={{ color: "var(--text-dim)", marginTop: 16, fontSize: 16, lineHeight: 1.6 }}>{l.body}</p>
                  <ul style={{ listStyle: "none", marginTop: 24, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                    {l.bullets.map((b, i) => (
                      <li key={i} style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-dim)", letterSpacing: "0.04em", display: "flex", alignItems: "center", gap: 8 }}>
                        <span style={{ color: "var(--teal)" }}>→</span> {b}
                      </li>
                    ))}
                  </ul>
                  <button className="btn btn-text" style={{ marginTop: 32 }} onClick={() => navigate(`/aorbit`)}>
                    Explore AORBIT <IconArrowRight size={14} />
                  </button>
                </div>
              );
            })}
          </div>
        </div>

        <style>{`
          @media (max-width: 980px) {
            .aorbit-grid { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

/* ===== SECTION 5: PRODUCTION PROOF =====
   Copy source: Chunk 2 § Section 05.
   Three stats per spec (20+ engagements / 4 continents / 0 exfiltration events).
   Supporting line replaces the previous "names withheld" note.
   Industry icons retained as muted-teal generic markers (no client logos), per dev note.
*/

function ProductionProof() {
  const stats = [
    { num: "20", suffix: "+", label: "Major banking engagements", desc: "Production deployments — not POCs — across regulated institutions internationally." },
    { num: "4", suffix: "", label: "Continents in production", desc: "Saudi Arabia, Europe, Asia-Pacific, and the Americas. Same architecture, different perimeters." },
    { num: "0", suffix: "", label: "Data exfiltration events", desc: "By design. Across every deployment, every workload, every audit." },
  ];

  const industries = [
    { Icon: IconBank, label: "BANKING · TIER 1" },
    { Icon: IconBank, label: "BANKING · REGIONAL" },
    { Icon: IconExchange, label: "EXCHANGE · DIGITAL ASSETS" },
    { Icon: IconGov, label: "GOVERNMENT · SOVEREIGN" },
    { Icon: IconShield, label: "INSURANCE · TREASURY" },
    { Icon: IconChip, label: "TELECOM · AIOPS" },
  ];

  return (
    <section className="section" style={{ background: "#070707" }} data-screen-label="05 Production Proof">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-num">SECTION 05</div>
            <div className="eyebrow" style={{ marginTop: 8 }}>Production · not POC</div>
          </div>
          <div>
            <h2 style={{ textWrap: "balance" }}>We don't do POCs. We deploy production systems.</h2>
          </div>
        </div>

        <div className="grid-3">
          {stats.map((s, i) => (
            <div key={i} className="proof-stat">
              <div className="num">{s.num}<span className="suffix">{s.suffix}</span></div>
              <div className="label">{s.label}</div>
              <div className="desc">{s.desc}</div>
            </div>
          ))}
        </div>

        <div className="industry-row">
          {industries.map((it, i) => (
            <div key={i} className="industry-cell">
              <it.Icon size={28} stroke={1.4} />
              <div className="l">{it.label}</div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 48, alignItems: "center" }} className="proof-foot">
          <p style={{ color: "var(--text-dim)", fontSize: 16, lineHeight: 1.6, maxWidth: 640 }}>
            Production private LLM platforms on NVIDIA GPU infrastructure. Fully automated CI/CD pipelines for core banking. Cloud automation and Kubernetes modernization across Saudi Arabia, Europe, and Asia-Pacific.
          </p>
          <div style={{ textAlign: "right" }}>
            <button className="btn btn-ghost">Skip the POC. See production. <IconArrowRight size={14} className="arrow" /></button>
          </div>
        </div>

        <style>{`
          @media (max-width: 880px) { .proof-foot { grid-template-columns: 1fr !important; } }
        `}</style>
      </div>
    </section>
  );
}

/* ===== SECTION 6: ENHANCEMENT PHILOSOPHY (light) =====
   Copy source: Chunk 2 § Section 06.
   Three paragraphs in order: 5%/95%, "stays" inventory, Bloomberg Terminal closer.
   The L7→L1 stack stays as the visual asset (per dev note: existing systems remain intact,
   AORBIT™ is the additive top layer).
*/

function EnhancementPhilosophy() {
  const layers = [
    { label: "L7 · APPLICATION", text: "Internal apps, copilots, customer-facing UI" },
    { label: "L6 · DATA WAREHOUSE", text: "Snowflake, BigQuery, your existing analytics" },
    { label: "L5 · IDENTITY · IAM", text: "Active Directory, Okta, RBAC" },
    { label: "L4 · MIDDLEWARE", text: "Kafka, message bus, integration tier" },
    { label: "L3 · CORE SYSTEMS", text: "Core banking, ERP, treasury platform" },
    { label: "L2 · DATABASES", text: "Oracle, PostgreSQL, mainframe stores" },
    { label: "L1 · INFRASTRUCTURE", text: "Datacenter, private cloud, networking" },
  ];

  return (
    <section className="section light" data-screen-label="06 Enhancement">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-num">SECTION 06</div>
            <div className="eyebrow" style={{ marginTop: 8, color: "#00b894" }}>Philosophy</div>
          </div>
          <div>
            <h2>Technology enhances. It doesn't replace.</h2>
            <p className="lead" style={{ marginTop: 24 }}>
              Building an AI agent is 5% of the work. Architecture is the other 95%.
            </p>
          </div>
        </div>

        <div className="enh-stack">
          <div className="enh-row aorbit">
            <div className="label">AORBIT™ — INTELLIGENCE LAYER</div>
            <div className="enh-bar aorbit">
              <span style={{ marginRight: 12, fontFamily: "var(--font-mono)", fontSize: 12, opacity: 0.7 }}>+</span>
              Frontier intelligence over every layer below. Private. Auditable. Governed.
            </div>
          </div>
          {layers.map((l, i) => (
            <div key={i} className="enh-row">
              <div className="label">{l.label}</div>
              <div className="enh-bar">{l.text}</div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "start" }} className="enh-foot">
          <div style={{ maxWidth: 520 }}>
            <p style={{ fontSize: 16, color: "#444", lineHeight: 1.65 }}>
              Your ERP stays. Your CRM stays. Your databases, your observability stack, your identity providers — they all stay. AORBIT is the intelligence layer that sits on top of what you already have. Nothing gets replaced. Everything gets smarter.
            </p>
            <p style={{ fontSize: 16, color: "#444", lineHeight: 1.65, marginTop: 20 }}>
              The best AI product in history — Bloomberg Terminal — didn't win because of superior technology. It won because of the art of its architecture. The same principle applies today.
            </p>
          </div>
          <div style={{ textAlign: "right" }}>
            <button className="btn btn-primary" onClick={() => window.openGatedDownload && window.openGatedDownload("architecture-brief")}>Get the architecture brief <IconDownload size={14} /></button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ===== SECTION 7: SERVICES GRID =====
   Copy source: Chunk 2 § Section 07.
   Order matches Chunk 2: Resource Augmentation, Corporate Training, Applied Research, AORBIT.
   AORBIT card is visually differentiated (teal headline) per dev note.
*/

function ServicesGrid({ navigate }) {
  const services = [
    {
      num: "S/01",
      title: "Resource augmentation",
      desc: "AI, Cloud, and DevOps specialists with regulated-industry depth. Not generalists. Engineers who've shipped at banking scale.",
      cta: "Build your AI team",
      route: "/services/augmentation",
      Icon: IconUsers,
    },
    {
      num: "S/02",
      title: "Corporate training",
      desc: "Production-grade technical training in AI, Cloud-Native, and DevOps. Designed by practitioners who build enterprise systems, not instructors who read slides.",
      cta: "Request curriculum",
      route: "/services/training",
      Icon: IconBook,
    },
    {
      num: "S/03",
      title: "Applied research",
      desc: "R&D in private LLM deployment, AI inference optimization, and compliance-ready financial AI. Research that ships to production, not to a journal.",
      cta: "Start a research engagement",
      route: "/services/research",
      Icon: IconFlask,
    },
    {
      num: "S/04",
      title: "AORBIT™",
      desc: "The Autonomous Enterprise Intelligence Suite. Private AI infrastructure from GPU to governance. The architecture that absorbs change.",
      cta: "Explore AORBIT",
      route: "/aorbit",
      Icon: IconLayers,
      featured: true,
    },
  ];

  return (
    <section className="section" data-screen-label="07 Services">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-num">SECTION 07</div>
            <div className="eyebrow" style={{ marginTop: 8 }}>What we do</div>
          </div>
          <div>
            <h2>Beyond the platform.</h2>
          </div>
        </div>

        <div className="grid-2">
          {services.map((s, i) => (
            <div key={i} className={`service-card ${s.featured ? "featured" : ""}`} onClick={() => navigate(s.route)}>
              <div className="glow-blob" />
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                <s.Icon size={36} stroke={1.4} className="" />
                <span className="num">{s.num}</span>
              </div>
              <h3 style={s.featured ? { color: "var(--teal)" } : undefined}>{s.title}</h3>
              <p>{s.desc}</p>
              <div className="footer">
                <span>{s.cta}</span>
                <IconArrowRight size={14} />
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== SECTION 8: CLOSING CTA =====
   Copy source: Chunk 2 § Section 08.
   Three conversion tiers: (1) hot — Talk to an architect + See AORBIT in action,
   (2) warm — case-study link, (3) nurture — email subscribe with low-friction input.
*/

function ClosingCTA({ navigate }) {
  const [email, setEmail] = useHpState("");
  const [subscribed, setSubscribed] = useHpState(false);
  function submitNewsletter(e) {
    e.preventDefault();
    if (!email) return;
    setSubscribed(true);
  }

  return (
    <section className="section closing" data-screen-label="08 Closing CTA">
      <div className="hero-bg">
        <div className="grid-bg" />
        <div className="glow top-right" />
        <div className="glow bottom-left" />
      </div>
      <div className="container" style={{ position: "relative", zIndex: 1 }}>
        <div className="eyebrow" style={{ justifyContent: "center", display: "flex", marginBottom: 24 }}>Conversion</div>
        <h2>Ready to solve the architecture?</h2>

        <div className="closing-ctas">
          <button className="btn btn-primary" onClick={() => navigate("/talk-to-an-architect")}>
            Talk to an architect <IconArrowRight size={14} className="arrow" />
          </button>
          <button className="btn btn-ghost" onClick={() => navigate("/aorbit")}>
            See AORBIT™ in action <IconArrowRight size={14} className="arrow" />
          </button>
        </div>

        <div className="secondary-line">
          <span style={{ color: "var(--text-mute)" }}>Not ready for a conversation yet?</span>
          <a onClick={() => navigate("/why-doblier/case-studies")}>→ Read how we built private AI for 20+ banks</a>
        </div>

        <div className="newsletter">
          <div className="newsletter-head">
            <div className="eyebrow" style={{ justifyContent: "center", display: "flex" }}>Stay informed</div>
            <p>Subscribe to Doblier insights — architecture, private AI, and enterprise intelligence.</p>
          </div>
          {subscribed ? (
            <div className="newsletter-confirm">
              <span className="dot" /> Check your inbox — click the verification link to confirm. (Double opt-in required for GDPR.)
            </div>
          ) : (
            <>
              <form className="newsletter-form" onSubmit={submitNewsletter}>
                <input
                  type="email"
                  required
                  placeholder="you@enterprise.com"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  aria-label="Email address"
                  data-hj-suppress
                  data-clarity-mask
                />
                <button type="submit" className="btn btn-primary">Subscribe <IconArrowRight size={14} className="arrow" /></button>
              </form>
              <p className="newsletter-note">
                We'll send a verification email — you're not on the list until you click the link. Unsubscribe in one click, any time. By subscribing you agree to our{" "}
                <a href="#/privacy" onClick={(e) => { e.preventDefault(); navigate("/privacy"); }}>Privacy Policy</a>.
              </p>
            </>
          )}
        </div>
      </div>

      <style>{`
        .closing .secondary-line {
          margin-top: 40px;
          display: flex;
          gap: 16px;
          align-items: center;
          justify-content: center;
          flex-wrap: wrap;
          font-family: var(--font-mono);
          font-size: 12px;
          letter-spacing: 0.04em;
        }
        .closing .secondary-line a {
          color: var(--text);
          text-decoration: none;
          cursor: pointer;
          border-bottom: 1px solid var(--border);
          padding-bottom: 2px;
          transition: color .15s, border-color .15s;
        }
        .closing .secondary-line a:hover { color: var(--teal); border-color: var(--teal); }
        .closing .newsletter {
          margin-top: 72px;
          padding-top: 48px;
          border-top: 1px solid var(--border);
          max-width: 640px;
          margin-left: auto;
          margin-right: auto;
          text-align: center;
        }
        @media (max-width: 880px) {
          .closing .newsletter { margin-top: 40px; padding-top: 32px; }
        }
        .closing .newsletter-head p {
          color: var(--text-dim);
          font-size: 15px;
          line-height: 1.5;
          margin-top: 12px;
          margin-bottom: 24px;
        }
        .closing .newsletter-form {
          display: flex;
          gap: 8px;
          align-items: stretch;
          max-width: 480px;
          margin: 0 auto;
        }
        .closing .newsletter-form input {
          flex: 1;
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid var(--border);
          color: var(--text);
          padding: 14px 16px;
          font-family: var(--font-mono);
          font-size: 13px;
          letter-spacing: 0.02em;
          outline: none;
          transition: border-color .15s, background .15s;
        }
        .closing .newsletter-form input:focus {
          border-color: var(--teal);
          background: rgba(0, 212, 170, 0.04);
        }
        .closing .newsletter-form input::placeholder { color: var(--text-mute); }
        .closing .newsletter-note {
          margin: 16px auto 0;
          max-width: 56ch;
          font-size: 12px;
          color: var(--text-mute);
          line-height: 1.55;
        }
        .closing .newsletter-note a {
          color: var(--text-dim);
          text-decoration: none;
          border-bottom: 1px solid var(--border-bright);
          transition: color 0.15s, border-color 0.15s;
        }
        .closing .newsletter-note a:hover { color: var(--teal); border-color: var(--teal); }
        .closing .newsletter-confirm {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          font-family: var(--font-mono);
          font-size: 13px;
          color: var(--teal);
          letter-spacing: 0.02em;
        }
        .closing .newsletter-confirm .dot {
          width: 6px; height: 6px;
          background: var(--teal);
          border-radius: 50%;
          box-shadow: 0 0 12px var(--teal);
        }
        @media (max-width: 560px) {
          .closing .newsletter-form { flex-direction: column; }
        }
      `}</style>
    </section>
  );
}

/* ===== HOMEPAGE COMPOSITION ===== */

function Homepage({ navigate, tweaks, setTweak }) {
  const heroVariant = tweaks.heroVariant || "v1";
  const metaphor = tweaks.dataFlow || "pipeline";

  return (
    <main data-screen-label="Homepage">
      <Hero variant={heroVariant} navigate={navigate} />
      <ProblemPunch />
      <DataFlowSection metaphor={metaphor} setMetaphor={(m) => setTweak("dataFlow", m)} />
      <AorbitLayersSection navigate={navigate} />
      <ProductionProof />
      <EnhancementPhilosophy />
      <ServicesGrid navigate={navigate} />
      <ClosingCTA navigate={navigate} />
    </main>
  );
}

Object.assign(window, { Homepage, Hero, ProblemPunch, DataFlowSection, AorbitLayersSection, ProductionProof, EnhancementPhilosophy, ServicesGrid, ClosingCTA });