"use client";

import { useEffect } from "react";
import Hero from "@/components/Hero";
import TrustBar from "@/components/TrustBar";
import Products from "@/components/Products";
import Services from "@/components/Services";
import Territory from "@/components/Territory";
import WhoWeServe from "@/components/WhoWeServe";
import StainPromo from "@/components/StainPromo";
import CTA from "@/components/CTA";
import Newsletter from "@/components/Newsletter";

export default function Home() {
  useEffect(() => {
    const reveal = () => {
      const reveals = document.querySelectorAll('.reveal');
      for (let i = 0; i < reveals.length; i++) {
        const windowheight = window.innerHeight;
        const revealtop = reveals[i].getBoundingClientRect().top;
        const revealpoint = 150;
        if (revealtop < windowheight - revealpoint) {
          reveals[i].classList.add('visible');
        }
      }
    };

    window.addEventListener('scroll', reveal);
    reveal(); // Initial call
    return () => window.removeEventListener('scroll', reveal);
  }, []);

  return (
    <>
      <Hero />
      <TrustBar />
      <div id="products"><Products /></div>
      <Services />
      <Territory />
      <WhoWeServe />
      <StainPromo />
      <CTA />
      <Newsletter />
    </>
  );
}