/* ============================================================
   NeuroRoute — Landing: the narrative sections.
   Problem-led story: the leak → right model → one API →
   compression → spend control → security → compare → more.
   Every claim maps to a shipped capability. No fabricated
   customers, logos, or certifications.
   ============================================================ */

/* 1 + 2 — Where the money leaks: overburnt tokens + the
   "most-powerful-model-as-default" trap. */
function TheLeakSection(){
  const leaks=[
    {ic:'trenddown', c:'magenta', t:'The default-to-flagship trap',
      d:'Someone wires the most powerful model as the default "to be safe," and every request — a one-line classification, a status summary, a yes/no — now bills at flagship rates. The single most expensive line in the model list quietly becomes 100% of traffic.'},
    {ic:'billing', c:'amber', t:'Tokens you never see',
      d:'Retries, oversized system prompts re-sent on every call, verbose RAG context, uncapped max_tokens, runaway agent loops. None of it shows on a dashboard until the invoice lands — and by then a quarter of the bill is boilerplate nobody read.'},
    {ic:'alert', c:'blue', t:'No line-item truth',
      d:'Provider invoices are a single monthly number. You cannot see which team, which key, or which feature burned it — so you cannot fix it. Spend grows faster than usage and nobody can say exactly why.'},
  ];
  return (
    <section id="leak" className="lp-sec">
      <div className="lp-head">
        <div className="eyebrow" style={{color:'var(--magenta)'}}>THE PROBLEM</div>
        <h2 className="display lp-h2">Your AI bill compounds<br/><span className="route-text">while you're not looking.</span></h2>
        <p className="lp-p">AI spend rarely blows up in one dramatic moment. It leaks — a little on every call, on every key, every day — until finance asks why the model line grew 4× and engineering has no answer. Here's where it goes.</p>
      </div>
      <div className="feat-grid" style={{gridTemplateColumns:'repeat(3,1fr)'}}>
        {leaks.map(l=>(
          <div key={l.t} className="card card-pad">
            <div className="m-ico" style={{background:`var(--${l.c}-t)`,color:`var(--${l.c})`,width:44,height:44,borderRadius:12}}><Icon name={l.ic} size={22}/></div>
            <h3 style={{fontSize:16.5,margin:'15px 0 8px'}}>{l.t}</h3>
            <p className="muted" style={{fontSize:13.5,margin:0,lineHeight:1.6}}>{l.d}</p>
          </div>
        ))}
      </div>
      <div className="card card-pad leak-note">
        <Icon name="alert" size={20} style={{color:'var(--amber)',flexShrink:0}}/>
        <div><b>Left unchecked, this is a six- or seven-figure problem.</b> A team that defaults every request to a flagship model typically overpays by <span className="route-text">10–50×</span> on the majority of its traffic — spend that buys no extra quality, because most requests never needed the flagship in the first place.</div>
      </div>
    </section>
  );
}

/* 3 — Cheaper models deliver equivalent results at a fraction of the cost.
   Uses the real model catalog (window.DATA.MODELS) for the comparison. */
