// Neurasea for Business — Platform / landing view
// Exports to window: BizLanding

function BizGridViz() {
  const t = useTheme();
  const supply = [
    { l: 'CL', bg: '#e7ddd0', fg: '#5a3b22' },
    { l: 'GP', bg: '#d6e7df', fg: '#1d5c45' },
    { l: 'GM', bg: '#dbe3f4', fg: '#2b4a8a' },
    { l: 'GR', bg: '#e6e2dd', fg: '#2a2a2a' },
  ];
  const demand = [
    { l: 'IDE', bg: '#e7e3dc', fg: '#4a4a4a' },
    { l: 'API', bg: '#dde7e2', fg: '#1d5c45' },
    { l: 'APP', bg: '#e2e0ec', fg: '#4a3d7a' },
  ];
  const W = 460, H = 300, cx = W / 2, cy = H / 2;
  const lx = 64, rx = W - 64;
  const sy = supply.map((_, i) => 46 + i * ((H - 92) / (supply.length - 1)));
  const dy = demand.map((_, i) => 70 + i * ((H - 140) / (demand.length - 1)));
  return (
    <div style={{ position: 'relative', width: '100%', maxWidth: W }}>
      <svg viewBox={`0 0 ${W} ${H}`} width="100%" style={{ display: 'block', overflow: 'visible' }}>
        <defs>
          <linearGradient id="bzFeed" x1="0" x2="1"><stop offset="0%" stopColor={t.live} stopOpacity="0"/><stop offset="100%" stopColor={t.live} stopOpacity="0.5"/></linearGradient>
          <linearGradient id="bzDraw" x1="0" x2="1"><stop offset="0%" stopColor={t.draw} stopOpacity="0.5"/><stop offset="100%" stopColor={t.draw} stopOpacity="0"/></linearGradient>
        </defs>
        {supply.map((s, i) => {
          const d = `M${lx} ${sy[i]} C ${(lx + cx) / 2} ${sy[i]}, ${(lx + cx) / 2} ${cy}, ${cx} ${cy}`;
          return <g key={i}><path d={d} fill="none" stroke={t.line} strokeWidth="1.5"/><path d={d} fill="none" stroke="url(#bzFeed)" strokeWidth="2.5" strokeDasharray="4 12" style={{ animation: 'nsDash 1.6s linear infinite', animationDelay: `${i * 0.25}s` }}/></g>;
        })}
        {demand.map((dm, i) => {
          const d = `M${cx} ${cy} C ${(cx + rx) / 2} ${cy}, ${(cx + rx) / 2} ${dy[i]}, ${rx} ${dy[i]}`;
          return <g key={i}><path d={d} fill="none" stroke={t.line} strokeWidth="1.5"/><path d={d} fill="none" stroke="url(#bzDraw)" strokeWidth="2.5" strokeDasharray="4 12" style={{ animation: 'nsDash 1.5s linear infinite', animationDelay: `${i * 0.25}s` }}/></g>;
        })}
        <circle cx={cx} cy={cy} r="40" fill={t.ink}/>
        <circle cx={cx} cy={cy} r="40" fill="none" stroke={t.live} strokeOpacity="0.5" strokeWidth="1.5" style={{ transformBox: 'fill-box', transformOrigin: 'center', animation: 'nsRing 2.4s ease-out infinite' }}/>
      </svg>
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
        {supply.map((s, i) => (
          <div key={i} style={{ position: 'absolute', left: `${lx / W * 100}%`, top: `${sy[i] / H * 100}%`, transform: 'translate(-50%,-50%)' }}>
            <Avatar label={s.l} bg={s.bg} fg={s.fg} size={34} radius={9}/>
          </div>
        ))}
        {demand.map((dm, i) => (
          <div key={i} style={{ position: 'absolute', left: `${rx / W * 100}%`, top: `${dy[i] / H * 100}%`, transform: 'translate(-50%,-50%)' }}>
            <Avatar label={dm.l} bg={dm.bg} fg={dm.fg} size={34} radius={9}/>
          </div>
        ))}
        <div style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%,-50%)' }}><Bolt size={22} color="#fff"/></div>
        <div style={{ position: 'absolute', left: '13%', top: 6, fontSize: 11, fontFamily: t.mono, color: t.ink3, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Supply</div>
        <div style={{ position: 'absolute', right: '11%', top: 30, fontSize: 11, fontFamily: t.mono, color: t.ink3, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Demand</div>
      </div>
    </div>
  );
}

function BizHero({ go }) {
  const t = useTheme();
  const T = useT();
  return (
    <section style={{ position: 'relative', padding: '72px 56px 56px', display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 48, alignItems: 'center', overflow: 'hidden' }}>
      <div style={{ position: 'relative', zIndex: 1 }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 12px', borderRadius: 999, background: t.liveSoft, color: t.live, fontSize: 12.5, fontWeight: 600, fontFamily: t.mono, marginBottom: 22 }}>
          <StatusDot color={t.live} size={6} pulse/> {T('Markets open')}
        </div>
        <h1 style={{ margin: 0, fontSize: 50, lineHeight: 1.04, fontWeight: 720, letterSpacing: '-0.035em', color: t.ink, textWrap: 'balance' }}>{T('The wholesale grid for AI inference')}</h1>
        <p style={{ margin: '22px 0 0', fontSize: 17, lineHeight: 1.55, color: t.ink2, maxWidth: 560 }}>{T("Suppliers bring account inventory or API keys. Consumers subscribe for the cheapest tokens at guaranteed quality. Neurasea is the exchange in between — pooling, balancing and settling every request.")}</p>
        <div style={{ display: 'flex', gap: 12, marginTop: 30, flexWrap: 'wrap' }}>
          <Btn kind="accent" size="lg" color={t.live} icon="arrowRight" onClick={() => go('suppliers')}>{T('Become a supplier')}</Btn>
          <Btn kind="secondary" size="lg" icon="layers" onClick={() => go('consumers')}>{T('Buy tokens')}</Btn>
        </div>
        <div style={{ marginTop: 18, fontSize: 13, color: t.ink3, fontFamily: t.mono, display: 'inline-flex', alignItems: 'center', gap: 8 }}>
          <Icon name="check" size={15} color={t.live}/> {T('No client to install · bulk-import your pool in minutes')}
        </div>
      </div>
      <div style={{ position: 'relative', zIndex: 1, display: 'flex', justifyContent: 'center' }}><BizGridViz/></div>
    </section>
  );
}

function TrustStrip() {
  const t = useTheme();
  const T = useT();
  const s = BIZ_DATA.stats;
  const items = [
    { v: s.suppliers.toLocaleString(), l: T('Active suppliers') },
    { v: s.models, l: T('Models served') },
    { v: s.tokensPerDay, l: T('Tokens / day') },
    { v: s.saving + '%', l: T('Avg. saving vs list') },
    { v: s.uptime + '%', l: T('Uptime SLA') },
  ];
  return (
    <section style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', borderTop: `1px solid ${t.line}`, borderBottom: `1px solid ${t.line}`, background: t.panel2 }}>
      {items.map((it, i) => (
        <div key={i} style={{ padding: '26px 24px', borderLeft: i ? `1px solid ${t.line2}` : 'none' }}>
          <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: '-0.02em', color: t.ink }}>{it.v}</div>
          <div style={{ fontSize: 12.5, color: t.ink3, marginTop: 4, fontFamily: t.mono }}>{it.l}</div>
        </div>
      ))}
    </section>
  );
}

function PathCard({ side, go }) {
  const t = useTheme();
  const T = useT();
  const isSup = side === 'sup';
  const accent = isSup ? t.live : t.draw;
  const soft = isSup ? t.liveSoft : t.drawSoft;
  const rows = isSup
    ? ['Bulk import — CLI, cloud browser, or sandbox', 'Pool management, quota & load balancing', 'Daily revenue & instant settlement']
    : ['Cheapest token price, always', '99.9% quality SLA across every model', 'Spot pay-as-you-go or weekly futures'];
  return (
    <div style={{ background: t.panel, border: `1px solid ${t.line}`, borderRadius: 22, padding: 32, position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: -40, right: -40, width: 160, height: 160, borderRadius: '50%', background: soft, filter: 'blur(8px)' }}/>
      <div style={{ position: 'relative' }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 46, height: 46, borderRadius: 13, background: soft, color: accent, marginBottom: 18 }}>
          <Icon name={isSup ? 'plug' : 'layers'} size={24} color={accent}/>
        </div>
        <div style={{ fontSize: 13, fontWeight: 650, fontFamily: t.mono, color: accent, textTransform: 'uppercase', letterSpacing: '0.06em' }}>{T(isSup ? 'Suppliers' : 'Consumers')}</div>
        <h3 style={{ margin: '6px 0 4px', fontSize: 24, fontWeight: 700, letterSpacing: '-0.02em', color: t.ink }}>{T(isSup ? 'API resellers & account holders' : 'Token users & product teams')}</h3>
        <p style={{ margin: '8px 0 22px', fontSize: 14.5, lineHeight: 1.55, color: t.ink2, maxWidth: 440 }}>{T(isSup ? 'Turn idle account inventory into revenue. Import ready-made accounts or API keys in bulk — no client, no per-account fiddling.' : 'Subscribe and draw any model. You never see the upstream — only the lowest price and a quality guarantee.')}</p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 11, marginBottom: 26 }}>
          {rows.map((r, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14, color: t.ink }}>
              <Icon name="check" size={17} color={accent}/> {T(r)}
            </div>
          ))}
        </div>
        <Btn kind="accent" color={accent} icon="arrowRight" onClick={() => go(isSup ? 'suppliers' : 'consumers')}>{T(isSup ? 'Explore the supplier console' : 'See consumer plans')}</Btn>
      </div>
    </div>
  );
}

