// Portal shell — product-level header that sits inside a portal tab.
// Outer three-tab nav lives in AppShell.

function PortalShell({ nav, currentRoute, go, children }) {
  const t = useBrand();

  const Wordmark = () => {
    if (t.key === 'elysium') {
      return (
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <img src="assets/elysium-logo.png" alt="Elysium EPL" style={{ height: 34 }} />
          <div style={{ width: 1, height: 26, background: t.rule }} />
          <span style={{ font: "600 14px/1 'Space Grotesk', Arial", color: t.muted, letterSpacing: '.02em' }}>The write stuff</span>
        </div>
      );
    }
    return (
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        <img src="assets/logos/unordinary-pinwheel.png" style={{ height: 26 }} alt="" />
        <span style={{ font: "700 18px/1 'Space Grotesk', Arial", color: t.ink, letterSpacing: '-.01em' }}>The write stuff</span>
        <span style={{ font: "500 12px/1 Inter, Arial", color: t.muted, marginLeft: 6 }}>by The Unordinary</span>
      </div>
    );
  };

  return (
    <div style={{ background: '#fff', color: t.ink, fontFamily: 'Inter, Arial' }}>
      <header style={{ borderBottom: `1px solid ${t.rule}`, background: '#fff', position: 'sticky', top: 0, zIndex: 20 }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', padding: '14px 32px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20 }}>
          <Wordmark />
          <nav style={{ display: 'flex', gap: 6 }}>
            {nav.map(n => (
              <button key={n.label} onClick={() => go(n.route)} style={{
                font: "600 13px/1 'Space Grotesk', Arial",
                padding: '8px 12px', borderRadius: 6, border: 'none', cursor: 'pointer',
                background: currentRoute === n.route ? t.primaryLight : 'transparent',
                color: currentRoute === n.route ? t.primary : t.body,
              }}>{n.label}</button>
            ))}
          </nav>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ font: "400 13px/1 Inter, Arial", color: t.body }}>Brett Ackroyd</span>
            <div style={{
              width: 28, height: 28, borderRadius: 999,
              background: t.primaryMid, color: t.primaryDark,
              font: "700 12px/1 'Space Grotesk', Arial",
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>BA</div>
          </div>
        </div>
        <GradientBar height={3} />
      </header>

      <main style={{ maxWidth: 1320, margin: '0 auto', padding: '32px' }}>
        {children}
      </main>

      <div style={{ borderTop: `1px solid ${t.rule}`, marginTop: 56 }}>
        <footer style={{ maxWidth: 1320, margin: '0 auto', padding: '20px 32px', color: t.muted, font: "400 12px/1 Inter, Arial", display: 'flex', justifyContent: 'space-between' }}>
          <span>
            {t.key === 'elysium'
              ? 'Elysium EPL  ·  Delivered with The Unordinary  ·  Canberra, Australia'
              : 'The Unordinary  ·  The write stuff  ·  Canberra, Australia'}
          </span>
          <span>© 2026</span>
        </footer>
      </div>
    </div>
  );
}

window.PortalShell = PortalShell;