/* ============================================================
   NeuroRoute — Landing: Features grid + interactive How-It-Works
   Globals used: Icon, Badge, ProviderLogo, COL, useState, useEffect, useRef
   ============================================================ */
const LD = window.DATA;

/* =====================  FEATURES  ===================== */
function FeaturesSection(){
  const cards=[
    {ic:'route', c:'blue', t:'The Right Model for Every Task',
      d:'Not every query needs your most expensive model. A factual question, a short summary, a formatting task — these don\u2019t need GPT-4o. NeuroRoute analyzes each request in milliseconds — negligible next to the model call itself — and routes it to the model that delivers the same quality for far less. You set the quality bar; we find the cheapest model that clears it.',
      viz:'tasks'},
    {ic:'trenddown', c:'green', t:'See Exactly What You\u2019re Saving',
      d:'Every request shows what it actually cost, what Claude Fable 5 would have charged, and how much you saved. No black boxes, no trust-us pricing. A real-time running total — most teams see 60\u201380% savings in the first week. Export it, audit every line item, share with your CFO.',
      viz:'savings'},
    {ic:'key', c:'cyan', t:'Your Keys, Your Control',
      d:'Bring your own keys from any provider. You pay providers directly at published rates — NeuroRoute never touches your money or your data. Our pricing is a flat platform fee plus a transparent per-token rate. Model your bill before you send a request.',
      viz:'providers'},
    {ic:'link', c:'purple', t:'Drop-In Compatible',
      d:'Change one line — swap your OpenAI base URL to NeuroRoute\u2019s endpoint. Same API format, same SDKs, same streaming. Your existing code works instantly. No migration, no refactoring, no new SDKs. If you can call OpenAI today, you can use NeuroRoute in 5 minutes.',
      viz:'code'},
    {ic:'shield', c:'amber', t:'Enterprise-Grade Security',
      d:'PII detection scans every request before it reaches a model and keeps sensitive data on self-hosted models only. HMAC request signing prevents tampering. AES-256 encryption for stored keys. Per-org isolation, role-based access control, and a full audit trail of every action.',
      viz:'security'},
    {ic:'sparkles', c:'magenta', t:'Gets Smarter Over Time',
      d:'Rate any response \ud83d\udc4d / \ud83d\udc4e and NeuroRoute learns which models perform best for your workload — not generic benchmarks. A legal firm\u2019s \u201cquality\u201d differs from a startup\u2019s. After a few hundred requests, routing is personalized to your actual usage. The longer you use it, the more you save.',
      viz:'learning'},
  ];
  return (
    <section id="features" className="lp-sec">
      <FeatureVizStyles/>
      <div className="lp-head">
        <div className="eyebrow">WHY NEUROROUTE</div>
        <h2 className="display lp-h2">Stop overpaying for AI.<br/>Start routing <span className="route-text">intelligently.</span></h2>
        <p className="lp-p">Most teams send every request to GPT-4o or Claude Opus — even simple lookups a model 10× cheaper handles perfectly. NeuroRoute fixes this automatically.</p>
      </div>
      <div className="feat6">
        {cards.map(f=>(
          <div key={f.t} className="card card-pad card-hover feat6-card">
            <div className="m-ico" style={{background:`var(--${f.c}-t)`,color:`var(--${f.c})`,width:44,height:44,borderRadius:12}}><Icon name={f.ic} size={22}/></div>
            <h3 style={{fontSize:16.5,margin:'15px 0 8px'}}>{f.t}</h3>
            <p className="muted" style={{fontSize:13.5,margin:0,lineHeight:1.6}}>{f.d}</p>
            <div className="feat6-viz"><FeatViz kind={f.viz} color={f.c}/></div>
          </div>
        ))}
      </div>
    </section>
  );
}

