/* ══════════ Fideliio — App racine ══════════ */

// Révèle les éléments .reveal au scroll
function useReveal() {
  React.useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
    document.querySelectorAll(".reveal").forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

// Masque l'écran de chargement une fois l'app montée
// (en laissant l'animation visible au moins ~1,5 s depuis l'ouverture de la page)
function useSplash() {
  React.useEffect(() => {
    const splash = document.getElementById("splash");
    if (!splash) return;
    const wait = Math.max(0, 1500 - performance.now());
    const t = setTimeout(() => {
      splash.classList.add("hide");
      setTimeout(() => splash.remove(), 500);
    }, wait);
    return () => clearTimeout(t);
  }, []);
}

function App() {
  const [rdvOpen, setRdvOpen] = React.useState(false);
  const ctx = React.useMemo(() => ({ open: () => setRdvOpen(true) }), []);
  useReveal();
  useSplash();

  return (
    <RdvContext.Provider value={ctx}>
      <Nav />
      <main>
        <Hero />
        <Trust />
        <How />
        <Features />
        <Split />
        <Pricing />
        <Testimonial />
        <Faq />
        <FinalCta />
      </main>
      <Footer />
      {rdvOpen && <RdvModal onClose={() => setRdvOpen(false)} />}
    </RdvContext.Provider>
  );
}

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