/* ============================================================
   NeuroRoute — Landing page (public) + 3 hero variations
   ============================================================ */
const {useState:useStateL, useEffect:useEffectL, useRef:useRefL} = React;

/* smooth in-page scroll without touching the hash router */
function lpScroll(id){
  const el=document.getElementById(id);
  if(el) window.scrollTo({top:el.getBoundingClientRect().top+window.scrollY-70, behavior:'smooth'});
}

/* shared animated routing diagram: 1 request -> 3 routed models */
function RoutingViz({compact}){
  const targets=[
    {c:COL.cyan,   m:'Gemini Flash',  t:'factual'},
    {c:COL.magenta,m:'Claude Sonnet', t:'creative'},
    {c:COL.amber,  m:'GPT-4o-mini',   t:'extraction'},
    {c:COL.purple, m:'Grok 3',        t:'analysis'},
    {c:'#5ea2ff',  m:'Llama 3.3 70B', t:'chat'},
    {c:COL.green,  m:'Mistral Large', t:'summarize'},
  ];
  const N=targets.length, top=12, gap=43, hub=150;
  const yOf=(i)=>top+i*gap;                 // top of label box
  const cyOf=(i)=>yOf(i)+13;                 // arrow/curve center
  const [active,setActive]=useStateL(0);
  useEffectL(()=>{const id=setInterval(()=>setActive(a=>(a+1)%N),1300);return ()=>clearInterval(id);},[]);
  const H = yOf(N-1)+26+12;
  return (
    <div className="rviz">
      <svg viewBox={`0 0 440 ${H}`} width="100%" style={{display:'block'}}>
        {/* request source */}
        <circle cx="52" cy={hub} r="30" fill="rgba(59,130,246,.12)" stroke="rgba(59,130,246,.5)"/>
        <circle cx="52" cy={hub} r="30" fill="none" stroke="#3b82f6" strokeWidth="2" opacity=".5">
          <animate attributeName="r" values="30;40;30" dur="2.4s" repeatCount="indefinite"/>
          <animate attributeName="opacity" values=".5;0;.5" dur="2.4s" repeatCount="indefinite"/>
        </circle>
        <text x="52" y={hub-4} textAnchor="middle" fill="#7db0ff" fontSize="11" fontFamily="JetBrains Mono">POST</text>
        <text x="52" y={hub+10} textAnchor="middle" fill="#aab2c5" fontSize="9.5" fontFamily="JetBrains Mono">/chat</text>
        {/* router hub */}
        <g>
          <rect x="146" y={hub-22} width="44" height="44" rx="11" fill="rgba(139,92,246,.14)" stroke="#8b5cf6"/>
          <circle cx="168" cy={hub} r="4" fill="#a06cf2"/>
          <path d={`M160 ${hub}h16M168 ${hub-8}v16`} stroke="#8b5cf6" strokeWidth="1.6" strokeLinecap="round"/>
        </g>
        <path d={`M82 ${hub} H146`} stroke="#5b6480" strokeWidth="2" strokeDasharray="4 4">
          <animate attributeName="stroke-dashoffset" values="16;0" dur="0.7s" repeatCount="indefinite"/>
        </path>
        {targets.map((t,i)=>{
          const on=active===i; const cy=cyOf(i);
          return (
            <g key={i} opacity={on?1:.38} style={{transition:'opacity .4s'}}>
              <path d={`M190 ${hub} C 248 ${hub}, 252 ${cy}, 300 ${cy}`} fill="none"
                stroke={t.c} strokeWidth={on?3:1.8} strokeDasharray="5 5" strokeLinecap="round">
                {on&&<animate attributeName="stroke-dashoffset" values="20;0" dur="0.6s" repeatCount="indefinite"/>}
              </path>
              <path d={`M298 ${cy-4} l6 4 -6 4`} fill="none" stroke={t.c} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
              <rect x="314" y={yOf(i)} width="116" height="26" rx="7" fill={t.c+'1f'} stroke={on?t.c:'transparent'}/>
              <circle cx="326" cy={cy} r="3.2" fill={t.c}/>
              <text x="336" y={cy+4} fill={on?'#fff':'#aab2c5'} fontSize="11" fontFamily="Manrope" fontWeight="600">{t.m}</text>
            </g>
          );
        })}
      </svg>
      <div className="rviz-cap mono">classified · scored · routed in 1.4 ms · 10+ providers</div>
    </div>
  );
}

