// Cockpit — interactive single-page app shell
// Top nav: screen switcher · desktop/mobile toggle · light/dark toggle.
// Reuses every component + data array already defined for the canvas mockup.

const { useState, useLayoutEffect, useRef, useEffect } = React;
const mv = 'var(--cp-mono)';

const TOKENS = { accentHue: 128, accentChroma: 0.18, accentLight: 0.86, density: 'default', radius: 8,
  fonts: { ui: "'Geist','Inter',system-ui,sans-serif", mono: "'Geist Mono',ui-monospace,monospace" } };

// ── chrome icons ──
const AppIcon = ({ d, size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">{d}</svg>
);
const AI = {
  monitor: <AppIcon d={<><rect x="2" y="4" width="20" height="13" rx="2"/><path d="M8 21h8M12 17v4"/></>} />,
  phone: <AppIcon d={<><rect x="6" y="2" width="12" height="20" rx="3"/><path d="M11 18h2"/></>} />,
  sun: <AppIcon d={<><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4 12H2M22 12h-2M5 5l1.5 1.5M17.5 17.5 19 19M5 19l1.5-1.5M17.5 6.5 19 5"/></>} />,
  moon: <AppIcon d={<><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></>} />,
};

// ── screen registry ──
const SCREENS = [
  { id: 'overview',  label: 'Overview',  url: 'nexus.app/overview',            desktop: 'CockpitDashboard', mobile: 'MobileHome' },
  { id: 'invoices',  label: 'Invoices',  url: 'nexus.app/billing/invoices',    desktop: 'TableView',        mobile: 'MobileInvoices' },
  { id: 'service',   label: 'Service',   url: 'nexus.app/services/billing-worker', desktop: 'DetailView',   mobile: 'MobileDetail' },
  { id: 'search',    label: 'Search',    url: 'nexus.app/overview · ⌘K',       desktop: 'CmdKView',         mobile: 'MobileSearch' },
  { id: 'marketing', label: 'Marketing', url: 'nexus.dev',                     desktop: 'MarketingView',    mobile: 'MobileMarketing' },
  { id: 'settings',  label: 'Settings',  url: 'nexus.app/settings/team',       desktop: 'SettingsView',     mobile: 'MobileSettings' },
];

// screen natural heights for the desktop stage
const SCREEN_H = { marketing: 1400 };

// ─────────────────────────────────────────────────────────
// Scaling stage
// ─────────────────────────────────────────────────────────
function Stage({ frameW, frameH, fit, children }) {
  const ref = useRef(null);
  const [scale, setScale] = useState(1);
  useLayoutEffect(() => {
    const el = ref.current; if (!el) return;
    const compute = () => {
      const r = el.getBoundingClientRect();
      const padX = 56, padY = 48;
      const sw = (r.width - padX) / frameW;
      const sh = (r.height - padY) / frameH;
      setScale(fit ? Math.min(sw, sh, 1) : Math.min(sw, 1));
    };
    compute();
    const ro = new ResizeObserver(compute); ro.observe(el);
    return () => ro.disconnect();
  }, [frameW, frameH, fit]);
  return (
    <div ref={ref} style={{ flex: 1, minHeight: 0, overflow: 'auto', display: 'flex', justifyContent: 'center', alignItems: fit ? 'center' : 'flex-start', padding: fit ? 24 : 28 }}>
      <div style={{ width: frameW * scale, height: frameH * scale, flex: 'none' }}>
        <div style={{ width: frameW, height: frameH, transform: `scale(${scale})`, transformOrigin: 'top left' }}>
          {children}
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────
// Browser chrome (desktop)
// ─────────────────────────────────────────────────────────
function BrowserChrome({ t, url, children, w, h }) {
  const barH = 40;
  return (
    <div style={{
      width: w, height: h + barH, background: t.bg1, borderRadius: 12, overflow: 'hidden',
      border: `1px solid ${t.borderStrong}`, boxShadow: '0 40px 90px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.2)',
      display: 'flex', flexDirection: 'column',
    }}>
      <div style={{ height: barH, display: 'flex', alignItems: 'center', gap: 14, padding: '0 14px', borderBottom: `1px solid ${t.border}`, background: t.bg2 }}>
        <div style={{ display: 'flex', gap: 7 }}>
          {['#ff5f57', '#febc2e', '#28c840'].map(c => <span key={c} style={{ width: 11, height: 11, borderRadius: 99, background: c }}/>)}
        </div>
        <div style={{ flex: 1, display: 'flex', justifyContent: 'center' }}>
          <div style={{
            minWidth: 380, maxWidth: 520, display: 'flex', alignItems: 'center', gap: 8, padding: '4px 12px',
            background: t.bg0, border: `1px solid ${t.border}`, borderRadius: 7, color: t.text2, fontSize: 12, fontFamily: mv,
          }}>
            <span style={{ width: 11, height: 11, opacity: 0.7 }}>{I.zap}</span>
            <span style={{ color: t.text1 }}>{url}</span>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 10, color: t.text3 }}>
          <span style={{ width: 14 }}>{I.plus}</span>
        </div>
      </div>
      <div style={{ flex: 1, minHeight: 0 }}>{children}</div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────
// Mobile variants (reuse exported data)
// ─────────────────────────────────────────────────────────
const statusToneMap = { paid: 'healthy', pending: 'warn', failed: 'incident', refunded: 'info' };
const fmtMoney = (v, ccy) => new Intl.NumberFormat('en-US', { style: 'currency', currency: ccy, minimumFractionDigits: 0 }).format(v / 100);

function MobileSectionHeader({ t, title, sub, right }) {
  return (
    <div style={{ padding: '10px 20px 12px' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <h1 style={{ margin: 0, fontSize: 26, fontWeight: 600, letterSpacing: -0.6 }}>{title}</h1>
        {right}
      </div>
      {sub && <div style={{ fontSize: 12, color: t.text2, fontFamily: mv, marginTop: 3 }}>{sub}</div>}
    </div>
  );
}

function MobileTabBar({ t, active }) {
  const tabs = [
    { i: I.home, l: 'Home', id: 'home' },
    { i: I.layers, l: 'Services', id: 'services' },
    { i: I.zap, l: 'Billing', id: 'billing' },
    { i: I.gear, l: 'Settings', id: 'settings' },
  ];
  return (
    <div style={{ borderTop: `1px solid ${t.border}`, padding: '8px 20px 22px', display: 'flex', justifyContent: 'space-around', background: t.bg1 }}>
      {tabs.map((tab, i) => (
        <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3, color: tab.id === active ? t.accent : t.text2 }}>
          {tab.i}<span style={{ fontSize: 10 }}>{tab.l}</span>
        </div>
      ))}
    </div>
  );
}

function MobileInvoices({ t }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      <MobileSectionHeader t={t} title="Invoices" sub="1,248 total · $2.41M / 30d"
        right={<span style={{ width: 34, height: 34, borderRadius: 99, background: t.accent, color: t.accentInk, display: 'grid', placeItems: 'center' }}>{I.plus}</span>}/>
      <div style={{ padding: '0 20px 12px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 12px', background: t.bg2, borderRadius: 'var(--cp-radius-sm)', color: t.text2, fontSize: 13, whiteSpace: 'nowrap' }}>{I.search} Search invoices…</div>
      </div>
      <div style={{ padding: '0 20px 10px', display: 'flex', gap: 6 }}>
        {['All', 'Paid', 'Pending', 'Failed'].map((c, i) => (
          <span key={c} style={{ padding: '4px 12px', fontSize: 12, fontFamily: mv, borderRadius: 99, border: `1px solid ${t.border}`, background: i === 0 ? t.bg3 : 'transparent', color: i === 0 ? t.text0 : t.text2 }}>{c}</span>
        ))}
      </div>
      <div style={{ flex: 1, overflow: 'auto', borderTop: `1px solid ${t.border}` }}>
        {tableRows.map((r, i) => (
          <div key={r.id} style={{ display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 12, alignItems: 'center', padding: '12px 20px', borderBottom: `1px solid ${t.border}` }}>
            <span style={{ width: 8, height: 8, borderRadius: 99, background: r.status === 'paid' ? t.success : r.status === 'pending' ? t.warn : r.status === 'failed' ? t.error : t.info }}/>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontSize: 13.5, color: t.text0, fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.customer}</div>
              <div style={{ fontSize: 10.5, color: t.text3, fontFamily: mv }}>{r.id} · {r.method}</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontFamily: mv, fontSize: 13, color: t.text0, fontVariantNumeric: 'tabular-nums' }}>{fmtMoney(r.amount, r.currency)}</div>
              <div style={{ fontSize: 10, color: t.text3, fontFamily: mv }}>{r.currency}</div>
            </div>
          </div>
        ))}
      </div>
      <MobileTabBar t={t} active="billing"/>
    </div>
  );
}

