/* OVM SiteNav — sticky top nav, transparent over hero, frosted on scroll. */
const { Button: OVMButton } = window.OgdenVictoryMindsetDesignSystem_d92c3e;

function SiteNav({ current = 'home', onNav, logoSrc = '../../assets/logo-mark.png' }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const el = document.querySelector('[data-scroll-root]') || window;
    const onScroll = () => {
      const y = el === window ? window.scrollY : el.scrollTop;
      setScrolled(y > 40);
    };
    el.addEventListener('scroll', onScroll);
    onScroll();
    return () => el.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    ['home', 'Home'], ['speaking', 'Speaking'], ['podcast', 'Podcast'], ['about', 'About'], ['book', 'Book'],
  ];

  const go = (id) => (e) => { e.preventDefault(); setOpen(false); onNav && onNav(id); };

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 100,
      background: scrolled ? 'rgba(7,10,16,0.82)' : 'transparent',
      backdropFilter: scrolled ? 'blur(14px) saturate(1.2)' : 'none',
      borderBottom: scrolled ? '1px solid var(--border-subtle)' : '1px solid transparent',
      transition: 'background .3s var(--ease-out), border-color .3s var(--ease-out), backdrop-filter .3s',
    }}>
      <div className="ovm-container ovm-container--wide" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 76 }}>
        <a href="#" onClick={go('home')} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <img src={logoSrc} alt="OVM" style={{ width: 40, height: 40 }} />
          <span style={{ display: 'flex', flexDirection: 'column', lineHeight: 1 }}>
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 17, letterSpacing: '-0.01em', color: 'var(--text-strong)' }}>OGDEN</span>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--blue-400)', marginTop: 3 }}>Victory Mindset</span>
          </span>
        </a>

        <nav style={{ display: 'flex', alignItems: 'center', gap: 4 }} className="ovm-nav-desktop">
          {links.map(([id, label]) => (
            <a key={id} href="#" onClick={go(id)} style={{
              fontFamily: 'var(--font-mono)', fontSize: 12.5, letterSpacing: '0.06em', textTransform: 'uppercase',
              fontWeight: current === id ? 700 : 500,
              color: current === id ? 'var(--blue-300)' : 'var(--text-body)',
              padding: '10px 14px', borderRadius: 'var(--radius-sm)', transition: 'color .2s',
            }}
              onMouseEnter={(e) => { if (current !== id) e.currentTarget.style.color = 'var(--text-strong)'; }}
              onMouseLeave={(e) => { if (current !== id) e.currentTarget.style.color = 'var(--text-body)'; }}>
              {label}
            </a>
          ))}
        </nav>

        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div className="ovm-nav-desktop">
            <OVMButton variant="primary" size="sm" onClick={go('speaking')}>Book Marques</OVMButton>
          </div>
          <button aria-label="Menu" onClick={() => setOpen(o => !o)} className="ovm-nav-mobile" style={{
            display: 'none', width: 44, height: 44, alignItems: 'center', justifyContent: 'center',
            background: 'rgba(255,255,255,0.06)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-sm)', color: 'var(--text-strong)', cursor: 'pointer',
          }}>
            {open ? <window.X size={20} /> : <window.Menu size={20} />}
          </button>
        </div>
      </div>

      {open ? (
        <div className="ovm-nav-mobile" style={{ display: 'none', flexDirection: 'column', padding: '8px 24px 20px', background: 'rgba(7,10,16,0.96)', borderBottom: '1px solid var(--border-subtle)' }}>
          {links.map(([id, label]) => (
            <a key={id} href="#" onClick={go(id)} style={{ padding: '12px 4px', fontFamily: 'var(--font-mono)', fontSize: 14, textTransform: 'uppercase', letterSpacing: '0.06em', color: current === id ? 'var(--blue-300)' : 'var(--text-body)', borderBottom: '1px solid var(--border-subtle)' }}>{label}</a>
          ))}
          <div style={{ marginTop: 14 }}><OVMButton variant="gradient" full onClick={go('speaking')}>Book Marques</OVMButton></div>
        </div>
      ) : null}
    </header>
  );
}

Object.assign(window, { SiteNav });