/* ===== Kuntur shared: Nav + fullscreen menu ===== */
function Nav() {
  const D = window.KUNTUR;
  const [open, setOpen] = useState(false);
  const overlayRef = useRef(null);
  const headerRef = useRef(null);
  const tlRef = useRef(null);

  useGsapReady(() => {
    const ov = overlayRef.current;
    gsap.set(ov, { clipPath: "inset(0% 0% 100% 0%)" });
    const links = ov.querySelectorAll(".menu-link, .menu-meta");
    gsap.set(links, { yPercent: 120, opacity: 0 });
    const tl = gsap.timeline({ paused: true });
    tl.to(ov, { clipPath: "inset(0% 0% 0% 0%)", duration: 0.7, ease: "power4.inOut" })
      .to(links, { yPercent: 0, opacity: 1, duration: 0.7, stagger: 0.035, ease: "power4.out" }, "-=0.35");
    tlRef.current = tl;

    // entrance: slide the header down
    gsap.from(headerRef.current, { yPercent: -100, opacity: 0, duration: 1, ease: "power4.out", delay: 0.15 });
  }, []);

  // scrolled state — solidify the bar past the hero top
  useEffect(() => {
    const el = headerRef.current;
    if (!el) return;
    const onScroll = () => { el.classList.toggle("nav--scrolled", window.scrollY > 40); };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useEffect(() => {
    if (!tlRef.current) return;
    if (open) { tlRef.current.play(); document.body.style.overflow = "hidden"; }
    else { tlRef.current.reverse(); document.body.style.overflow = ""; }
  }, [open]);

  return (
    <React.Fragment>
      <header className="nav" ref={headerRef}>
        <a className="nav__logo" href={L("index.html")} aria-label="Kuntur home">
          <img src={L("assets/kuntur-logo.png")} alt="Kuntur" className="nav__logo-icon" />
          <span className="nav__logo-txt">KUNTUR</span>
        </a>
        <button className="nav__toggle" onClick={() => setOpen(true)} aria-label="Open menu">
          <Icon name="menu" />
        </button>
      </header>

      <div className="menu" ref={overlayRef} aria-hidden={!open}>
        <div className="menu__top">
          <a className="nav__logo menu-meta" href={L("index.html")}>
            <img src={L("assets/kuntur-logo.png")} alt="Kuntur" className="nav__logo-icon" />
            <span className="nav__logo-txt">KUNTUR</span>
          </a>
          <button className="nav__toggle menu-meta" onClick={() => setOpen(false)} aria-label="Close menu">
            <Icon name="close" />
          </button>
        </div>
        <div className="menu__inner">
          <div className="menu__cols">
            <div className="menu__col">
              <div className="menu__label menu-meta">Páginas Principales</div>
              <nav className="menu__list">
                {D.nav.main.map((l, i) => (
                  <a key={i} className="menu-link" href={L(l[1])} onClick={() => setOpen(false)}>
                    <span className="menu-link__txt">{l[0]}</span>
                  </a>
                ))}
              </nav>
            </div>
            <div className="menu__col">
              <div className="menu__label menu-meta">Trabajo y Más</div>
              <nav className="menu__list">
                {D.nav.work.map((l, i) => (
                  <a key={i} className="menu-link" href={L(l[1])} onClick={() => setOpen(false)}>
                    <span className="menu-link__txt">{l[0]}</span>
                  </a>
                ))}
              </nav>
            </div>
          </div>
          <div className="menu__aside">
            <div className="menu__img menu-meta"><img src={D.navImage} alt="Studio" /></div>
            <div className="menu__follow">
              <div className="menu__label menu-meta">Síguenos</div>
              <div className="menu__socials">
                {D.socials.map((s, i) => (
                  <a key={i} className="menu-meta menu__soc" href={s.href} target="_blank" rel="noreferrer" aria-label={s.name}>
                    <Social name={s.ic} /><span>{s.name}</span>
                  </a>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </React.Fragment>
  );
}
window.Nav = Nav;