// Header — cells with hairline ink border; glass + shrinks on scroll
function Header() {
  const [shrunk, setShrunk] = React.useState(false);
  const [lang, setLang] = window.useLang();
  React.useEffect(() => {
    let raf = 0;
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => {
        setShrunk(window.scrollY > 80);
        raf = 0;
      });
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const isEn = lang === "en";
  const labels = isEn
    ? { what: "WHAT WE DO", us: "ABOUT", contact: "CONTACT", langAria: "Switch language to Spanish", next: "ES" }
    : { what: "QUÉ HACEMOS", us: "NOSOTROS", contact: "CONTACTO", langAria: "Cambiar idioma a inglés", next: "EN" };

  const toggleLang = () => setLang(isEn ? "es" : "en");

  return (
    <header className={"site-header" + (shrunk ? " is-shrunk" : "")}>
      <div className="hcell hcell-logo" onClick={() => window.scrollTo({top:0, behavior:"smooth"})}>
        <span className="hcell-mark" role="img" aria-label="celtis">
          <span className="hcell-mark-fill" aria-hidden="true"></span>
        </span>
      </div>
      <a className="hcell" href="#que-hacemos"><span className="hcell-label">{labels.what}</span></a>
      <a className="hcell" href="#nosotros"><span className="hcell-label">{labels.us}</span></a>
      <a className="hcell" href="#contacto"><span className="hcell-label">{labels.contact}</span></a>
      <button className="hcell hcell-lang" type="button" aria-label={labels.langAria} onClick={toggleLang}>
        <span className="hcell-label">{labels.next}</span>
      </button>
    </header>
  );
}
window.Header = Header;