function FeatViz({kind, color}){
  if(kind==='tasks') return (
    <div className="fv-tasks">
      {[['Simple Q','Gemini Flash','cyan'],['Complex','GPT-4o','blue'],['Code','GPT-4.1','purple']].map(([a,b,c])=>(
        <div key={a} className="fv-row"><span className="fv-pill">{a}</span><Icon name="arrowright" size={13} style={{color:'var(--tx-3)'}}/><span className={'fv-pill fv-'+c}>{b}</span></div>
      ))}
    </div>
  );
  if(kind==='savings') return (
    <div className="fv-save">
      <div><div className="fv-k">Your cost</div><div className="mono fv-good">$0.0008</div></div>
      <div><div className="fv-k">Claude Fable 5</div><div className="mono fv-bad" style={{textDecoration:'line-through'}}>$0.0089</div></div>
      <div><div className="fv-k">Saved</div><div className="mono route-text" style={{fontWeight:700}}>$0.0081</div></div>
    </div>
  );
  if(kind==='providers') return (
    <div className="row" style={{gap:8,flexWrap:'wrap'}}>
      {['openai','anthropic','google','groq','xai','mistral'].map(p=><ProviderLogo key={p} id={p} size={30}/>)}
    </div>
  );
  if(kind==='code') return (
    <div className="fv-code mono">
      <span className="tok-com">base_url=</span><span className="tok-str">"…neuroroute.ai/v1"</span>
      <Icon name="checkcircle" size={15} style={{color:'var(--green)',marginLeft:'auto',flex:'none'}}/>
    </div>
  );
  if(kind==='security') return (
    <div className="fv-sec">
      {['PII detection','HMAC signing','AES-256 at rest','RBAC + audit log'].map(s=>(
        <span key={s} className="fv-check"><Icon name="check" size={12} style={{color:'var(--green)'}}/>{s}</span>
      ))}
    </div>
  );
  if(kind==='learning') return (
    <div className="fv-learn">
      {[34,42,40,52,58,66,72,80].map((h,i)=><span key={i} style={{height:h+'%',background:i>4?'var(--magenta)':'var(--bg-3)'}}/>)}
      <span className="fv-learn-cap mono">quality ↑ over time</span>
    </div>
  );
  return null;
}

/* =====================  HOW IT WORKS — interactive  ===================== */
const HOW_QUERIES=[
  {id:'quick', ic:'info', label:'Quick Question', prompt:'What is the capital of France?',
    // inTok/outTok are illustrative per-example token estimates, used only to derive
    // the Claude Fable 5 baseline cost below via window.baselineCost() — not a live count.
    task:'Factual QA', conf:97, winner:'gemini-flash', cost:0.0001, inTok:12, outTok:35,
    why:'Simple factual lookup \u2014 a lightweight model handles this perfectly at ~30\u00d7 lower cost.',
    cands:[['gemini-flash',96],['gpt-4o-mini',88],['llama-70b',74],['claude-sonnet-4',70],['gpt-4o',64]]},
  {id:'code', ic:'code', label:'Write Code', prompt:'Write a Python function to sort a list of dicts by a key',
    task:'Code Generation', conf:94, winner:'gpt-4.1', cost:0.0044, inTok:25, outTok:180,
    why:'Code generation needs strong reasoning \u2014 routed to a code-specialized model at a 92% quality score.',
    cands:[['gpt-4.1',93],['claude-sonnet-4',90],['gpt-4o',88],['gemini-flash',72],['llama-70b',68]]},
  {id:'creative', ic:'sparkles', label:'Creative Writing', prompt:'Write a compelling product description for wireless headphones',
    task:'Creative', conf:91, winner:'claude-sonnet-4', cost:0.0031, inTok:18, outTok:210,
    why:'Creative tasks benefit from Claude\u2019s nuanced writing \u2014 best quality at moderate cost.',
    cands:[['claude-sonnet-4',94],['gpt-4o',90],['gpt-4.1',86],['gemini-flash',76],['gpt-4o-mini',70]]},
  {id:'analysis', ic:'analytics', label:'Data Analysis', prompt:'Analyze this sales data and identify the top 3 trends',
    task:'Analysis', conf:89, winner:'claude-sonnet-4', cost:0.0031, inTok:160, outTok:240,
    why:'Analytical tasks need structured reasoning \u2014 balanced cost and capability.',
    cands:[['claude-sonnet-4',92],['gemini-pro',90],['gpt-4o',89],['gemini-flash',74],['gpt-4o-mini',66]]},
  {id:'reasoning', ic:'cpu', label:'Complex Reasoning', prompt:'Compare microservices vs monolith for a fintech startup',
    task:'Deep Reasoning', conf:88, winner:'gpt-4o', cost:0.0089, inTok:15, outTok:650,
    why:'Deep reasoning required \u2014 a premium model is justified here. It still costs a fraction of the Claude Fable 5 baseline, just a smaller discount than lighter tasks get \u2014 and this tier is only ~8% of typical traffic.',
    cands:[['gpt-4o',95],['claude-sonnet-4',94],['gpt-4.1',93],['gemini-pro',88],['gpt-4o-mini',60]]},
  {id:'summarize', ic:'doc', label:'Summarize Text', prompt:'Summarize this 2000-word article into 3 bullet points',
    task:'Summarization', conf:95, winner:'gpt-4o-mini', cost:0.0002, inTok:2600, outTok:55,
    why:'Summarization is well-solved \u2014 the cheapest capable model delivers identical quality.',
    cands:[['gpt-4o-mini',91],['gemini-flash',89],['llama-70b',78],['claude-sonnet-4',72],['gpt-4o',66]]},
];