function RightModelSection(){
  var M = (window.DATA && window.DATA.MODELS) || [];
  var by = function(id){ return M.find(function(m){return m.id===id;}) || {out:0,q:0,name:id}; };
  var flagship = by('claude-opus-4-8');
  var rows = [
    {label:'Flagship default', m:flagship, hot:true},
    {label:'Balanced pick', m:by('claude-sonnet-4-6')},
    {label:'Fast + capable', m:by('vertex-gemini-3.5-flash')},
    {label:'Cheapest that clears the bar', m:by('vertex-gemini-3.1-flash-lite')},
  ].filter(function(r){return r.m && r.m.out;});
  var mult = function(r){ return flagship.out && r.m.out ? Math.round(flagship.out / r.m.out) : 1; };
  return (
    <section id="right-model" className="lp-sec">
      <div className="lp-head">
        <div className="eyebrow" style={{color:'var(--green)'}}>THE FIX</div>
        <h2 className="display lp-h2">Same answer.<br/><span className="route-text">A fraction of the price.</span></h2>
        <p className="lp-p">A cheaper model isn't a worse answer — for most tasks it's the <i>same</i> answer for cents on the dollar. NeuroRoute classifies each request and routes it to the cheapest model that still clears the quality bar you set. You keep the quality; you stop paying flagship rates for lookups.</p>
      </div>
      <div className="card card-pad">
        <div className="rm-head"><span>Model</span><span>Quality index</span><span>Output $ / 1M</span><span>vs flagship</span></div>
        {rows.map(function(r){
          return (
            <div key={r.m.id} className={'rm-row'+(r.hot?' rm-hot':'')}>
              <span><b>{r.m.name}</b><em className="faint" style={{display:'block',fontSize:11.5,fontStyle:'normal'}}>{r.label}</em></span>
              <span><span className="rm-q"><span style={{width:(r.m.q||0)+'%'}}/></span><em className="mono" style={{fontStyle:'normal',fontSize:12}}>{r.m.q}</em></span>
              <span className="mono">${(r.m.out||0).toFixed(2)}</span>
              <span>{r.hot ? <em className="faint" style={{fontStyle:'normal'}}>baseline</em> : <b className="route-text">{mult(r)}× cheaper</b>}</span>
            </div>
          );
        })}
        <div className="rm-foot faint">Published list prices from the live catalog. A quality index of 90 vs 98 is imperceptible on a summary or a classification — but it's the difference between <b className="route-text">${(flagship.out||0).toFixed(2)}</b> and <b className="route-text">${(by('vertex-gemini-3.5-flash').out||0).toFixed(2)}</b> per million output tokens.</div>
      </div>
    </section>
  );
}

