/* ═══════════════════════════════════════════════════════════════════
   Poligus — root app: scroll progress, cursor glow, all sections
   ═══════════════════════════════════════════════════════════════════ */
const { useState, useEffect, useRef } = React;

function PoligusApp() {
  const [scrolled, setScrolled] = useState(false);
  const [progress, setProgress] = useState(0);
  const [openFaq, setOpenFaq] = useState(null);
  const cursorRef = useRef(null);

  useEffect(() => {
    const onScroll = () => {
      const sc = window.scrollY;
      setScrolled(sc > 70);
      const max = document.documentElement.scrollHeight - window.innerHeight;
      setProgress(max > 0 ? Math.min(100, (sc / max) * 100) : 0);
    };
    window.addEventListener("scroll", onScroll, { passive: true });

    // cursor glow (mouse)
    let raf = null;
    const onMove = (e) => {
      if (!cursorRef.current) return;
      if (raf) cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        cursorRef.current.style.transform = `translate(${e.clientX}px, ${e.clientY}px) translate(-50%, -50%)`;
      });
    };
    window.addEventListener("mousemove", onMove);

    // cursor glow follows finger on touch
    const onTouchGlow = (e) => {
      if (!cursorRef.current || !e.touches || !e.touches[0]) return;
      const t = e.touches[0];
      if (raf) cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        if (!cursorRef.current) return;
        cursorRef.current.style.opacity = "1";
        cursorRef.current.style.transform = `translate(${t.clientX}px, ${t.clientY}px) translate(-50%, -50%)`;
      });
    };
    const onTouchGlowEnd = () => { if (cursorRef.current) cursorRef.current.style.opacity = "0"; };
    window.addEventListener("touchstart", onTouchGlow, { passive: true });
    window.addEventListener("touchmove", onTouchGlow, { passive: true });
    window.addEventListener("touchend", onTouchGlowEnd, { passive: true });
    window.addEventListener("touchcancel", onTouchGlowEnd, { passive: true });

    // reveals
    const obs = new IntersectionObserver(entries => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add("visible"); });
    }, { threshold: 0.12, rootMargin: "0px 0px -60px 0px" });
    document.querySelectorAll(".reveal, .reveal-left, .reveal-right, .reveal-scale, .reveal-blur").forEach(el => obs.observe(el));

    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("mousemove", onMove);
      window.removeEventListener("touchstart", onTouchGlow);
      window.removeEventListener("touchmove", onTouchGlow);
      window.removeEventListener("touchend", onTouchGlowEnd);
      window.removeEventListener("touchcancel", onTouchGlowEnd);
      obs.disconnect();
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);

  return (
    <div style={{ minHeight: "100vh" }}>
      <div className="scroll-progress" style={{ "--progress": `${progress}%` }}></div>
      <div ref={cursorRef} className="cursor-glow"></div>

      <Nav scrolled={scrolled} />
      <Hero />
      <CredBar />
      <ChatDemo />
      <PainPoints />
      <Imagine />
      <Features />
      <HowItWorks />
      <Segments />
      <Results />
      <Plans />
      <FAQ openFaq={openFaq} setOpenFaq={setOpenFaq} />
      <CTAFinal />
      <Footer />
      <FloatingWhatsApp />
    </div>
  );
}

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