function Nav({ onCotizar }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 80);
      if (menuOpen) setMenuOpen(false);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, [menuOpen]);

  const scrollTo = (id) => (e) => {
    e.preventDefault();
    setMenuOpen(false);
    const el = document.getElementById(id);
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 80;
      window.scrollTo({ top, behavior: 'smooth' });
    }
  };

  const links = [
    { label: 'Inicio',        id: 'top' },
    { label: 'Portafolio',    id: 'portafolio' },
    { label: 'Quiénes somos', id: 'quienes' },
    { label: 'Contacto',      id: 'contacto' },
  ];

  return (
    <header className={`site-header${scrolled || menuOpen ? ' scrolled' : ''}`}>

      {/* Partners strip */}
      <div className="partners-strip">
        <img src="assets/partners-banner.png" alt="Partners: Suzano, Klabin, Sylvamo, APP sinarmas, Sun Paper" />
      </div>

      {/* Main nav bar */}
      <div className="nav-bar">
        <a href="#top" onClick={scrollTo('top')} className="nav-logo">
          <img src="assets/logo-cmpi.png" alt="CMPI" />
        </a>

        <nav className="nav-links-desktop">
          {links.map(l => (
            <a key={l.id} href={`#${l.id}`} onClick={scrollTo(l.id)} className="nav-link">
              {l.label}
            </a>
          ))}
        </nav>

        <button className="btn btn-outline-light nav-cta-desktop" onClick={() => window.openWhatsApp()}>
          Contáctanos
        </button>

        <button className="hamburger" onClick={() => setMenuOpen(!menuOpen)} aria-label="Menú">
          <span className={`ham-line ham-top${menuOpen ? ' open' : ''}`} />
          <span className={`ham-line ham-mid${menuOpen ? ' open' : ''}`} />
          <span className={`ham-line ham-bot${menuOpen ? ' open' : ''}`} />
        </button>
      </div>

      {/* Mobile dropdown */}
      <div className={`mobile-menu${menuOpen ? ' open' : ''}`}>
        <div className="mobile-menu-inner">
          {links.map((l, i) => (
            <a key={l.id} href={`#${l.id}`} onClick={scrollTo(l.id)} className="mobile-link">
              {l.label}
            </a>
          ))}
          <button
            className="btn btn-gradient"
            onClick={() => { window.openWhatsApp(); setMenuOpen(false); }}
            style={{ marginTop: 20, width: '100%', justifyContent: 'center' }}
          >
            Contáctanos por WhatsApp
          </button>
        </div>
      </div>

      <style>{`
        /* ── Header ── */
        .site-header {
          position: fixed; top: 0; left: 0; right: 0; z-index: 50;
          transition: background .35s cubic-bezier(.2,.7,.2,1), backdrop-filter .35s;
        }
        .site-header.scrolled {
          background: rgba(15,27,61,0.96);
          backdrop-filter: blur(14px);
        }

        /* ── Partners strip ── */
        .partners-strip {
          background: #0F1B3D;
          border-bottom: 1px solid rgba(255,255,255,0.06);
          overflow: hidden; line-height: 0;
        }
        .partners-strip img {
          width: 100%; height: auto; display: block;
          min-height: 28px; object-fit: cover;
        }

        /* ── Nav bar ── */
        .nav-bar {
          display: flex; align-items: center;
          justify-content: space-between;
          height: 76px;
          padding: 0 40px 0 80px;
          gap: 24px;
        }
        .nav-logo img { height: 50px; width: auto; display: block; }

        /* ── Desktop links ── */
        .nav-links-desktop { display: flex; align-items: center; gap: 44px; }
        .nav-link {
          font-size: 13px; font-weight: 700; letter-spacing: 0.12em;
          text-transform: uppercase; color: white;
          text-decoration: none; padding: 4px 0; position: relative;
          transition: color .2s;
        }
        .nav-link::after {
          content: ''; position: absolute; left: 0; right: 0; bottom: -6px;
          height: 2px; background: linear-gradient(90deg,#06B6D4,#10B981);
          transform: scaleX(0); transform-origin: left;
          transition: transform .3s cubic-bezier(.2,.7,.2,1);
        }
        .nav-link:hover::after { transform: scaleX(1); }
        .nav-cta-desktop { padding: 12px 28px !important; font-size: 12px !important; flex-shrink: 0; }

        /* ── Hamburger ── */
        .hamburger {
          display: none;
          flex-direction: column; justify-content: center; align-items: center;
          gap: 5px; width: 44px; height: 44px;
          background: none; border: none; cursor: pointer;
          padding: 4px; flex-shrink: 0;
        }
        .ham-line {
          display: block; width: 24px; height: 2px;
          background: white; border-radius: 2px;
          transition: transform .3s, opacity .3s;
        }
        .ham-top.open { transform: rotate(45deg) translate(5px, 5px); }
        .ham-mid.open { opacity: 0; transform: scaleX(0); }
        .ham-bot.open { transform: rotate(-45deg) translate(5px, -5px); }

        /* ── Mobile menu ── */
        .mobile-menu {
          overflow: hidden; max-height: 0;
          transition: max-height .35s cubic-bezier(.2,.7,.2,1);
          background: rgba(8,14,36,0.99);
        }
        .mobile-menu.open {
          max-height: 520px;
          border-top: 1px solid rgba(255,255,255,0.10);
        }
        .mobile-menu-inner {
          padding: 8px 24px 36px;
          display: flex; flex-direction: column;
        }
        .mobile-link {
          display: block;
          font-size: 18px; font-weight: 700;
          letter-spacing: 0.06em; text-transform: uppercase;
          color: white; text-decoration: none;
          padding: 18px 0;
          border-bottom: 1px solid rgba(255,255,255,0.08);
        }
        .mobile-link:last-of-type { border-bottom: none; }

        /* ── Breakpoints ── */
        @media (max-width: 900px) {
          .nav-links-desktop { display: none; }
          .nav-cta-desktop   { display: none; }
          .hamburger         { display: flex; }
        }
        @media (max-width: 600px) {
          .nav-bar { padding: 0 16px 0 20px; height: 64px; }
          .nav-logo img { height: 40px; }
          .partners-strip { display: none; }
        }
      `}</style>
    </header>
  );
}

window.Nav = Nav;