// Variant C — GTO Wizard G1 style.
// "Serious tool for serious operators". Product screenshot dominates the hero,
// compact/dense sections below, purple on near-black, extra motion.

function LandingC() {
  return (
    <div className="v-c">
      <NavC />
      <HeroC />
      <LogoStripC />
      <BentoC />
      <DeepDiveC />
      <SpecTableC />
      <TestimonialC />
      <FinalCtaC />
      <FooterC />

      <style>{`
        .v-c {
          background:
            radial-gradient(900px 500px at 50% -100px, rgba(124,92,252,0.18), transparent 60%),
            radial-gradient(700px 400px at 90% 10%, rgba(56,200,246,0.08), transparent 65%),
            #07060D;
          min-height: 100vh;
          color: var(--fg);
          --fg: #E8EAF5;
          --fg-muted: #8C90B0;
          --fg-dim: #5A5F7D;
          --border: rgba(255,255,255,0.07);
          --border-strong: rgba(255,255,255,0.12);
          --primary: #9387FF;
        }
        .v-c .container-c { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
        @media (max-width: 860px) { .v-c .container-c { padding: 0 20px; } }
        .v-c section { padding: 72px 0; }
        @media (max-width: 860px) { .v-c section { padding: 56px 0; } }
      `}</style>
    </div>
  );
}

// ─── Nav
function NavC() {
  return (
    <nav className="c-nav">
      <div className="container-c c-nav-inner">
        <DipoliLogoLockup size={26} />
        <div className="c-nav-links">
          <a href="#product">Product</a>
          <a href="#engine">Engine</a>
          <a href="#specs">Specs</a>
          <a href="#pricing">Pricing</a>
          <a href="#docs">Docs</a>
        </div>
        <div className="c-nav-right">
          <a className="c-nav-signin">Sign in</a>
          <button className="c-btn c-btn-primary c-btn-sm">
            Start free trial <IconArrowRight size={14} />
          </button>
        </div>
      </div>
      <style>{`
        .c-nav {
          position: sticky; top: 0; z-index: 60;
          backdrop-filter: blur(18px) saturate(1.2);
          background: rgba(7,6,13,0.72);
          border-bottom: 1px solid var(--border);
        }
        .c-nav-inner {
          display: flex; align-items: center; gap: 24px; height: 64px;
        }
        .c-nav-links { display: flex; gap: 4px; margin-left: 32px; }
        .c-nav-links a {
          padding: 8px 14px; border-radius: 8px; color: var(--fg-muted);
          font-size: 13.5px; font-weight: 500; transition: color 120ms, background 120ms;
          cursor: pointer;
        }
        .c-nav-links a:hover { color: var(--fg); background: rgba(255,255,255,0.03); }
        .c-nav-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
        .c-nav-signin { font-size: 13.5px; color: var(--fg-muted); cursor: pointer; }
        .c-nav-signin:hover { color: var(--fg); }

        .c-btn {
          display: inline-flex; align-items: center; gap: 8px;
          padding: 10px 16px; border-radius: 8px;
          border: 1px solid transparent;
          font-size: 13.5px; font-weight: 600;
          font-family: inherit;
          cursor: pointer; transition: all 160ms;
          white-space: nowrap;
        }
        .c-btn-sm { padding: 8px 14px; font-size: 13px; }
        .c-btn-primary {
          background: var(--primary); color: #0B0914;
          box-shadow: 0 0 0 1px rgba(147,135,255,0.25), 0 8px 24px -8px rgba(147,135,255,0.6);
        }
        .c-btn-primary:hover { background: #A89BFF; transform: translateY(-1px); }
        .c-btn-ghost { background: transparent; color: var(--fg); border-color: var(--border-strong); }
        .c-btn-ghost:hover { background: rgba(255,255,255,0.04); }
        .c-btn-lg { padding: 13px 22px; font-size: 14.5px; }

        @media (max-width: 900px) {
          .c-nav-links { display: none; }
        }
      `}</style>
    </nav>
  );
}