function HowItWorksDemo(){
  const [sel,setSel]=useState(HOW_QUERIES[0]);
  const [phase,setPhase]=useState(0);          // 0 analyzing,1 scoring,2 selecting,3 done
  const [explored,setExplored]=useState(()=>new Set([HOW_QUERIES[0].id]));
  const timers=useRef([]);
  const run=(q)=>{
    timers.current.forEach(clearTimeout); timers.current=[];
    setSel(q); setPhase(0);
    setExplored(e=>new Set([...e,q.id]));
    timers.current.push(setTimeout(()=>setPhase(1),380));
    timers.current.push(setTimeout(()=>setPhase(2),1050));
    timers.current.push(setTimeout(()=>setPhase(3),1450));
  };
  useEffect(()=>{ run(HOW_QUERIES[0]); return ()=>timers.current.forEach(clearTimeout); },[]);
  const m=LD.modelById(sel.winner);
  // Real Claude Fable 5 baseline cost for this example (window.baselineCost, data.js —
  // $10/1M in + $50/1M out, matching internal/shared/baseline.go), not GPT-4o's cost.
  const base=window.baselineCost(sel.inTok,sel.outTok);
  const pct=Math.round((1-sel.cost/base)*100);
  const x=(n)=>'$'+(n*10000).toLocaleString('en-US',{minimumFractionDigits:2,maximumFractionDigits:2});
  const phaseLabels=['Analyzing request','Scoring models','Selecting winner','Request routed'];
  return (
    <section id="how" className="lp-sec how-sec">
      <HowStyles/>
      <div className="aurora-bg dim"><span/><span/></div>
      <div className="lp-head" style={{position:'relative'}}>
        <div className="eyebrow">HOW IT WORKS</div>
        <h2 className="display lp-h2">See it in action</h2>
        <p className="lp-p">Pick a task. Watch NeuroRoute choose the optimal model in real time.</p>
      </div>

      <div className="how-grid">
        {/* LEFT: query selector */}
        <div className="how-col">
          <div className="how-col-h">Choose your query</div>
          <div className="how-queries">
            {HOW_QUERIES.map(q=>(
              <button key={q.id} className={'how-q'+(sel.id===q.id?' on':'')} onClick={()=>run(q)}>
                <span className="how-q-ic"><Icon name={q.ic} size={16}/></span>
                <span><span className="how-q-label">{q.label}</span><span className="how-q-prompt">{q.prompt}</span></span>
              </button>
            ))}
          </div>
        </div>

        {/* MIDDLE: pipeline */}
        <div className="how-col">
          <div className="how-col-h">NeuroRoute decides</div>
          <div className="how-pipe">
            {/* step 1 classify */}
            <div className={'how-step'+(phase>=0?' lit':'')}>
              <div className="how-step-top"><span className="how-step-n">1</span>{phaseLabels[0]}</div>
              {phase>=0 && <div className="how-class"><Badge color="blue">{sel.task}</Badge><span className="mono faint" style={{fontSize:11}}>{sel.conf}% confidence</span></div>}
            </div>
            {/* step 2 score */}
            <div className={'how-step'+(phase>=1?' lit':'')}>
              <div className="how-step-top"><span className="how-step-n">2</span>{phaseLabels[1]}</div>
              <div className="how-cands">
                {sel.cands.map(([id,score],i)=>{
                  const win=phase>=2 && id===sel.winner;
                  const dim=phase>=2 && id!==sel.winner;
                  return (
                    <div key={id} className={'how-cand'+(win?' win':'')+(dim?' dim':'')}>
                      <span className="how-cand-name"><ProviderLogo id={LD.modelById(id).provider} size={18}/>{LD.modelById(id).name}</span>
                      <span className="how-bar"><i style={{width:(phase>=1?score:0)+'%',background:win?COL.green:COL.blue,transitionDelay:(i*70)+'ms'}}/></span>
                      {win && <Icon name="check" size={14} style={{color:'var(--green)',flex:'none'}}/>}
                    </div>
                  );
                })}
              </div>
            </div>
            {/* step 3/4 routed */}
            <div className={'how-step'+(phase>=3?' lit':'')}>
              <div className="how-step-top"><span className="how-step-n">3</span>{phase>=3?phaseLabels[3]:phaseLabels[2]}</div>
              {phase>=3 && <div className="how-routed"><Icon name="route" size={15} style={{color:'var(--cyan)'}}/><span>Routed to <b style={{color:'#fff'}}>{m.name}</b></span><span className="how-arrow"/></div>}
            </div>
          </div>
        </div>

        {/* RIGHT: result */}
        <div className="how-col">
          <div className="how-col-h">The result</div>
          {phase>=3 ? (
            <div className="how-result">
              <div className="how-res-model">
                <ProviderLogo id={m.provider} size={36}/>
                <div><div style={{fontWeight:700,fontSize:15}}>{m.name}</div><div className="faint mono" style={{fontSize:11.5}}>{LD.providerById(m.provider).name}</div></div>
                <Badge color="green" style={{marginLeft:'auto'}}>Quality {m.q}% ✓</Badge>
              </div>
              <div className="how-costs">
                <div className="spread"><span className="faint">Your cost</span><span className="mono how-good">${sel.cost.toFixed(4)}</span></div>
                <div className="spread"><span className="faint">Claude Fable 5 would cost</span><span className="mono how-bad" style={{textDecoration:'line-through'}}>${base.toFixed(4)}</span></div>
                <div className="spread how-saved"><span style={{fontWeight:700}}>You saved</span><span className="display route-text" style={{fontSize:20}}>{pct}%</span></div>
              </div>
              <div className="how-why"><span className="how-why-k">Why this model?</span>{sel.why}</div>
              <div className="how-tally">
                <div className="faint" style={{fontSize:12,marginBottom:8}}>If you sent 10,000 of these per month:</div>
                <div className="spread" style={{fontSize:13}}><span>Without NeuroRoute</span><span className="mono how-bad">{x(base)}</span></div>
                <div className="spread" style={{fontSize:13,marginTop:5}}><span>With NeuroRoute</span><span className="mono how-good">{x(sel.cost)}</span></div>
                <div className="how-tally-save">You'd save {x(base-sel.cost)}/mo {pct>0?`(${pct}%)`:''}</div>
              </div>
            </div>
          ) : (
            <div className="how-result how-thinking">
              <div className="how-spinner"/>
              <div className="faint">{phaseLabels[Math.min(phase,2)]}…</div>
            </div>
          )}
        </div>
      </div>

      {/* honesty note + summary */}
      <div className="how-foot">
        <div className="how-note"><Icon name="info" size={15} style={{color:'var(--tx-2)',flex:'none'}}/>In a typical workload only 5–10% of queries need premium models. The other 90% is where the savings stack up.</div>
        <div className={'how-summary'+(explored.size>=6?' all':'')}>
          <span className="faint" style={{fontSize:12.5}}>Across a typical mix of these queries</span>
          <span className="display route-text" style={{fontSize:24}}>Average savings: 66%</span>
          <span className="mono faint" style={{fontSize:11}}>{explored.size}/6 explored</span>
        </div>
      </div>
    </section>
  );
}

