/* TopNav.jsx — big logo + center pill + 2 social icons */
function TopNav({ active = 'top' }) {
  const [open, setOpen] = React.useState(false);
  const items = [
    { id: 'idea',     label: 'The Idea' },
    { id: 'origins',  label: 'Origins' },
    { id: 'timeline', label: 'Timeline' },
    { id: 'fund',     label: 'The Fund' },
    { id: 'collectibles', label: 'Collectibles' },
    { id: 'people',   label: 'People' },
    { id: 'characters', label: 'Characters' },
    { id: 'collabs',  label: 'Collab' },
  ];
  const go = (id) => (e) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
    setOpen(false);
  };
  return (
    <nav className={'nav' + (open ? ' menu-open' : '')} aria-label="Primary">
      <button className="menu-toggle" type="button" aria-label="Open menu" aria-expanded={open} onClick={() => setOpen(v => !v)}>
        <img src="assets/menu.svg" alt="" />
      </button>
      <div className="nav-shell">
        <a href="#top" className="mark" onClick={go('top')}>
          <img src="assets/sgtpepelogo-menu.svg" alt="Sgt. Pepe's World" />
        </a>
        <div className="links-wrap">
          <div className="links">
            {items.map(it => (
              <a key={it.id}
                href={'#' + it.id}
                className={'link' + (active === it.id ? ' active' : '')}
                onClick={go(it.id)}>{it.label}</a>
            ))}
          </div>
        </div>
        <div className="icons">
          <a href="https://x.com/SgtPepeWorld" className="icon-btn" aria-label="X / Twitter" target="_blank" rel="noreferrer">
            <svg viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
          </a>
          <a href="https://www.youtube.com/@SgtPepeWorld" className="icon-btn" aria-label="YouTube" target="_blank" rel="noreferrer">
            <svg viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
          </a>
        </div>
      </div>
    </nav>
  );
}
window.TopNav = TopNav;