function Nav({ current }) {
  const [openNosotras, setOpenNosotras] = React.useState(false);
  const [openServicios, setOpenServicios] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);

  const nosotras = [
    { t: 'Quiénes somos',  d: 'Dary & Laura',      href: 'nosotras.html#quienes' },
    { t: 'Misión',         d: 'Nuestro propósito', href: 'nosotras.html#mision' },
    { t: 'Visión',         d: 'Hacia dónde vamos', href: 'nosotras.html#vision' },
  ];
  const servicios = [
    { t: 'Talleres & Retiros', d: 'Experiencias transformadoras', href: 'talleres.html' },
    { t: 'Empresas',           d: 'Programas corporativos',       href: 'empresas.html' },
  ];

  const items = [
    { key: 'inicio',    label: 'INICIO',     href: 'index.html' },
    { key: 'nosotras',  label: 'CONÓCENOS',  dropdown: nosotras, setOpen: setOpenNosotras, open: openNosotras, href: 'nosotras.html' },
    { key: 'servicios', label: 'SERVICIOS',  dropdown: servicios, setOpen: setOpenServicios, open: openServicios, href: 'servicios.html' },
    { key: 'tienda',    label: 'TIENDA',     href: 'tienda.html' },
    { key: 'blog',      label: 'RECURSOS',   href: 'blog.html' },
  ];

  const socialLinks = [
    { Ic: IconIG, href: 'https://www.instagram.com/cbpsemillas' },
    { Ic: IconLI, href: '#' },
    { Ic: IconYT, href: 'https://www.youtube.com/@cbpsemillas' },
  ];

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 100,
      background: 'rgba(250, 245, 238, 0.95)',
      backdropFilter: 'blur(14px) saturate(1.1)',
      WebkitBackdropFilter: 'blur(14px) saturate(1.1)',
      borderBottom: '1px solid rgba(96,114,80,.14)',
    }}>
      <div className="container" style={{
        display:'flex', alignItems:'center', justifyContent:'space-between',
        padding: '16px 20px',
      }}>
        <a href="index.html" style={{display:'flex', marginRight: 40}}>
          <LogoFull size={44} dark={false}/>
        </a>

        {/* Desktop nav */}
        <nav className="nav-desktop" style={{display:'flex', alignItems:'center', gap: 26}}>
          {items.map((it) => (
            <div key={it.key}
              style={{position:'relative'}}
              onMouseEnter={() => it.setOpen && it.setOpen(true)}
              onMouseLeave={() => it.setOpen && it.setOpen(false)}
            >
              <a href={it.href} style={{
                display:'flex', alignItems:'center', gap: 5,
                fontFamily: 'var(--sans)', fontSize: 12.5,
                letterSpacing: '.18em', fontWeight: current === it.key ? 700 : 500,
                color: current === it.key ? 'var(--terracota)' : 'var(--verde-oscuro)',
                padding: '8px 0',
                borderBottom: current === it.key ? '2px solid var(--terracota)' : '2px solid transparent',
                transition: 'color .25s',
              }}
              onMouseOver={(e)=> e.currentTarget.style.color = 'var(--terracota)'}
              onMouseOut ={(e)=> e.currentTarget.style.color = current === it.key ? 'var(--terracota)' : 'var(--verde-oscuro)'}
              >
                {it.label}
                {it.dropdown && <IconChevron size={12}/>}
              </a>
              {it.dropdown && it.open && (
                <div style={{
                  position:'absolute', top: '100%', left: '50%', transform:'translateX(-50%)',
                  paddingTop: 8, minWidth: 280,
                  background: '#FFFDF9', borderRadius: 16,
                  boxShadow: '0 20px 60px -18px rgba(70,85,56,.35), 0 2px 8px rgba(0,0,0,.06)',
                  border: '1px solid rgba(96,114,80,.12)', padding: 10,
                  animation: 'fadeInDown .25s ease',
                }}>
                  {it.dropdown.map((s)=> (
                    <a key={s.t} href={s.href} style={{display:'block', padding: '12px 14px', borderRadius: 10, transition: 'background .2s'}}
                    onMouseOver={(e)=> e.currentTarget.style.background = 'var(--crema)'}
                    onMouseOut ={(e)=> e.currentTarget.style.background = 'transparent'}
                    >
                      <div style={{fontFamily: 'var(--serif)', fontSize: 17, fontWeight: 600, color:'var(--verde-oscuro)'}}>{s.t}</div>
                      <div style={{fontSize: 12, color:'var(--tinta-suave)', marginTop: 2}}>{s.d}</div>
                    </a>
                  ))}
                </div>
              )}
            </div>
          ))}
        </nav>

        {/* Desktop: botón + redes */}
        <div className="nav-desktop" style={{display:'flex', alignItems:'center', gap: 8}}>
          <a href="contacto.html" style={{
            display:'inline-flex', alignItems:'center', gap: 8,
            margin: '0 16px', padding: '12px 22px',
            background: 'var(--terracota)', color: '#fff',
            borderRadius: 999, fontSize: 12, letterSpacing: '.18em', fontWeight: 600,
            boxShadow: '0 8px 20px -6px rgba(193,112,72,.55)',
          }}>CONTÁCTANOS <IconArrow size={14}/></a>
          {socialLinks.map(({ Ic, href }, i) => (
            <a key={i} href={href} target="_blank" rel="noopener noreferrer" style={{
              width: 36, height: 36, borderRadius: '50%',
              border: '1px solid rgba(70,85,56,.3)',
              display:'grid', placeItems:'center', color: 'var(--verde-oscuro)', transition: 'all .2s',
            }}
            onMouseOver={(e)=> { e.currentTarget.style.background = 'var(--verde-oscuro)'; e.currentTarget.style.color = '#F4EDE5'; }}
            onMouseOut ={(e)=> { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--verde-oscuro)'; }}
            ><Ic size={15}/></a>
          ))}
        </div>

        {/* Hamburger button */}
        <button className="nav-mobile-btn" onClick={() => setMobileOpen(!mobileOpen)} style={{
          display: 'none', flexDirection:'column', gap: 5, padding: 8,
          cursor:'pointer', background:'none', border:'none',
        }}>
          <span style={{width:24, height:2, background:'var(--verde-oscuro)', borderRadius:2, transition:'all .3s', transform: mobileOpen ? 'rotate(45deg) translate(5px,5px)' : 'none'}}/>
          <span style={{width:24, height:2, background:'var(--verde-oscuro)', borderRadius:2, transition:'all .3s', opacity: mobileOpen ? 0 : 1}}/>
          <span style={{width:24, height:2, background:'var(--verde-oscuro)', borderRadius:2, transition:'all .3s', transform: mobileOpen ? 'rotate(-45deg) translate(5px,-5px)' : 'none'}}/>
        </button>
      </div>

      {/* Mobile menu */}
      {mobileOpen && (
        <div style={{
          display:'flex', flexDirection:'column',
          background: '#FFFDF9', borderTop: '1px solid rgba(96,114,80,.12)',
          padding: '16px 20px 24px',
        }}>
          {items.map((it) => (
            <div key={it.key}>
              <a href={it.href} style={{
                display:'block',
                fontFamily: 'var(--sans)', fontSize: 14, letterSpacing: '.15em', fontWeight: 600,
                color: current === it.key ? 'var(--terracota)' : 'var(--verde-oscuro)',
                padding: '14px 0', borderBottom: '1px solid rgba(96,114,80,.1)',
              }}>{it.label}</a>
              {it.dropdown && it.dropdown.map(s => (
                <a key={s.t} href={s.href} style={{
                  display:'block', fontSize: 13, color: 'var(--tinta-suave)',
                  padding: '10px 0 10px 16px', borderBottom: '1px solid rgba(96,114,80,.06)',
                }}>{s.t}</a>
              ))}
            </div>
          ))}
          <a href="contacto.html" style={{
            display:'inline-flex', alignItems:'center', justifyContent:'center', gap: 8,
            marginTop: 20, padding: '14px 22px',
            background: 'var(--terracota)', color: '#fff',
            borderRadius: 999, fontSize: 12, letterSpacing: '.18em', fontWeight: 600,
          }}>CONTÁCTANOS <IconArrow size={14}/></a>
          <div style={{display:'flex', gap: 12, marginTop: 16, justifyContent:'center'}}>
            {socialLinks.map(({ Ic, href }, i) => (
              <a key={i} href={href} target="_blank" rel="noopener noreferrer" style={{
                width: 40, height: 40, borderRadius: '50%',
                border: '1px solid rgba(70,85,56,.3)',
                display:'grid', placeItems:'center', color: 'var(--verde-oscuro)',
              }}><Ic size={17}/></a>
            ))}
          </div>
        </div>
      )}

      <style>{`
        @keyframes fadeInDown {
          from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
          to   { opacity: 1; transform: translateX(-50%) translateY(0); }
        }
        @media (max-width: 768px) {
          .nav-desktop { display: none !important; }
          .nav-mobile-btn { display: flex !important; }
          .nav-mobile-menu { display: flex !important; }
        }
      `}</style>
    </header>
  );
}

window.Nav = Nav;