// ─── Hero — the big product screenshot is the visual
function HeroC() {
  const tabs = [
    { key: 'console', label: 'Operator console', hint: 'tx detail · verdict · layers' },
    { key: 'txns',    label: 'Transactions',     hint: 'live streaming view' },
    { key: 'block',   label: 'Blocklist',        hint: 'rules editor' },
  ];
  const [active, setActive] = React.useState('console');
  const [hovered, setHovered] = React.useState(null);

  // Auto-rotate every 6s unless hovered
  React.useEffect(() => {
    if (hovered) return;
    const iv = setInterval(() => {
      setActive(a => tabs[(tabs.findIndex(t => t.key === a) + 1) % tabs.length].key);
    }, 6000);
    return () => clearInterval(iv);
  }, [hovered]);

  return (
    <section className="c-hero">
      <div className="c-hero-grid" aria-hidden />
      <div className="c-hero-glow" aria-hidden />

      <div className="container-c">
        <Reveal>
          <div className="c-eyebrow">
            <span className="c-eyebrow-dot" />
            <span>DIPOLI / DECISION ENGINE · v3.2</span>
            <span className="c-eyebrow-sep">·</span>
            <span>SOC 2 · PCI-DSS · GDPR</span>
          </div>
        </Reveal>

        <Reveal delay={80}>
          <h1 className="c-h1">
            Three-layer transaction defense,<br />
            <span className="c-h1-accent">built for operators who can't be wrong.</span>
          </h1>
        </Reveal>

        <Reveal delay={160}>
          <p className="c-hero-lede">
            Rules, Model α, Model β. Every transaction scored by all three in under 60ms.
            No black box. Every verdict explained, auditable, reversible.
          </p>
        </Reveal>

        <Reveal delay={240}>
          <div className="c-hero-cta">
            <button className="c-btn c-btn-primary c-btn-lg">
              Start 14-day trial <IconArrowRight size={15} />
            </button>
            <button className="c-btn c-btn-ghost c-btn-lg">
              <IconEye size={14} /> See live demo
            </button>
            <span className="c-hero-micro">
              <IconCheck size={12} /> No card · Full API · Sample data included
            </span>
          </div>
        </Reveal>

        {/* Tab bar above the shot */}
        <Reveal delay={320}>
          <div className="c-shot-tabs" role="tablist">
            {tabs.map(t => (
              <button key={t.key}
                onClick={() => setActive(t.key)}
                className={'c-shot-tab' + (active === t.key ? ' active' : '')}
                role="tab" aria-selected={active === t.key}
              >
                <span className="c-shot-tab-label">{t.label}</span>
                <span className="c-shot-tab-hint">{t.hint}</span>
                {active === t.key && <span className="c-shot-tab-indicator" />}
              </button>
            ))}
            <div className="c-shot-auto">
              <span className="c-auto-dot" />
              <span>auto-rotating</span>
            </div>
          </div>
        </Reveal>

        {/* The big product shot */}
        <Reveal delay={400}>
          <div className="c-shot-frame"
            onMouseEnter={() => setHovered(true)}
            onMouseLeave={() => setHovered(false)}
          >
            <div className="c-shot-glow-outer" aria-hidden />
            <div className={'c-shot-stage c-shot-stage-' + active}>
              {active === 'console' && <ConsoleMockup />}
              {active === 'txns'    && <TransactionsTableMock />}
              {active === 'block'   && <BlocklistMock />}
            </div>
          </div>
        </Reveal>

        {/* KPI strip under the shot */}
        <Reveal delay={480}>
          <div className="c-kpi">
            <div className="c-kpi-cell">
              <div className="c-kpi-n mono"><CountUp to={39} suffix=" ms" /></div>
              <div className="c-kpi-l">p50 end-to-end verdict</div>
            </div>
            <div className="c-kpi-cell">
              <div className="c-kpi-n mono"><CountUp to={99.997} decimals={3} suffix="%" /></div>
              <div className="c-kpi-l">uptime · last 12 months</div>
            </div>
            <div className="c-kpi-cell">
              <div className="c-kpi-n mono"><CountUp to={2.4} decimals={1} prefix="" suffix="B" /></div>
              <div className="c-kpi-l">transactions scored / year</div>
            </div>
            <div className="c-kpi-cell">
              <div className="c-kpi-n mono"><CountUp to={0.03} decimals={2} suffix="%" /></div>
              <div className="c-kpi-l">false-block rate · rolling 30d</div>
            </div>
          </div>
        </Reveal>
      </div>

      <style>{`
        .c-hero {
          position: relative; padding-top: 64px; padding-bottom: 80px;
          overflow: hidden;
        }
        .c-hero-grid {
          position: absolute; inset: 0;
          background-image:
            linear-gradient(rgba(124,92,252,0.18) 1px, transparent 1px),
            linear-gradient(90deg, rgba(124,92,252,0.18) 1px, transparent 1px);
          background-size: 64px 64px;
          mask-image: radial-gradient(60% 70% at 50% 20%, black 0%, transparent 80%);
          opacity: 0.6;
          pointer-events: none;
        }
        .c-hero-glow {
          position: absolute; top: -140px; left: 50%; transform: translateX(-50%);
          width: 900px; height: 500px;
          background: radial-gradient(closest-side, rgba(124,92,252,0.45), transparent 70%);
          filter: blur(30px);
          pointer-events: none;
          animation: c-glow-drift 8s ease-in-out infinite;
        }
        @keyframes c-glow-drift {
          0%, 100% { opacity: 0.5; transform: translateX(-50%) translateY(0); }
          50% { opacity: 0.85; transform: translateX(-50%) translateY(20px); }
        }

        .c-eyebrow {
          display: inline-flex; align-items: center; gap: 10px;
          padding: 6px 14px; border-radius: 999px;
          border: 1px solid rgba(147,135,255,0.3);
          background: rgba(147,135,255,0.08);
          color: var(--primary);
          font-family: 'JetBrains Mono', monospace;
          font-size: 11px; letter-spacing: 0.08em; font-weight: 500;
        }
        .c-eyebrow-dot {
          width: 6px; height: 6px; border-radius: 50%;
          background: var(--primary);
          box-shadow: 0 0 10px var(--primary);
          animation: c-eye-pulse 2s ease-out infinite;
        }
        @keyframes c-eye-pulse {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.4; }
        }
        .c-eyebrow-sep { color: var(--fg-dim); }

        .c-h1 {
          font-size: 72px; line-height: 1; letter-spacing: -0.035em;
          font-weight: 600;
          margin: 20px 0 22px;
          max-width: 1000px;
          text-wrap: balance;
        }
        .c-h1-accent {
          background: linear-gradient(180deg, #C9C0FF, #9387FF 60%, #7C5CFC);
          -webkit-background-clip: text; background-clip: text; color: transparent;
        }
        .c-hero-lede {
          font-size: 18.5px; line-height: 1.55; color: var(--fg-muted);
          max-width: 640px; text-wrap: pretty;
        }
        .c-hero-cta {
          display: flex; align-items: center; gap: 14px;
          margin-top: 32px; flex-wrap: wrap;
        }
        .c-hero-micro {
          display: inline-flex; align-items: center; gap: 6px;
          color: var(--fg-muted); font-size: 12.5px;
        }
        .c-hero-micro svg { color: var(--primary); }

        .c-shot-tabs {
          display: flex; gap: 4px; align-items: flex-end;
          margin-top: 56px;
          padding: 0 4px;
          border-bottom: 1px solid var(--border);
        }
        .c-shot-tab {
          position: relative;
          display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
          padding: 12px 18px 14px;
          background: transparent; border: 0;
          color: var(--fg-muted); cursor: pointer;
          font-family: inherit;
          transition: color 160ms;
        }
        .c-shot-tab:hover { color: var(--fg); }
        .c-shot-tab.active { color: var(--fg); }
        .c-shot-tab-label { font-size: 13.5px; font-weight: 600; }
        .c-shot-tab-hint {
          font-family: 'JetBrains Mono', monospace;
          font-size: 10.5px; color: var(--fg-dim);
        }
        .c-shot-tab-indicator {
          position: absolute; bottom: -1px; left: 12px; right: 12px; height: 2px;
          background: var(--primary);
          box-shadow: 0 0 12px var(--primary);
          animation: c-ind-in 300ms cubic-bezier(.2,.9,.2,1);
        }
        @keyframes c-ind-in {
          0% { transform: scaleX(0.2); opacity: 0; }
          100% { transform: scaleX(1); opacity: 1; }
        }
        .c-shot-auto {
          margin-left: auto; align-self: center;
          display: inline-flex; align-items: center; gap: 6px;
          font-family: 'JetBrains Mono', monospace;
          font-size: 10.5px; color: var(--fg-muted);
          padding: 4px 10px; border-radius: 999px;
          background: rgba(255,255,255,0.03);
          border: 1px solid var(--border);
          text-transform: uppercase; letter-spacing: 0.08em;
        }
        .c-auto-dot {
          width: 5px; height: 5px; border-radius: 50%;
          background: var(--primary);
          animation: c-eye-pulse 2s ease-out infinite;
        }

        .c-shot-frame {
          position: relative;
          margin-top: 20px;
          border-radius: 16px;
          padding: 10px;
          background: linear-gradient(180deg, rgba(147,135,255,0.06), transparent);
          border: 1px solid var(--border);
        }
        .c-shot-glow-outer {
          position: absolute; inset: -40px;
          background: radial-gradient(50% 70% at 50% 0%, rgba(124,92,252,0.35), transparent 70%);
          filter: blur(40px);
          opacity: 0.7;
          z-index: -1;
          animation: c-glow-drift 6s ease-in-out infinite;
        }
        .c-shot-stage {
          animation: c-shot-in 520ms cubic-bezier(.2,.9,.2,1);
        }
        @keyframes c-shot-in {
          0% { opacity: 0; transform: translateY(12px) scale(0.99); }
          100% { opacity: 1; transform: translateY(0) scale(1); }
        }

        .c-kpi {
          display: grid; grid-template-columns: repeat(4, 1fr);
          gap: 0;
          margin-top: 40px;
          border: 1px solid var(--border);
          border-radius: 14px;
          overflow: hidden;
          background: rgba(255,255,255,0.015);
        }
        .c-kpi-cell {
          padding: 22px 24px;
          border-right: 1px solid var(--border);
        }
        .c-kpi-cell:last-child { border-right: 0; }
        .c-kpi-n {
          font-size: 30px; font-weight: 600; letter-spacing: -0.03em;
          color: var(--fg);
          font-variant-numeric: tabular-nums;
        }
        .c-kpi-l { font-size: 12px; color: var(--fg-muted); margin-top: 4px; }

        @media (max-width: 1000px) {
          .c-h1 { font-size: 52px; }
          .c-kpi { grid-template-columns: repeat(2, 1fr); }
          .c-kpi-cell { border-right: 0; border-bottom: 1px solid var(--border); }
          .c-kpi-cell:nth-child(odd) { border-right: 1px solid var(--border); }
          .c-kpi-cell:nth-child(n+3) { border-bottom: 0; }
        }
        @media (max-width: 720px) {
          .c-h1 { font-size: 40px; }
          .c-hero-lede { font-size: 16px; }
          .c-shot-tab-hint { display: none; }
          .c-shot-auto { display: none; }
        }
      `}</style>
    </section>
  );
}

