const Nav = ({ active = 'Soluciones' }) => {
  const [open, setOpen] = React.useState(false);
  const links = [
    { label: 'Soluciones', href: '/' },
    { label: 'Diagnóstico', href: '/diagnostico-energetico/' },
    { label: 'Ciudades', href: '/#ubicaciones' },
    { label: 'Blog', href: '/recursos/' },
    { label: 'Nosotros', href: '/#nosotros' },
  ];
  return (
    <>
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(248,247,243,0.85)',
      backdropFilter: 'blur(18px) saturate(160%)',
      borderBottom: '1px solid rgba(15,53,24,0.06)',
    }}>
      <div className="amp-nav-inner" style={{
        maxWidth: 1440, margin: '0 auto', padding: '20px 48px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24,
      }}>
        <a href="/" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <img src="/assets/logo-on-light.png" alt="Ampera" style={{ height: 44, width: 'auto' }}/>
        </a>

        {/* Desktop links — hidden on mobile via .amp-nav-links */}
        <div className="amp-nav-links" style={{ display: 'flex', gap: 32 }}>
          {links.map(l => {
            const isActive = active === l.label;
            return (
              <a key={l.label} href={l.href} style={{
                fontFamily: 'Inter', fontSize: 13,
                fontWeight: isActive ? 700 : 500,
                color: isActive ? '#0F3518' : '#1B5C2C',
                textDecoration: 'none', letterSpacing: '.02em',
                transition: 'color .2s', position: 'relative',
                paddingBottom: isActive ? 6 : 0,
                borderBottom: isActive ? '2px solid #C4A84F' : 'none',
              }}>{l.label}</a>
            );
          })}
        </div>

        {/* Desktop CTA — hidden on mobile via .amp-nav-cta */}
        <div className="amp-nav-cta">
          <a href="/diagnostico-energetico/" style={{ textDecoration: 'none' }}>
            <Button variant="primary" size="sm">Diagnóstico energético</Button>
          </a>
        </div>

        {/* Hamburger — shown on mobile via .amp-nav-burger (display:none → display:flex) */}
        <button className="amp-nav-burger" onClick={() => setOpen(o => !o)}
          aria-label="Menú" style={{
            display: 'none', background: 'transparent', border: 'none',
            cursor: 'pointer', padding: 4,
          }}>
          <Icon name={open ? 'close' : 'menu'} size={28} color="#0F3518"/>
        </button>
      </div>

      {/* Mobile dropdown menu */}
      {open && (
        <div style={{
          position: 'absolute', top: '100%', left: 0, right: 0,
          background: 'rgba(248,247,243,0.98)', backdropFilter: 'blur(18px)',
          borderBottom: '1px solid rgba(15,53,24,0.10)',
          padding: '8px 20px 24px', zIndex: 49,
        }}>
          {links.map(l => (
            <a key={l.label} href={l.href} onClick={() => setOpen(false)} style={{
              display: 'block', fontFamily: 'Inter', fontSize: 16,
              fontWeight: active === l.label ? 700 : 500,
              color: active === l.label ? '#0F3518' : '#1B5C2C',
              textDecoration: 'none', padding: '14px 0',
              borderBottom: '1px solid rgba(15,53,24,0.06)',
            }}>{l.label}</a>
          ))}
          <a href="/diagnostico-energetico/" onClick={() => setOpen(false)}
            style={{ textDecoration: 'none', display: 'block', marginTop: 20 }}>
            <Button variant="primary" style={{ width: '100%', justifyContent: 'center' }}>
              Diagnóstico energético
            </Button>
          </a>
        </div>
      )}
    </nav>
    <CookieBanner/>
    </>
  );
};

window.Nav = Nav;