// Navbar
function Navbar({ active, onNav }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);

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

  const links = [
    { id: 'inicio', label: 'Inicio' },
    { id: 'portafolio', label: 'Portafolio' },
    { id: 'estilos', label: 'Estilos' },
    { id: 'tienda', label: 'Tienda' },
    { id: 'sobre-mi', label: 'Sobre mí' },
    { id: 'contacto', label: 'Contacto' },
  ];

  return (
    <motion.nav
      initial={{ y: -80, opacity: 0 }}
      animate={{ y: 0, opacity: 1 }}
      transition={{ delay: 0.1, duration: 0.6 }}
      style={{
        position: 'fixed', top: 0, left: 0, right: 0,
        padding: '20px 6vw',
        background: scrolled ? 'rgba(10,10,10,0.95)' : 'transparent',
        backdropFilter: scrolled ? 'blur(12px)' : 'none',
        WebkitBackdropFilter: scrolled ? 'blur(12px)' : 'none',
        borderBottom: `1px solid rgba(139,0,0,${scrolled ? 0.3 : 0.1})`,
        zIndex: 900,
        transition: 'background 0.3s, border 0.3s, backdrop-filter 0.3s',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}
    >
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
        <span style={{ fontFamily: 'var(--font-display)', fontSize: 24, color: 'var(--white)', letterSpacing: '0.05em' }}>ISFER</span>
        <span style={{ fontFamily: 'var(--font-accent)', fontSize: 16, color: 'var(--ink-red-bright)', letterSpacing: '0.2em' }}>502</span>
      </div>

      <div className="nav-desktop" style={{ display: 'flex', gap: 32, alignItems: 'center' }}>
        {links.map(l => (
          <a
            key={l.id}
            href={`#${l.id}`}
            onClick={() => onNav && onNav(l.id)}
            style={{
              fontFamily: 'var(--font-accent)',
              fontSize: 13,
              letterSpacing: '0.25em',
              color: active === l.id ? 'var(--white)' : 'var(--gray)',
              textTransform: 'uppercase',
              position: 'relative',
              paddingBottom: 4,
              borderBottom: active === l.id ? '1px solid var(--ink-red-bright)' : '1px solid transparent',
            }}
            onMouseEnter={(e) => e.currentTarget.style.color = 'var(--white)'}
            onMouseLeave={(e) => e.currentTarget.style.color = active === l.id ? 'var(--white)' : 'var(--gray)'}
          >
            {l.label.toUpperCase()}
          </a>
        ))}
        <a
          href={waLink('Hola Edwin, quiero agendar una cita para un tatuaje')}
          target="_blank"
          rel="noopener noreferrer"
          className="btn btn-outline-red"
        >
          Agendar cita
        </a>
      </div>

      <button
        className="nav-mobile-toggle"
        onClick={() => setOpen(!open)}
        style={{ display: 'none', color: 'var(--white)' }}
        aria-label="Abrir menú"
      >
        {open ? <Icon.Close/> : <Icon.Menu/>}
      </button>

      <AnimatePresence>
        {open && (
          <motion.div
            initial={{ opacity: 0, y: -10 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -10 }}
            style={{
              position: 'fixed', top: 64, left: 0, right: 0,
              background: 'rgba(10,10,10,0.98)',
              backdropFilter: 'blur(14px)',
              padding: '24px 6vw',
              borderBottom: '1px solid rgba(139,0,0,0.3)',
              display: 'flex', flexDirection: 'column', gap: 20,
            }}
          >
            {links.map(l => (
              <a
                key={l.id}
                href={`#${l.id}`}
                onClick={() => { onNav && onNav(l.id); setOpen(false); }}
                style={{
                  fontFamily: 'var(--font-accent)',
                  fontSize: 16, letterSpacing: '0.25em',
                  color: 'var(--white)', textTransform: 'uppercase'
                }}
              >{l.label}</a>
            ))}
            <a
              href={waLink('Hola Edwin, quiero agendar una cita para un tatuaje')}
              target="_blank" rel="noopener noreferrer"
              className="btn btn-outline-red"
            >Agendar cita</a>
          </motion.div>
        )}
      </AnimatePresence>

      <style>{`
        @media (max-width: 900px) {
          .nav-desktop { display: none !important; }
          .nav-mobile-toggle { display: block !important; }
        }
      `}</style>
    </motion.nav>
  );
}

window.Navbar = Navbar;