// ─── Logo strip
function LogoStripC() {
  const logos = ['INXY', 'Lumen Labs', 'Nimbus Pay', 'Acme EU', 'Parallax', 'Hartwick', 'Merido', 'Blockwell'];
  return (
    <section className="c-logos">
      <div className="container-c">
        <div className="c-logos-label mono">Deployed by payment platforms processing $48B/yr</div>
        <div className="c-logos-row">
          {logos.map((l, i) => (
            <span key={l} className="c-logo-item" style={{ animationDelay: (i * 60) + 'ms' }}>{l}</span>
          ))}
        </div>
      </div>
      <style>{`
        .c-logos {
          padding: 36px 0 !important;
          border-top: 1px solid var(--border);
          border-bottom: 1px solid var(--border);
          background: rgba(255,255,255,0.015);
        }
        .c-logos-label {
          text-align: center;
          font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em;
          color: var(--fg-muted); font-weight: 500;
          margin-bottom: 20px;
        }
        .c-logos-row {
          display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px;
          align-items: center;
        }
        .c-logo-item {
          font-size: 20px; font-weight: 600; letter-spacing: -0.01em;
          color: var(--fg-muted); opacity: 0.6;
          font-family: 'Fraunces', serif;
          transition: all 300ms;
          animation: c-logo-in 600ms cubic-bezier(.2,.9,.2,1) backwards;
        }
        .c-logo-item:hover { color: var(--fg); opacity: 1; }
        @keyframes c-logo-in {
          0% { opacity: 0; transform: translateY(6px); }
          100% { opacity: 0.6; transform: translateY(0); }
        }
        @media (max-width: 860px) {
          .c-logos-row { justify-content: center; gap: 24px; }
          .c-logo-item { font-size: 16px; }
        }
      `}</style>
    </section>
  );
}

