// 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 isNCP = t.key === 'elysium';
  // NCP wears a black top band; TWS stays white.
  const headerBg = isNCP ? '#0E0E0E' : '#fff';
  const headerInk = isNCP ? '#fff' : t.ink;
  const headerBody = isNCP ? 'rgba(255,255,255,0.78)' : t.body;
  const headerMuted = isNCP ? 'rgba(255,255,255,0.55)' : t.muted;
  const headerRule = isNCP ? '#000' : t.rule;
  const navActiveBg = isNCP ? 'rgba(184,146,63,0.18)' : t.primaryLight;
  const navActiveInk = isNCP ? t.secondary : t.primary;
  const avatarBg = isNCP ? t.secondary : t.primaryMid;
  const avatarInk = isNCP ? '#0E0E0E' : t.primaryDark;

  const Wordmark = () => {
    if (isNCP) {
      return (
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <img src="assets/ncp-logo.png" alt="National Consulting Partners" style={{ height: 38 }} />
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            <span style={{ font: "700 15px/1.1 'Space Grotesk', Arial", color: headerInk, letterSpacing: '.01em' }}>National Consulting Partners</span>
            <span style={{ font: "500 11px/1.2 Inter, Arial", color: t.secondary, letterSpacing: '.08em', textTransform: 'uppercase', marginTop: 2 }}>ADVISORS PORTAL</span>
          </div>
        </div>);

    }
    return (
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        <img src="assets/logos/unordinary-favicon-128.png" style={{ height: 28, borderRadius: 6 }} 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 ${headerRule}`, background: headerBg, 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 ? navActiveBg : 'transparent',
              color: currentRoute === n.route ? navActiveInk : headerBody
            }}>{n.label}</button>
            )}
          </nav>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ font: "400 13px/1 Inter, Arial", color: headerBody }}>{isNCP ? 'Scott Hendy' : 'Brett Ackroyd'}</span>
            <div style={{
              width: 28, height: 28, borderRadius: 999,
              background: avatarBg, color: avatarInk,
              font: "700 12px/1 'Space Grotesk', Arial",
              display: 'flex', alignItems: 'center', justifyContent: 'center'
            }}>{isNCP ? 'SH' : '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' ?
            'National Consulting Partners  ·  Delivered with The Unordinary  ·  Canberra, Australia' :
            'The Unordinary  ·  The write stuff  ·  Canberra, Australia'}
          </span>
          <span>© 2026</span>
        </footer>
      </div>
    </div>);

}

window.PortalShell = PortalShell;