/* ---- HERO VARIATION 1: Aurora ---- */
function HeroAurora(){
  return (
    <header className="hero hero-aurora">
      <div className="aurora-bg"><span/><span/><span/></div>
      <div className="hero-inner" style={{textAlign:'center',maxWidth:880}}>
        <div className="chip" style={{margin:'0 auto 22px'}}><span className="badge b-purple" style={{padding:'1px 8px'}}>NEW</span> Cascade routing is live</div>
        <h1 className="display hero-h1">Route AI requests to the<br/><span className="route-text">right model.</span> Save 60–80%.</h1>
        <p className="hero-sub">NeuroRoute sits between your app and every AI provider — classifying each request and routing it to the optimal model on quality, cost, and latency. One endpoint. Measurable savings.</p>
        <div className="row" style={{justifyContent:'center',marginTop:30}}>
          <a className="btn btn-grad btn-lg" onClick={()=>go('login')}><Icon name="sparkles" size={17}/>Get started free</a>
          <a className="btn btn-ghost btn-lg" onClick={()=>lpScroll('how')} style={{cursor:'pointer'}}><Icon name="playground" size={17}/>See how it works</a>
        </div>
        <div className="hero-viz-card" style={{marginTop:44}}><RoutingViz/></div>
      </div>
    </header>
  );
}

/* ---- HERO VARIATION 2: Split + live viz ---- */
function HeroSplit(){
  return (
    <header className="hero hero-split">
      <div className="aurora-bg dim"><span/><span/></div>
      <div className="hero-inner hsplit">
        <div>
          <div className="eyebrow" style={{marginBottom:16}}>AI COST OPTIMIZATION PLATFORM</div>
          <h1 className="display hero-h1" style={{fontSize:'min(6.4vw,60px)'}}>Stop overpaying for <span className="gradient-text">GPT-4o</span> on every request.</h1>
          <p className="hero-sub" style={{margin:'20px 0 0'}}>NeuroRoute classifies each request and routes it to the cheapest model that clears your quality bar — across OpenAI, Anthropic, Google, Groq & more.</p>
          <div className="row" style={{marginTop:30}}>
            <a className="btn btn-grad btn-lg" onClick={()=>go('login')}>Get started free<Icon name="arrowright" size={16}/></a>
            <a className="btn btn-ghost btn-lg" onClick={()=>lpScroll('roi')} style={{cursor:'pointer'}}>Calculate savings</a>
          </div>
          <div className="row" style={{marginTop:26,gap:22,color:'var(--tx-2)',fontSize:13}}>
            <span className="row" style={{gap:7}}><Icon name="checkcircle" size={15} style={{color:'var(--green)'}}/>No credit card</span>
            <span className="row" style={{gap:7}}><Icon name="checkcircle" size={15} style={{color:'var(--green)'}}/>OpenAI-compatible</span>
            <span className="row" style={{gap:7}}><Icon name="checkcircle" size={15} style={{color:'var(--green)'}}/>BYOK</span>
          </div>
        </div>
        <div className="hero-viz-card"><RoutingViz/></div>
      </div>
    </header>
  );
}

/* ---- HERO VARIATION 3: Proof / terminal ---- */
function HeroProof(){
  return (
    <header className="hero hero-proof">
      <div className="aurora-bg dim"><span/><span/><span/></div>
      <div className="hero-inner" style={{textAlign:'center',maxWidth:820}}>
        <h1 className="display hero-h1">The same request.<br/><span className="route-text">A fraction of the cost.</span></h1>
        <p className="hero-sub">Drop-in replacement for the OpenAI API. Change one URL — keep your code, your keys, your quality. Watch the savings add up on every call.</p>
        <div className="proof-grid">
          <div className="codeblock proof-code">
            <div className="proof-line"><span className="tok-com"># before — every call to GPT-4o</span></div>
            <div className="proof-line"><span className="tok-key">curl</span> https://api.openai.com/v1/...</div>
            <div className="proof-line proof-cost bad">$0.0366 <span>/ request</span></div>
            <div style={{height:14}}/>
            <div className="proof-line"><span className="tok-com"># after — routed by NeuroRoute</span></div>
            <div className="proof-line"><span className="tok-key">curl</span> https://api.neuroroute.ai/v1/...</div>
            <div className="proof-line proof-cost good">$0.0112 <span>/ request · 69% saved</span></div>
          </div>
          <div className="hero-viz-card" style={{margin:0}}><RoutingViz/></div>
        </div>
        <div className="row" style={{justifyContent:'center',marginTop:30}}>
          <a className="btn btn-grad btn-lg" onClick={()=>go('login')}>Start saving free</a>
          <a className="btn btn-ghost btn-lg" onClick={()=>lpScroll('pricing')} style={{cursor:'pointer'}}>View pricing</a>
        </div>
      </div>
    </header>
  );
}