function TwoPaths({ go }) {
  const t = useTheme();
  const T = useT();
  return (
    <section style={{ padding: '64px 56px' }}>
      <div style={{ textAlign: 'center', marginBottom: 40 }}>
        <h2 style={{ margin: 0, fontSize: 34, fontWeight: 700, letterSpacing: '-0.03em', color: t.ink }}>{T('Two sides of the grid')}</h2>
        <p style={{ margin: '10px 0 0', fontSize: 16, color: t.ink2 }}>{T('One exchange clears both — supply meets demand at the best price.')}</p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, maxWidth: 1000, margin: '0 auto' }}>
        <PathCard side="sup" go={go}/>
        <PathCard side="con" go={go}/>
      </div>
    </section>
  );
}

function HowItWorks() {
  const t = useTheme();
  const T = useT();
  const steps = [
    { icon: 'plug', n: '01', title: 'Supply comes in', body: 'Suppliers import accounts or keys. Credentials are sandboxed; we never expose them downstream.' },
    { icon: 'flow', n: '02', title: 'The exchange balances', body: "Every request is routed to the cheapest healthy supplier that meets the model's quality bar." },
    { icon: 'layers', n: '03', title: 'Demand draws out', body: 'Consumers subscribe and call any model through one endpoint — blind to the upstream, sure of the price.' },
  ];
  return (
    <section style={{ padding: '64px 56px', background: t.ink, color: '#fff' }}>
      <h2 style={{ margin: '0 0 40px', fontSize: 30, fontWeight: 700, letterSpacing: '-0.03em', color: '#fff', textAlign: 'center' }}>{T('How the grid clears')}</h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 26, maxWidth: 1040, margin: '0 auto' }}>
        {steps.map((s, i) => (
          <div key={i} style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.09)', borderRadius: 18, padding: 28 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
              <div style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 44, height: 44, borderRadius: 12, background: t.liveSoft, color: t.live }}>
                <Icon name={s.icon} size={22} color={t.live}/>
              </div>
              <span style={{ fontSize: 13, fontFamily: t.mono, color: 'rgba(255,255,255,0.4)' }}>{s.n}</span>
            </div>
            <h3 style={{ margin: '0 0 8px', fontSize: 19, fontWeight: 650, color: '#fff' }}>{T(s.title)}</h3>
            <p style={{ margin: 0, fontSize: 14, lineHeight: 1.55, color: 'rgba(255,255,255,0.62)' }}>{T(s.body)}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function QualityBand() {
  const t = useTheme();
  const T = useT();
  const checks = ['Model-identity verification', 'Continuous quality probes', 'Latency & error budgets', 'Automatic supplier cool-down'];
  return (
    <section style={{ padding: '64px 56px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center' }}>
      <div>
        <div style={{ fontSize: 13, fontWeight: 650, color: t.live, fontFamily: t.mono, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 14 }}>{T('Quality is not negotiable')}</div>
        <p style={{ margin: 0, fontSize: 20, lineHeight: 1.5, color: t.ink, fontWeight: 500, maxWidth: 520 }}>{T('Every supplier account is continuously probed for model identity, response quality and latency. Anything that drifts is cooled out of the pool before a single request reaches it.')}</p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
        {checks.map((c, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '18px 18px', background: t.panel, border: `1px solid ${t.line}`, borderRadius: 14 }}>
            <Icon name="shield" size={20} color={t.live}/>
            <span style={{ fontSize: 14, fontWeight: 550, color: t.ink }}>{T(c)}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

function FooterCTA({ go }) {
  const t = useTheme();
  const T = useT();
  return (
    <section style={{ padding: '64px 56px', textAlign: 'center', borderTop: `1px solid ${t.line}`, background: t.panel2 }}>
      <h2 style={{ margin: 0, fontSize: 32, fontWeight: 700, letterSpacing: '-0.03em', color: t.ink }}>{T('Ready to plug into the grid?')}</h2>
      <p style={{ margin: '10px 0 26px', fontSize: 16, color: t.ink2 }}>{T("Whether you hold accounts or burn tokens, you're one import away.")}</p>
      <div style={{ display: 'inline-flex', gap: 12 }}>
        <Btn kind="accent" size="lg" color={t.live} icon="plug" onClick={() => go('suppliers')}>{T('Become a supplier')}</Btn>
        <Btn kind="secondary" size="lg" icon="layers" onClick={() => go('consumers')}>{T('Buy tokens')}</Btn>
      </div>
    </section>
  );
}

function BizLanding({ go }) {
  return (
    <div>
      <BizHero go={go}/>
      <TrustStrip/>
      <TwoPaths go={go}/>
      <HowItWorks/>
      <QualityBand/>
      <FooterCTA go={go}/>
    </div>
  );
}

Object.assign(window, { BizLanding });