// Neurasea for Business — For Customers view (desktop client walkthrough)
// Exports to window: BizCustomers

function ClientShot({ src, alt }) {
  const t = useTheme();
  return (
    <div style={{ borderRadius: 18, overflow: 'hidden', border: `1px solid ${t.line}`, background: t.panel, boxShadow: t.dark ? '0 24px 60px rgba(0,0,0,0.5)' : '0 24px 60px rgba(28,27,23,0.14)' }}>
      <img src={src} alt={alt} style={{ display: 'block', width: '100%', height: 'auto' }}/>
    </div>
  );
}

function ClientStep({ n, title, body, points, img, flip }) {
  const t = useTheme();
  const T = useT();
  const text = (
    <div key="text">
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 34, height: 34, borderRadius: 10, background: t.ink, color: t.live, fontFamily: t.mono, fontSize: 15, fontWeight: 700 }}>{n}</span>
        <h3 style={{ margin: 0, fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em', color: t.ink }}>{T(title)}</h3>
      </div>
      <p style={{ margin: '0 0 16px', fontSize: 14.5, lineHeight: 1.6, color: t.ink2, maxWidth: 430 }}>{T(body)}</p>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {points.map((p, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 9, fontSize: 13.5, color: t.ink }}>
            <Icon name="check" size={16} color={t.live} style={{ marginTop: 2, flexShrink: 0 }}/> {T(p)}
          </div>
        ))}
      </div>
    </div>
  );
  const shot = <ClientShot key="img" src={img} alt={title}/>;
  return (
    <div style={{ display: 'grid', gridTemplateColumns: flip ? '1.15fr 0.85fr' : '0.85fr 1.15fr', gap: 44, alignItems: 'center' }}>
      {flip ? [shot, text] : [text, shot]}
    </div>
  );
}

function ClientDownload() {
  const t = useTheme();
  const T = useT();
  return (
    <section style={{ marginTop: 72, background: t.ink, borderRadius: 22, padding: '44px 48px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 32 }}>
      <div>
        <h2 style={{ margin: '0 0 8px', fontSize: 26, fontWeight: 720, letterSpacing: '-0.02em', color: '#fff' }}>{T('Get the Neurasea client')}</h2>
        <p style={{ margin: 0, fontSize: 14, lineHeight: 1.55, color: 'rgba(255,255,255,0.65)', maxWidth: 480 }}>{T('Free to install. Your credentials never leave your device — only signed, sandboxed requests touch the grid.')}</p>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 10, flexShrink: 0 }}>
        <Btn kind="accent" color={t.live} size="lg" icon="arrowRight">{T('Download for macOS')}</Btn>
        <span style={{ fontSize: 11.5, fontFamily: t.mono, color: 'rgba(255,255,255,0.45)' }}>{T('macOS 13+ · Windows coming soon')}</span>
      </div>
    </section>
  );
}

function BizCustomers() {
  const t = useTheme();
  const T = useT();
  const steps = [
    {
      n: 1, img: 'img/client-onboard.png', title: 'Install — it finds your subscriptions',
      body: 'Open the app once and it detects the AI subscriptions already signed in on this Mac — Claude, ChatGPT, Gemini, Copilot. No copy-pasting keys, nothing leaves your device.',
      points: ['Auto-detects signed-in accounts', 'Credentials stay local, sandboxed', 'Setup takes under a minute'],
    },
    {
      n: 2, img: 'img/client-sources.png', title: 'Flip "Feed the grid" on idle quota', flip: true,
      body: 'Each subscription becomes a power source. Share the quota you are not using and earn credits — Power saver auto-stops supplying before an account runs low, so your own usage always comes first.',
      points: ['Per-account supply toggle & reserve floor', 'Power saver protects your own quota', 'Or keep a source fully private'],
    },
    {
      n: 3, img: 'img/client-overview.png', title: 'Draw any model, watch credits flow',
      body: 'The overview shows your charge in real time: what your sources earned, what your draws cost. Use any model on the grid — your idle Claude quota can pay for your GPT calls.',
      points: ['One balance across every model', 'Live earned vs. spent, per session', 'Local endpoint for agents & IDEs'],
    },
  ];
  return (
    <div style={{ padding: '56px 56px 72px', maxWidth: 1200, margin: '0 auto' }}>
      <ExHead kicker={T('For Customers')} title={T('One client. Every subscription becomes power.')}
        sub={T('The Neurasea desktop client turns the AI subscriptions on your Mac into grid power sources — supply idle quota, earn credits, and draw any model with them. Here is how it works.')} />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 72, marginTop: 8 }}>
        {steps.map(s => <ClientStep key={s.n} {...s}/>)}
      </div>
      <ClientDownload/>
    </div>
  );
}

Object.assign(window, { BizCustomers });