const HEROES=[
  {id:'aurora',label:'Aurora',C:HeroAurora},
  {id:'split', label:'Split + viz',C:HeroSplit},
  {id:'proof', label:'Proof / terminal',C:HeroProof},
];

/* ---- ROI calculator ---- */
function ROICalc(){
  const [spend,setSpend]=useStateL(4000);
  const pct=0.66;
  const fmt=(n)=>'$'+Math.round(n).toLocaleString();
  const saving=spend*pct, bill=spend-saving, annual=saving*12;
  const p=((spend-100)/(50000-100))*100;
  return (
    <section id="roi" className="lp-sec">
      <div className="lp-head"><div className="eyebrow">ROI CALCULATOR</div><h2 className="display lp-h2">See what you'd save</h2>
        <p className="lp-p">Drag to match your current monthly AI spend. Estimate based on 66% average savings across mixed task workloads.</p></div>
      <div className="card card-pad roi-card">
        <div className="roi-slider">
          <div className="spread"><span className="label">Monthly AI spend</span><span className="display tnum" style={{fontSize:26}}>{fmt(spend)}</span></div>
          <input className="range" type="range" min="100" max="50000" step="100" value={spend}
            style={{'--p':p+'%'}} onChange={e=>setSpend(+e.target.value)}/>
          <div className="spread faint mono" style={{fontSize:11}}><span>$100</span><span>$50,000</span></div>
        </div>
        <div className="roi-out">
          <div className="roi-stat"><div className="roi-v route-text tnum">{fmt(saving)}</div><div className="faint">Monthly savings</div></div>
          <div className="roi-stat"><div className="roi-v tnum">{fmt(bill)}</div><div className="faint">Your new bill</div></div>
          <div className="roi-stat"><div className="roi-v tnum" style={{color:'var(--green)'}}>{fmt(annual)}</div><div className="faint">Annual savings</div></div>
        </div>
      </div>
    </section>
  );
}