/* 5 — One API, every model, least cost, no upfront commit. */
function OneApiSection(){
  const points=[
    {ic:'link', c:'purple', t:'Change one line', d:'Point your OpenAI base URL at NeuroRoute. Same request format, same SDKs, streaming, tools and multimodal. Nothing else in your code changes.'},
    {ic:'route', c:'blue', t:'Reach every provider', d:'OpenAI, Anthropic, Google, Vertex, Azure, AWS Bedrock, Groq, xAI, DeepInfra, self-hosted vLLM — 30+ models behind one endpoint. No per-provider integrations, no SDK sprawl.'},
    {ic:'dollar', c:'green', t:'Predictable, metered pricing', d:"Keep your own provider keys and pay providers directly at published rates; NeuroRoute adds a flat monthly fee plus a transparent per-1M-token rate. No minimums, no seats-you-don't-use, model your bill before you send a request."},
    {ic:'sparkles', c:'cyan', t:'Always the least-cost route', d:'Seven strategies — cheapest, fastest, best-quality, balanced, task-aware, cascade (cheap-first, escalate only on failure), and Fusion (fan the prompt to the top-N models in parallel; an independent judge picks the best answer). Set the strategy per key or per request.'},
  ];
  return (
    <section id="one-api" className="lp-sec">
      <div className="lp-head">
        <div className="eyebrow">ONE ENDPOINT</div>
        <h2 className="display lp-h2">Every model.<br/>One <span className="gradient-text">API key.</span></h2>
        <p className="lp-p">Stop maintaining six provider integrations and guessing which model is cheapest today. Integrate once; NeuroRoute picks the model per request and you pay only for what actually ran.</p>
      </div>
      <div className="feat-grid">
        {points.map(p=>(
          <div key={p.t} className="card card-pad">
            <div className="m-ico" style={{background:`var(--${p.c}-t)`,color:`var(--${p.c})`,width:44,height:44,borderRadius:12}}><Icon name={p.ic} size={22}/></div>
            <h3 style={{fontSize:16.5,margin:'15px 0 8px'}}>{p.t}</h3>
            <p className="muted" style={{fontSize:13.5,margin:0,lineHeight:1.6}}>{p.d}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

/* 6 — Input-token compression for logs analysis / RAG. */
function CompressionSection(){
  return (
    <section id="compression" className="lp-sec">
      <div className="lp-head">
        <div className="eyebrow" style={{color:'var(--cyan)'}}>TOKEN COMPRESSION</div>
        <h2 className="display lp-h2">Pay for the signal,<br/><span className="route-text">not the boilerplate.</span></h2>
        <p className="lp-p">Log analysis, RAG, and long-context prompts are mostly repetition — stack traces, duplicated retrieved chunks, framing that never changes. NeuroRoute's compression pipeline strips the redundancy <i>before</i> the request is billed, so you pay for meaning, not filler.</p>
      </div>
      <div className="roi-card">
        <div>
          <div className="comp-stack">
            {[['normalize','Whitespace, JSON minify, dedup','blue'],
              ['command-output','Truncates logs, diffs & traces','amber'],
              ['rag-dedup','Drops repeated retrieved chunks','purple'],
              ['llmlingua-2','ML compression of long prose','cyan']].map(function(e){
              return <div key={e[0]} className="comp-eng"><span className={'comp-dot comp-'+e[2]}/><b className="mono" style={{fontSize:12.5}}>{e[0]}</b><span className="faint" style={{fontSize:12.5}}>{e[1]}</span></div>;
            })}
          </div>
        </div>
        <div className="roi-out" style={{gridTemplateColumns:'1fr 1fr'}}>
          <div className="roi-stat"><div className="roi-v route-text">~40%</div><div className="faint" style={{fontSize:12.5}}>typical input-token cut on long prose</div></div>
          <div className="roi-stat"><div className="roi-v route-text">0</div><div className="faint" style={{fontSize:12.5}}>code changes — it runs in the pipeline</div></div>
          <div className="roi-stat" style={{gridColumn:'1 / -1'}}><div className="faint" style={{fontSize:12.5,lineHeight:1.6}}>Composable and per-key configurable. Every response reports its compression ratio and tokens saved, so the savings are auditable — not a claim you have to trust.</div></div>
        </div>
      </div>
    </section>
  );
}

/* 4 + 7 + 8 — Spend control, blast radius, quotas. */
function SpendControlSection(){
  const tiers=[
    {t:'Per agent run', c:'cyan', d:'Declare a $ cap for a multi-step agent loop with a single header. The run is stopped the moment it exceeds the cap — before any overage reaches your key or org limit.'},
    {t:'Per key', c:'blue', d:'Give each app, environment, or teammate its own daily and monthly $ cap. A runaway loop or a leaked key stops at its own limit — not your whole budget.'},
    {t:'Per organization', c:'purple', d:'A hard daily and monthly ceiling across everything. Reached it? Requests are rejected before they cost a cent, with clear headers so clients can back off gracefully.'},
    {t:'Platform-wide', c:'magenta', d:'A global guardrail across every customer and key — the last line of defense against a bad day cascading into a bad invoice.'},
  ];
  return (
    <section id="spend-control" className="lp-sec">
      <div className="lp-head">
        <div className="eyebrow" style={{color:'var(--blue)'}}>SPEND CONTROL &amp; BLAST RADIUS</div>
        <h2 className="display lp-h2">A leaked key shouldn't cost<br/>you <span className="route-text">a million dollars.</span></h2>
        <p className="lp-p">A compromised service account or a committed API key can burn six or seven figures in a single day — modern models are fast enough to spend faster than any human notices. NeuroRoute caps the blast radius before it happens.</p>
      </div>
      <div className="card card-pad breach">
        <div className="breach-col breach-bad">
          <div className="breach-h"><Icon name="alert" size={17} style={{color:'#ff8095'}}/> Without quotas</div>
          <p className="muted" style={{fontSize:13.5,margin:0,lineHeight:1.6}}>Key leaks at 2am → attacker (or a bug) hammers the most expensive model → unbounded spend all night → you find out from the invoice, days later. Nothing stopped it.</p>
        </div>
        <div className="breach-col breach-good">
          <div className="breach-h"><Icon name="shield" size={17} style={{color:'#43d6a3'}}/> With NeuroRoute quotas</div>
          <p className="muted" style={{fontSize:13.5,margin:0,lineHeight:1.6}}>Same leak → that key hits its <b>$50 daily cap</b> in minutes and every further request is rejected at the door. Damage is bounded to one key's limit. The rest of the org never notices.</p>
        </div>
      </div>
      <div className="feat-grid" style={{gridTemplateColumns:'repeat(4,1fr)',marginTop:18}}>
        {tiers.map(t=>(
          <div key={t.t} className="card card-pad">
            <div className="row" style={{gap:9,marginBottom:9}}><span className="tier-dot" style={{background:`var(--${t.c})`}}/><h3 style={{fontSize:15.5,margin:0}}>{t.t}</h3></div>
            <p className="muted" style={{fontSize:13,margin:0,lineHeight:1.6}}>{t.d}</p>
          </div>
        ))}
      </div>
      <p className="lp-p" style={{textAlign:'center',maxWidth:760}}>Every dollar is measured against actual provider cost, in absolute USD, on daily and monthly windows — with an early-warning header as a key approaches its limit. Set it once from the dashboard; enforcement happens before any model is ever called.</p>
    </section>
  );
}

/* 10 — Security: the full data-trust arc.
   Store nothing → encrypt what you keep → erase on demand → port out. */
function SecuritySection(){
  const items=[
    {ic:'shield', c:'magenta', t:'Zero Data Retention — provable', d:"Choose your posture per org: zero-retention modes store nothing at all — no conversations, no caches, nothing to breach. And you don't have to take our word for it: every single response carries an X-Data-Retention header proving the posture it was served under."},
    {ic:'lock', c:'green', t:'Encrypted under a key you can hold', d:'If you do retain, content is sealed with per-org AES-256-GCM keys wrapped by Cloud KMS, rotated on schedule. Bring your own KMS key (CMEK) from your own cloud project — revoke our access and your data, including backups, becomes unreadable instantly. Your kill switch, not ours.'},
    {ic:'trash', c:'blue', t:'Erase everything. Prove it.', d:'One-click right-to-be-forgotten: a 7-day cancelable grace, then content is deleted, credentials revoked, identity anonymized, and your encryption key crypto-shredded — finished with a completion certificate. Full GDPR data export (JSON or CSV) any time before or after.'},
    {ic:'key', c:'cyan', t:'Your provider keys, sealed', d:'BYOK keys live envelope-encrypted in a managed secret store, used only to call providers and never exposed back — not in logs, not in the UI, not in exports, not to other tenants.'},
    {ic:'alert', c:'amber', t:'PII never leaves by accident', d:"Every request is scanned before routing with checksum-validated detectors (Luhn for cards, Verhoeff for national IDs) that don't cry wolf on invoice numbers. Per-org policy: keep sensitive traffic on self-hosted models, block it, or allow it — enforced automatically."},
    {ic:'route', c:'purple', t:'Signed, scoped, and audited', d:'HMAC request signing, ECDSA JWT sessions, OAuth 2.1 for agent tooling, role-based access control, org-scoped queries down to the SQL, and an audit trail on every admin action. Metadata-only logs — prompt and response bodies are never written to logs.'},
  ];
  return (
    <section id="security" className="lp-sec">
      <div className="lp-head">
        <div className="eyebrow" style={{color:'var(--amber)'}}>SECURITY &amp; PRIVACY</div>
        <h2 className="display lp-h2">Your keys. Your data.<br/><span className="route-text">Locked down — provably.</span></h2>
        <p className="lp-p">Putting a gateway in front of every AI call only makes sense if the gateway is the most trustworthy thing in the path. Our data lifecycle is simple: store nothing by default, encrypt what you choose to keep, erase it on demand, and export it whenever you want. A security whitepaper, CAIQ-Lite self-assessment, and provider zero-retention checklist ship with the product.</p>
      </div>
      <div className="feat-grid">
        {items.map(i=>(
          <div key={i.t} className="card card-pad">
            <div className="m-ico" style={{background:`var(--${i.c}-t)`,color:`var(--${i.c})`,width:44,height:44,borderRadius:12}}><Icon name={i.ic} size={22}/></div>
            <h3 style={{fontSize:16.5,margin:'15px 0 8px'}}>{i.t}</h3>
            <p className="muted" style={{fontSize:13.5,margin:0,lineHeight:1.6}}>{i.d}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

/* Loads comparison-table.svg and INLINES it into the DOM rather than pointing an
   <img> at it. Three reasons, in order of how much they matter:

     1. Inlined SVG <text> is real DOM text — selectable, searchable, readable by
        a screen reader and indexable. An <img> would have made 23 rows of
        substantiated competitive claims invisible to all four, which is a poor
        trade for a marketing page whose whole argument lives in that table.
     2. It renders reliably. The <img> form decoded correctly (canvas sampling
        confirmed the pixels) yet composited as a blank rectangle in-page.
     3. It stays a single generated file — no duplicated markup to drift.

   Fail-soft: a fetch error leaves the section with its heading and footnote
   rather than throwing the landing page into the error boundary. */
function CompareSVG(){
  var pair = useState('');
  var markup = pair[0], setMarkup = pair[1];
  useEffect(function(){
    var alive = true;
    fetch('/comparison-table.svg?v=180')
      .then(function(r){ return r.ok ? r.text() : Promise.reject(r.status); })
      .then(function(t){ if(alive) setMarkup(t); })
      .catch(function(){ /* leave empty; the section still reads without it */ });
    return function(){ alive = false; };
  }, []);
  if(!markup) return <div className="card" style={{minHeight:240}}/>;
  return (
    <div className="card cmp-svg" style={{overflowX:'auto',padding:0}}
         dangerouslySetInnerHTML={{__html: markup}}/>
  );
}

/* 9 — Competitive landscape. */
function CompareSection(){
  // Columns: NeuroRoute, RouteLLM, OpenRouter, LiteLLM, Portkey.
  // Graded fairly on out-of-the-box capability; "partial" used generously.
  //
  // SOURCE OF TRUTH. `rows` is no longer rendered as a DOM table — it is parsed
  // by tools/marketing/gen_comparison_svg.py, which emits comparison-table.svg,
  // the image this section displays. Editing a cell here therefore changes
  // nothing on the page until the generator is re-run:
  //     python3 tools/marketing/gen_comparison_svg.py
  // The script's own verifier diffs the emitted SVG back against this array, so
  // a silent divergence between the data and the graphic is not possible.
  // Keep the arrays here rather than in the script: this is where a reviewer
  // looks for the claims, and it keeps the grading next to the copy it supports.
  const cols=['NeuroRoute','RouteLLM','OpenRouter','LiteLLM','Portkey'];
  const rows=[
    ['Multi-provider from one API',           true, 'partial', true,      true,      true],
    ['Automatic cost-based routing',          true, true,      'partial', 'partial', 'partial'],
    ['Task-aware, quality-bar routing',       true, 'partial', false,     false,     'partial'],
    ['Learns from your own feedback',         true, 'partial', false,     false,     false],
    ['Auto-escalates on empty/failed responses',true,false,    'partial', 'partial', 'partial'],
    ['Keep your own keys (BYOK)',             true, true,      'partial', true,      true],
    ['Per-key + org $ spend quotas',          true, false,     'partial', true,      true],
    ['Input-token compression',               true, false,     false,     false,     false],
    ['Semantic + prompt caching',             true, false,     'partial', 'partial', true],
    ['PII detection & routing policy',        true, false,     false,     'partial', 'partial'],
    ['Input & output guardrails',             true, false,     false,     'partial', true],
    ['Request-log search + OpenTelemetry',    true, false,     'partial', true,      true],
    ['SSO, workspaces & scoped keys',         true, false,     'partial', 'partial', true],
    ['Multi-workspace membership & key assignment',true,'n/a', false,     'partial', 'partial'],
    ['Per-member least-privilege scoping',    true, 'n/a',     false,     'partial', 'partial'],
    ['Person + workspace-level audit trail',  true, 'n/a',     false,     'partial', 'partial'],
    ['Provable zero-retention (per response)',true, 'partial', 'partial', 'partial', 'partial'],
    ['Encryption at rest + CMEK',             true, 'n/a',     false,     'partial', 'partial'],
    ['Crypto-shred erasure + GDPR export',    true, false,     false,     false,     'partial'],
    ['MCP access (OAuth 2.1)',                true, false,     false,     false,     false],
    ['Self-hosted models (vLLM)',             true, true,      false,     true,      'partial'],
    ['Per-request savings proof',             true, false,     'partial', 'partial', 'partial'],
    ['Transparent tier pricing, no % of savings',true,'partial','partial','partial','partial'],
  ];
  // `cols`/`rows` are referenced so a linter cannot strip the source data now
  // that nothing renders it directly.
  void cols; void rows;
  return (
    <section id="compare" className="lp-sec">
      <div className="lp-head">
        <div className="eyebrow">HOW WE COMPARE</div>
        <h2 className="display lp-h2">Routers save tokens.<br/>We save tokens <span className="route-text">and guard the bill.</span></h2>
        <p className="lp-p">Plenty of tools can fan out to multiple models — and several do parts of this well. Very few treat <b>cost governance and data-trust</b> as first-class alongside routing. Here's the honest landscape against the tools teams actually evaluate.</p>
      </div>
      <CompareSVG/>
      <p className="lp-p faint" style={{textAlign:'center',fontSize:12.5,maxWidth:820}}>RouteLLM (LMSYS) is an open-source strong/weak routing model; OpenRouter is a hosted multi-model aggregator; LiteLLM is an open-source multi-provider proxy with budgets &amp; caching; Portkey is a commercial AI gateway with guardrails. All are capable tools — this reflects out-of-the-box capability as commonly deployed and will vary by version and configuration. Corrections welcome.</p>
    </section>
  );
}

/* 11 — More that pays for itself. */
function MoreSection(){
  const more=[
    {ic:'sparkles', c:'cyan', t:'Semantic + prompt caching', d:'Repeated and near-duplicate prompts return from cache; supported providers cache your system prefix for up to ~90% off repeated input tokens.'},
    {ic:'route', c:'blue', t:'7 strategies, including Fusion', d:'Cascade (cheap-first, escalate on failure), task-aware, and now Fusion — fan the same prompt to the top-N models in parallel; an independent judge picks the winner verbatim. No merged or hallucinated answers.'},
    {ic:'link', c:'purple', t:'Native MCP server', d:'Use NeuroRoute directly from Claude, IDEs, and agents over the Model Context Protocol — with OAuth 2.1 click-to-connect.'},
    {ic:'shield', c:'amber', t:'Self-hosted option', d:'Route sensitive or high-volume workloads to your own vLLM models on your own hardware, through the same API.'},
    {ic:'billing', c:'green', t:'Observability built in', d:'Every decision is explainable: paste a request ID into the Routing Explorer to see which models were considered and why one won — or search the full request log by your own metadata tags.'},
    {ic:'trenddown', c:'magenta', t:'Learns your workload', d:'Thumbs-up / down feedback tunes routing to your definition of quality — not a generic benchmark. The longer you run, the sharper it gets.'},
  ];
  return (
    <section id="more" className="lp-sec">
      <div className="lp-head">
        <div className="eyebrow">AND MORE</div>
        <h2 className="display lp-h2">Every lever that moves<br/>the <span className="route-text">bill and the risk.</span></h2>
      </div>
      <div className="feat-grid" style={{gridTemplateColumns:'repeat(3,1fr)'}}>
        {more.map(m=>(
          <div key={m.t} className="card card-pad">
            <div className="m-ico" style={{background:`var(--${m.c}-t)`,color:`var(--${m.c})`,width:40,height:40,borderRadius:11}}><Icon name={m.ic} size={20}/></div>
            <h3 style={{fontSize:15.5,margin:'13px 0 7px'}}>{m.t}</h3>
            <p className="muted" style={{fontSize:13,margin:0,lineHeight:1.55}}>{m.d}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

/* 12 — Enterprise & governance: the platform layer shipped over the last sprints. */
function EnterpriseSection(){
  const cards=[
    {ic:'shield', c:'amber', t:'Guardrails, in and out', d:'A configurable rule pipeline screens prompts and responses — PII redaction, banned content, custom webhook checks. Per-org and per-key, fail-closed, with blocked requests logged for review.'},
    {ic:'search', c:'cyan', t:'Full request-log observability', d:'Search every request by model, cost, status, or your own custom metadata tags. Stream traces to your own APM over OpenTelemetry, with usage rollups and SLO dashboards built in.'},
    {ic:'team', c:'blue', t:'SSO, workspaces & roles', d:'Log in with your identity provider via generic OIDC single sign-on. Split an org into workspaces (teams), assign granular roles (viewer, member, billing, admin), and issue scoped service keys limited to exactly what they need.'},
    {ic:'layers', c:'purple', t:'Bring any model', d:"Beyond the built-in providers: register any OpenAI-compatible endpoint, use Azure OpenAI, tap DeepInfra's 10-vendor open-weight catalog with automatic OpenRouter failover, or point at your own self-hosted models."},
    {ic:'route', c:'magenta', t:'Config-as-code routing', d:'Version your routing policy like code: pin a model or run a weighted A/B split, matched on request metadata and workspace — reviewed, rolled forward, and rolled back without a redeploy.'},
    {ic:'bell', c:'green', t:'Automation & alerts', d:"Scheduled usage exports to your cloud storage, event webhooks (budget tripped, key created, data erased) signed with HMAC, and spend alerts over email or webhook — so the platform tells you, you don't have to watch it."},
    {ic:'analytics', c:'cyan', t:'Eval framework', d:'Benchmark models and routing strategies against your own prompt suites — quality score, cost, and latency per case. Compare a routing-config version against a model pin or a strategy override before you promote it to production.'},
    {ic:'trenddown', c:'amber', t:'Model catalog + auto-decommission', d:'A weekly sync discovers new models from every provider. A model unreachable for 48 hours is flagged for decommission. Admins promote discovered models to live routing with one click — and the catalog never hard-deletes anything.'},
  ];
  return (
    <section id="enterprise" className="lp-sec">
      <div className="lp-head">
        <div className="eyebrow" style={{color:'var(--blue)'}}>ENTERPRISE-READY</div>
        <h2 className="display lp-h2">Everything the platform team<br/>asks for <span className="route-text">before they say yes.</span></h2>
        <p className="lp-p">Cost and routing get you in the door; governance, observability and control get you through procurement. All of it shipped and live today.</p>
      </div>
      <div className="feat-grid" style={{gridTemplateColumns:'repeat(3,1fr)'}}>
        {cards.map(m=>(
          <div key={m.t} className="card card-pad">
            <div className="m-ico" style={{background:`var(--${m.c}-t)`,color:`var(--${m.c})`,width:40,height:40,borderRadius:11}}><Icon name={m.ic} size={20}/></div>
            <h3 style={{fontSize:15.5,margin:'13px 0 7px'}}>{m.t}</h3>
            <p className="muted" style={{fontSize:13,margin:0,lineHeight:1.55}}>{m.d}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function StoryStyles(){
  return <style>{`
.leak-note{display:flex;gap:14px;align-items:flex-start;margin-top:18px;font-size:14px;line-height:1.6;color:var(--tx-1)}
.rm-head,.rm-row{display:grid;grid-template-columns:1.6fr 1.2fr .8fr .9fr;gap:12px;align-items:center;padding:12px 6px}
.rm-head{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3);border-bottom:1px solid var(--line)}
.rm-row{border-bottom:1px solid var(--line)}
.rm-row.rm-hot{background:var(--magenta-t);border-radius:10px}
.rm-q{display:inline-block;width:64px;height:6px;border-radius:6px;background:var(--bg-3);margin-right:8px;overflow:hidden;vertical-align:middle}
.rm-q span{display:block;height:100%;background:var(--grad-brand)}
.rm-foot{margin-top:14px;font-size:12.5px;line-height:1.6}
.comp-stack{display:flex;flex-direction:column;gap:10px}
.comp-eng{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line-2);border-radius:12px;background:var(--bg-2)}
.comp-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.comp-blue{background:var(--blue)}.comp-amber{background:var(--amber)}.comp-purple{background:var(--purple)}.comp-cyan{background:var(--cyan)}
.breach{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0;overflow:hidden}
.breach-col{padding:22px 24px}
.breach-bad{background:rgba(255,128,149,.06);border-right:1px solid var(--line)}
.breach-good{background:rgba(67,214,163,.06)}
.breach-h{display:flex;align-items:center;gap:9px;font-weight:700;font-size:14px;margin-bottom:9px}
.tier-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0}
.cmp{width:100%;border-collapse:collapse;font-size:13px;min-width:820px}
.cmp th,.cmp td{white-space:nowrap}
.cmp td:first-child,.cmp th:first-child{white-space:normal;min-width:220px}
.cmp th,.cmp td{padding:13px 16px;text-align:center;border-bottom:1px solid var(--line)}
.cmp th:first-child,.cmp td:first-child{text-align:left;color:var(--tx-1)}
.cmp thead th{font-size:12px;color:var(--tx-2);font-weight:600}
.cmp .cmp-us{background:var(--blue-t)}
.cmp th.cmp-us{color:var(--blue);font-weight:700}
@media(max-width:860px){
  .rm-head{display:none}
  .rm-row{grid-template-columns:1fr 1fr;gap:8px}
  .breach{grid-template-columns:1fr}
  .breach-bad{border-right:none;border-bottom:1px solid var(--line)}
}
/* Inlined comparison SVG. It carries width/height attributes so it has a real
   intrinsic size as a standalone file; here we override them so it scales to the
   card, and hold a min-width so a narrow desktop window scrolls the table rather
   than shrinking 13.5px labels into illegibility. */
.cmp-svg svg{display:block;width:100%;height:auto;min-width:1040px}
@media(max-width:860px){
  .cmp-svg svg{min-width:900px}
}
`}</style>;
}
window.StoryStyles=StoryStyles;