// Neurasea for Business — Consumers view (plans + economics)
// Exports to window: BizConsumers

function BuyModes() {
  const t = useTheme();
  const T = useT();
  const modes = [
    { id: 'spot', icon: 'bolt', title: 'Spot', body: 'Pay only for the tokens you use, at the live market price.' },
    { id: 'fut', icon: 'battery', title: 'Futures', body: 'Lock a weekly rate below spot. Best for steady, predictable load.' },
  ];
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, maxWidth: 720, margin: '0 auto 44px' }}>
      {modes.map(m => (
        <div key={m.id} style={{ display: 'flex', gap: 14, padding: 22, background: t.panel, border: `1px solid ${t.line}`, borderRadius: 16 }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 42, height: 42, borderRadius: 11, background: t.drawSoft, color: t.draw, flexShrink: 0 }}>
            <Icon name={m.icon} size={21} color={t.draw}/>
          </div>
          <div>
            <div style={{ fontSize: 16, fontWeight: 650, color: t.ink }}>{T(m.title)}</div>
            <p style={{ margin: '4px 0 0', fontSize: 13.5, lineHeight: 1.5, color: t.ink2 }}>{T(m.body)}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

function PlanCard({ p }) {
  const t = useTheme();
  const T = useT();
  const pop = p.popular;
  return (
    <div style={{
      background: pop ? t.ink : t.panel, color: pop ? '#fff' : t.ink,
      border: `1px solid ${pop ? t.ink : t.line}`, borderRadius: 18, padding: 24,
      position: 'relative', display: 'flex', flexDirection: 'column',
      boxShadow: pop ? (t.dark ? '0 18px 50px rgba(0,0,0,0.5)' : '0 18px 50px rgba(0,0,0,0.16)') : 'none',
      transform: pop ? 'scale(1.03)' : 'none',
    }}>
      {pop && <div style={{ position: 'absolute', top: 16, right: 16, fontSize: 10.5, fontWeight: 650, fontFamily: t.mono, color: t.live, background: t.liveSoft, padding: '3px 9px', borderRadius: 999, textTransform: 'uppercase', letterSpacing: '0.04em' }}>{T('Most popular')}</div>}
      <div style={{ fontSize: 14, fontWeight: 650, fontFamily: t.mono, color: pop ? '#fff' : t.ink, textTransform: 'uppercase', letterSpacing: '0.05em' }}>{T(p.name)}</div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, margin: '14px 0 4px' }}>
        {p.price === null
          ? <span style={{ fontSize: 30, fontWeight: 720, letterSpacing: '-0.02em' }}>{T('Custom')}</span>
          : <><span style={{ fontSize: 38, fontWeight: 720, letterSpacing: '-0.025em' }}>${p.price}</span><span style={{ fontSize: 13, color: pop ? 'rgba(255,255,255,0.6)' : t.ink3, fontFamily: t.mono }}>{T(p.unit)}</span></>}
      </div>
      <div style={{ fontSize: 12.5, color: pop ? 'rgba(255,255,255,0.62)' : t.ink3, fontFamily: t.mono, minHeight: 18 }}>
        {p.included != null ? <>{p.included} kWh {T('included / week')} · {T('then spot price')}</> : '\u00A0'}
      </div>
      <div style={{ height: 1, background: pop ? 'rgba(255,255,255,0.12)' : t.line2, margin: '18px 0' }}/>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 11, flex: 1 }}>
        {p.features.map((f, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 9, fontSize: 13, color: pop ? 'rgba(255,255,255,0.85)' : t.ink }}>
            <Icon name="check" size={16} color={t.live} style={{ marginTop: 1, flexShrink: 0 }}/> {T(f)}
          </div>
        ))}
      </div>
      <div style={{ marginTop: 22 }}>
        <Btn kind={pop ? 'accent' : 'secondary'} color={pop ? t.live : undefined} full icon={p.cta === 'Contact sales' ? 'arrowUpRight' : 'arrowRight'}>{T(p.cta)}</Btn>
      </div>
    </div>
  );
}

function NeverDeal() {
  const t = useTheme();
  const T = useT();
  const items = ['Rate limits & banned keys', 'Juggling many provider bills', 'Quality regressions', 'Vendor lock-in'];
  return (
    <section style={{ marginTop: 64 }}>
      <h2 style={{ margin: '0 0 22px', fontSize: 24, fontWeight: 700, letterSpacing: '-0.02em', color: t.ink, textAlign: 'center' }}>{T('What you never deal with')}</h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 14, maxWidth: 980, margin: '0 auto' }}>
        {items.map((it, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '16px 18px', background: t.panel2, border: `1px solid ${t.line}`, borderRadius: 14 }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 26, height: 26, borderRadius: 8, background: 'oklch(0.62 0.19 25 / 0.12)', color: 'oklch(0.62 0.19 25)', flexShrink: 0, fontWeight: 700, fontSize: 16 }}>×</span>
            <span style={{ fontSize: 13.5, fontWeight: 550, color: t.ink }}>{T(it)}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

