// Header / Navigation — uses real MMRL brand mark + content from SITE

const Header = ({ theme, setTheme, activeSection, scrollProgress }) => {
  const items = [
    ['Research', 'research'],
    ['Publications', 'publications'],
    ['Models', 'models'],
    ['Insights', 'insights'],
    ['Philosophy', 'philosophy'],
    ['Team', 'team'],
    ['Contact', 'contact'],
  ];

  const go = (id) => {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      borderBottom: '1px solid var(--hairline)',
      background: 'color-mix(in oklab, var(--bg) 78%, transparent)',
      backdropFilter: 'blur(20px) saturate(160%)',
      WebkitBackdropFilter: 'blur(20px) saturate(160%)',
    }}>
      <div style={{
        position: 'absolute', bottom: -1, left: 0, height: 1,
        width: `${scrollProgress * 100}%`,
        background: 'var(--accent)',
        transition: 'width 0.1s linear',
      }} />
      <div className="shell" style={{
        display: 'grid',
        gridTemplateColumns: 'auto 1fr auto',
        alignItems: 'center',
        height: 64,
        gap: 40,
      }}>
        <a href="#" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }}
           style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <Logomark />
          <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.1 }}>
            <span style={{ fontWeight: 600, letterSpacing: '-0.02em', fontSize: 14 }}>{SITE.lab.abbr}</span>
            <span className="mono" style={{ fontSize: 9.5, color: 'var(--ink-3)', letterSpacing: '0.08em' }}>
              MARKET MICROSTRUCTURE
            </span>
          </div>
        </a>

        <nav style={{
          display: 'flex', justifyContent: 'center', gap: 4,
        }} className="nav-desktop">
          {items.map(([label, id]) => (
            <button key={id} onClick={() => go(id)}
              style={{
                background: 'transparent',
                border: 'none',
                color: activeSection === id ? 'var(--ink)' : 'var(--ink-3)',
                fontSize: 13,
                padding: '8px 14px',
                borderRadius: 8,
                letterSpacing: '-0.01em',
                position: 'relative',
                transition: 'color 0.2s',
                cursor: 'pointer',
              }}
              onMouseEnter={(e) => e.currentTarget.style.color = 'var(--ink)'}
              onMouseLeave={(e) => e.currentTarget.style.color = activeSection === id ? 'var(--ink)' : 'var(--ink-3)'}
            >
              {label}
              {activeSection === id && (
                <span style={{
                  position: 'absolute', left: '50%', bottom: 0, transform: 'translateX(-50%)',
                  width: 4, height: 4, borderRadius: '50%', background: 'var(--accent)',
                }} />
              )}
            </button>
          ))}
        </nav>

        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <div className="mono" style={{
            fontSize: 10.5, color: 'var(--ink-3)', display: 'flex', alignItems: 'center', gap: 8,
            letterSpacing: '0.06em',
          }}>
            <span className="live-dot" />
            <span>SSRN · LIVE</span>
          </div>
          <div style={{ width: 1, height: 16, background: 'var(--hairline)' }} />
          <ThemeToggle theme={theme} setTheme={setTheme} />
        </div>
      </div>
    </header>
  );
};

// MMRL logomark — uses the brand SVG file, themed via CSS mask
const Logomark = ({ size = 28 }) => (
  <span aria-label="MMRL" style={{
    display: 'inline-block',
    width: size, height: size,
    background: 'var(--accent)',
    WebkitMaskImage: 'url(logo.svg)',
    maskImage: 'url(logo.svg)',
    WebkitMaskRepeat: 'no-repeat',
    maskRepeat: 'no-repeat',
    WebkitMaskPosition: 'center',
    maskPosition: 'center',
    WebkitMaskSize: 'contain',
    maskSize: 'contain',
  }} />
);

const ThemeToggle = ({ theme, setTheme }) => {
  const isDark = theme === 'dark';
  return (
    <button
      onClick={() => setTheme(isDark ? 'light' : 'dark')}
      aria-label="Toggle theme"
      style={{
        width: 56, height: 28, borderRadius: 999,
        background: 'var(--bg-elev)',
        border: '1px solid var(--hairline)',
        padding: 0,
        position: 'relative',
        display: 'flex', alignItems: 'center',
        cursor: 'pointer',
      }}>
      <span style={{
        position: 'absolute',
        top: 2, left: isDark ? 30 : 2,
        width: 22, height: 22, borderRadius: '50%',
        background: 'var(--ink)',
        transition: 'left 0.35s cubic-bezier(.5,1.4,.4,1)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <svg width="11" height="11" viewBox="0 0 11 11" fill="none">
          {isDark ? (
            <path d="M9 6.5A4 4 0 014.5 2 4 4 0 109 6.5z" fill="var(--bg)" />
          ) : (
            <>
              <circle cx="5.5" cy="5.5" r="2" fill="var(--bg)" />
              <g stroke="var(--bg)" strokeWidth="1" strokeLinecap="round">
                <line x1="5.5" y1="0.5" x2="5.5" y2="2" />
                <line x1="5.5" y1="9" x2="5.5" y2="10.5" />
                <line x1="0.5" y1="5.5" x2="2" y2="5.5" />
                <line x1="9" y1="5.5" x2="10.5" y2="5.5" />
              </g>
            </>
          )}
        </svg>
      </span>
    </button>
  );
};

window.Header = Header;
window.Logomark = Logomark;