/* ============================================================
   NeuroRoute — Resources / blog hub.
   Public page. Technical-marketing posts; every claim maps to
   a shipped capability. No fabricated customers or metrics.
   ============================================================ */

var NR_POSTS = [
  {
    id:'own-your-data',
    tag:'DATA TRUST', tagColor:'green',
    title:'AI privacy that survives procurement: zero retention, your keys, provable erasure',
    dek:'"We don’t store your data" is a claim. A per-request retention header, a customer-held encryption key, and a crypto-shred certificate are proof.',
    read:'6 min',
    body:[
      {h:'The question every security review asks'},
      {p:'The moment an AI gateway sits in front of your traffic, your security team asks the right question: what happens to our prompts? Most vendors answer with a policy PDF. Policies are promises — and promises don’t survive a vendor-risk assessment, let alone an incident. The answer has to be architectural.'},
      {h:'Step one: store nothing — and prove it per request'},
      {p:'Every NeuroRoute org chooses a retention posture. In the zero-retention modes, nothing is stored: response caches are bypassed on both read and write, server-side conversation memory is refused outright, and the strict mode even disables provider-side prompt caching. There is no database row to breach, subpoena, or leak.'},
      {p:'The part your auditor will like: every single API response carries an X-Data-Retention header stating the posture it was served under. Retention isn’t a settings page you screenshot once a year — it’s an assertion on every request, verifiable from your own logs.'},
      {h:'Step two: what you keep is encrypted under a key you can hold'},
      {p:'Orgs that opt into retention get content encrypted at rest with a per-org AES-256-GCM key, wrapped by a Cloud KMS key and rotated on schedule. Enterprises can go further with customer-managed keys: your KMS key, in your cloud project, wraps the data keys. Revoke our IAM access and every byte of your stored content — including backups — becomes unreadable in one action. The kill switch is on your side of the fence.'},
      {h:'Step three: erasure that ends with evidence'},
      {list:[
        'Request erasure (with a 7-day cancelable grace so a bad click isn’t a catastrophe).',
        'Content is deleted, API credentials revoked, user identities anonymized.',
        'The org’s encryption key is crypto-shredded — deactivated so prior ciphertext, backups included, is permanently unrecoverable.',
        'You receive a machine-readable completion certificate with per-scope counts. Billing metadata is retained on a lawful basis; content is gone.',
      ]},
      {p:'And before or after any of that, GDPR Article 20 export gives you the org’s full data — streaming JSON or CSV/ZIP — with export projections that structurally cannot include key material or anyone else’s data.'},
      {h:'The boring parts that matter'},
      {p:'Checksum-validated PII detection (Luhn for cards, Verhoeff for national IDs) that can pin sensitive traffic to self-hosted models. Org-scoped SQL on every read path. Metadata-only request logs — prompt and response bodies are never logged. OAuth 2.1 for agent tooling, audit events on every admin action, and a trust pack — security whitepaper, CAIQ-Lite, provider zero-retention checklist — ready to hand your reviewer.'},
      {p:'Privacy that holds up isn’t a feature you toggle at the end. It’s the order of operations: store nothing by default, encrypt what you choose to keep, erase on demand with proof, and let the customer hold the key.'},
    ],
  },
  {
    id:'runaway-bill',
    tag:'COST', tagColor:'magenta',
    title:'Anatomy of a runaway AI bill',
    dek:'AI spend rarely explodes in one moment. It leaks — on every call, every key, every day — until the model line is 4× last quarter and nobody can say why.',
    read:'6 min',
    body:[
      {h:'The default that eats budgets'},
      {p:'Almost every over-spend story starts the same way: a developer wires the most capable model as the default "to be safe." It works, ships, and is forgotten. Now a one-line classification, a status summary, and a yes/no gate all bill at flagship rates — and the single most expensive entry in your model list quietly becomes 100% of production traffic.'},
      {p:'The uncomfortable part is that most of that traffic never needed the flagship. A quality index of 90 versus 98 is invisible on a summary or an extraction. But it is the difference between $25 and $0.30 per million output tokens — an 80× premium you are paying for no perceptible gain.'},
      {h:'The tokens you never see'},
      {p:'Beyond model choice, the bill is padded with tokens nobody reads: system prompts re-sent verbatim on every stateless call, retrieved RAG chunks duplicated across turns, entire stack traces pasted into a debug prompt, uncapped max_tokens letting a model ramble, and retry storms that silently triple volume during an incident.'},
      {p:'None of it shows up until the invoice does — and a provider invoice is 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 the root cause stays invisible.'},
      {h:'What actually fixes it'},
      {list:[
        'Route per request. Send each call to the cheapest model that clears your quality bar — not a fixed flagship. This alone typically removes a 10–50× premium from the majority of traffic.',
        'Compress the input. Strip duplicated context, truncate logs and traces, and ML-compress long prose before the request is billed.',
        'Meter per key. Attribute every dollar to a key, an org, and a feature so the leak is visible the day it starts, not at month-end.',
        'Cap the spend. Hard daily and monthly $ limits per key and per org, enforced before any model is called.',
      ]},
      {p:'NeuroRoute does all four behind one OpenAI-compatible endpoint. The point isn’t a clever model trick — it’s turning an invisible, compounding cost into something you measure, attribute, and bound.'},
    ],
  },
  {
    id:'blast-radius',
    tag:'SECURITY', tagColor:'blue',
    title:'The leaked key that spent a fortune overnight — and how quotas stop it',
    dek:'A committed API key or a compromised service account can burn six or seven figures in a single day. Models are fast enough to spend faster than any human notices.',
    read:'5 min',
    body:[
      {h:'Why one key is a catastrophic amount of exposure'},
      {p:'A leaked cloud credential used to mean someone spun up a few servers. A leaked AI key is different: there is no capacity ceiling. An attacker — or a bug in a loop — can issue thousands of expensive completions per minute against your account. Leak at 2am, and by morning you have an invoice that took real money and real conversations you never authorized.'},
      {p:'Provider-side spend alerts are lagging and coarse. They fire hours later, on a monthly aggregate, long after the damage is done. By the time a human reads the alert, the night is over.'},
      {h:'Bound the blast radius before it happens'},
      {p:'The fix isn’t detection after the fact — it’s a hard ceiling enforced before the model is ever called. NeuroRoute evaluates spend caps on the request path, in three tiers:'},
      {list:[
        'Per key — each app, environment, or teammate gets its own daily and monthly $ cap. A runaway key stops at its own limit; the rest of the org never notices.',
        'Per organization — a hard daily and monthly ceiling across everything, so no combination of keys can exceed what you budgeted.',
        'Platform-wide — a global guardrail across every customer and key: the last line of defense against one bad day becoming one bad invoice.',
      ]},
      {p:'Caps are measured against actual provider cost, in absolute USD, on rolling daily and monthly windows. When a tier is reached, further requests are rejected at the door — with response headers that tell the client exactly which limit was hit so it can back off gracefully. A warning header fires as a key approaches its ceiling, so you get a heads-up, not just a wall.'},
      {h:'Same leak, bounded outcome'},
      {p:'Without a cap: the key hammers your most expensive model all night, unbounded, and you find out from the invoice. With a $50 daily cap on that key: it stops in minutes, every further request is rejected, and the damage is bounded to one key’s limit. That is the entire difference between an incident and a disaster.'},
    ],
  },
  {
    id:'flagship-for-lookups',
    tag:'ROUTING', tagColor:'green',
    title:'You’re paying flagship prices for lookups',
    dek:'A cheaper model isn’t a worse answer. For most tasks it’s the same answer for a fraction of the cost — often 1/20th or less.',
    read:'5 min',
    body:[
      {h:'Quality is a bar, not a maximum'},
      {p:'The instinct to "just use the best model" treats quality as something to maximize on every call. But most production traffic doesn’t need maximum quality — it needs to clear a bar. A classification either lands in the right bucket or it doesn’t. A summary is either faithful or it isn’t. Past the bar, extra model capability is money spent on a difference your users can’t perceive.'},
      {h:'The economics, concretely'},
      {p:'Flagship output tokens run around $25 per million. A fast, highly capable mid-tier model runs around $0.30 — roughly 80× cheaper — while scoring only a few points lower on a quality index, a gap that vanishes on the tasks that dominate real workloads. Even a conservative "balanced" pick is commonly 5–20× cheaper than the flagship for the same result.'},
      {p:'Multiply that across the fraction of your traffic that is genuinely simple — usually the majority — and the savings aren’t a rounding error. They’re the difference between a model line finance questions and one they don’t.'},
      {h:'How to capture it without babysitting'},
      {p:'You don’t want engineers hand-picking a model per endpoint and re-tuning it every time prices change. NeuroRoute classifies each request by task type, scores the candidate models on quality, cost, and latency, and routes to the cheapest one that clears the bar you set. Hard cases still escalate — the cascade strategy tries cheap first and only reaches for the flagship when confidence is low. You keep the quality; you stop paying flagship rates for lookups.'},
    ],
  },
  {
    id:'compress-before-you-pay',
    tag:'COMPRESSION', tagColor:'cyan',
    title:'Compress logs and RAG before you pay for them',
    dek:'Log analysis and retrieval prompts are mostly repetition. You’re billed per token for boilerplate nobody reads.',
    read:'4 min',
    body:[
      {h:'Where the waste lives'},
      {p:'Two of the most valuable LLM use cases are also the most token-heavy: log/trace analysis and retrieval-augmented generation. Both are dominated by redundancy — repeated stack frames, near-identical retrieved chunks, framing text that never changes call to call. You pay input-token rates for all of it, on every request.'},
      {h:'A pipeline, not a single trick'},
      {p:'NeuroRoute applies a composable compression pipeline before a request is billed:'},
      {list:[
        'normalize — collapse whitespace, minify JSON, and dedup obvious repetition.',
        'command-output — truncate long logs, diffs, and traces down to the parts that carry signal.',
        'rag-dedup — drop retrieved chunks that repeat verbatim across the prompt.',
        'llmlingua-2 — ML-compress long prose, keeping meaning while cutting filler.',
      ]},
      {p:'On realistic long-context prose this cuts input tokens by around 40%, with zero code changes — it runs in the request path and is configurable per key. Crucially, every response reports its compression ratio and the exact tokens saved, so the savings are auditable rather than a number you’re asked to trust. It fails open: if compression can’t help a given request, the request still succeeds, uncompressed.'},
    ],
  },
];

