/* ============================================================
   NeuroRoute — Landing: two-track Pricing (BYOK / Platform Managed)
   Globals: Icon, ProviderLogo, COL, useState
   ============================================================ */
function PricingSection(){
  const [track,setTrack]=useState('byok');
  const [spend,setSpend]=useState(8000);
  const [faq,setFaq]=useState(0);
  const money=(n)=>'$'+Math.round(n).toLocaleString('en-US');
  const p=((spend-500)/(50000-500))*100;

  // shared routing assumption: 65% savings
  const without=spend, routed=spend*0.35, savings=spend*0.65;
  const byokFee=savings*0.20, byokNet=savings-byokFee;            // ~52%
  const pmCost=routed*1.25, pmSavings=without-pmCost;             // ~56%

  const byokFeatures=['Unlimited requests','All 10+ providers','Intelligent routing — 10 task types, 6 strategies',
    'Full transparency — every routing decision','PII detection & self-hosted routing','Team management & RBAC',
    'AES-256 key encryption','Usage analytics & billing dashboard','OpenAI-compatible API','Conversation context management'];
  const pmExtra=['No API key management needed','We handle provider relationships','Single consolidated invoice','Provider key rotation handled for you'];

  const faqs=[
    ['What if NeuroRoute routes to a more expensive model?',
     'It won\u2019t — the routing engine enforces a quality threshold that picks the lowest-cost model meeting your bar. And when a premium model is genuinely needed (complex reasoning), your savings on the other ~90% of requests more than compensate.'],
    ['How is the GPT-4o counterfactual calculated?',
     'Every request is priced against what GPT-4o would have charged at OpenAI\u2019s published rates ($2.50/1M input, $10.00/1M output). That\u2019s the universal baseline — even if you\u2019ve never used GPT-4o, it sets a fair reference point for savings.'],
    ['Can I switch between BYOK and Platform Managed?',
     'Yes — at any time, per provider. Add your own OpenAI key and that provider switches to BYOK; remove it and it falls back to Platform Managed. No config needed, it\u2019s automatic.'],
    ['What happens if I exceed any limits?',
     'There are no hard request limits — you pay for what you use. Set budget alerts and spending caps per day or month and get notified before you hit them.'],
    ['Is there a free trial?',
     'Every account starts free, no credit card required — up to 1,000 requests/month at no cost. After that, BYOK customers only pay the savings share (if we don\u2019t save you money, you pay nothing); Platform Managed customers pay per request.'],
    ['How do I know I\u2019m actually saving money?',
     'Every response includes X-Request-Cost and X-Savings headers, and your dashboard shows a real-time running total. Export to CSV to audit every line item, or call GET /v1/routing/explain/{request_id} to see exactly why each model was chosen.'],
  ];

  const Bar=({label,val,max,color,strike})=>(
    <div className="pr-bar">
      <div className="pr-bar-track"><i style={{height:Math.max(6,val/max*100)+'%',background:color}}/></div>
      <div className="pr-bar-val mono" style={{color,textDecoration:strike?'line-through':'none'}}>{money(val)}</div>
      <div className="pr-bar-label">{label}</div>
    </div>
  );

  return (
    <section id="pricing" className="lp-sec pr-sec">
      <PricingStyles/>
      <div className="lp-head">
        <div className="eyebrow">PRICING</div>
        <h2 className="display lp-h2">We make money only<br/>when <span className="route-text">you save money.</span></h2>
        <p className="lp-p">Two billing tracks, not tiers. Choose per provider — or mix both. No minimums, no contracts, no lock-in.</p>
      </div>

      {/* toggle */}
      <div className="pr-toggle-wrap">
        <div className="pr-toggle">
          <button className={track==='byok'?'on':''} onClick={()=>setTrack('byok')}><Icon name="key" size={16}/>Bring Your Own Keys</button>
          <button className={track==='pm'?'on':''} onClick={()=>setTrack('pm')}><Icon name="provider" size={16}/>Platform Managed</button>
        </div>
        <p className="faint" style={{fontSize:13,marginTop:12}}>Both are available to every customer at once — use BYOK where you have keys, Platform Managed where you don't.</p>
      </div>

      {/* active card */}
      <div className="pr-card" key={track}>
        <div className="pr-card-l">
          <h3 className="display" style={{fontSize:24,marginBottom:6}}>{track==='byok'?'You pay providers. We earn from your savings.':'One bill. No key management. Still save big.'}</h3>
          <p className="muted" style={{fontSize:14,marginBottom:20,lineHeight:1.6}}>{track==='byok'
            ? 'Bring your own provider keys and pay them directly at published rates. NeuroRoute takes a 20% share of the savings it creates — and nothing if it saves you nothing.'
            : 'No keys? No problem. NeuroRoute uses its pooled keys and bills you provider cost plus a 25% markup. One invoice, zero key management, still huge savings.'}</p>

          {/* formula */}
          {track==='byok' ? (
            <div className="pr-formula">
              <div className="pr-frow"><span>Your provider bill</span><span className="faint">paid directly</span></div>
              <div className="pr-frow"><span>GPT-4o counterfactual</span><span className="faint">what it would cost</span></div>
              <div className="pr-frow"><span>Actual routed cost</span><span className="faint">what it did cost</span></div>
              <div className="pr-frow"><span>Savings achieved</span><span style={{color:'var(--green)'}}>the difference</span></div>
              <div className="pr-frow"><span>NeuroRoute fee</span><span style={{color:'var(--magenta)'}}>20% of savings</span></div>
              <div className="pr-frow pr-frow-hi"><span>If savings = $0</span><span style={{color:'var(--green)'}}>our fee = $0. Period.</span></div>
            </div>
          ) : (
            <div className="pr-formula">
              <div className="pr-frow"><span>Provider cost (what we pay)</span><span className="mono">$0.08</span></div>
              <div className="pr-frow"><span>+ Platform markup (25%)</span><span className="mono" style={{color:'var(--magenta)'}}>$0.02</span></div>
              <div className="pr-frow pr-frow-hi"><span>= Your price</span><span className="mono" style={{color:'var(--tx-0)'}}>$0.10</span></div>
              <div className="pr-frow"><span>GPT-4o would have cost</span><span className="mono" style={{color:'#ff8095',textDecoration:'line-through'}}>$0.35</span></div>
              <div className="pr-frow"><span>You still save</span><span className="mono" style={{color:'var(--green)'}}>$0.25 (71%)</span></div>
            </div>
          )}

          {/* checklist */}
          <div className="pr-feats">
            {track==='pm' && <div className="pr-feat pr-feat-head"><Icon name="check" size={14}/>Everything in BYOK, plus:</div>}
            {(track==='byok'?byokFeatures:pmExtra).map(f=>(
              <div key={f} className="pr-feat"><Icon name="check" size={14} style={{color:'var(--green)',flex:'none'}}/>{f}</div>
            ))}
          </div>
          <button className="btn btn-grad btn-lg btn-block" style={{marginTop:6}} onClick={()=>go('login')}>
            {track==='byok'?'Get started free — add your first key':'Get started free — no keys required'}<Icon name="arrowright" size={16}/></button>
        </div>

        {/* calculator */}
        <div className="pr-calc">
          <div className="pr-calc-h">Estimate your bill</div>
          <div className="spread"><span className="label">Your monthly AI spend</span><span className="display tnum" style={{fontSize:22}}>{money(spend)}</span></div>
          <input className="range" type="range" min="500" max="50000" step="100" value={spend} style={{'--p':p+'%',margin:'14px 0 6px'}} onChange={e=>setSpend(+e.target.value)}/>
          <div className="spread faint mono" style={{fontSize:11}}><span>$500</span><span>$50,000</span></div>

          <div className="pr-bars">
            {track==='byok' ? <>
              <Bar label="GPT-4o only" val={without} max={without} color="#ff8095" strike/>
              <Bar label="With routing" val={routed} max={without} color={COL.blue}/>
              <Bar label="Net benefit" val={byokNet} max={without} color={COL.green}/>
            </> : <>
              <Bar label="GPT-4o only" val={without} max={without} color="#ff8095" strike/>
              <Bar label="cost + 25%" val={pmCost} max={without} color={COL.blue}/>
              <Bar label="You save" val={pmSavings} max={without} color={COL.green}/>
            </>}
          </div>

          <div className="pr-calc-rows">
            <div className="spread"><span className="faint">Without NeuroRoute</span><span className="mono" style={{color:'#ff8095'}}>{money(without)}/mo</span></div>
            <div className="spread"><span className="faint">{track==='byok'?'With routing':'With NeuroRoute (cost + 25%)'}</span><span className="mono">{money(track==='byok'?routed:pmCost)}/mo</span></div>
            {track==='byok' && <div className="spread"><span className="faint">NeuroRoute fee (20% of savings)</span><span className="mono" style={{color:'var(--magenta)'}}>{money(byokFee)}/mo</span></div>}
            <div className="spread pr-calc-net"><span style={{fontWeight:700}}>{track==='byok'?'Your net benefit':'Your savings vs GPT-4o'}</span><span className="display route-text" style={{fontSize:24}}>{money(track==='byok'?byokNet:pmSavings)}/mo</span></div>
          </div>
          <p className="faint" style={{fontSize:11.5,marginTop:12}}>{track==='byok'
            ? 'The 20% savings share is the default. Enterprise customers can negotiate custom rates.'
            : 'The 25% markup is the default. High-volume customers can negotiate down to 15% or lower.'}</p>
        </div>
      </div>

      {/* comparison table */}
      <div className="pr-compare card" style={{marginTop:22}}>
        <table className="table pr-table">
          <thead><tr><th></th><th><span className="row" style={{gap:7}}><Icon name="key" size={14} style={{color:'var(--cyan)'}}/>BYOK</span></th><th><span className="row" style={{gap:7}}><Icon name="provider" size={14} style={{color:'var(--purple)'}}/>Platform Managed</span></th></tr></thead>
          <tbody>
            {[['You pay providers','Directly','NeuroRoute pays',true,false],
              ['You manage keys','Your keys','We manage',true,false],
              ['NeuroRoute earns','20% of savings','25% markup on cost',null,null],
              ['Your net savings','~52%','~56%',null,null],
              ['Best for','Teams with existing keys','Teams wanting zero key mgmt',null,null],
              ['Billing','Provider bill + NeuroRoute fee','Single NeuroRoute invoice',null,null],
              ['Mix both?','Yes — per provider','Yes — per provider',true,true]].map((r,i)=>(
              <tr key={i}><td style={{fontWeight:600,color:'var(--tx-0)'}}>{r[0]}</td>
                <td>{r[3]===true&&<Icon name="check" size={14} style={{color:'var(--green)',marginRight:6,verticalAlign:'-2px'}}/>}{r[1]}</td>
                <td>{r[4]===false&&<Icon name="x" size={14} style={{color:'#ff8095',marginRight:6,verticalAlign:'-2px'}}/>}{r[4]===true&&<Icon name="check" size={14} style={{color:'var(--green)',marginRight:6,verticalAlign:'-2px'}}/>}{r[2]}</td></tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* why not both */}
      <div className="pr-both card card-pad">
        <div>
          <h3 className="display" style={{fontSize:20,marginBottom:8}}>Most customers use both</h3>
          <p className="muted" style={{fontSize:14,lineHeight:1.6,margin:0,maxWidth:460}}>Use BYOK where you already have keys and want maximum savings. Use Platform Managed where you'd rather not deal with key management. NeuroRoute routes seamlessly — you never think about which track a request uses.</p>
        </div>
        <div className="pr-diagram">
          <div className="pr-diag-col">
            <div className="pr-diag-prov"><ProviderLogo id="openai" size={26}/><span>OpenAI</span><Icon name="key" size={13} style={{color:'var(--green)',marginLeft:'auto'}}/></div>
            <div className="pr-diag-prov"><ProviderLogo id="anthropic" size={26}/><span>Anthropic</span><Icon name="key" size={13} style={{color:'var(--green)',marginLeft:'auto'}}/></div>
            <div className="pr-diag-prov"><ProviderLogo id="google" size={26}/><span>Google</span><Icon name="provider" size={13} style={{color:'var(--purple)',marginLeft:'auto'}}/></div>
          </div>
          <Icon name="arrowright" size={18} style={{color:'var(--tx-3)',flex:'none'}}/>
          <div className="pr-diag-hub"><LogoMark size={36}/><span className="mono" style={{fontSize:10.5}}>route</span></div>
          <Icon name="arrowright" size={18} style={{color:'var(--tx-3)',flex:'none'}}/>
          <div className="pr-diag-dash"><Icon name="dashboard" size={18} style={{color:'var(--cyan)'}}/><span>One dashboard</span></div>
        </div>
      </div>

      {/* enterprise */}
      <div className="pr-ent">
        <div className="aurora-bg dim"><span/><span/></div>
        <div className="pr-ent-in">
          <div>
            <div className="eyebrow" style={{marginBottom:8}}>ENTERPRISE</div>
            <h3 className="display" style={{fontSize:26,marginBottom:6}}>Enterprise? Let's talk.</h3>
            <div className="pr-ent-feats">
              {['Custom savings share (as low as 10%)','Custom markup (as low as 15%)','Self-hosted models — zero cost','Dedicated support + SLA','Volume discounts','SSO / SAML','Custom routing policies'].map(f=>(
                <span key={f} className="pr-feat"><Icon name="check" size={13} style={{color:'var(--cyan)',flex:'none'}}/>{f}</span>
              ))}
            </div>
          </div>
          <a className="btn btn-grad btn-lg" href="mailto:raman@sislinfotech.com?subject=NeuroRoute Enterprise" style={{flex:'none'}}>Talk to sales<Icon name="arrowright" size={16}/></a>
        </div>
      </div>

      {/* FAQ */}
      <div className="pr-faq">
        <h3 className="display" style={{fontSize:22,textAlign:'center',margin:'8px 0 22px'}}>Frequently asked questions</h3>
        {faqs.map((f,i)=>(
          <div key={i} className={'pr-q'+(faq===i?' open':'')}>
            <button className="pr-q-head" onClick={()=>setFaq(faq===i?-1:i)}>
              <span>{f[0]}</span><Icon name="chevdown" size={18} className="pr-q-chev"/>
            </button>
            <div className="pr-q-body"><p>{f[1]}</p></div>
          </div>
        ))}
      </div>
    </section>
  );
}

function PricingStyles(){
  return <style>{`
.pr-sec{position:relative}
.pr-toggle-wrap{text-align:center;margin-bottom:24px}
.pr-toggle{display:inline-flex;gap:4px;background:var(--bg-inset);border:1px solid var(--line-2);border-radius:var(--r-pill);padding:5px}
.pr-toggle button{display:flex;align-items:center;gap:8px;border:none;background:none;color:var(--tx-2);font-family:var(--font-ui);font-weight:600;font-size:14px;padding:10px 20px;border-radius:99px;cursor:pointer;transition:.18s}
.pr-toggle button:hover{color:var(--tx-0)}
.pr-toggle button.on{background:var(--grad-brand);color:#fff;box-shadow:0 6px 18px -8px rgba(226,79,214,.6)}

.pr-card{display:grid;grid-template-columns:1.15fr 1fr;gap:0;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-xl);overflow:hidden;animation:fade .35s}
.pr-card-l{padding:28px}
.pr-formula{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:20px;background:var(--bg-inset)}
.pr-frow{display:flex;justify-content:space-between;gap:12px;padding:11px 14px;font-size:13px;border-bottom:1px solid var(--line)}
.pr-frow:last-child{border-bottom:none}
.pr-frow span:first-child{color:var(--tx-1);font-weight:500}
.pr-frow-hi{background:rgba(16,185,129,.07);font-weight:600}
.pr-feats{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:22px}
.pr-feat{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--tx-1);line-height:1.4}
.pr-feat-head{grid-column:1/-1;font-weight:700;color:var(--tx-0)}
.pr-feat-head .ico,.pr-feat-head svg{color:var(--green)}

.pr-calc{padding:28px;background:var(--bg-inset);border-left:1px solid var(--line-2)}
.pr-calc-h{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-2);margin-bottom:16px}
.pr-bars{display:flex;align-items:flex-end;gap:14px;height:150px;margin:22px 0 18px;padding:0 6px}
.pr-bar{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end;gap:8px}
.pr-bar-track{width:100%;flex:1;display:flex;align-items:flex-end;background:var(--bg-3);border-radius:8px;overflow:hidden}
.pr-bar-track i{display:block;width:100%;border-radius:8px 8px 0 0;transition:height .5s cubic-bezier(.3,.9,.3,1)}
.pr-bar-val{font-size:12px;font-weight:600}
.pr-bar-label{font-size:11px;color:var(--tx-2);text-align:center}
.pr-calc-rows{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:16px}
.pr-calc-net{border-top:1px solid var(--line);padding-top:12px;margin-top:4px;align-items:center}

.pr-compare{overflow:hidden}
.pr-table td,.pr-table th{width:33%}
.pr-table thead th{font-size:13px;text-transform:none;letter-spacing:0;color:var(--tx-0);font-weight:700;cursor:default}
.pr-table thead th:hover{color:var(--tx-0)}
.pr-table td{cursor:default}

.pr-both{display:flex;gap:28px;align-items:center;justify-content:space-between;margin-top:18px;flex-wrap:wrap}
.pr-diagram{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pr-diag-col{display:flex;flex-direction:column;gap:7px}
.pr-diag-prov{display:flex;align-items:center;gap:9px;background:var(--bg-inset);border:1px solid var(--line-2);border-radius:10px;padding:8px 12px;font-size:12.5px;font-weight:600;min-width:158px}
.pr-diag-hub{display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--bg-inset);border:1px solid var(--purple);border-radius:14px;padding:12px;box-shadow:0 0 0 4px rgba(139,92,246,.12)}
.pr-diag-dash{display:flex;align-items:center;gap:9px;background:var(--bg-inset);border:1px solid var(--line-2);border-radius:10px;padding:12px 14px;font-size:12.5px;font-weight:600}

.pr-ent{position:relative;overflow:hidden;margin-top:24px;border-radius:var(--r-xl);border:1px solid var(--line-2);background:linear-gradient(120deg,#11141f,#161020)}
.pr-ent .aurora-bg{opacity:.3}
.pr-ent-in{position:relative;display:flex;gap:28px;align-items:center;justify-content:space-between;padding:30px;flex-wrap:wrap}
.pr-ent-feats{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;max-width:620px}
.pr-ent-feats .pr-feat{background:rgba(255,255,255,.04);border:1px solid var(--line-2);border-radius:8px;padding:6px 10px}

.pr-faq{max-width:760px;margin:44px auto 0}
.pr-q{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;background:var(--bg-2);overflow:hidden;transition:.2s}
.pr-q.open{border-color:var(--line-2)}
.pr-q-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;background:none;border:none;color:var(--tx-0);font-family:var(--font-ui);font-weight:600;font-size:14.5px;text-align:left;padding:16px 18px;cursor:pointer}
.pr-q-chev{color:var(--tx-2);transition:.25s;flex:none}
.pr-q.open .pr-q-chev{transform:rotate(180deg);color:var(--cyan)}
.pr-q-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.pr-q.open .pr-q-body{max-height:240px}
.pr-q-body p{margin:0;padding:0 18px 16px;color:var(--tx-1);font-size:13.5px;line-height:1.65}

@media(max-width:880px){
  .pr-card{grid-template-columns:1fr}
  .pr-calc{border-left:none;border-top:1px solid var(--line-2)}
  .pr-feats{grid-template-columns:1fr}
  .pr-table{font-size:12px}
  .pr-ent-in,.pr-both{flex-direction:column;align-items:flex-start}
}
`}</style>;
}

window.PricingSection=PricingSection;
