/* Top navigation with hash routing. Exports window.Nav */
const navDS = window.WKYHBHutchinsonBellDesignSystem_7985db || {};

const wkNavStyles = {
  bar: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, padding: '12px 40px', background: 'var(--surface)', borderBottom: '1px solid var(--border)', position: 'sticky', top: 0, zIndex: 40 },
  brand: { display: 'flex', alignItems: 'center', gap: 13, textDecoration: 'none', cursor: 'pointer', border: 'none', background: 'none', padding: 0 },
  mark: { width: 44, height: 44, borderRadius: '50%', objectFit: 'cover', boxShadow: 'var(--shadow-sm)' },
  wm: { display: 'flex', flexDirection: 'column', lineHeight: 1.05, textAlign: 'left' },
  wmTop: { fontFamily: 'var(--font-condensed)', textTransform: 'uppercase', letterSpacing: '0.12em', fontSize: 10.5, color: 'var(--bell-crimson)', fontWeight: 600 },
  wmMain: { fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 16, color: 'var(--text-strong)', letterSpacing: '-0.01em' },
  links: { display: 'flex', alignItems: 'center', gap: 26 },
  link: { fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 15, background: 'none', border: 'none', cursor: 'pointer', padding: '4px 0', textDecoration: 'none', whiteSpace: 'nowrap' },
  burger: { display: 'none' },
};

function Nav({ route }) {
  const { Button } = navDS;
  const U = window.U; const data = window.WKYHB;
  const [open, setOpen] = React.useState(false);

  const linkEl = (it) => (
    <button key={it.key} onClick={() => { U.goTo(it.key); setOpen(false); }} style={{
      ...wkNavStyles.link,
      color: route === it.key ? 'var(--bell-crimson)' : 'var(--text-body)',
      borderBottom: route === it.key ? '2px solid var(--bell-crimson)' : '2px solid transparent',
    }}>{it.label}</button>
  );

  return (
    <nav style={wkNavStyles.bar}>
      <button style={wkNavStyles.brand} onClick={() => U.goTo('home')}>
        <img src={U.bellSrc} alt="WKYHB bell mark" style={wkNavStyles.mark} />
        <span style={wkNavStyles.wm}>
          <span style={wkNavStyles.wmTop}>Western Kentucky Chapter</span>
          <span style={wkNavStyles.wmMain}>The Hutchinson Bell</span>
        </span>
      </button>

      <div className="wk-desktop-nav" style={wkNavStyles.links}>
        {data.nav.map(linkEl)}
        <Button size="sm" variant="outline" onClick={() => window.open(data.links.join, '_blank')}>Join</Button>
        <Button size="sm" onClick={() => U.goTo('give')}>Donate</Button>
      </div>

      <button className="wk-burger" onClick={() => setOpen((o) => !o)} aria-label="Menu" style={{ display: 'none', background: 'none', border: 'none', cursor: 'pointer', flexDirection: 'column', gap: 5, padding: 8 }}>
        <span style={{ width: 24, height: 2, background: 'var(--text-strong)' }} />
        <span style={{ width: 24, height: 2, background: 'var(--text-strong)' }} />
        <span style={{ width: 24, height: 2, background: 'var(--text-strong)' }} />
      </button>

      {open && (
        <div className="wk-mobile-menu" style={{ position: 'absolute', top: '100%', left: 0, right: 0, background: 'var(--surface)', borderBottom: '1px solid var(--border)', boxShadow: 'var(--shadow-md)', padding: '12px 40px 20px', display: 'flex', flexDirection: 'column', gap: 14, zIndex: 39 }}>
          {data.nav.map((it) => (
            <button key={it.key} onClick={() => { U.goTo(it.key); setOpen(false); }} style={{ ...wkNavStyles.link, fontSize: 17, textAlign: 'left', color: route === it.key ? 'var(--bell-crimson)' : 'var(--text-body)', borderBottom: 'none' }}>{it.label}</button>
          ))}
          <Button size="sm" fullWidth onClick={() => { U.goTo('give'); setOpen(false); }}>Donate</Button>
          <Button size="sm" fullWidth variant="outline" onClick={() => window.open(data.links.join, '_blank')}>Join the Bell</Button>
        </div>
      )}
    </nav>
  );
}

window.Nav = Nav;