// Nav.jsx — fixed top navigation
function Nav({ onNav }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const h = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', h);
    return () => window.removeEventListener('scroll', h);
  }, []);
  const links = [
    ['mundo', 'Mundo'], ['album', 'Álbum'], ['banda', 'La Banda'],
  ];
  const go = (id) => { setOpen(false); onNav && onNav(id); };
  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '0 clamp(20px, 5vw, 64px)', height: 84,
      background: scrolled ? 'rgba(8,8,8,0.92)' : 'transparent',
      borderBottom: scrolled ? '1px solid var(--border)' : '1px solid transparent',
      backdropFilter: scrolled ? 'blur(6px)' : 'none',
      transition: 'background var(--dur) var(--ease), border-color var(--dur) var(--ease)',
    }}>
      <a onClick={() => go('top')} style={{ display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer' }}>
        <img src="assets/logo-drakharon.png" alt="Drakharon" style={{ height: 70, width: 'auto' }} />
      </a>
      <div className="dk-navlinks" style={{ display: 'flex', alignItems: 'center', gap: 36 }}>
        {links.map(([id, label]) => (
          <NavLink key={id} label={label} onClick={() => go(id)} />
        ))}
        <button className="btn" onClick={() => go('album')} style={{ marginLeft: 8 }}>Escuchar</button>
      </div>
      <button className="dk-burger" onClick={() => setOpen(o => !o)} aria-label="Menú" style={{
        display: 'none', background: 'transparent', border: '1px solid var(--border)',
        color: 'var(--silver)', fontSize: 18, width: 44, height: 44, cursor: 'pointer',
      }}>{open ? '✕' : '☰'}</button>
      {open && (
        <div style={{
          position: 'absolute', top: 84, left: 0, right: 0, background: 'rgba(8,8,8,0.98)',
          borderBottom: '1px solid var(--border)', display: 'flex', flexDirection: 'column',
          padding: '8px 0',
        }}>
          {links.map(([id, label]) => (
            <a key={id} onClick={() => go(id)} style={{
              fontFamily: 'var(--font-display)', textTransform: 'uppercase', letterSpacing: '0.2em',
              fontSize: 13, color: 'var(--text-muted)', padding: '16px 28px', cursor: 'pointer',
              borderBottom: '1px solid var(--border)',
            }}>{label}</a>
          ))}
        </div>
      )}
    </nav>
  );
}

function NavLink({ label, onClick }) {
  const [h, setH] = React.useState(false);
  return (
    <a onClick={onClick} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)} style={{
      fontFamily: 'var(--font-display)', fontWeight: 600, textTransform: 'uppercase',
      letterSpacing: '0.2em', fontSize: 13, cursor: 'pointer',
      color: h ? 'var(--gold)' : 'var(--text-muted)',
      transition: 'color var(--dur) var(--ease)',
    }}>{label}</a>
  );
}

Object.assign(window, { Nav, NavLink });