/* ============================================================================
   KN CLEANING — Application principale (assemblage des sections)
   ============================================================================ */

function App() {
  // Apparition au défilement + initialisation des icônes
  useEffect(() => {
    window.refreshIcons();
    // Révèle un élément de façon PERSISTANTE : on pose aussi des styles inline,
    // car un re-rendu React réécrit la className et effacerait la classe "in"
    // (ce qui re-masquait des sections comme la FAQ après un clic → écran blanc).
    const reveal = (el) => {
      el.classList.add("in");
      el.style.opacity = "1";
      el.style.transform = "none";
    };
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) { reveal(e.target); io.unobserve(e.target); }
        });
      },
      { threshold: 0.12, rootMargin: "0px 0px -8% 0px" }
    );
    document.querySelectorAll(".reveal").forEach((el) => io.observe(el));
    // Réinitialiser les icônes après le rendu complet
    const t = setTimeout(window.refreshIcons, 60);
    return () => { io.disconnect(); clearTimeout(t); };
  }, []);

  return (
    <React.Fragment>
      <Header />
      <main>
        <Hero />
        <TrustStrip />
        <Services />
        <Options />
        <Polish />
        <Packs />
        <Business />
        <Why />
        <BeforeAfter />
        <Videos />
        <About />
        <Reviews />
        <Booking />
        <FAQ />
      </main>
      <Footer />
      <WhatsAppFloat />
      <Toast />
    </React.Fragment>
  );
}

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