// ─── Bento — dense "what it does" grid
function BentoC() {
  return (
    <section id="product" className="c-bento">
      <div className="container-c">
        <Reveal>
          <div className="c-section-head">
            <span className="c-section-eyebrow mono">01 · WHAT IT DOES</span>
            <h2 className="c-h2">Not a model. A chain of defenses.</h2>
            <p className="c-section-lede">
              Every transaction is scored by rules, then two independent AI models that must either agree —
              or escalate to a human with a written reason.
            </p>
          </div>
        </Reveal>

        <div className="c-bento-grid">
          {/* Big feature: 3-layer engine */}
          <Reveal delay={60}>
            <div className="c-bento-cell c-bento-wide">
              <div className="c-bento-label mono">L1 + L2 + L3</div>
              <div className="c-bento-title">Three layers. One verdict. Every transaction.</div>
              <div className="c-bento-sub">
                Rules catch the obvious. Model α scores context. Model β breaks ties with a written rationale.
                Disagreement triggers a human, not a coin flip.
              </div>
              <div className="c-bento-fig">
                <LayerFlowMini />
              </div>
            </div>
          </Reveal>

          {/* Latency */}
          <Reveal delay={120}>
            <div className="c-bento-cell">
              <div className="c-bento-label mono">LATENCY</div>
              <div className="c-bento-stat">
                <span className="mono c-bento-stat-n"><CountUp to={39} suffix=" ms" /></span>
                <span className="c-bento-stat-sub">p50 · full chain</span>
              </div>
              <div className="c-bento-chart">
                <LatencyChart />
              </div>
              <div className="c-bento-note">p99 at 82ms. Under budget for inline scoring on every major processor.</div>
            </div>
          </Reveal>

          {/* Explainability */}
          <Reveal delay={180}>
            <div className="c-bento-cell">
              <div className="c-bento-label mono">EXPLAIN</div>
              <div className="c-bento-title">Every block has a reason, in plain English.</div>
              <div className="c-bento-sub">
                Model β writes the narrative. Feature contributions attached. Regulators and angry customers get the same clean answer.
              </div>
              <div className="c-bento-explain">
                <span className="pill pill-block">BLOCK · 92</span>
                <span className="c-bento-explain-text">
                  "Destination first seen 14 days ago on unrelated tenant. IP matches known laundering ring cluster. Escalation recommended."
                </span>
              </div>
            </div>
          </Reveal>

          {/* Reversible */}
          <Reveal delay={240}>
            <div className="c-bento-cell">
              <div className="c-bento-label mono">REVERSIBLE</div>
              <div className="c-bento-title">Every decision is a rollback away.</div>
              <div className="c-bento-sub">
                Replay any verdict against a new rule set or model version. A/B the chain on historical traffic before you ship.
              </div>
              <div className="c-bento-versions">
                <div className="c-ver-row"><span className="mono">v3.2</span><span className="c-ver-bar" style={{ width: '92%' }} /><span className="mono">current</span></div>
                <div className="c-ver-row"><span className="mono">v3.1</span><span className="c-ver-bar c-ver-bar-dim" style={{ width: '88%' }} /><span className="mono">shadow</span></div>
                <div className="c-ver-row"><span className="mono">v3.0</span><span className="c-ver-bar c-ver-bar-dim" style={{ width: '81%' }} /><span className="mono">archived</span></div>
              </div>
            </div>
          </Reveal>

          {/* Inline */}
          <Reveal delay={300}>
            <div className="c-bento-cell">
              <div className="c-bento-label mono">DEPLOY</div>
              <div className="c-bento-title">One endpoint. Drop in before authorization.</div>
              <div className="c-bento-sub">Single REST call. SDKs for Node, Python, Go, Java.</div>
              <div className="c-bento-code mono">
                <span className="c-code-dim">POST</span> /v3/decide<br />
                <span className="c-code-dim">→</span> {`{ "verdict": "BLOCK", "score": 92,`}<br />
                {`    "layer": "L1", "ms": 4 }`}
              </div>
            </div>
          </Reveal>

          {/* Audit */}
          <Reveal delay={360}>
            <div className="c-bento-cell c-bento-wide-2">
              <div className="c-bento-label mono">AUDIT</div>
              <div className="c-bento-title">Every layer, every feature, every millisecond — logged and queryable.</div>
              <div className="c-bento-sub">
                SOC 2 Type II. PCI-DSS 4.0. GDPR. Your auditor gets a read-only tenant, not a dance.
              </div>
              <div className="c-bento-compliance">
                {['SOC 2 Type II', 'PCI-DSS 4.0', 'GDPR', 'ISO 27001', 'HIPAA-ready', 'FINRA'].map(c => (
                  <span key={c} className="c-chip-compl"><IconCheck size={11} /> {c}</span>
                ))}
              </div>
            </div>
          </Reveal>
        </div>
      </div>

      <style>{`
        .c-section-head { max-width: 720px; margin-bottom: 48px; }
        .c-section-eyebrow {
          font-size: 11px; color: var(--primary);
          letter-spacing: 0.14em; font-weight: 500;
          display: block; margin-bottom: 16px;
        }
        .c-h2 {
          font-size: 48px; line-height: 1.05; letter-spacing: -0.03em;
          font-weight: 600; margin: 0;
          text-wrap: balance;
        }
        .c-section-lede {
          font-size: 17px; line-height: 1.55; color: var(--fg-muted);
          margin-top: 16px; max-width: 620px; text-wrap: pretty;
        }

        .c-bento-grid {
          display: grid;
          grid-template-columns: 2fr 1fr 1fr;
          grid-auto-rows: minmax(220px, auto);
          gap: 12px;
        }
        .c-bento-cell {
          padding: 24px;
          border: 1px solid var(--border);
          border-radius: 14px;
          background:
            linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.005));
          display: flex; flex-direction: column; gap: 12px;
          position: relative; overflow: hidden;
          transition: border-color 200ms, transform 200ms;
        }
        .c-bento-cell:hover { border-color: var(--border-strong); transform: translateY(-2px); }
        .c-bento-wide   { grid-column: span 2; grid-row: span 2; }
        .c-bento-wide-2 { grid-column: span 3; }
        .c-bento-label {
          font-size: 10.5px; color: var(--primary);
          letter-spacing: 0.14em; font-weight: 600;
        }
        .c-bento-title {
          font-size: 22px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2;
          color: var(--fg);
        }
        .c-bento-sub {
          font-size: 13.5px; line-height: 1.5; color: var(--fg-muted);
          text-wrap: pretty;
        }
        .c-bento-fig { margin-top: 12px; }

        .c-bento-stat { display: flex; align-items: baseline; gap: 12px; margin-top: 4px; }
        .c-bento-stat-n {
          font-size: 44px; font-weight: 600; letter-spacing: -0.03em;
          color: var(--fg);
        }
        .c-bento-stat-sub { font-size: 13px; color: var(--fg-muted); }
        .c-bento-chart { margin-top: 6px; }
        .c-bento-note { font-size: 12px; color: var(--fg-muted); margin-top: auto; }

        .c-bento-explain {
          margin-top: auto;
          padding: 12px; border-radius: 10px;
          background: rgba(255,94,120,0.06);
          border: 1px solid rgba(255,94,120,0.2);
          display: flex; gap: 10px; align-items: flex-start;
        }
        .c-bento-explain-text {
          font-size: 12px; line-height: 1.5; color: var(--fg);
          font-style: italic;
        }

        .c-bento-versions { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
        .c-ver-row {
          display: grid; grid-template-columns: 40px 1fr 70px;
          gap: 10px; align-items: center;
          font-size: 11px; color: var(--fg-muted);
        }
        .c-ver-bar {
          height: 4px; border-radius: 999px;
          background: var(--primary);
        }
        .c-ver-bar-dim { background: rgba(255,255,255,0.1); }

        .c-bento-code {
          margin-top: auto;
          padding: 14px; border-radius: 10px;
          background: rgba(0,0,0,0.35); border: 1px solid var(--border);
          font-size: 12px; line-height: 1.6; color: var(--fg);
        }
        .c-code-dim { color: var(--primary); }

        .c-bento-compliance { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
        .c-chip-compl {
          display: inline-flex; align-items: center; gap: 5px;
          padding: 5px 10px; border-radius: 999px;
          background: rgba(147,135,255,0.06);
          border: 1px solid rgba(147,135,255,0.2);
          font-size: 11.5px; color: var(--fg);
          font-weight: 500;
        }
        .c-chip-compl svg { color: var(--primary); }

        @media (max-width: 1000px) {
          .c-bento-grid { grid-template-columns: 1fr 1fr; }
          .c-bento-wide { grid-column: span 2; grid-row: auto; }
          .c-bento-wide-2 { grid-column: span 2; }
        }
        @media (max-width: 680px) {
          .c-bento-grid { grid-template-columns: 1fr; }
          .c-bento-wide, .c-bento-wide-2 { grid-column: span 1; }
          .c-h2 { font-size: 36px; }
        }
      `}</style>
    </section>
  );
}

