/* global React, window */
const { useEffect, useState } = React;

const Navbar = () => {
  const [scrolled, setScrolled] = useState(false);
  const [light, setLight] = useState(false);
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();

    // Pick the section currently sitting under the nav (top 80px of viewport)
    // by reading data-theme attributes declared on each section root.
    const targets = Array.from(document.querySelectorAll("section[data-theme], footer[data-theme]"));
    const NAV_LINE = 80;

    const updateTheme = () => {
      let current = null;
      let currentTop = -Infinity;
      for (const el of targets) {
        const r = el.getBoundingClientRect();
        // section is "active" if it has crossed the nav line and hasn't ended yet
        if (r.top <= NAV_LINE && r.bottom > NAV_LINE) {
          if (r.top > currentTop) { currentTop = r.top; current = el; }
        }
      }
      if (current) setLight(current.dataset.theme === "light");
    };

    updateTheme();
    window.addEventListener("scroll", updateTheme, { passive: true });
    window.addEventListener("resize", updateTheme);
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("scroll", updateTheme);
      window.removeEventListener("resize", updateTheme);
    };
  }, []);

  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  const closeMenu = () => setOpen(false);

  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""} ${light ? "nav-light" : "nav-dark"}`}>
<div className="container nav-inner">
        <a href="#top" className="nav-logo" onClick={closeMenu} style={{ fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif' }}>
          <img src="assets/logo-g.png" alt="The Group" className="nav-logo-mark" style={{ padding: 0, background: "transparent", objectFit: "contain" }} />
        </a>

        <div className="nav-links">
          {window.DATA.NAV_LINKS.map((l) => (
            <a key={l.href} className="nav-link" href={l.href} style={{ fontSize: 16 }}>{l.label}</a>
          ))}
        </div>

        <a className="btn btn-dark btn-sm nav-cta" href={window.DATA.WHATSAPP_URL} target="_blank" rel="noreferrer">
          Contacto <window.Icon name="arrow" size={14} />
        </a>

        <button
          className={`nav-burger ${open ? "is-open" : ""}`}
          aria-label={open ? "Cerrar menú" : "Abrir menú"}
          aria-expanded={open}
          onClick={() => setOpen(!open)}
        >
          <span /><span /><span />
        </button>
      </div>

      <div className={`nav-drawer ${open ? "is-open" : ""}`} aria-hidden={!open}>
        <div className="nav-drawer-inner">
          <div className="nav-drawer-links">
            {window.DATA.NAV_LINKS.map((l) => (
              <a key={l.href} href={l.href} onClick={closeMenu}>{l.label}</a>
            ))}
          </div>
          <a className="btn btn-lime nav-drawer-cta" href={window.DATA.WHATSAPP_URL} target="_blank" rel="noreferrer" onClick={closeMenu}>
            Contacto <window.Icon name="arrow" size={14} />
          </a>
        </div>
      </div>
    </nav>
  );
};

window.Navbar = Navbar;