// Neurasea for Business — app shell (nav + lang toggle + routing + mount)

function LangToggle() {
  const t = useTheme();
  const { lang, setLang } = useWebLang();
  return (
    <div style={{ display: 'inline-flex', background: t.panel3, borderRadius: 9, padding: 2, border: `1px solid ${t.line2}` }}>
      {[['en', 'EN'], ['zh', '中']].map(([v, l]) => (
        <button key={v} onClick={() => setLang(v)} style={{
          padding: '5px 11px', fontSize: 12.5, fontWeight: 600, fontFamily: t.sans, cursor: 'pointer',
          border: 'none', borderRadius: 7, background: lang === v ? t.panel : 'transparent',
          color: lang === v ? t.ink : t.ink2, transition: 'all .15s',
        }}>{l}</button>
      ))}
    </div>
  );
}

function TopNav({ route, go }) {
  const t = useTheme();
  const T = useT();
  const tabs = [
    { id: 'platform', label: 'Platform' },
    { id: 'suppliers', label: 'For Suppliers' },
    { id: 'consumers', label: 'For Consumers' },
    { id: 'customers', label: 'For Customers' },
  ];
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50, display: 'flex', alignItems: 'center', gap: 28,
      padding: '0 32px', height: 62, background: 'transparent',
    }}>
      <div style={{
        position: 'absolute', left: 0, right: 0, top: 0, height: 96, pointerEvents: 'none', zIndex: -1,
        backdropFilter: 'saturate(1.4) blur(16px)', WebkitBackdropFilter: 'saturate(1.4) blur(16px)',
        maskImage: 'linear-gradient(to bottom, black 0%, black 52%, transparent 100%)',
        WebkitMaskImage: 'linear-gradient(to bottom, black 0%, black 52%, transparent 100%)',
        background: `linear-gradient(to bottom, color-mix(in oklch, ${t.win} 62%, transparent), transparent)`,
      }}></div>
      <button onClick={() => go('platform')} style={{ display: 'flex', alignItems: 'center', gap: 10, background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}>
        <div style={{ width: 30, height: 30, borderRadius: 9, background: t.ink, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Bolt size={17} color={t.live}/>
        </div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 7 }}>
          <span style={{ fontSize: 16.5, fontWeight: 720, letterSpacing: '-0.02em', color: t.ink }}>Neurasea</span>
          <span style={{ fontSize: 11.5, fontWeight: 650, fontFamily: t.mono, color: t.live, textTransform: 'uppercase', letterSpacing: '0.06em' }}>{T('Business')}</span>
        </div>
      </button>

      <nav style={{ display: 'flex', alignItems: 'center', gap: 4, marginLeft: 8 }}>
        {tabs.map(tab => {
          const on = route === tab.id;
          return (
            <button key={tab.id} onClick={() => go(tab.id)} style={{
              padding: '8px 14px', fontSize: 14, fontWeight: on ? 650 : 550, fontFamily: t.sans, cursor: 'pointer',
              border: 'none', borderRadius: 9, background: on ? t.panel3 : 'transparent',
              color: on ? t.ink : t.ink2, transition: 'all .15s', whiteSpace: 'nowrap',
            }}>{T(tab.label)}</button>
          );
        })}
      </nav>

      <div style={{ flex: 1 }}/>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <LangToggle/>
        <button style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: 14, fontWeight: 600, color: t.ink2, fontFamily: t.sans }}>{T('Sign in')}</button>
        <Btn kind="primary" size="md" icon="arrowRight">{T('Get started')}</Btn>
      </div>
    </header>
  );
}

function SiteFooter() {
  const t = useTheme();
  const T = useT();
  return (
    <footer style={{ padding: '28px 32px', borderTop: `1px solid ${t.line}`, display: 'flex', alignItems: 'center', justifyContent: 'space-between', background: t.win }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
        <Bolt size={15} color={t.ink}/>
        <span style={{ fontSize: 13, color: t.ink3, fontFamily: t.mono }}>© 2026 Neurasea — {T('The wholesale grid for AI inference')}</span>
      </div>
      <div style={{ display: 'flex', gap: 20, fontSize: 13, color: t.ink3 }}>
        <span>{T('Docs')}</span><span>{T('Pricing')}</span><span>{T('Talk to sales')}</span>
      </div>
    </footer>
  );
}

function BizApp() {
  const t = React.useMemo(() => makeTheme(false, 'green'), []);
  const [route, setRoute] = React.useState(() => localStorage.getItem('ns_biz_route') || 'platform');
  const go = (r) => { localStorage.setItem('ns_biz_route', r); setRoute(r); document.querySelector('#bizScroll')?.scrollTo({ top: 0 }); };
  const url = 'neurasea.io/business' + (route === 'platform' ? '' : '/' + route);

  return (
    <WebLangProvider>
      <ThemeCtx.Provider value={t}>
        <div id="bizScroll" style={{ position: 'relative', width: '100vw', height: '100vh', overflow: 'auto', background: 'transparent', fontFamily: t.sans, color: t.ink }}>
          <div style={{ position: 'fixed', inset: 0, zIndex: 0, pointerEvents: 'none' }}>
            <HeroFlowField/>
          </div>
          <div style={{ position: 'relative', zIndex: 1 }}>
            <TopNav route={route} go={go}/>
            {route === 'platform' && <BizLanding go={go}/>}
            {route === 'suppliers' && <BizSuppliers/>}
            {route === 'consumers' && <BizConsumers/>}
            {route === 'customers' && <BizCustomers/>}
            <SiteFooter/>
          </div>
        </div>
      </ThemeCtx.Provider>
    </WebLangProvider>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<BizApp/>);