function PostCard({p, onOpen}){
  return (
    <div className="card card-pad card-hover rc-card" onClick={onOpen} style={{cursor:'pointer'}}>
      <div className="eyebrow" style={{color:`var(--${p.tagColor})`}}>{p.tag} · {p.read} read</div>
      <h3 style={{fontSize:19,margin:'10px 0 8px',lineHeight:1.25}}>{p.title}</h3>
      <p className="muted" style={{fontSize:14,margin:0,lineHeight:1.6}}>{p.dek}</p>
      <div className="row" style={{marginTop:14,gap:6,color:`var(--${p.tagColor})`,fontSize:13,fontWeight:600}}>Read the post <Icon name="arrowright" size={14}/></div>
    </div>
  );
}

function Article({p, onBack}){
  return (
    <article className="rc-article">
      <a className="rc-back" onClick={onBack} style={{cursor:'pointer'}}><Icon name="arrowright" size={14} style={{transform:'rotate(180deg)'}}/> All resources</a>
      <div className="eyebrow" style={{color:`var(--${p.tagColor})`,marginTop:18}}>{p.tag} · {p.read} read</div>
      <h1 className="display" style={{fontSize:'min(7vw,40px)',lineHeight:1.15,margin:'10px 0 14px'}}>{p.title}</h1>
      <p className="rc-dek">{p.dek}</p>
      <div className="rc-body">
        {p.body.map(function(b,i){
          if(b.h) return <h2 key={i} className="display" style={{fontSize:22,margin:'30px 0 10px'}}>{b.h}</h2>;
          if(b.list) return <ul key={i} className="rc-list">{b.list.map(function(li,j){return <li key={j}>{li}</li>;})}</ul>;
          return <p key={i}>{b.p}</p>;
        })}
      </div>
      <div className="card card-pad rc-cta">
        <div><b>See it on your own traffic.</b><div className="faint" style={{fontSize:13.5,marginTop:4}}>One base-URL change. Routing on your first request.</div></div>
        <a className="btn btn-grad" onClick={()=> window.openLeadForm && window.openLeadForm()} style={{cursor:'pointer',whiteSpace:'nowrap'}}><Icon name="send" size={16}/>Contact Sales</a>
      </div>
    </article>
  );
}