// Mini flow used inside the bento wide cell
function LayerFlowMini() {
  return (
    <div className="lfm-wrap">
      {[
        { n: 'L1', label: 'Rules',   t: '3ms',  c: '#63D4E6' },
        { n: 'L2', label: 'Model α', t: '14ms', c: '#9387FF' },
        { n: 'L3', label: 'Model β', t: '22ms', c: '#81A8FF' },
      ].map((l, i) => (
        <React.Fragment key={l.n}>
          <div className="lfm-node" style={{ '--c': l.c, animationDelay: (i * 180) + 'ms' }}>
            <div className="lfm-pulse" />
            <span className="mono lfm-n">{l.n}</span>
            <span className="lfm-label">{l.label}</span>
            <span className="mono lfm-t">{l.t}</span>
          </div>
          {i < 2 && (
            <div className="lfm-arrow">
              <div className="lfm-beam" style={{ animationDelay: (i * 0.3) + 's' }} />
              <svg width="16" height="8" viewBox="0 0 16 8" fill="none"><path d="M1 4h12m-3-3 3 3-3 3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </div>
          )}
        </React.Fragment>
      ))}
      <div className="lfm-verdict">
        <span className="mono" style={{ fontSize: 9.5, color: 'var(--fg-muted)', letterSpacing: '0.1em' }}>VERDICT</span>
        <span className="mono" style={{ fontSize: 20, fontWeight: 600, color: 'var(--approve)' }}>39ms</span>
      </div>

      <style>{`
        .lfm-wrap { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
        .lfm-node {
          flex: 1; min-width: 90px;
          padding: 12px; border-radius: 10px;
          background: rgba(255,255,255,0.02);
          border: 1px solid var(--c);
          display: flex; flex-direction: column; gap: 3px;
          position: relative; overflow: hidden;
          animation: lfm-in 500ms cubic-bezier(.2,.9,.2,1) backwards;
        }
        @keyframes lfm-in {
          0% { opacity: 0; transform: translateY(8px); }
          100% { opacity: 1; transform: translateY(0); }
        }
        .lfm-pulse {
          position: absolute; top: 0; left: -10%; width: 20%; height: 100%;
          background: linear-gradient(90deg, transparent, var(--c), transparent);
          opacity: 0.35;
          animation: lfm-swipe 3.5s linear infinite;
        }
        @keyframes lfm-swipe {
          0% { transform: translateX(0); }
          100% { transform: translateX(600%); }
        }
        .lfm-n {
          display: inline-block;
          padding: 2px 6px; border-radius: 4px;
          font-size: 10px; font-weight: 700;
          background: color-mix(in srgb, var(--c) 16%, transparent);
          color: var(--c);
          align-self: flex-start;
        }
        .lfm-label { font-size: 13px; font-weight: 600; color: var(--fg); }
        .lfm-t { font-size: 11px; color: var(--fg-muted); }
        .lfm-arrow {
          position: relative;
          display: flex; align-items: center; color: var(--fg-dim);
          align-self: center;
        }
        .lfm-beam {
          position: absolute; left: 0; top: 50%; transform: translateY(-50%);
          width: 4px; height: 4px; border-radius: 50%;
          background: var(--primary); box-shadow: 0 0 10px var(--primary);
          animation: lfm-flow 1.6s ease-in-out infinite;
        }
        @keyframes lfm-flow {
          0% { left: 0; opacity: 0; }
          20% { opacity: 1; }
          100% { left: 16px; opacity: 0; }
        }
        .lfm-verdict {
          padding: 12px 14px; border-radius: 10px;
          background: rgba(101,217,124,0.06);
          border: 1px solid rgba(101,217,124,0.25);
          display: flex; flex-direction: column; gap: 2px;
          justify-content: center;
        }
      `}</style>
    </div>
  );
}

