/* ═══════════════════════════════════════════════════════════════════
   MAIN APP COMPONENT
   Orchestrates all components and manages global state
═══════════════════════════════════════════════════════════════════ */

function App() {
  const [modalOpen, setModalOpen] = useState(false);
  const [active, setActive] = useState(1);
  /* Começa oculta — exibe após 300 ms para o hero ser medido como LCP */
  const [showWelcome, setShowWelcome] = useState(false);

  useEffect(() => {
    const tid = setTimeout(() => setShowWelcome(true), 300);
    return () => clearTimeout(tid);
  }, []);
  
  useReveal();
  useStackDepth();

  /* Track active panel during scroll */
  useEffect(() => {
    const panels = Array.from(document.querySelectorAll(".stack-panel"));
    const onScroll = () => {
      const vh = window.innerHeight;
      const trigger = vh * 0.4;
      let current = 1;
      
      panels.forEach((p) => {
        const r = p.getBoundingClientRect();
        if (r.top <= trigger) current = parseInt(p.dataset.panel || "1", 10);
      });
      
      setActive(current);
    };
    
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const openModal = useCallback(() => setModalOpen(true), []);
  const closeModal = useCallback(() => setModalOpen(false), []);
  const closeWelcome = useCallback(() => setShowWelcome(false), []);

  return (
    <>
      <ScrollProgress />
      <Nav onCTA={openModal} />
      <SideRail active={active} />

      <main id="conteudo-principal">
        <div className="stack">
          <PanelHero onCTA={openModal} />
          <PanelDesafio />
          <PanelMetodologia />
          <PanelProva />
          <PanelFiltro />
          <PanelFechamento onCTA={openModal} />
        </div>

        <Footer />
      </main>

      <ApplyModal open={modalOpen} onClose={closeModal} />
      {showWelcome && <ProjectWelcome onClose={closeWelcome} />}
    </>
  );
}

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