"use client";

import React, { useEffect } from 'react';
import Link from 'next/link';
import ChainLinkHero from '@/components/ChainLinkFence/ChainLinkHero';
import ChainLinkOverview from '@/components/ChainLinkFence/ChainLinkOverview';
import ChainLinkMaterials from '@/components/ChainLinkFence/ChainLinkMaterials';
import ChainLinkFinishes from '@/components/ChainLinkFence/ChainLinkFinishes';
import ChainLinkCompare from '@/components/ChainLinkFence/ChainLinkCompare';
import ChainLinkSeoContent from '@/components/ChainLinkFence/ChainLinkSeoContent';
import ChainLinkTerritory from '@/components/ChainLinkFence/ChainLinkTerritory';
import ChainLinkQuote from '@/components/ChainLinkFence/ChainLinkQuote';

export default function ChainLinkFencePage() {
  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="chain-link-page">
      {/* BREADCRUMB */}
      <section className="inner-banner">
        <h1 className="inner-banner-title">Chain Link <span>Fence.</span></h1>
        <div className="inner-banner-breadcrumbs">
          <Link href="/">Home</Link>
          <span>/</span>
          <Link href="/products">Products</Link>
          <span>/</span>
          Chain Link
        </div>
      </section>
      <ChainLinkOverview />
      <ChainLinkMaterials />
      <ChainLinkFinishes />
      <ChainLinkCompare />
      <ChainLinkSeoContent />
      <ChainLinkTerritory />
      <ChainLinkQuote />
    </div>
  );
}