function FeatureVizStyles(){
  return <style>{`
.feat6{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feat6-card{display:flex;flex-direction:column}
.feat6-viz{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);margin-top:18px}
.fv-tasks{display:flex;flex-direction:column;gap:8px}
.fv-row{display:flex;align-items:center;gap:9px}
.fv-pill{font-family:var(--font-mono);font-size:11px;padding:4px 9px;border-radius:7px;background:var(--bg-3);border:1px solid var(--line-2);color:var(--tx-1);white-space:nowrap}
.fv-cyan{background:var(--cyan-t);color:#5fe2f5;border-color:rgba(34,211,238,.3)}
.fv-blue{background:var(--blue-t);color:#7db0ff;border-color:rgba(59,130,246,.3)}
.fv-purple{background:var(--purple-t);color:#b095fb;border-color:rgba(139,92,246,.3)}
.fv-save{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.fv-k{font-size:10.5px;color:var(--tx-2);margin-bottom:3px}
.fv-good{color:#43d6a3;font-size:13px}.fv-bad{color:#ff8095;font-size:13px}
.fv-code{display:flex;align-items:center;gap:6px;font-size:11.5px;background:var(--bg-inset);border:1px solid var(--line-2);border-radius:8px;padding:9px 11px;overflow:hidden}
.fv-code .tok-com{color:var(--tx-2)}.fv-code .tok-str{color:#43d6a3}
.fv-sec{display:flex;flex-wrap:wrap;gap:7px}
.fv-check{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--tx-1);background:var(--bg-3);border:1px solid var(--line);border-radius:7px;padding:4px 8px}
.fv-learn{display:flex;align-items:flex-end;gap:5px;height:48px;position:relative}
.fv-learn>span{flex:1;border-radius:3px 3px 0 0;transition:.3s}
.fv-learn-cap{position:absolute;right:0;top:-4px;font-size:9.5px;color:var(--magenta)}
@media(max-width:860px){.feat6{grid-template-columns:1fr}}
`}</style>;
}