function MobileSearch({ t }) {
  const iconFor = (k) => ({
    service: <span style={{ width: 24, height: 24, borderRadius: 'var(--cp-radius-xs)', background: `${t.accent}33`, color: t.accent, display: 'grid', placeItems: 'center', fontFamily: mv, fontSize: 11, fontWeight: 700 }}>S</span>,
    invoice: <span style={{ width: 24, height: 24, borderRadius: 'var(--cp-radius-xs)', background: `${t.chart2}33`, color: t.chart2, display: 'grid', placeItems: 'center', fontFamily: mv, fontSize: 11, fontWeight: 700 }}>$</span>,
    page: <span style={{ width: 24, height: 24, borderRadius: 'var(--cp-radius-xs)', background: t.bg2, color: t.text2, display: 'grid', placeItems: 'center', fontFamily: mv, fontSize: 11, fontWeight: 700 }}>P</span>,
    action: <span style={{ width: 24, height: 24, borderRadius: 'var(--cp-radius-xs)', background: t.bg2, color: t.text2, display: 'grid', placeItems: 'center' }}>{I.zap}</span>,
  })[k];
  let idx = 0;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      <div style={{ padding: '10px 16px 12px', display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 8, padding: '9px 12px', background: t.bg2, borderRadius: 'var(--cp-radius-sm)', color: t.text0, fontSize: 14 }}>
          {I.search}<span>billi<span style={{ background: t.accent, color: t.accentInk, padding: '0 1px', borderRadius: 1 }}>|</span></span>
        </div>
        <span style={{ fontSize: 13, color: t.accent, fontWeight: 500 }}>Cancel</span>
      </div>
      <div style={{ flex: 1, overflow: 'auto' }}>
        {paletteGroups.map(g => (
          <div key={g.label}>
            <div style={{ padding: '10px 20px 4px', fontSize: 10.5, color: t.text3, textTransform: 'uppercase', letterSpacing: 0.6, fontWeight: 500 }}>{g.label}</div>
            {g.items.map((it, i) => {
              const active = idx++ === 0;
              return (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 12, alignItems: 'center', padding: '10px 20px', background: active ? t.selectionBg : 'transparent', position: 'relative' }}>
                  {active && <span style={{ position: 'absolute', left: 0, top: 6, bottom: 6, width: 2, background: t.accent }}/>}
                  {iconFor(it.i)}
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 13.5, color: t.text0, fontWeight: active ? 500 : 400, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                      {it.dot && <span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: 99, background: it.dot === 'success' ? t.success : t.error, marginRight: 7, verticalAlign: 'middle' }}/>}
                      {it.label}
                    </div>
                    <div style={{ fontSize: 11, color: t.text3, fontFamily: mv, marginTop: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{it.meta}</div>
                  </div>
                  <span style={{ color: t.text3 }}>{I.arrowRight}</span>
                </div>
              );
            })}
          </div>
        ))}
      </div>
      <div style={{ borderTop: `1px solid ${t.border}`, padding: '10px 20px 22px', display: 'flex', gap: 14, fontSize: 11, color: t.text2, fontFamily: mv }}>
        <span>14 results · 8ms</span><span style={{ flex: 1 }}/><span>↑↓ navigate · ↵ open</span>
      </div>
    </div>
  );
}

