/* ============================================================
   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>
  );
}

/* CompressionSection moved to /enterprise (marketing_pages.go) as part of
   the homepage-to-7-folds restructuring — the data lives there now, ported
   from this component's JSX. Removed rather than left dead: nothing in this
   page tree references it any more (verified by grep before deleting). */

/* 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>
  );
}

/* CompareSVG, CompareSection, MoreSection, EnterpriseSection, and
   DedicatedSection all moved to /compare and /enterprise (marketing_pages.go)
   as part of the homepage-to-7-folds restructuring. Removed rather than left
   dead: nothing in this page tree references any of them any more (verified
   by grep before deleting). */

function StoryStyles(){
  return <style>{`
/* dedicated inference (reserved capacity + BYOM) */
.ded-badge{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:6px 13px;border-radius:999px;
  background:rgba(34,211,238,.09);border:1px solid rgba(34,211,238,.32);color:var(--cyan);
  font-size:11.5px;font-weight:700;letter-spacing:.03em}
.ded-dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);flex:none;
  box-shadow:0 0 0 3px rgba(34,211,238,.18)}
.ded-fit{margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
@media(max-width:760px){ .ded-fit{flex-direction:column;align-items:flex-start} }

.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;