function ResourcesPage(){
  var _sel = useState(null); var sel=_sel[0], setSel=_sel[1];
  var current = sel ? NR_POSTS.find(function(p){return p.id===sel;}) : null;
  useEffect(function(){ try{ window.scrollTo(0,0); }catch(e){} }, [sel]);
  return (
    <div className="lp">
      <LandingStyles/>
      <StoryStyles/>
      <ResourcesStyles/>
      <nav className="lp-nav">
        <div className="lp-nav-in">
          <div className="row brand-row" style={{cursor:'pointer'}} onClick={()=>go('landing')}>
            <CloudWorxMark height={24}/>
            <span className="brand-div"/>
            <div className="row" style={{gap:10}}><LogoMark size={40}/><span className="display" style={{fontSize:19,fontWeight:700}}>NeuroRoute</span></div>
          </div>
          <div className="lp-links">
            <a style={{cursor:'pointer'}} onClick={()=>go('landing')}>Home</a>
            <a className="btn btn-grad btn-sm" onClick={()=>go('login')} style={{cursor:'pointer'}}>Login</a>
          </div>
        </div>
      </nav>

      {current ? <div className="lp-sec" style={{maxWidth:760}}><Article p={current} onBack={()=>setSel(null)}/></div> : (
        <div className="lp-sec">
          <div className="lp-head">
            <div className="eyebrow">RESOURCES</div>
            <h1 className="display lp-h2">Notes on spending less<br/>on AI — <span className="route-text">without losing quality.</span></h1>
            <p className="lp-p">Field notes on where AI budgets leak, why cheaper models win more often than teams expect, and how to bound the damage when something goes wrong.</p>
          </div>
          <div className="rc-grid">
            {NR_POSTS.map(function(p){return <PostCard key={p.id} p={p} onOpen={()=>setSel(p.id)}/>;})}
          </div>
        </div>
      )}

      <footer className="lp-foot">
        <div className="row" style={{gap:12}}><LogoMark size={38}/><div><div className="display" style={{fontSize:16}}>NeuroRoute</div><div style={{marginTop:4}}><CloudWorxMark height={26} variant="full"/></div></div></div>
        <div className="faint" style={{fontSize:12.5}}>© 2026 SISL CloudWorx. All rights reserved.</div>
        <div className="lp-links" style={{gap:18,fontSize:13}}><a onClick={()=>go('landing')} style={{cursor:'pointer'}}>Home</a><a href="mailto:raman@sislinfotech.com">Contact</a></div>
      </footer>
    </div>
  );
}

function ResourcesStyles(){
  return <style>{`
.rc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:1000px;margin:0 auto}
.rc-card{display:flex;flex-direction:column}
.rc-article{max-width:720px;margin:0 auto}
.rc-back{color:var(--tx-2);font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.rc-back:hover{color:var(--tx-0)}
.rc-dek{font-size:18px;line-height:1.6;color:var(--tx-1);margin:0 0 8px;font-weight:500}
.rc-body p{font-size:15.5px;line-height:1.75;color:var(--tx-1);margin:14px 0}
.rc-list{margin:14px 0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.rc-list li{position:relative;padding-left:26px;font-size:15px;line-height:1.65;color:var(--tx-1)}
.rc-list li:before{content:'';position:absolute;left:6px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--grad-brand)}
.rc-cta{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:34px;flex-wrap:wrap}
@media(max-width:860px){ .rc-grid{grid-template-columns:1fr} }
`}</style>;
}

window.PAGES = Object.assign(window.PAGES||{}, {resources:ResourcesPage});