function MobileSettings({ t }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      <MobileSectionHeader t={t} title="Team" sub="14 members · 3 roles"
        right={<span style={{ width: 34, height: 34, borderRadius: 99, background: t.accent, color: t.accentInk, display: 'grid', placeItems: 'center' }}>{I.plus}</span>}/>
      <div style={{ padding: '0 20px 12px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px', background: t.bg1, border: `1px solid ${t.border}`, borderRadius: 'var(--cp-radius-sm)' }}>
          <span style={{ width: 30, height: 30, borderRadius: 'var(--cp-radius-sm)', background: `${t.info}22`, color: t.info, display: 'grid', placeItems: 'center' }}>{I.users}</span>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12.5, fontWeight: 500, color: t.text0 }}>SAML SSO active</div>
            <div style={{ fontSize: 11, color: t.text2, fontFamily: mv }}>nexus.dev</div>
          </div>
          <span style={{ fontSize: 12, color: t.accent }}>Manage</span>
        </div>
      </div>
      <div style={{ flex: 1, overflow: 'auto', borderTop: `1px solid ${t.border}` }}>
        {teamMembers.map((m, i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 12, alignItems: 'center', padding: '12px 20px', borderBottom: `1px solid ${t.border}` }}>
            <div style={{ position: 'relative', width: 34, height: 34 }}>
              <div style={{ width: 34, height: 34, borderRadius: 99, background: `linear-gradient(135deg, ${t[m.from[0]]}, ${t[m.from[1]]})`, color: '#fff', display: 'grid', placeItems: 'center', fontSize: 12, fontWeight: 600, fontFamily: mv }}>{m.init}</div>
              {m.a === 'Active' && <span style={{ position: 'absolute', right: -1, bottom: -1, width: 10, height: 10, borderRadius: 99, background: t.success, border: `2px solid ${t.bg0}` }}/>}
            </div>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontSize: 13.5, color: t.text0, fontWeight: 500 }}>{m.n}</div>
              <div style={{ fontSize: 11, color: t.text3, fontFamily: mv, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{m.e}</div>
            </div>
            <Pill tone={m.a === 'Active' ? 'healthy' : m.a === 'Invited' ? 'info' : 'warn'} t={t}>{m.r.toLowerCase()}</Pill>
          </div>
        ))}
      </div>
      <MobileTabBar t={t} active="settings"/>
    </div>
  );
}