// Latency sparkline under the bento stat
function LatencyChart() {
  const data = [42, 38, 45, 41, 39, 47, 40, 38, 36, 41, 43, 39, 37, 40, 38, 39];
  return (
    <div style={{ position: 'relative', height: 60 }}>
      <svg width="100%" height="60" viewBox="0 0 240 60" preserveAspectRatio="none">
        <defs>
          <linearGradient id="lc-grad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#9387FF" stopOpacity="0.3" />
            <stop offset="100%" stopColor="#9387FF" stopOpacity="0" />
          </linearGradient>
        </defs>
        {/* target band */}
        <rect x="0" y="18" width="240" height="20" fill="rgba(101,217,124,0.08)" />
        <line x1="0" y1="28" x2="240" y2="28" stroke="rgba(101,217,124,0.3)" strokeWidth="0.5" strokeDasharray="2 3" />
        {(() => {
          const max = 50, min = 30;
          const pts = data.map((v, i) => {
            const x = (i / (data.length - 1)) * 240;
            const y = 60 - ((v - min) / (max - min)) * 54 - 3;
            return x.toFixed(1) + ',' + y.toFixed(1);
          });
          const path = 'M ' + pts.join(' L ');
          return (
            <>
              <path d={path + ` L 240,60 L 0,60 Z`} fill="url(#lc-grad)" />
              <path d={path} stroke="#9387FF" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />
              {data.map((v, i) => {
                const x = (i / (data.length - 1)) * 240;
                const y = 60 - ((v - min) / (max - min)) * 54 - 3;
                return <circle key={i} cx={x} cy={y} r={i === data.length - 1 ? 3 : 1.5} fill="#9387FF" />;
              })}
            </>
          );
        })()}
      </svg>
      <span style={{ position: 'absolute', top: 4, right: 4, fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: 'var(--fg-muted)' }}>
        target &lt; 50ms
      </span>
    </div>
  );
}

Object.assign(window, { LandingC, LayerFlowMini, LatencyChart });
