/* global React, ReactDOM, h, Nav, Hero, StatBand, Proyecto, Especies, Pilares, MitoRealidad, Conservacion, Metodologia, Contacto, Footer, SpeciesModal, NAV, Icons */
// ============================================================================
// BioBits.CL — App composition
// ============================================================================
const { useState: useStateApp, useEffect: useEffectApp } = React;

function App() {
  const [active, setActive] = useStateApp("inicio");
  const [modal, setModal] = useStateApp(null);
  const [menu, setMenu] = useStateApp(false);

  useEffectApp(() => {
    const ids = NAV.map((n) => n.id);
    const onScroll = () => {
      let cur = ids[0];
      for (const id of ids) {
        const el = document.getElementById(id);
        if (el && el.getBoundingClientRect().top <= 120) cur = id;
      }
      setActive(cur);
    };
    window.addEventListener("scroll", onScroll);
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useEffectApp(() => {
    document.body.style.overflow = (modal || menu) ? "hidden" : "";
  }, [modal, menu]);

  const go = (id) => {
    setMenu(false);
    const el = document.getElementById(id);
    if (el) {
      window.scrollTo({
        top: el.getBoundingClientRect().top + window.scrollY - 70,
        behavior: "smooth",
      });
    }
  };

  return h("div", { className: "bb-page" },
    h("div", { className: "bb-grid-overlay" }),
    h("div", { className: "bb-scanlines" }),
    h("div", { className: "bb-shell" },
      h(Nav, { active, onNav: go, onMenu: () => setMenu(true) }),
      h(Hero, { onNav: go }),
      h(StatBand, null),
      h(Proyecto, null),
      h(Especies, { onOpen: setModal }),
      h(Pilares, null),
      h(MitoRealidad, null),
      h(Conservacion, null),
      h(Metodologia, null),
      h(Contacto, null),
      h(Footer, { onNav: go })
    ),
    modal && h(SpeciesModal, { sp: modal, onClose: () => setModal(null) }),
    menu && h(MobileMenu, { onNav: go, onClose: () => setMenu(false) })
  );
}

function MobileMenu({ onNav, onClose }) {
  return h("div", { className: "bb-modal-scrim", onClick: onClose, style: { alignItems: "flex-start" } },
    h("div", {
      onClick: (e) => e.stopPropagation(),
      style: {
        width: "min(420px, 96vw)",
        marginTop: "12vh",
        background: "var(--bg-1)",
        border: "1px solid var(--line-cyan)",
        borderRadius: "var(--r-lg)",
        padding: "var(--sp-6)",
      },
    },
      h("div", {
        style: {
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          marginBottom: "var(--sp-5)",
        },
      },
        h("img", { src: "assets/logotipo-biobits.png", alt: "BioBits", style: { height: "22px" } }),
        h("button", { onClick: onClose, style: { color: "var(--fg-1)" } }, h(Icons.x, { size: 22 }))
      ),
      NAV.map((n) => h("a", {
        key: n.id,
        href: "#" + n.id,
        onClick: (e) => {
          e.preventDefault();
          onNav(n.id);
        },
        style: {
          display: "block",
          fontFamily: "var(--font-display)",
          fontSize: "24px",
          fontWeight: 700,
          textTransform: "uppercase",
          color: "var(--fg-0)",
          padding: "10px 0",
          letterSpacing: "0",
        },
      }, n.label))
    )
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(h(App));