// Topnav uniquement — altimètre supprimé du projet.
const SECTIONS = ["accueil", "apropos", "projets", "competences", "contact"];

function Chrome() {
  const [stuck, setStuck] = React.useState(false);
  const [navActive, setNavActive] = React.useState("accueil");
  const [navTheme, setNavTheme] = React.useState("dark");
  const [menuOpen, setMenuOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => {
      const y = window.scrollY;
      setStuck(y > 80);

      // Topnav : highlight + theme
      // On ignore les sections en display:none (rect 0×0) pour éviter
      // que Contact soit marqué actif avant qu'il ne soit révélé.
      let curIdx = 0;
      SECTIONS.forEach((id, i) => {
        const el = document.getElementById(id);
        if (!el) return;
        const rect = el.getBoundingClientRect();
        if (rect.width === 0 && rect.height === 0) return;
        if (rect.top <= window.innerHeight * 0.4) curIdx = i;
      });
      setNavActive(SECTIONS[curIdx]);
      setNavTheme(curIdx === 0 || curIdx === 4 ? "dark" : "light");

      // Mirror v1 toggleHeaderFooter() : swap header/footer pour éviter
      // qu'ils se chevauchent (tous deux fixed, height 100vh).
      const competences = document.getElementById("competences");
      const competencesTop = competences ? competences.getBoundingClientRect().top : Infinity;
      const footerRevealed = competencesTop <= 0;
      document.body.classList.toggle("show-footer", footerRevealed);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
    };
  }, []);

  const items = [
    { id:"accueil",     n:"01", label:"ACCUEIL" },
    { id:"apropos",     n:"02", label:"À PROPOS" },
    { id:"projets",     n:"03", label:"PROJETS" },
    { id:"competences", n:"04", label:"COMPÉTENCES" },
    { id:"contact",     n:"05", label:"CONTACT" },
  ];

  const dark = navTheme === "dark";
  const cls = `vm-topnav ${dark?"is-dark":"is-light"} ${stuck?"is-stuck":""} ${stuck && dark?"is-dark-stuck":""} ${menuOpen?"menu-open":""}`;

  const handleNavClick = (e, id) => {
    setMenuOpen(false);
    // Hero (accueil) et Contact sont en position:fixed avec display toggle :
    // on force un scroll absolu pour les atteindre correctement.
    if (id === "accueil") {
      e.preventDefault();
      window.scrollTo({ top: 0, behavior: "smooth" });
    } else if (id === "contact") {
      e.preventDefault();
      window.scrollTo({
        top: document.documentElement.scrollHeight - window.innerHeight,
        behavior: "smooth",
      });
    }
  };

  return (
    <header className={cls}>
      {/* burger — visible uniquement sur mobile */}
      <button
        className="vm-burger"
        aria-label={menuOpen ? "Fermer le menu" : "Ouvrir le menu"}
        aria-expanded={menuOpen}
        onClick={() => setMenuOpen(o => !o)}
      >
        <span></span><span></span><span></span>
      </button>
      <nav className="vm-nav">
        {items.map(it => (
          <a
            key={it.id}
            href={`#${it.id}`}
            className={navActive===it.id?"is-active":""}
            onClick={(e) => handleNavClick(e, it.id)}
          >
            <span className="vm-nav-num">{it.n}</span>
            <span>{it.label}</span>
          </a>
        ))}
      </nav>
    </header>
  );
}
window.Chrome = Chrome;