function LandingPage(){
  const HeroC=HeroAurora;   // locked to Aurora for production
  const features=[
    {ic:'route',  c:'blue',   t:'Intelligent Routing', d:'Each request is classified by task type, then scored across models on quality, cost & latency. Six routing strategies including cost-saving cascades.'},
    {ic:'key',    c:'cyan',   t:'Bring Your Own Keys', d:'Use your existing provider keys and keep every dollar saved. NeuroRoute charges only a small share of the savings it achieves.'},
    {ic:'billing',c:'magenta',t:'Transparent Billing', d:'Every request logs actual cost vs the GPT-4o counterfactual. Real-time dashboards with per-model breakdowns. No hidden fees.'},
    {ic:'shield', c:'amber',  t:'Enterprise Security', d:'HMAC-signed keys, ECDSA JWT sessions, RBAC, envelope-encrypted provider keys, PII detection & full audit logging.'},
  ];
  const steps=[
    {n:'01',t:'Point your app at NeuroRoute',d:'A drop-in replacement for the OpenAI API. Change one base URL — no code changes. Streaming, tools & multimodal supported.'},
    {n:'02',t:'The router picks the best model',d:'We classify the task (code, analysis, creative, math…) and select the cheapest model that meets your quality bar.'},
    {n:'03',t:'Save money, see the proof',d:'Every decision is logged with actual cost vs the GPT-4o baseline. Your dashboard shows exactly how much you saved and why.'},
  ];
  const tiers=[
    {name:'Free',price:'$0',per:'/mo',d:'For individuals and small experiments.',cta:'Get started free',ghost:true,
      feat:['1,000 requests / month','All routing strategies','BYOK support','Basic usage dashboard','OpenAI-compatible API','Email support']},
    {name:'Pro',price:'$49',per:'/mo',d:'For teams running AI in production.',cta:'Start Pro trial',hot:true,
      feat:['50,000 requests / month','All strategies + cascade','BYOK with savings tracking','Full analytics dashboard','Team management (5 seats)','Cost Estimator & Playground','Priority support']},
    {name:'Enterprise',price:'Custom',per:'',d:'For large orgs with custom needs.',cta:'Contact sales',ghost:true,
      feat:['Unlimited requests','Custom routing policies','SISL-managed keys','Self-hosted option','Unlimited seats + RBAC','SLA & uptime guarantee','Dedicated account manager']},
  ];
  return (
    <div className="lp">
      <LandingStyles/>

      <nav className="lp-nav">
        <div className="lp-nav-in">
          <div className="row" style={{gap:12}}><LogoMark size={44}/><span className="display" style={{fontSize:20,fontWeight:700}}>NeuroRoute</span></div>
          <div className="lp-links">
            <a style={{cursor:'pointer'}} onClick={()=>lpScroll('pricing')}>Pricing</a>
            <a className="btn btn-grad btn-sm" onClick={()=>go('login')} style={{cursor:'pointer'}}>Login</a>
          </div>
        </div>
      </nav>

      <HeroC/>

      {/* stats bar */}
      <div className="lp-stats">
        {[['60–80%','Average cost savings'],['<2 ms','Routing overhead'],['10+','AI providers'],['99.9%','Uptime · SOC 2']].map((s,i)=>(
          <div key={i} className="lp-stat"><div className="display route-text" style={{fontSize:30}}>{s[0]}</div><div className="faint" style={{fontSize:13}}>{s[1]}</div></div>
        ))}
      </div>

      {/* features */}
      <FeaturesSection/>

      {/* how it works — interactive */}
      <HowItWorksDemo/>

      <ROICalc/>

      {/* pricing — two-track */}
      <PricingSection/>

      {/* social proof */}
      <section className="lp-sec">
        <div className="lp-head"><p className="faint" style={{fontSize:13,letterSpacing:'.04em'}}>TRUSTED BY AI-NATIVE TEAMS</p></div>
        <div className="logos">{['Helix Robotics','Quanta Finance','Brightpath AI','Orbit Commerce','Sable Health','Cinder Security'].map(n=>
          <div key={n} className="logo-ph">{n}</div>)}</div>
        <div className="card card-pad quote">
          <div className="route-text display" style={{fontSize:22,lineHeight:1.4}}>“We cut our LLM bill 71% in the first month without touching product quality. The per-request proof made it an easy sell internally.”</div>
          <div className="row" style={{marginTop:18,gap:11}}><div className="avatar" style={{background:'#e24fd6'}}>DH</div>
            <div><div style={{fontWeight:700}}>Dana Whitlock</div><div className="faint" style={{fontSize:12.5}}>VP Engineering, Helix Robotics</div></div></div>
        </div>
      </section>

      {/* CTA */}
      <section className="lp-cta">
        <div className="aurora-bg"><span/><span/></div>
        <h2 className="display" style={{fontSize:38,position:'relative'}}>Ready to cut your AI bill in half?</h2>
        <p className="lp-p" style={{position:'relative'}}>Join teams saving thousands per month. Sign up free — no credit card required.</p>
        <a className="btn btn-grad btn-lg" style={{position:'relative'}} onClick={()=>go('login')}><Icon name="google" size={18}/>Get started with Google</a>
      </section>

      <footer className="lp-foot">
        <div className="row" style={{gap:12}}><LogoMark size={38}/><div><div className="display" style={{fontSize:16}}>NeuroRoute</div><div className="faint mono" style={{fontSize:11}}>by SISL CloudWorx</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>Docs</a><a>Status</a><a>Privacy</a><a>Terms</a><a href="mailto:raman@sislinfotech.com">Contact</a></div>
      </footer>
    </div>
  );
}