function WhyCheaper() {
  const t = useTheme();
  const T = useT();
  const reasons = [
    { icon: 'layers', title: 'Blended supply', body: 'Idle quota from thousands of accounts is pooled, so you ride the marginal cost — not list price.' },
    { icon: 'flow', title: 'Open competition', body: 'Suppliers bid to serve your traffic; the cheapest healthy one always wins.' },
    { icon: 'shield', title: 'No middlemen markup', body: 'One exchange, one settlement layer — no reseller stacking fees on top.' },
  ];
  return (
    <section style={{ marginTop: 64, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, alignItems: 'center' }}>
      <div>
        <div style={{ fontSize: 13, fontWeight: 650, color: t.live, fontFamily: t.mono, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 18 }}>{T("Why it's cheaper")}</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          {reasons.map((r, i) => (
            <div key={i} style={{ display: 'flex', gap: 14 }}>
              <div style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 40, height: 40, borderRadius: 11, background: t.liveSoft, color: t.live, flexShrink: 0 }}>
                <Icon name={r.icon} size={20} color={t.live}/>
              </div>
              <div>
                <div style={{ fontSize: 16, fontWeight: 650, color: t.ink }}>{T(r.title)}</div>
                <p style={{ margin: '3px 0 0', fontSize: 13.5, lineHeight: 1.5, color: t.ink2, maxWidth: 380 }}>{T(r.body)}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
      <ComparePanel/>
    </section>
  );
}

function ComparePanel() {
  const t = useTheme();
  const T = useT();
  const rows = BIZ_DATA.compare;
  return (
    <div style={{ background: t.panel, border: `1px solid ${t.line}`, borderRadius: 18, padding: 22 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
        <span style={{ fontSize: 15, fontWeight: 650, color: t.ink }}>{T('Compare to going direct')}</span>
        <span style={{ fontSize: 11.5, color: t.ink3, fontFamily: t.mono }}>{T('per 1M tokens')}</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 0.9fr 0.9fr 0.7fr', gap: 8, fontSize: 10.5, fontFamily: t.mono, color: t.ink3, textTransform: 'uppercase', letterSpacing: '0.04em', padding: '12px 0 8px', borderBottom: `1px solid ${t.line2}` }}>
        <span></span><span style={{ textAlign: 'right' }}>{T('Direct list price')}</span><span style={{ textAlign: 'right' }}>{T('On Neurasea')}</span><span style={{ textAlign: 'right' }}>{T('you save')}</span>
      </div>
      {rows.map((r, i) => {
        const save = Math.round((1 - r.ours / r.direct) * 100);
        return (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '1.4fr 0.9fr 0.9fr 0.7fr', gap: 8, alignItems: 'center', padding: '11px 0', borderBottom: i < rows.length - 1 ? `1px solid ${t.line2}` : 'none' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 9, minWidth: 0 }}>
              <Avatar label={r.model[0]} bg={r.bg} fg={r.fg} size={24} radius={7}/>
              <span style={{ fontSize: 12.5, fontWeight: 600, color: t.ink, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.model}</span>
            </div>
            <span style={{ fontSize: 13, fontFamily: t.mono, color: t.ink3, textAlign: 'right', textDecoration: 'line-through' }}>${r.direct.toFixed(1)}</span>
            <span style={{ fontSize: 13, fontFamily: t.mono, fontWeight: 650, color: t.ink, textAlign: 'right' }}>${r.ours.toFixed(1)}</span>
            <span style={{ fontSize: 12.5, fontFamily: t.mono, fontWeight: 650, color: t.live, textAlign: 'right' }}>−{save}%</span>
          </div>
        );
      })}
    </div>
  );
}

function BizConsumers() {
  const t = useTheme();
  const T = useT();
  return (
    <div style={{ padding: '56px 56px 72px', maxWidth: 1200, margin: '0 auto' }}>
      <ExHead kicker={T('For Consumers')} title={T('Lowest price. Guaranteed quality. One subscription.')}
        sub={T("You don't care whether a request is served by a ready-made account or a raw API key — and you shouldn't have to. Subscribe, call any model, and Neurasea always routes you to the cheapest healthy supply.")} />
      <h2 style={{ margin: '6px 0 20px', fontSize: 21, fontWeight: 680, letterSpacing: '-0.02em', color: t.ink, textAlign: 'center' }}>{T('Choose how you buy')}</h2>
      <BuyModes/>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 16, alignItems: 'stretch' }}>
        {BIZ_DATA.plans.map(p => <PlanCard key={p.id} p={p}/>)}
      </div>
      <NeverDeal/>
      <WhyCheaper/>
    </div>
  );
}

Object.assign(window, { BizConsumers });