"use client";

import { useEffect } from "react";
import Link from "next/link";
import WhoWeServe from "@/components/WhoWeServe";
import CTA from "@/components/CTA";

export default function WhoWeServePage() {
    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 (
        <div className="who-we-serve-page">
            <section className="inner-banner">
                <h1 className="inner-banner-title">Who we <span>serve.</span></h1>
                <div className="inner-banner-breadcrumbs">
                    <Link href="/">Home</Link>
                    <span>/</span>
                    Who We Serve
                </div>
            </section>

            <WhoWeServe />

            <div >
                <CTA />
            </div>
        </div>
    );
}