function LandingStyles(){
  return <style>{`
.lp{background:var(--bg-0);min-height:100vh;overflow-x:hidden}
.lp a{transition:.15s}
.hero-switch{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:90;display:flex;align-items:center;gap:6px;
  background:rgba(17,20,31,.9);backdrop-filter:blur(12px);border:1px solid var(--line-2);border-radius:var(--r-pill);padding:6px 8px 6px 14px;box-shadow:var(--sh-2)}
.hero-switch button{border:none;background:none;color:var(--tx-2);font-family:var(--font-ui);font-weight:600;font-size:12.5px;padding:6px 12px;border-radius:99px;cursor:pointer;transition:.13s}
.hero-switch button:hover{color:var(--tx-0)}
.hero-switch button.active{background:var(--grad-brand);color:#fff}

.lp-nav{position:sticky;top:0;z-index:80;background:rgba(7,8,13,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.lp-nav-in{max-width:1200px;margin:0 auto;padding:14px 28px;display:flex;align-items:center;justify-content:space-between}
.lp-links{display:flex;align-items:center;gap:24px;font-size:14px;color:var(--tx-1);white-space:nowrap}
.lp-links a:hover{color:var(--tx-0)}

.hero{position:relative;overflow:hidden;padding:96px 28px 60px;display:flex;justify-content:center}
.hero-inner{position:relative;z-index:2;width:100%;max-width:1120px}
.hero-h1{font-size:min(8vw,68px);font-weight:700}
.hero-sub{color:var(--tx-1);font-size:18px;line-height:1.6;max-width:620px;margin:22px auto 0}
.hero-aurora .hero-sub,.hero-proof .hero-sub{margin-left:auto;margin-right:auto}
.hsplit{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero-split .hero-sub{max-width:520px;margin-left:0}

.aurora-bg{position:absolute;inset:0;z-index:0;filter:blur(60px);opacity:.85}
.aurora-bg.dim{opacity:.5}
.aurora-bg span{position:absolute;border-radius:50%;mix-blend-mode:screen}
.aurora-bg span:nth-child(1){width:540px;height:540px;background:radial-gradient(circle,#3b82f6,transparent 65%);top:-160px;left:-80px;animation:float1 14s ease-in-out infinite}
.aurora-bg span:nth-child(2){width:520px;height:520px;background:radial-gradient(circle,#e24fd6,transparent 65%);top:-120px;right:-60px;animation:float2 17s ease-in-out infinite}
.aurora-bg span:nth-child(3){width:460px;height:460px;background:radial-gradient(circle,#f59e0b,transparent 68%);bottom:-200px;left:40%;animation:float1 20s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,30px)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-40px,40px)}}

.hero-viz-card{background:rgba(13,16,24,.7);border:1px solid var(--line-2);border-radius:var(--r-xl);padding:22px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9);max-width:520px;margin:0 auto}
.rviz-cap{margin-top:10px;text-align:center;font-size:11px;color:var(--tx-2);letter-spacing:.06em}
.proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:38px;text-align:left}
.proof-code{font-size:13px;line-height:1.9}
.proof-line{white-space:nowrap}
.proof-cost{font-weight:700;font-size:15px;margin-top:2px}
.proof-cost span{font-size:11.5px;font-weight:500;color:var(--tx-2)}
.proof-cost.bad{color:#ff8095}.proof-cost.good{color:#43d6a3}

.lp-stats{max-width:1000px;margin:0 auto;padding:8px 28px 20px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.lp-stat{text-align:center;padding:18px;border-right:1px solid var(--line)}
.lp-stat:last-child{border-right:none}

.lp-sec{max-width:1120px;margin:0 auto;padding:64px 28px}
.lp-head{text-align:center;max-width:680px;margin:0 auto 42px}
.lp-h2{font-size:min(6vw,38px);margin:12px 0 0}
.lp-p{color:var(--tx-1);font-size:16px;line-height:1.6;margin:14px auto 0}
.feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.feat{position:relative;overflow:hidden}

.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;position:relative}
.step{position:relative}
.step-n{font-size:34px;font-weight:700}
.step-line{position:absolute;top:20px;right:-28px;width:56px;height:2px;background:linear-gradient(90deg,var(--line-2),transparent)}

.roi-card{display:grid;grid-template-columns:1fr 1.1fr;gap:36px;align-items:center}
.roi-slider{display:flex;flex-direction:column;gap:16px}
.roi-out{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;border-left:1px solid var(--line);padding-left:32px}
.roi-stat{text-align:center}
.roi-v{font-family:var(--font-display);font-weight:600;font-size:30px;line-height:1.1}

.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.price-card{position:relative;overflow:visible}
.price-card.hot{border-color:rgba(226,79,214,.5);box-shadow:0 24px 60px -28px rgba(226,79,214,.5)}
.price-flag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--grad-brand);color:#fff;
  font-size:10.5px;font-weight:700;letter-spacing:.1em;padding:5px 12px;border-radius:99px;font-family:var(--font-mono)}
.price-feat{display:flex;flex-direction:column;gap:11px;margin-top:20px;border-top:1px solid var(--line);padding-top:18px}

.logos{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-bottom:32px}
.logo-ph{font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--tx-2);border:1px solid var(--line-2);
  border-radius:var(--r-md);padding:12px 20px;background:var(--bg-2)}
.quote{max-width:720px;margin:0 auto;text-align:center}

.lp-cta{position:relative;overflow:hidden;text-align:center;padding:88px 28px;margin:40px 28px;border-radius:var(--r-xl);
  border:1px solid var(--line-2);background:var(--bg-2)}
.lp-foot{max-width:1120px;margin:0 auto;padding:36px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;
  border-top:1px solid var(--line);flex-wrap:wrap}

@media(max-width:860px){
  .hsplit,.proof-grid,.roi-card,.feat-grid,.steps-grid,.price-grid{grid-template-columns:1fr}
  .lp-stats{grid-template-columns:repeat(2,1fr)}
  .lp-links a:not(.btn){display:none}
  .roi-out{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:20px}
  .step-line{display:none}
}
`}</style>;
}

window.PAGES = Object.assign(window.PAGES||{}, {landing:LandingPage});