"use client";

import { useEffect } from 'react';
import Link from 'next/link';
import './services.css';

import StainingHero from '@/components/Staining/StainingHero';
import ModelNav from '@/components/Staining/ModelNav';
import StainingIntro from '@/components/Staining/StainingIntro';
import StainingServiceSection from '@/components/Staining/StainingServiceSection';
import StainingProcess from '@/components/Staining/StainingProcess';
import WoodConditionGuide from '@/components/Staining/WoodConditionGuide';
import StainingFAQ from '@/components/Staining/StainingFAQ';
import StainingTerritory from '@/components/Staining/StainingTerritory';
import StainingQuote from '@/components/Staining/StainingQuote';

export default function ServicesPage() {
  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="services-page">
      <section className="inner-banner">
        <h1 className="inner-banner-title">Our <span>Services.</span></h1>
        <div className="inner-banner-breadcrumbs">
          <Link href="/">Home</Link>
          <span>/</span>
          Services
        </div>
      </section>
      <ModelNav />
      <StainingIntro />

      <StainingServiceSection
        id="fence-staining"
        serviceNum="01"
        title="Fence<br>Staining"
        tagline="Cedar, pressure treated & wood fence — new & existing"
        description="A properly stained wood fence resists moisture penetration, UV fading, mould growth, and the surface cracking that makes wood look aged and rough in just a few seasons. We stain new fences before the grain seals up and grey sets in — and we restore older fences back to a rich, protected finish before applying fresh stain."
        bgColor="bg-white"
        image="/assets/services/service-1/top.webp"
        imageSmall1="/assets/services/service-1/left.webp"
        imageSmall2="/assets/services/service-1/right.webp"
        photoLabel="Fence staining — before & after"
        photoSub1="Cedar fence — new stain"
        photoSub2="Stain detail close-up"
        specsTitle1="What's included"
        specs1={[
          { key: "Pre-job prep inspection", val: "Always included", isOrange: true },
          { key: "Clean & Bright wash", val: "Included on all restoration work", isOrange: true },
          { key: "Masking of surrounding surfaces", val: "Gates, posts, plants, structures" },
          { key: "Expert Stain & Seal application", val: "1–2 coats as required" },
          { key: "Post-job walkthrough", val: "Always included" }
        ]}
        specsTitle2="Wood types we stain"
        specs2={[
          { key: "Cedar fence", val: "Most common — excellent absorption" },
          { key: "Pressure treated", val: "After adequate drying time" },
          { key: "Pine & spruce", val: "Privacy and picket fences" },
          { key: "Aged & weathered wood", val: "Restoration prep required" }
        ]}
      />

      <StainingServiceSection
        id="deck-staining"
        serviceNum="02"
        title="Deck<br>Staining"
        tagline="Boards, railings, stairs & fascia — new & restoration"
        description="Your deck takes more sun, foot traffic, and weather exposure than almost any other outdoor wood surface. Without the right stain applied at the right time, deck boards grey out, check, and splinter faster than they should. We stain deck boards, railings, stairs, and fascia as a complete package — not just the flat boards — so the entire structure is uniformly protected."
        bgColor="bg-gray"
        image="/assets/services/service-2/top.webp"
        reverse={true}
        imageSmall1="/assets/services/service-2/left.webp"
        imageSmall2="/assets/services/service-2/right.webp"
        photoLabel="Deck staining — before & after"
        photoSub1="Deck boards — new finish"
        photoSub2="Railing & stairs detail"
        specsTitle1="Deck staining scope"
        specs1={[
          { key: "Deck boards", val: "Primary surface — full coverage", isOrange: true },
          { key: "Deck railings", val: "Posts, rails, balusters" },
          { key: "Stairs & stringers", val: "Treads and risers" },
          { key: "Fascia boards", val: "Perimeter framing" },
          { key: "Ledger & exposed framing", val: "On request" }
        ]}
        specsTitle2="Product used"
        specs2={[
          { key: "Prep product", val: "Expert Stain & Seal Clean & Bright", isOrange: true },
          { key: "Stain product", val: "Expert Stain & Seal — oil-based", isOrange: true },
          { key: "UV protection", val: "Included in stain" },
          { key: "Moisture sealing", val: "Included in stain" }
        ]}
      />

      <StainingServiceSection
        id="structures"
        serviceNum="03"
        title="Pergolas &<br>Structures"
        tagline="Pergolas, gazebos, log cabins & cedar siding"
        description="Pergolas and outdoor structures are often the last thing on a homeowner's maintenance list — and the first thing that shows its age. Sun exposure degrades unprotected wood fast, especially on horizontal surfaces like pergola rafters that collect water and hold UV damage year-round. We stain and seal all outdoor wood structures to restore appearance and stop the deterioration cycle."
        bgColor="bg-navy"
        image="/assets/services/service-3/top.webp"
        isDark={true}
        imageSmall1="/assets/services/service-3/left.webp"
        imageSmall2="/assets/services/service-3/right.webp"
        photoLabel="Pergola & structure staining"
        photoSub1="Log cabin exterior"
        photoSub2="Cedar siding detail"
        specsTitle1="Structures we stain"
        specs1={[
          { key: "Pergolas", val: "Rafters, posts, beams, cross members", isOrange: true },
          { key: "Gazebos", val: "All exposed wood surfaces" },
          { key: "Log cabins", val: "Exterior log and chink surfaces" },
          { key: "Cedar siding", val: "Horizontal and vertical board" },
          { key: "Garden structures", val: "Sheds, trellises, arbors" }
        ]}
        extraInfo={{
          title: "Log cabins — specialist service",
          desc: "Log and timber homes require particular care — checking (cracking), end grain exposure, and chinking gaps all need to be addressed before staining. We assess log home surfaces before quoting to ensure the stain application will hold and perform as it should in the Ontario climate."
        }}
      />

      <StainingServiceSection
        id="pre-staining"
        serviceNum="04 - Best value"
        title="Pre-Staining"
        tagline="Stain before installation — every side, every board"
        description="The smartest way to protect a new fence is to stain the boards before a single one goes into the ground. Pre-staining lets us coat all four sides of every picket and rail — including the back face, bottom end grain, and edges that are impossible to reach once the fence is built. End grain is where moisture enters first. Pre-staining seals it before it ever gets a chance."
        bgColor="bg-cream"
        reverse={true}
        image="/assets/services/service-4/top.webp"
        imageSmall1="/assets/services/service-4/left.webp"
        imageSmall2="/assets/services/service-4/right.webp"
        photoLabel="Pre-staining fence boards"
        photoSub1="Board edge coating"
        photoSub2="Pre-stained & ready to install"
        specsTitle1="Why pre-stain?"
        specs1={[
          { key: "All 4 sides coated", val: "Including back & end grain", isOrange: true },
          { key: "End grain sealed", val: "Primary moisture entry point", isOrange: true },
          { key: "Protection from day one", val: "Before weathering begins" },
          { key: "Longer service life", val: "Fewer recoat intervals" },
          { key: "Cleaner finish result", val: "No masking, no overspray risk" }
        ]}
        specsTitle2="How it works"
        specs2={[
          { key: "Step 1", val: "Boards delivered to us pre-install" },
          { key: "Step 2", val: "All sides stained and dried" },
          { key: "Step 3", val: "Boards returned for installation" },
          { key: "Touch-up", val: "Cut ends touched up post-install" }
        ]}
      />

      <StainingServiceSection
        id="restoration"
        serviceNum="05"
        title="Wood<br>Restoration"
        tagline="Weathered, grey & neglected wood brought back to life"
        description="Grey wood isn't dead wood — it's wood that hasn't been maintained. In most cases, a proper clean and brightening treatment with Expert Stain & Seal Clean & Bright removes years of weathering, pulls the grey out of the surface, and restores the open grain that allows fresh stain to penetrate and bond. The result can be dramatic — wood that looked ready to replace looking rich and fresh again."
        bgColor="bg-white"
        image="/assets/services/service-5/top.webp"
        imageSmall1="/assets/services/service-5/left.webp"
        imageSmall2="/assets/services/service-5/right.webp"
        photoLabel="Wood restoration — before & after"
        photoSub1="Grey wood before Clean & Bright"
        photoSub2="After restoration staining"
        specsTitle1="Restoration process"
        specs1={[
          { key: "Assessment", val: "Inspect for rot, structural damage", isOrange: true },
          { key: "Clean & Bright wash", val: "Remove grey, mildew, residue", isOrange: true },
          { key: "Dry & assess", val: "Confirm surface is stain-ready" },
          { key: "Expert Stain & Seal", val: "Applied to clean, open grain" },
          { key: "Final walkthrough", val: "Review with the client" }
        ]}
        specsTitle2="Restoration candidates"
        specs2={[
          { key: "Grey weathered fence boards", val: "Most common restoration job" },
          { key: "Mildewed deck boards", val: "Clean & Bright removes growth" },
          { key: "Previously stained surfaces", val: "Old finish removal included" },
          { key: "Neglected structures", val: "Pergolas, gazebos, sheds" }
        ]}
      />

      <StainingProcess />
      <WoodConditionGuide />
      <StainingFAQ />
      <StainingTerritory />
      <StainingQuote />
    </div>
  );
}