// App.jsx — Main app with Marquee, scroll progress, parallax

function App() {
  React.useEffect(() => {
    // ── Intersection Observer (reveal) ──────────────
    const observer = new IntersectionObserver(
      (entries) => entries.forEach(e => { if (e.isIntersecting) e.target.classList.add("visible"); }),
      { threshold: 0.1, rootMargin: "0px 0px -40px 0px" }
    );
    const observe = () =>
      document.querySelectorAll(".reveal, .reveal-left, .reveal-right").forEach(el => observer.observe(el));
    observe();
    setTimeout(observe, 400);
    setTimeout(observe, 1000);

    // ── Scroll progress bar ─────────────────────────
    const bar = document.getElementById("scroll-progress");
    const onScroll = () => {
      const pct = window.scrollY / (document.body.scrollHeight - window.innerHeight) * 100;
      if (bar) bar.style.width = pct + "%";
    };
    window.addEventListener("scroll", onScroll, { passive: true });

    // ── 3D card tilt for service cards ─────────────
    const tiltCards = () => {
      document.querySelectorAll(".service-card").forEach(card => {
        card.addEventListener("mousemove", (e) => {
          const r = card.getBoundingClientRect();
          const x = (e.clientX - r.left) / r.width  - 0.5;
          const y = (e.clientY - r.top)  / r.height - 0.5;
          card.style.transform = `perspective(600px) rotateX(${-y * 8}deg) rotateY(${x * 8}deg) translateY(-6px)`;
        });
        card.addEventListener("mouseleave", () => {
          card.style.transform = "";
        });
      });
    };
    setTimeout(tiltCards, 800);

    // ── Animated gold lines ─────────────────────────
    const lineObs = new IntersectionObserver(
      (entries) => entries.forEach(e => {
        if (e.isIntersecting) e.target.classList.add("visible");
      }),
      { threshold: 0.5 }
    );
    setTimeout(() => {
      document.querySelectorAll(".gold-animated-line").forEach(el => lineObs.observe(el));
    }, 500);

    return () => {
      observer.disconnect();
      lineObs.disconnect();
      window.removeEventListener("scroll", onScroll);
    };
  }, []);

  return (
    <>
      <Nav />
      <main>
        <Hero />
        <About />
        <Services />
        <Marquee />
        <Gallery />
        <Differentials />
        <Process />
        <Testimonials />
        <FAQ />
        <CTA />
      </main>
      <Footer />
      <WAFloat />
    </>
  );
}

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