function HowStyles(){
  return <style>{`
.how-sec{position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-0)}
.how-sec .aurora-bg{opacity:.32}
.how-grid{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:18px;position:relative;align-items:stretch}
.how-col{display:flex;flex-direction:column;gap:12px}
.how-col-h{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-2)}
.how-queries{display:flex;flex-direction:column;gap:8px}
.how-q{display:flex;align-items:flex-start;gap:11px;text-align:left;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:12px 13px;cursor:pointer;transition:.15s;color:var(--tx-1)}
.how-q:hover{border-color:var(--line-strong);background:var(--bg-3)}
.how-q.on{border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.18);background:linear-gradient(120deg,rgba(59,130,246,.1),rgba(226,79,214,.04))}
.how-q-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none;background:var(--bg-3);color:var(--cyan);border:1px solid var(--line-2)}
.how-q.on .how-q-ic{background:var(--blue-t);color:#7db0ff}
.how-q-label{display:block;font-weight:700;font-size:13.5px;color:var(--tx-0)}
.how-q-prompt{display:block;font-size:11.5px;color:var(--tx-2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}

.how-pipe{display:flex;flex-direction:column;gap:10px;flex:1}
.how-step{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:13px 14px;opacity:.45;transition:.35s;transform:translateY(4px)}
.how-step.lit{opacity:1;transform:none;border-color:var(--line-2)}
.how-step-top{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;color:var(--tx-1)}
.how-step-n{width:20px;height:20px;border-radius:6px;background:var(--bg-3);border:1px solid var(--line-2);display:grid;place-items:center;font-size:11px;font-family:var(--font-mono);color:var(--tx-2)}
.how-step.lit .how-step-n{background:var(--blue-t);color:#7db0ff;border-color:rgba(59,130,246,.4)}
.how-class{display:flex;align-items:center;gap:10px;margin-top:10px}
.how-cands{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.how-cand{display:flex;align-items:center;gap:9px;transition:.3s;opacity:1}
.how-cand.dim{opacity:.4}
.how-cand-name{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--tx-1);width:118px;flex:none;white-space:nowrap;overflow:hidden}
.how-cand.win .how-cand-name{color:#fff}
.how-bar{flex:1;height:7px;border-radius:99px;background:var(--bg-inset);overflow:hidden}
.how-bar i{display:block;height:100%;width:0;border-radius:99px;transition:width .6s cubic-bezier(.3,.9,.3,1)}
.how-routed{display:flex;align-items:center;gap:9px;margin-top:10px;font-size:12.5px;color:var(--tx-1);animation:fade .4s}
.how-arrow{flex:1;height:2px;background:linear-gradient(90deg,var(--cyan),transparent);border-radius:99px;position:relative}

.how-result{background:var(--bg-2);border:1px solid var(--line-2);border-radius:14px;padding:16px;flex:1;display:flex;flex-direction:column;gap:14px;animation:fade .4s}
.how-thinking{align-items:center;justify-content:center;gap:16px;color:var(--tx-2)}
.how-spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--bg-3);border-top-color:var(--blue);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.how-res-model{display:flex;align-items:center;gap:11px}
.how-costs{display:flex;flex-direction:column;gap:9px;background:var(--bg-inset);border:1px solid var(--line);border-radius:10px;padding:13px}
.how-good{color:#43d6a3}.how-bad{color:#ff8095}
.how-saved{border-top:1px solid var(--line);padding-top:10px;margin-top:2px}
.how-why{font-size:12.5px;color:var(--tx-1);line-height:1.55;background:var(--bg-inset);border:1px solid var(--line);border-radius:10px;padding:12px}
.how-why-k{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-2);margin-bottom:5px;font-family:var(--font-mono)}
.how-tally{border-top:1px solid var(--line);padding-top:13px}
.how-tally-save{margin-top:10px;text-align:center;font-weight:700;font-size:13.5px;color:#43d6a3;background:var(--green-t);border:1px solid rgba(16,185,129,.3);border-radius:9px;padding:8px}

.how-foot{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;margin-top:22px;position:relative;align-items:center}
.how-note{display:flex;gap:10px;font-size:13px;color:var(--tx-1);line-height:1.55;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.how-summary{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;border-radius:12px;padding:14px 16px;border:1px solid var(--line-2);background:var(--bg-2);transition:.3s}
.how-summary.all{border-color:rgba(226,79,214,.4);box-shadow:0 0 0 3px rgba(226,79,214,.12)}
@media(max-width:920px){.how-grid{grid-template-columns:1fr}.how-foot{grid-template-columns:1fr}.how-summary{align-items:flex-start;text-align:left}.how-q-prompt{max-width:none;white-space:normal}}
`}</style>;
}

window.FeaturesSection=FeaturesSection;
window.HowItWorksDemo=HowItWorksDemo;