function MobileMarketing({ t }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      {/* nav */}
      <div style={{ padding: '10px 20px', display: 'flex', alignItems: 'center', gap: 10, borderBottom: `1px solid ${t.border}` }}>
        <span style={{ width: 24, height: 24, borderRadius: 'var(--cp-radius-sm)', background: t.accent, color: t.accentInk, display: 'grid', placeItems: 'center', fontFamily: mv, fontWeight: 700, fontSize: 11 }}>NX</span>
        <span style={{ fontWeight: 600, fontSize: 14, flex: 1 }}>Nexus</span>
        <span style={{ fontSize: 22, color: t.text1, lineHeight: 0.5 }}>⋯</span>
      </div>
      <div style={{ flex: 1, overflow: 'auto' }}>
        {/* hero */}
        <div style={{ padding: '28px 22px 24px', textAlign: 'center' }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '4px 10px 4px 4px', border: `1px solid ${t.border}`, borderRadius: 99, fontSize: 11, color: t.text2, marginBottom: 18, background: t.bg1 }}>
            <span style={{ background: t.accent, color: t.accentInk, padding: '2px 7px', borderRadius: 99, fontWeight: 600, fontFamily: mv, fontSize: 9.5 }}>NEW</span>
            Passkeys & SAML are GA
          </span>
          <h1 style={{ margin: 0, fontSize: 32, fontWeight: 600, letterSpacing: -1.2, lineHeight: 1.1, color: t.text0 }}>The control plane for shipping software.</h1>
          <p style={{ margin: '14px auto 0', fontSize: 14, color: t.text2, lineHeight: 1.55 }}>One dense, fast surface for services, deploys, alerts, and audit.</p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 22 }}>
            <button style={{ background: t.accent, color: t.accentInk, border: 'none', borderRadius: 'var(--cp-radius-sm)', padding: '12px', fontSize: 14, fontWeight: 500 }}>Start free — no card</button>
            <button style={{ background: 'transparent', color: t.text0, border: `1px solid ${t.borderStrong}`, borderRadius: 'var(--cp-radius-sm)', padding: '12px', fontSize: 14, fontWeight: 500 }}>Book a demo</button>
          </div>
        </div>
        {/* stats */}
        <div style={{ padding: '0 22px 24px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          {marketingStats.map((s, i) => (
            <div key={i} style={{ border: `1px solid ${t.border}`, borderRadius: 'var(--cp-radius-sm)', padding: '14px', background: t.bg1 }}>
              <div style={{ fontFamily: mv, fontSize: 26, fontWeight: 500, color: t.text0, letterSpacing: -0.8 }}>{s.v}<span style={{ color: t.accent }}>.</span></div>
              <div style={{ fontSize: 11, color: t.text2, marginTop: 2 }}>{s.u} · {s.k}</div>
            </div>
          ))}
        </div>
        {/* features */}
        <div style={{ padding: '0 22px 28px' }}>
          <div style={{ fontSize: 11, color: t.accent, fontFamily: mv, marginBottom: 12, textTransform: 'uppercase', letterSpacing: 1 }}>Built for density</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {marketingFeatures.map((f, i) => (
              <div key={i} style={{ border: `1px solid ${t.border}`, borderRadius: 'var(--cp-radius)', padding: 16, background: t.bg1 }}>
                <span style={{ display: 'inline-grid', placeItems: 'center', width: 30, height: 30, borderRadius: 'var(--cp-radius-sm)', background: `${t.accent}22`, color: t.accent, marginBottom: 10 }}>{I[f.icon]}</span>
                <div style={{ fontSize: 14.5, fontWeight: 600, color: t.text0, marginBottom: 4 }}>{f.t}</div>
                <div style={{ fontSize: 12.5, color: t.text2, lineHeight: 1.5 }}>{f.d}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

const MOBILE_COMPONENTS = { MobileHome, MobileDetail, MobileInvoices, MobileSearch, MobileSettings, MobileMarketing };
const DESKTOP_COMPONENTS = { CockpitDashboard, TableView, DetailView, CmdKView, MarketingView, SettingsView };

// ─────────────────────────────────────────────────────────
// App shell
// ─────────────────────────────────────────────────────────
function loadState() {
  try { return JSON.parse(localStorage.getItem('cockpit-app') || '{}'); } catch { return {}; }
}

function App() {
  const saved = loadState();
  const [screen, setScreen] = useState(saved.screen || 'overview');
  const [device, setDevice] = useState(saved.device || 'desktop');
  const [theme, setTheme] = useState(saved.theme || 'dark');

  useEffect(() => {
    localStorage.setItem('cockpit-app', JSON.stringify({ screen, device, theme }));
  }, [screen, device, theme]);

  const t = buildTheme(theme, TOKENS);
  const tt = { ...t, density: densityProfiles[TOKENS.density], radius: TOKENS.radius,
    fontUI: TOKENS.fonts.ui, fontMono: TOKENS.fonts.mono };
  const meta = SCREENS.find(s => s.id === screen);

  // keyboard shortcuts
  useEffect(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') { e.preventDefault(); setScreen('search'); return; }
      if (e.target.tagName === 'INPUT') return;
      const n = parseInt(e.key, 10);
      if (n >= 1 && n <= SCREENS.length) setScreen(SCREENS[n - 1].id);
      if (e.key === 'd') setTheme(p => p === 'dark' ? 'light' : 'dark');
      if (e.key === 'm') setDevice(p => p === 'desktop' ? 'mobile' : 'desktop');
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  // ── render the active artboard ──
  let stage;
  if (device === 'desktop') {
    const Comp = DESKTOP_COMPONENTS[meta.desktop];
    const h = SCREEN_H[screen] || 920;
    stage = (
      <Stage frameW={1440} frameH={h + 40} fit={false}>
        <BrowserChrome t={tt} url={meta.url} w={1440} h={h}>
          <Comp theme={theme} tokens={TOKENS}/>
        </BrowserChrome>
      </Stage>
    );
  } else {
    const MComp = MOBILE_COMPONENTS[meta.mobile];
    stage = (
      <Stage frameW={380} frameH={812} fit>
        <PhoneFrame t={tt} label={meta.label}>
          <MComp t={tt}/>
        </PhoneFrame>
      </Stage>
    );
  }

  return (
    <div style={{
      position: 'fixed', inset: 0, display: 'flex', flexDirection: 'column',
      background: theme === 'dark' ? 'oklch(0.12 0.005 250)' : 'oklch(0.955 0.003 90)',
      fontFamily: TOKENS.fonts.ui, color: t.text0,
      ['--cp-radius']: `${TOKENS.radius}px`, ['--cp-radius-sm']: `${TOKENS.radius - 2}px`,
      ['--cp-radius-xs']: `${TOKENS.radius - 4}px`, ['--cp-mono']: TOKENS.fonts.mono,
    }}>
      {/* ── top nav chrome ── */}
      <header style={{
        height: 54, flex: 'none', display: 'flex', alignItems: 'center', gap: 16, padding: '0 16px',
        background: t.bg1, borderBottom: `1px solid ${t.border}`,
      }}>
        {/* brand */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <div style={{ width: 26, height: 26, borderRadius: 7, background: t.accent, color: t.accentInk, display: 'grid', placeItems: 'center', fontFamily: mv, fontWeight: 700, fontSize: 12 }}>NX</div>
          <div style={{ lineHeight: 1.15 }}>
            <div style={{ fontSize: 13.5, fontWeight: 600, letterSpacing: -0.2 }}>Cockpit</div>
            <div style={{ fontSize: 10, color: t.text3, fontFamily: mv }}>design system · demo</div>
          </div>
        </div>

        <div style={{ width: 1, height: 24, background: t.border }}/>

        {/* screen tabs */}
        <nav style={{ display: 'flex', gap: 2, flex: 1, minWidth: 0, overflow: 'auto' }}>
          {SCREENS.map((s, i) => {
            const on = s.id === screen;
            return (
              <button key={s.id} onClick={() => setScreen(s.id)} style={{
                display: 'inline-flex', alignItems: 'center', gap: 7, padding: '6px 11px', borderRadius: 7,
                border: `1px solid ${on ? t.border : 'transparent'}`,
                background: on ? t.bg3 : 'transparent', color: on ? t.text0 : t.text2,
                fontSize: 12.5, fontWeight: on ? 500 : 400, cursor: 'pointer', whiteSpace: 'nowrap',
              }}>
                <span style={{ fontFamily: mv, fontSize: 10.5, color: on ? t.accent : t.text3 }}>{i + 1}</span>
                {s.label}
              </button>
            );
          })}
        </nav>

        {/* device toggle */}
        <div style={{ display: 'inline-flex', border: `1px solid ${t.border}`, borderRadius: 8, background: t.bg0, padding: 2 }}>
          {[['desktop', AI.monitor, 'Desktop'], ['mobile', AI.phone, 'Mobile']].map(([id, icon, label]) => (
            <button key={id} onClick={() => setDevice(id)} title={label} style={{
              display: 'inline-flex', alignItems: 'center', gap: 6, padding: '5px 10px', borderRadius: 6, border: 'none', cursor: 'pointer',
              background: device === id ? t.bg3 : 'transparent', color: device === id ? t.text0 : t.text2, fontSize: 12, fontWeight: device === id ? 500 : 400,
            }}>{icon}<span>{label}</span></button>
          ))}
        </div>

        {/* theme toggle */}
        <div style={{ display: 'inline-flex', border: `1px solid ${t.border}`, borderRadius: 8, background: t.bg0, padding: 2 }}>
          {[['dark', AI.moon], ['light', AI.sun]].map(([id, icon]) => (
            <button key={id} onClick={() => setTheme(id)} title={id} style={{
              display: 'inline-grid', placeItems: 'center', width: 30, height: 28, borderRadius: 6, border: 'none', cursor: 'pointer',
              background: theme === id ? t.bg3 : 'transparent', color: theme === id ? t.accent : t.text2,
            }}>{icon}</button>
          ))}
        </div>
      </header>

      {/* ── stage ── */}
      {stage}

      {/* ── footer hint bar ── */}
      <footer style={{
        height: 30, flex: 'none', display: 'flex', alignItems: 'center', gap: 16, padding: '0 16px',
        background: t.bg1, borderTop: `1px solid ${t.border}`, fontSize: 11, color: t.text3, fontFamily: mv,
      }}>
        <span>{meta.url}</span>
        <span style={{ flex: 1 }}/>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          <Kbd t={t}>1</Kbd>–<Kbd t={t}>6</Kbd> screen
        </span>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><Kbd t={t}>⌘</Kbd><Kbd t={t}>K</Kbd> search</span>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><Kbd t={t}>d</Kbd> theme</span>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><Kbd t={t}>m</Kbd> device</span>
      </footer>
    </div>
  );
}

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