// Sticky top nav — bold poster style
function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { href: '#elementos', label: '4 Elementos' },
    { href: '#nosotros',  label: 'Quiénes somos' },
    { href: '#proyectos', label: 'Proyectos' },
    { href: '#lineup',    label: 'Próximas fechas' },
    { href: '#galeria',   label: 'Galería' },
    { href: '#redes',     label: 'Redes' },
  ];

  return (
    <header
      className={
        'fixed top-0 left-0 right-0 z-40 transition-all duration-200 ' +
        (scrolled
          ? 'bg-bone-100/90 backdrop-blur-sm border-b-2 border-ink-900'
          : 'bg-transparent')
      }
    >
      <div className="max-w-[1400px] mx-auto px-5 lg:px-10 h-14 lg:h-16 flex items-center justify-between">
        <a href="#top" className="flex items-center gap-2.5">
          <div className="w-7 h-7 bg-ink-900 grid place-items-center">
            <span className="font-display text-bone-100 text-[16px] leading-none mt-1">F</span>
          </div>
          <div className="leading-none">
            <div className="font-display text-[20px] text-ink-900">FlowFam</div>
            <div className="font-mono text-[8.5px] tracking-[0.18em] text-ink-900/70 uppercase mt-0.5 whitespace-nowrap">Pudahuel · hip hop</div>
          </div>
        </a>

        <nav className="hidden lg:flex items-center gap-6">
          {links.map(l => (
            <a key={l.href} href={l.href}
               className="text-[12.5px] font-medium uppercase tracking-[0.08em] text-ink-900 hover:text-fire-500 transition">
              {l.label}
            </a>
          ))}
        </nav>

        <div className="flex items-center gap-2">
          <div className="hidden xl:flex items-center gap-1 mr-2">
            {SOCIALS.map(s => (
              <a key={s.icon} href={s.url} target="_blank" rel="noopener" aria-label={s.label}
                 className="w-8 h-8 grid place-items-center text-ink-900 hover:bg-fire-500 transition">
                <Icon name={s.icon} size={15} />
              </a>
            ))}
          </div>
          <a href="#cta"
             className="btn-fire hidden sm:inline-flex items-center gap-2 text-[12px] uppercase tracking-[0.08em] px-4 py-2">
            Contáctanos
            <Icon name="arrow_right" size={13} />
          </a>
          <button
            className="lg:hidden w-9 h-9 grid place-items-center border-2 border-ink-900"
            onClick={() => setMenuOpen(v => !v)}
            aria-label="Menú"
          >
            <Icon name={menuOpen ? 'x' : 'menu'} size={16} />
          </button>
        </div>
      </div>

      {menuOpen && (
        <div className="lg:hidden bg-bone-100 border-t-2 border-ink-900">
          <div className="px-5 py-4 flex flex-col gap-3">
            {links.map(l => (
              <a key={l.href} href={l.href}
                 onClick={() => setMenuOpen(false)}
                 className="text-[14px] py-2 uppercase tracking-[0.06em] text-ink-900 border-b border-ink-900/20">
                {l.label}
              </a>
            ))}
          </div>
        </div>
      )}
    </header>
  );
}

window.Nav = Nav;