/* global React, ReactDOM */
const { useEffect: useEffectApp, useState: useStateApp } = React;

function App() {
  const [diagOpen, setDiagOpen] = useStateApp(false);

  // Expose global opener so existing anchor CTAs can trigger the modal
  useEffectApp(() => {
    window.openDiagnostic = () => setDiagOpen(true);
    // Intercept clicks on any anchor pointing to #diagnostico or #contato
    const onClick = (e) => {
      const a = e.target.closest && e.target.closest("a");
      if (!a) return;
      const href = a.getAttribute("href");
      if (href === "#diagnostico" || href === "#contato") {
        e.preventDefault();
        setDiagOpen(true);
      }
    };
    document.addEventListener("click", onClick);
    return () => document.removeEventListener("click", onClick);
  }, []);

  // Reveal-on-scroll
  useEffectApp(() => {
    const els = document.querySelectorAll(".reveal");
    if (!("IntersectionObserver" in window)) {
      els.forEach((el) => el.classList.add("in"));
      return;
    }
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("in");
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12 }
    );
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <React.Fragment>
      <Nav />
      <main>
        <Hero />
        <ProofStrip />
        <Diagnostic />
        <Truth />
        <Frankenstein />
        <MethodOPV />
        <Journey />
        <ForWhom />
        <Sede />
        <Diagnostico />
        <FAQ />
        <FinalCTA />
      </main>
      <Footer />
      <WhatsAppFloat />
      <DiagnosticForm open={diagOpen} onClose={() => setDiagOpen(false)} />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);