"use client";

import { useState, useEffect, useRef } from "react";
import Link from "next/link";
import axios from "axios";
import "./wood-staining-services.css";

export default function WoodStainingServicesClient() {
  // FAQ state
  const [openFaq, setOpenFaq] = useState<number | null>(null);

  // Form state
  const [formData, setFormData] = useState({
    name: "",
    phone: "",
    email: "",
    service: "",
    location: "",
    size: "",
  });
  const [formStatus, setFormStatus] = useState<"idle" | "submitting" | "success" | "error">("idle");

  // Active section for jump navigation
  const [activeSection, setActiveSection] = useState<string>("fence-staining");

  // Form submission handler
  const handleFormSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setFormStatus("submitting");

    const emailData = {
      name: formData.name,
      email: formData.email,
      phone: formData.phone,
      service: formData.service || "Wood Staining Services",
      message: `
        <b>Service Needed:</b> ${formData.service || "Not Specified"}<br/>
        <b>Location:</b> ${formData.location || "Not Specified"}<br/>
        <b>Approximate Size:</b> ${formData.size || "Not Specified"}
      `,
      to: "info@vgfenceproducts.com",
      senderName: "VG Fence Staining Page",
    };

    try {
      await axios.post("https://mailserver.metatronnest.com/send", emailData, {
        headers: { "Content-Type": "application/json" },
      });
      setFormStatus("success");
      setFormData({
        name: "",
        phone: "",
        email: "",
        service: "",
        location: "",
        size: "",
      });
    } catch (err) {
      console.error("❌ Staining form submission error:", err);
      setFormStatus("error");
    }
  };

  // Input change handler
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  // Scrollspy and reveal animations
  useEffect(() => {
    // Scrollspy setup
    const sections = ["fence-staining", "deck-staining", "structures", "pre-staining", "restoration", "your-wood"];
    
    const sysObs = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            setActiveSection(entry.target.id);
          }
        });
      },
      { threshold: 0.3 }
    );

    sections.forEach((id) => {
      const el = document.getElementById(id);
      if (el) sysObs.observe(el);
    });

    // Reveal animations setup
    const revealObs = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("visible");
          }
        });
      },
      { threshold: 0.08 }
    );

    const revealElements = document.querySelectorAll(".reveal");
    revealElements.forEach((el) => revealObs.observe(el));

    return () => {
      sections.forEach((id) => {
        const el = document.getElementById(id);
        if (el) sysObs.unobserve(el);
      });
      revealElements.forEach((el) => revealObs.unobserve(el));
    };
  }, []);

  const toggleFaq = (index: number) => {
    setOpenFaq(openFaq === index ? null : index);
  };

  const scrollToSection = (id: string) => {
    const el = document.getElementById(id);
    if (el) {
      el.scrollIntoView({ behavior: "smooth" });
    }
  };

  return (
    <div className="wood-staining-services-page">
      {/* <nav className="breadcrumb" aria-label="Breadcrumb">
        <Link href="/">Home</Link>
        <span>›</span>
        <Link href="/services">Services</Link>
        <span>›</span>
        <span>Wood Staining Services</span>
      </nav> */}

      {/* HERO */}
      <section className="hero">
        <div className="hero-grid-bg"></div>
        <div className="hero-wood-deco"></div>
        <div className="hero-accent"></div>
        <div className="hero-inner">
          <div className="hero-eyebrow">Wood Staining Services · KWC Ontario</div>
          <h1>
            Stained right.<br />
            <em>Lasts longer.</em>
          </h1>
          <p className="hero-desc">
            Professional wood staining services for <strong>fences, decks, pergolas, log cabins, and all outdoor wood structures</strong> across Waterloo Region and Ontario. We use Expert Stain &amp; Seal products — the professional-grade oil-based stain built for the Canadian outdoor environment.
          </p>
          <div className="hero-badges">
            <span className="badge badge-fill">Professional Staining</span>
            <span className="badge">Fence &amp; Deck</span>
            <span className="badge">Expert Stain &amp; Seal</span>
            <span className="badge">Pre-Staining Available</span>
            <span className="badge">KWC &amp; Ontario</span>
          </div>
          <div className="hero-stats">
            <div>
              <div className="stat-val">5</div>
              <div className="stat-label">Service types</div>
            </div>
            <div>
              <div className="stat-val">Oil</div>
              <div className="stat-label">Based stain — deep penetrating</div>
            </div>
            <div>
              <div className="stat-val">250km</div>
              <div className="stat-label">Ontario service radius</div>
            </div>
          </div>
        </div>
      </section>

      {/* JUMP NAV */}
      <div className="model-nav">
        <a 
          className={`model-nav-item ${activeSection === "fence-staining" ? "active" : ""}`} 
          href="#fence-staining"
          onClick={(e) => { e.preventDefault(); scrollToSection("fence-staining"); }}
        >
          Fence Staining
        </a>
        <a 
          className={`model-nav-item ${activeSection === "deck-staining" ? "active" : ""}`} 
          href="#deck-staining"
          onClick={(e) => { e.preventDefault(); scrollToSection("deck-staining"); }}
        >
          Deck Staining
        </a>
        <a 
          className={`model-nav-item ${activeSection === "structures" ? "active" : ""}`} 
          href="#structures"
          onClick={(e) => { e.preventDefault(); scrollToSection("structures"); }}
        >
          Pergolas &amp; Structures
        </a>
        <a 
          className={`model-nav-item ${activeSection === "pre-staining" ? "active" : ""}`} 
          href="#pre-staining"
          onClick={(e) => { e.preventDefault(); scrollToSection("pre-staining"); }}
        >
          Pre-Staining
        </a>
        <a 
          className={`model-nav-item ${activeSection === "restoration" ? "active" : ""}`} 
          href="#restoration"
          onClick={(e) => { e.preventDefault(); scrollToSection("restoration"); }}
        >
          Restoration
        </a>
        <a 
          className={`model-nav-item ${activeSection === "your-wood" ? "active" : ""}`} 
          href="#your-wood"
          onClick={(e) => { e.preventDefault(); scrollToSection("your-wood"); }}
        >
          Your wood's condition
        </a>
        <a 
          className={`model-nav-item ${activeSection === "quote-section" ? "active" : ""}`} 
          href="#quote-section"
          onClick={(e) => { e.preventDefault(); scrollToSection("quote-section"); }}
        >
          Get a quote
        </a>
      </div>

      {/* INTRO */}
      <section className="intro">
        <div className="reveal">
          <div className="section-eyebrow">About this service</div>
          <h2 className="sh">Wood that's stained right<br /><span>stays beautiful longer.</span></h2>
        </div>
        <div className="intro-grid">
          <div className="intro-text reveal">
            <p><strong>VG Fence Products offers professional wood staining services</strong> for homeowners, fence contractors, builders, and property managers across Kitchener–Waterloo–Cambridge and the surrounding Ontario region. We apply Expert Stain &amp; Seal products — the same professional-grade stain we sell to contractors — with the preparation, technique, and attention to detail that produces results you can actually see the difference in.</p>
            <p>The stain matters. But so does <strong>everything that happens before the stain goes on</strong> — cleaning, brightening, drying, and prepping the wood surface properly. We don't skip steps. A proper prep job is what separates a stain that lasts two seasons from one that looks sharp for five or more years.</p>
            <p>Whether your project is a brand new cedar fence that needs its first coat before the grain closes up, a greying deck that needs restoration, or a pergola that's never been sealed — we can assess, prep, and stain it properly.</p>
            <ul className="check-list">
              <li>Wood fence staining — cedar, pressure treated, pine, and spruce</li>
              <li>Deck staining — deck boards, railings, stairs, and fascia</li>
              <li>Pergola, gazebo, and outdoor structure staining</li>
              <li>Log cabin and cedar siding staining</li>
              <li>Pre-staining of fence boards before installation</li>
              <li>Wood restoration — weathered, grey, and damaged wood</li>
              <li>Expert Stain &amp; Seal Clean &amp; Bright prep on all restoration jobs</li>
              <li>Serving KWC and surrounding Ontario communities</li>
            </ul>
          </div>
          <div className="highlight-cards reveal">
            <div className="hcard">
              <div className="hcard-title">Professional-grade product — Expert Stain &amp; Seal</div>
              <div className="hcard-desc">We apply Expert Stain &amp; Seal — a deep-penetrating, oil-based professional stain that bonds to wood grain rather than sitting on the surface. It carries UV protection and moisture sealing in one application, and it's the product we recommend and supply to contractors across Ontario.</div>
            </div>
            <div className="hcard">
              <div className="hcard-title">Prep comes first — every single time</div>
              <div className="hcard-desc">Every staining job we do starts with a proper clean and prep using Expert Stain &amp; Seal Clean &amp; Bright. This removes grey weathering, mildew, and any residue that would block the new stain from bonding to the wood. No stain goes on unprepped wood — ever.</div>
            </div>
            <div className="hcard">
              <div className="hcard-title">We sell it and we apply it</div>
              <div className="hcard-desc">As both the local supplier of Expert Stain &amp; Seal products and the service team that applies them, we know this product better than anyone in the region. That means better results for your fence, deck, or structure — applied by people who use it every day.</div>
            </div>
          </div>
        </div>
      </section>

      {/* SERVICE 01 — FENCE STAINING */}
      <section className="model-section bg-white" id="fence-staining">
        <div className="model-layout reveal">
          <div>
            <div className="model-accent-strip"></div>
            <div className="model-label">Service 01</div>
            <div className="model-name">Fence<br />Staining</div>
            <div className="model-tagline">Cedar, pressure treated &amp; wood fence — new &amp; existing</div>
            <p className="model-desc">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.</p>

            <div className="specs-block">
              <div className="specs-title">What's included</div>
              <div className="spec-row"><span className="spec-key">Pre-job prep inspection</span><span className="spec-val orange">Always included</span></div>
              <div className="spec-row"><span className="spec-key">Clean &amp; Bright wash</span><span className="spec-val orange">Included on all restoration work</span></div>
              <div className="spec-row"><span className="spec-key">Masking of surrounding surfaces</span><span className="spec-val">Gates, posts, plants, structures</span></div>
              <div className="spec-row"><span className="spec-key">Expert Stain &amp; Seal application</span><span className="spec-val">1–2 coats as required</span></div>
              <div className="spec-row"><span className="spec-key">Post-job walkthrough</span><span className="spec-val">Always included</span></div>
            </div>

            <div className="specs-block">
              <div className="specs-title">Wood types we stain</div>
              <div className="spec-row"><span className="spec-key">Cedar fence</span><span className="spec-val">Most common — excellent absorption</span></div>
              <div className="spec-row"><span className="spec-key">Pressure treated</span><span className="spec-val">After adequate drying time</span></div>
              <div className="spec-row"><span className="spec-key">Pine &amp; spruce</span><span className="spec-val">Privacy and picket fences</span></div>
              <div className="spec-row"><span className="spec-key">Aged &amp; weathered wood</span><span className="spec-val">Restoration prep required</span></div>
            </div>
          </div>
          <div>
            <div className="photo-area" style={{ minHeight: "340px" }}>
              <svg className="photo-icon" width="48" height="48" viewBox="0 0 48 48" fill="none"><rect x="4" y="10" width="40" height="30" rx="4" stroke="#B0ADA6" strokeWidth="2" /><circle cx="17" cy="22" r="5" stroke="#B0ADA6" strokeWidth="2" /><path d="M4 34 L14 24 L22 32 L30 22 L44 34" stroke="#B0ADA6" strokeWidth="2" fill="none" /></svg>
              <div className="photo-label">Fence staining — before &amp; after</div>
              <div className="photo-sub">Upload project photo here</div>
            </div>
            <div className="photo-row">
              <div className="photo-area" style={{ minHeight: "160px" }}>
                <svg className="photo-icon" width="32" height="32" viewBox="0 0 48 48" fill="none"><rect x="4" y="10" width="40" height="30" rx="4" stroke="#B0ADA6" strokeWidth="2" /><circle cx="17" cy="22" r="5" stroke="#B0ADA6" strokeWidth="2" /><path d="M4 34 L14 24 L22 32 L30 22 L44 34" stroke="#B0ADA6" strokeWidth="2" fill="none" /></svg>
                <div className="photo-sub" style={{ fontSize: "11px" }}>Cedar fence — new stain</div>
              </div>
              <div className="photo-area" style={{ minHeight: "160px" }}>
                <svg className="photo-icon" width="32" height="32" viewBox="0 0 48 48" fill="none"><rect x="4" y="10" width="40" height="30" rx="4" stroke="#B0ADA6" strokeWidth="2" /><circle cx="17" cy="22" r="5" stroke="#B0ADA6" strokeWidth="2" /><path d="M4 34 L14 24 L22 32 L30 22 L44 34" stroke="#B0ADA6" strokeWidth="2" fill="none" /></svg>
                <div className="photo-sub" style={{ fontSize: "11px" }}>Stain detail close-up</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* SERVICE 02 — DECK STAINING */}
      <section className="model-section bg-gray" id="deck-staining">
        <div className="model-layout reverse reveal">
          <div>
            <div className="photo-area" style={{ minHeight: "340px" }}>
              <svg className="photo-icon" width="48" height="48" viewBox="0 0 48 48" fill="none"><rect x="4" y="10" width="40" height="30" rx="4" stroke="#B0ADA6" strokeWidth="2" /><circle cx="17" cy="22" r="5" stroke="#B0ADA6" strokeWidth="2" /><path d="M4 34 L14 24 L22 32 L30 22 L44 34" stroke="#B0ADA6" strokeWidth="2" fill="none" /></svg>
              <div className="photo-label">Deck staining — before &amp; after</div>
              <div className="photo-sub">Upload project photo here</div>
            </div>
            <div className="photo-row">
              <div className="photo-area" style={{ minHeight: "160px" }}>
                <svg className="photo-icon" width="32" height="32" viewBox="0 0 48 48" fill="none"><rect x="4" y="10" width="40" height="30" rx="4" stroke="#B0ADA6" strokeWidth="2" /><circle cx="17" cy="22" r="5" stroke="#B0ADA6" strokeWidth="2" /><path d="M4 34 L14 24 L22 32 L30 22 L44 34" stroke="#B0ADA6" strokeWidth="2" fill="none" /></svg>
                <div className="photo-sub" style={{ fontSize: "11px" }}>Deck boards — new finish</div>
              </div>
              <div className="photo-area" style={{ minHeight: "160px" }}>
                <svg className="photo-icon" width="32" height="32" viewBox="0 0 48 48" fill="none"><rect x="4" y="10" width="40" height="30" rx="4" stroke="#B0ADA6" strokeWidth="2" /><circle cx="17" cy="22" r="5" stroke="#B0ADA6" strokeWidth="2" /><path d="M4 34 L14 24 L22 32 L30 22 L44 34" stroke="#B0ADA6" strokeWidth="2" fill="none" /></svg>
                <div className="photo-sub" style={{ fontSize: "11px" }}>Railing &amp; stairs detail</div>
              </div>
            </div>
          </div>
          <div>
            <div className="model-accent-strip"></div>
            <div className="model-label">Service 02</div>
            <div className="model-name">Deck<br />Staining</div>
            <div className="model-tagline">Boards, railings, stairs &amp; fascia — new &amp; restoration</div>
            <p className="model-desc">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.</p>

            <div className="specs-block">
              <div className="specs-title">Deck staining scope</div>
              <div className="spec-row"><span className="spec-key">Deck boards</span><span className="spec-val orange">Primary surface — full coverage</span></div>
              <div className="spec-row"><span className="spec-key">Deck railings</span><span className="spec-val">Posts, rails, balusters</span></div>
              <div className="spec-row"><span className="spec-key">Stairs &amp; stringers</span><span className="spec-val">Treads and risers</span></div>
              <div className="spec-row"><span className="spec-key">Fascia boards</span><span className="spec-val">Perimeter framing</span></div>
              <div className="spec-row"><span className="spec-key">Ledger &amp; exposed framing</span><span className="spec-val">On request</span></div>
            </div>

            <div className="specs-block">
              <div className="specs-title">Product used</div>
              <div className="spec-row"><span className="spec-key">Prep product</span><span className="spec-val orange">Expert Stain &amp; Seal Clean &amp; Bright</span></div>
              <div className="spec-row"><span className="spec-key">Stain product</span><span className="spec-val orange">Expert Stain &amp; Seal — oil-based</span></div>
              <div className="spec-row"><span className="spec-key">UV protection</span><span className="spec-val">Included in stain</span></div>
              <div className="spec-row"><span className="spec-key">Moisture sealing</span><span className="spec-val">Included in stain</span></div>
            </div>
          </div>
        </div>
      </section>

      {/* SERVICE 03 — PERGOLAS & STRUCTURES */}
      <section className="model-section bg-navy" id="structures">
        <div className="model-layout reveal">
          <div>
            <div className="model-accent-strip"></div>
            <div className="model-label dim">Service 03</div>
            <div className="model-name white">Pergolas &amp;<br />Structures</div>
            <div className="model-tagline">Pergolas, gazebos, log cabins &amp; cedar siding</div>
            <p className="model-desc white">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.</p>

            <div className="specs-block">
              <div className="specs-title white">Structures we stain</div>
              <div className="spec-row white-row"><span className="spec-key white">Pergolas</span><span className="spec-val orange">Rafters, posts, beams, cross members</span></div>
              <div className="spec-row white-row"><span className="spec-key white">Gazebos</span><span className="spec-val white">All exposed wood surfaces</span></div>
              <div className="spec-row white-row"><span className="spec-key white">Log cabins</span><span className="spec-val white">Exterior log and chink surfaces</span></div>
              <div className="spec-row white-row"><span className="spec-key white">Cedar siding</span><span className="spec-val white">Horizontal and vertical board</span></div>
              <div className="spec-row white-row"><span className="spec-key white">Garden structures</span><span className="spec-val white">Sheds, trellises, arbors</span></div>
            </div>

            <div style={{ marginTop: "20px", background: "rgba(232,87,42,.12)", border: "1px solid rgba(232,87,42,.25)", borderRadius: "10px", padding: "16px 20px" }}>
              <div style={{ fontFamily: "var(--fd)", fontSize: "12px", fontWeight: 700, letterSpacing: ".08em", textTransform: "uppercase", color: "var(--orange)", marginBottom: "6px" }}>Log cabins — specialist service</div>
              <div style={{ fontSize: "13px", color: "rgba(255,255,255,.7)", lineHeight: 1.7 }}>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.</div>
            </div>
          </div>
          <div>
            <div className="photo-area dark-placeholder" style={{ minHeight: "340px" }}>
              <svg className="photo-icon" width="48" height="48" viewBox="0 0 48 48" fill="none"><rect x="4" y="10" width="40" height="30" rx="4" stroke="rgba(255,255,255,.35)" strokeWidth="2" /><circle cx="17" cy="22" r="5" stroke="rgba(255,255,255,.35)" strokeWidth="2" /><path d="M4 34 L14 24 L22 32 L30 22 L44 34" stroke="rgba(255,255,255,.35)" strokeWidth="2" fill="none" /></svg>
              <div className="photo-label">Pergola &amp; structure staining</div>
              <div className="photo-sub">Upload project photo here</div>
            </div>
            <div className="photo-row">
              <div className="photo-area dark-placeholder" style={{ minHeight: "160px" }}>
                <svg className="photo-icon" width="32" height="32" viewBox="0 0 48 48" fill="none"><rect x="4" y="10" width="40" height="30" rx="4" stroke="rgba(255,255,255,.35)" strokeWidth="2" /><circle cx="17" cy="22" r="5" stroke="rgba(255,255,255,.35)" strokeWidth="2" /><path d="M4 34 L14 24 L22 32 L30 22 L44 34" stroke="rgba(255,255,255,.35)" strokeWidth="2" fill="none" /></svg>
                <div className="photo-sub" style={{ fontSize: "11px" }}>Log cabin exterior</div>
              </div>
              <div className="photo-area dark-placeholder" style={{ minHeight: "160px" }}>
                <svg className="photo-icon" width="32" height="32" viewBox="0 0 48 48" fill="none"><rect x="4" y="10" width="40" height="30" rx="4" stroke="rgba(255,255,255,.35)" strokeWidth="2" /><circle cx="17" cy="22" r="5" stroke="rgba(255,255,255,.35)" strokeWidth="2" /><path d="M4 34 L14 24 L22 32 L30 22 L44 34" stroke="rgba(255,255,255,.35)" strokeWidth="2" fill="none" /></svg>
                <div className="photo-sub" style={{ fontSize: "11px" }}>Cedar siding detail</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* SERVICE 04 — PRE-STAINING */}
      <section className="model-section bg-cream" id="pre-staining">
        <div className="model-layout reverse reveal">
          <div>
            <div className="photo-area" style={{ minHeight: "340px", background: "var(--gray-200)" }}>
              <svg className="photo-icon" width="48" height="48" viewBox="0 0 48 48" fill="none"><rect x="4" y="10" width="40" height="30" rx="4" stroke="#B0ADA6" strokeWidth="2" /><circle cx="17" cy="22" r="5" stroke="#B0ADA6" strokeWidth="2" /><path d="M4 34 L14 24 L22 32 L30 22 L44 34" stroke="#B0ADA6" strokeWidth="2" fill="none" /></svg>
              <div className="photo-label">Pre-staining fence boards</div>
              <div className="photo-sub">Upload project photo here</div>
            </div>
            <div className="photo-row">
              <div className="photo-area" style={{ minHeight: "160px", background: "var(--gray-200)" }}>
                <svg className="photo-icon" width="32" height="32" viewBox="0 0 48 48" fill="none"><rect x="4" y="10" width="40" height="30" rx="4" stroke="#B0ADA6" strokeWidth="2" /><circle cx="17" cy="22" r="5" stroke="#B0ADA6" strokeWidth="2" /><path d="M4 34 L14 24 L22 32 L30 22 L44 34" stroke="#B0ADA6" strokeWidth="2" fill="none" /></svg>
                <div className="photo-sub" style={{ fontSize: "11px" }}>Board edge coating</div>
              </div>
              <div className="photo-area" style={{ minHeight: "160px", background: "var(--gray-200)" }}>
                <svg className="photo-icon" width="32" height="32" viewBox="0 0 48 48" fill="none"><rect x="4" y="10" width="40" height="30" rx="4" stroke="#B0ADA6" strokeWidth="2" /><circle cx="17" cy="22" r="5" stroke="#B0ADA6" strokeWidth="2" /><path d="M4 34 L14 24 L22 32 L30 22 L44 34" stroke="#B0ADA6" strokeWidth="2" fill="none" /></svg>
                <div className="photo-sub" style={{ fontSize: "11px" }}>Pre-stained &amp; ready to install</div>
              </div>
            </div>
          </div>
          <div>
            <div className="model-accent-strip"></div>
            <div className="model-label">Service 04 · Best value</div>
            <div className="model-name">Pre-Staining</div>
            <div className="model-tagline">Stain before installation — every side, every board</div>
            <p className="model-desc">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.</p>

            <div className="specs-block">
              <div className="specs-title">Why pre-stain?</div>
              <div className="spec-row"><span className="spec-key">All 4 sides coated</span><span className="spec-val orange">Including back &amp; end grain</span></div>
              <div className="spec-row"><span className="spec-key">End grain sealed</span><span className="spec-val orange">Primary moisture entry point</span></div>
              <div className="spec-row"><span className="spec-key">Protection from day one</span><span className="spec-val">Before weathering begins</span></div>
              <div className="spec-row"><span className="spec-key">Longer service life</span><span className="spec-val">Fewer recoat intervals</span></div>
              <div className="spec-row"><span className="spec-key">Cleaner finish result</span><span className="spec-val">No masking, no overspray risk</span></div>
            </div>

            <div className="specs-block">
              <div className="specs-title">How it works</div>
              <div className="spec-row"><span className="spec-key">Step 1</span><span className="spec-val">Boards delivered to us pre-install</span></div>
              <div className="spec-row"><span className="spec-key">Step 2</span><span className="spec-val">All sides stained and dried</span></div>
              <div className="spec-row"><span className="spec-key">Step 3</span><span className="spec-val">Boards returned for installation</span></div>
              <div className="spec-row"><span className="spec-key">Touch-up</span><span className="spec-val">Cut ends touched up post-install</span></div>
            </div>
          </div>
        </div>
      </section>

      {/* SERVICE 05 — RESTORATION */}
      <section className="model-section bg-white" id="restoration">
        <div className="model-layout reveal">
          <div>
            <div className="model-accent-strip"></div>
            <div className="model-label">Service 05</div>
            <div className="model-name">Wood<br />Restoration</div>
            <div className="model-tagline">Weathered, grey &amp; neglected wood brought back to life</div>
            <p className="model-desc">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 &amp; Seal Clean &amp; 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.</p>

            <div className="specs-block">
              <div className="specs-title">Restoration process</div>
              <div className="spec-row"><span className="spec-key">Assessment</span><span className="spec-val orange">Inspect for rot, structural damage</span></div>
              <div className="spec-row"><span className="spec-key">Clean &amp; Bright wash</span><span className="spec-val orange">Remove grey, mildew, residue</span></div>
              <div className="spec-row"><span className="spec-key">Dry &amp; assess</span><span className="spec-val">Confirm surface is stain-ready</span></div>
              <div className="spec-row"><span className="spec-key">Expert Stain &amp; Seal</span><span className="spec-val">Applied to clean, open grain</span></div>
              <div className="spec-row"><span className="spec-key">Final walkthrough</span><span className="spec-val">Review with the client</span></div>
            </div>

            <div className="specs-block">
              <div className="specs-title">Restoration candidates</div>
              <div className="spec-row"><span className="spec-key">Grey weathered fence boards</span><span className="spec-val">Most common restoration job</span></div>
              <div className="spec-row"><span className="spec-key">Mildewed deck boards</span><span className="spec-val">Clean &amp; Bright removes growth</span></div>
              <div className="spec-row"><span className="spec-key">Previously stained surfaces</span><span className="spec-val">Old finish removal included</span></div>
              <div className="spec-row"><span className="spec-key">Neglected structures</span><span className="spec-val">Pergolas, gazebos, sheds</span></div>
            </div>
          </div>
          <div>
            <div className="photo-area" style={{ minHeight: "340px" }}>
              <svg className="photo-icon" width="48" height="48" viewBox="0 0 48 48" fill="none"><rect x="4" y="10" width="40" height="30" rx="4" stroke="#B0ADA6" strokeWidth="2" /><circle cx="17" cy="22" r="5" stroke="#B0ADA6" strokeWidth="2" /><path d="M4 34 L14 24 L22 32 L30 22 L44 34" stroke="#B0ADA6" strokeWidth="2" fill="none" /></svg>
              <div className="photo-label">Wood restoration — before &amp; after</div>
              <div className="photo-sub">Upload project photo here</div>
            </div>
            <div className="photo-row">
              <div className="photo-area" style={{ minHeight: "160px" }}>
                <svg className="photo-icon" width="32" height="32" viewBox="0 0 48 48" fill="none"><rect x="4" y="10" width="40" height="30" rx="4" stroke="#B0ADA6" strokeWidth="2" /><circle cx="17" cy="22" r="5" stroke="#B0ADA6" strokeWidth="2" /><path d="M4 34 L14 24 L22 32 L30 22 L44 34" stroke="#B0ADA6" strokeWidth="2" fill="none" /></svg>
                <div className="photo-sub" style={{ fontSize: "11px" }}>Grey wood before Clean &amp; Bright</div>
              </div>
              <div className="photo-area" style={{ minHeight: "160px" }}>
                <svg className="photo-icon" width="32" height="32" viewBox="0 0 48 48" fill="none"><rect x="4" y="10" width="40" height="30" rx="4" stroke="#B0ADA6" strokeWidth="2" /><circle cx="17" cy="22" r="5" stroke="#B0ADA6" strokeWidth="2" /><path d="M4 34 L14 24 L22 32 L30 22 L44 34" stroke="#B0ADA6" strokeWidth="2" fill="none" /></svg>
                <div className="photo-sub" style={{ fontSize: "11px" }}>After restoration staining</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* PROCESS STEPS */}
      <section className="process-section" id="process">
        <div className="reveal">
          <div className="section-eyebrow" style={{ color: "rgba(255,255,255,.5)" }}>How every job runs</div>
          <h2 className="sh sh-white">Our staining process —<br /><span>no shortcuts.</span></h2>
        </div>
        <div className="process-grid reveal">
          <div className="process-step">
            <div className="step-num">01</div>
            <div className="step-title">Quote &amp; assess</div>
            <div className="step-desc">We review your fence, deck, or structure — in person or from photos — and provide a clear quote covering prep, product, labour, and timeline. No hidden steps added later.</div>
          </div>
          <div className="process-step">
            <div className="step-num">02</div>
            <div className="step-title">Clean &amp; prep</div>
            <div className="step-desc">Every surface is cleaned and brightened with Expert Stain &amp; Seal Clean &amp; Bright before any stain is applied. Surrounding plants, surfaces, and structures are masked. The wood dries fully before we continue.</div>
          </div>
          <div className="process-step">
            <div className="step-num">03</div>
            <div className="step-title">Stain application</div>
            <div className="step-desc">Expert Stain &amp; Seal is applied to the clean, open wood grain — one or two coats depending on wood age, condition, and absorption. We work methodically by section to ensure even coverage and no lap marks.</div>
          </div>
          <div className="process-step">
            <div className="step-num">04</div>
            <div className="step-title">Walkthrough &amp; done</div>
            <div className="step-desc">We walk the finished project with you before we leave — checking coverage, any areas of concern, and reviewing care instructions. You only sign off when you're satisfied with the result.</div>
          </div>
        </div>
      </section>

      {/* WOOD CONDITION GUIDE */}
      <section className="condition-section" id="your-wood">
        <div className="reveal">
          <div className="section-eyebrow">What stage is your wood in?</div>
          <h2 className="sh">We work with wood<br /><span>at every stage.</span></h2>
        </div>
        <div className="condition-grid reveal">
          <div className="condition-card">
            <span className="condition-tag tag-new">Brand new</span>
            <div className="condition-title">New or uninstalled wood</div>
            <div className="condition-desc">Fresh wood with open grain and no weathering. Ideal for pre-staining before installation — all four sides coated, end grain sealed, maximum protection from day one.</div>
            <div className="condition-action">→ Pre-staining recommended</div>
          </div>
          <div className="condition-card">
            <span className="condition-tag tag-recent">Recently installed</span>
            <div className="condition-title">Installed within 6 months</div>
            <div className="condition-desc">Newly installed wood is still drying and stabilizing. We check moisture content to confirm it's within the acceptable range before applying stain — timing matters here.</div>
            <div className="condition-action">→ Moisture check + first coat</div>
          </div>
          <div className="condition-card">
            <span className="condition-tag tag-aged">Weathered</span>
            <div className="condition-title">Grey or weathered wood</div>
            <div className="condition-desc">Wood that has greyed and lost its surface. Needs Clean &amp; Bright to strip the weathered layer and re-open the grain before stain can penetrate properly. Often surprises clients with how good it looks.</div>
            <div className="condition-action">→ Clean &amp; Bright prep + stain</div>
          </div>
          <div className="condition-card">
            <span className="condition-tag tag-damaged">Neglected</span>
            <div className="condition-title">Heavily neglected or damaged</div>
            <div className="condition-desc">Old stain, mildew, surface damage, or cracking. We assess whether restoration staining is the right solution or whether board replacement is needed first. We're honest about what will and won't work.</div>
            <div className="condition-action">→ Full restoration assessment</div>
          </div>
        </div>
      </section>

      {/* FAQ + SEO */}
      <section className="faq-section">
        <div className="reveal">
          <div className="section-eyebrow">Helpful information</div>
          <h2 className="sh">Wood staining<br /><span>knowledge base.</span></h2>
        </div>
        <div className="faq-seo-grid">
          <div className="faq reveal">
            {[
              {
                q: "What stain products do you use?",
                a: "We use Expert Stain & Seal products on all staining work — both the Stain & Seal product for application and Clean & Bright for surface preparation. Expert Stain & Seal is a professional-grade, deeply penetrating oil-based stain and sealer that we also supply to contractors across Ontario. Using the same product we sell means we know exactly how it performs on different wood types, in different conditions, and at different ages.",
              },
              {
                q: "How long will the stain last?",
                a: "A properly applied Expert Stain & Seal finish on a well-prepped surface typically lasts 3–5 years on vertical surfaces like fences, and 2–4 years on horizontal surfaces like deck boards that take more direct sun, rain, and foot traffic. Pre-stained boards that have all four sides coated before installation often last longer than post-install staining because the end grain is sealed. We'll give you a realistic estimate for your specific project.",
              },
              {
                q: "Can old, grey weathered wood be stained?",
                a: "In most cases, yes — and the results can be striking. Grey weathering is a surface condition, not a structural one. Treating the wood with Expert Stain & Seal Clean & Bright strips out the grey layer, removes mildew, and re-opens the grain so fresh stain can penetrate properly. Many homeowners are genuinely surprised at how good their fence or deck looks after restoration. We assess each job before quoting to confirm it's a good restoration candidate.",
              },
              {
                q: "How long after installing a new fence should I wait to stain?",
                a: "For pressure treated wood, we recommend waiting 4–8 weeks after installation to allow the preservative treatment to dry and the wood moisture content to drop to a level where stain will absorb properly. For new cedar or pine, staining can happen sooner — sometimes immediately if the wood was pre-dried. We test moisture levels before starting any job to confirm the timing is right. Pre-staining the boards before installation eliminates this waiting period entirely.",
              },
              {
                q: "Do you do pre-staining of fence boards before installation?",
                a: "Yes — and it's the approach we recommend for new fence projects whenever possible. Pre-staining allows us to coat all four sides of every picket and rail, including the back face and end grain, before installation. End grain is the primary point of moisture entry in a wood fence — sealing it before the fence goes up is significantly more effective than trying to reach it afterward. Contact us to arrange pre-staining alongside your fence material order.",
              },
              {
                q: "Do you serve areas outside Kitchener–Waterloo?",
                a: "Our staining services are based in the Kitchener–Waterloo–Cambridge area with coverage extending to Guelph, Cambridge, Elmira, New Hamburg, and surrounding Waterloo Region communities. For projects further afield — Hamilton, Brantford, and the surrounding area — contact us to discuss availability. Our Expert Stain & Seal product supply covers a full 250km delivery radius from KWC for contractors who want to apply it themselves.",
              },
            ].map((item, idx) => (
              <div key={idx} className={`faq-item ${openFaq === idx ? "open" : ""}`}>
                <div className="faq-q" onClick={() => toggleFaq(idx)}>
                  {item.q}
                  <span className="faq-icon">{openFaq === idx ? "×" : "+"}</span>
                </div>
                <div className="faq-a" style={{ maxHeight: openFaq === idx ? "260px" : "0px", paddingBottom: openFaq === idx ? "18px" : "0px" }}>
                  {item.a}
                </div>
              </div>
            ))}
          </div>
          <div className="content-block reveal">
            <h3>Wood staining services — Kitchener, Waterloo &amp; Cambridge</h3>
            <p>VG Fence Products offers <strong>professional wood staining services</strong> for fences, decks, pergolas, and all outdoor wood structures across the Kitchener–Waterloo–Cambridge region. We use Expert Stain &amp; Seal products — the professional-grade oil-based stain we also supply to contractors across Ontario — applied with proper prep, consistent technique, and a clean finished result.</p>
            <h3>Fence staining service — Waterloo Region</h3>
            <p>Cedar and wood fence staining is one of our core services across Waterloo Region. We stain new fences, re-stain existing fences, and restore grey weathered fences using Clean &amp; Bright prep and Expert Stain &amp; Seal application. Contractors who want to offer staining as part of their fence installation can also purchase product directly through us at contractor pricing.</p>
            <h3>Deck staining — KWC &amp; surrounding communities</h3>
            <p><strong>Deck staining services</strong> covering deck boards, railings, stairs, and fascia boards are available across Kitchener, Waterloo, Cambridge, and surrounding communities. We handle new decks, restoration jobs, and re-staining of surfaces that have been maintained previously. Every deck job begins with a Clean &amp; Bright prep wash — no stain goes on an unprepped surface.</p>
            <h3>Pre-staining services — fence contractors &amp; builders</h3>
            <p>Pre-staining of fence boards before installation is available to <strong>fence contractors and builders</strong> ordering through VG Fence Products. Pre-staining is the most protective application method because it coats all four sides of every board — including back face and end grain — before installation. Contact us to add pre-staining to your material order.</p>
          </div>
        </div>
      </section>

      {/* TERRITORY */}
      <section className="territory" id="territory">
        <div className="reveal">
          <div className="section-eyebrow" style={{ color: "rgba(255,255,255,.5)" }}>Where we serve</div>
          <h2 className="sh sh-white">Wood staining services<br /><span>across Ontario.</span></h2>
          <p className="territory-intro">Staining services are based in KWC with coverage across Waterloo Region and surrounding communities. Expert Stain &amp; Seal product supply covers 250km across Ontario.</p>
        </div>
        <div className="region-grid reveal">
          <div className="region-block">
            <div className="region-name">Waterloo Region</div>
            <ul className="region-cities">
              <li className="primary"><a href="https://vgfence.com/fence-staining-kitchener" title="Fence staining Kitchener">Kitchener</a></li>
              <li className="primary"><a href="https://vgfence.com/fence-staining-waterloo" title="Fence staining Waterloo">Waterloo</a></li>
              <li className="primary"><a href="https://vgfence.com/fence-staining-cambridge" title="Fence staining Cambridge">Cambridge</a></li>
              <li><a href="https://vgfence.com/fence-staining-ayr">Ayr</a></li>
              <li><a href="https://vgfence.com/fence-staining-breslau">Breslau</a></li>
              <li><a href="https://vgfence.com/fence-staining-elmira">Elmira</a></li>
              <li><a href="https://vgfence.com/fence-staining-st-jacobs">St. Jacobs</a></li>
              <li><a href="https://vgfence.com/fence-staining-new-hamburg">New Hamburg</a></li>
              <li><a href="https://vgfence.com/fence-staining-baden">Baden</a></li>
              <li><a href="https://vgfence.com/fence-staining-wellesley">Wellesley</a></li>
            </ul>
          </div>
          <div className="region-block">
            <div className="region-name">Guelph &amp; Wellington</div>
            <ul className="region-cities">
              <li className="primary"><a href="https://vgfence.com/fence-staining-guelph" title="Fence staining Guelph">Guelph</a></li>
              <li><a href="https://vgfence.com/fence-staining-fergus">Fergus</a></li>
              <li><a href="https://vgfence.com/fence-staining-elora">Elora</a></li>
              <li><a href="https://vgfence.com/fence-staining-rockwood">Rockwood</a></li>
              <li><a href="https://vgfence.com/fence-staining-acton">Acton</a></li>
              <li><a href="https://vgfence.com/fence-staining-georgetown">Georgetown</a></li>
            </ul>
          </div>
          <div className="region-block">
            <div className="region-name">Halton &amp; Hamilton</div>
            <ul className="region-cities">
              <li className="primary"><a href="https://vgfence.com/fence-staining-hamilton" title="Fence staining Hamilton">Hamilton</a></li>
              <li className="primary"><a href="https://vgfence.com/fence-staining-burlington" title="Deck staining Burlington">Burlington</a></li>
              <li><a href="https://vgfence.com/fence-staining-milton">Milton</a></li>
              <li><a href="https://vgfence.com/fence-staining-oakville">Oakville</a></li>
              <li><a href="https://vgfence.com/fence-staining-stoney-creek">Stoney Creek</a></li>
              <li><a href="https://vgfence.com/fence-staining-grimsby">Grimsby</a></li>
              <li><a href="https://vgfence.com/fence-staining-brantford">Brantford</a></li>
              <li><a href="https://vgfence.com/fence-staining-paris">Paris</a></li>
            </ul>
          </div>
          <div className="region-block">
            <div className="region-name">GTA &amp; Peel</div>
            <ul className="region-cities">
              <li className="primary"><a href="https://vgfence.com/fence-staining-mississauga">Mississauga</a></li>
              <li className="primary"><a href="https://vgfence.com/fence-staining-brampton">Brampton</a></li>
              <li><a href="https://vgfence.com/fence-staining-vaughan">Vaughan</a></li>
              <li><a href="https://vgfence.com/fence-staining-markham">Markham</a></li>
              <li><a href="https://vgfence.com/fence-staining-richmond-hill">Richmond Hill</a></li>
            </ul>
          </div>
          <div className="region-block">
            <div className="region-name">Oxford &amp; Perth</div>
            <ul className="region-cities">
              <li className="primary"><a href="https://vgfence.com/fence-staining-woodstock">Woodstock</a></li>
              <li className="primary"><a href="https://vgfence.com/fence-staining-stratford">Stratford</a></li>
              <li>Ingersoll</li>
              <li>Tillsonburg</li>
              <li>St. Marys</li>
            </ul>
          </div>
          <div className="region-block">
            <div className="region-name">London &amp; Elgin</div>
            <ul className="region-cities">
              <li className="primary"><a href="https://vgfence.com/fence-staining-london-ontario">London</a></li>
              <li>St. Thomas</li>
              <li>Strathroy</li>
              <li>Komoka</li>
            </ul>
          </div>
          <div className="region-block">
            <div className="region-name">Southwest Ontario</div>
            <ul className="region-cities">
              <li className="primary">Windsor</li>
              <li className="primary">Chatham</li>
              <li>Leamington</li>
              <li>Sarnia</li>
              <li>Petrolia</li>
            </ul>
          </div>
          <div className="region-block">
            <div className="region-name">Extended Service</div>
            <ul className="region-cities">
              <li className="primary">Niagara Falls</li>
              <li>St. Catharines</li>
              <li>Welland</li>
              <li className="primary">Barrie</li>
              <li>Owen Sound</li>
              <li>Collingwood</li>
            </ul>
          </div>
        </div>
      </section>

      {/* QUOTE CTA */}
      <section className="quote-cta" id="quote-section">
        <div className="quote-inner">
          <div className="quote-left">
            <h2>Get a wood staining quote.</h2>
            <p>Tell us what you need stained, its approximate size, and your location — we'll come back with a quote and timeline within 2 business hours.</p>
          </div>
          <div className="quote-form-card">
            {formStatus === "success" ? (
              <div style={{ padding: "30px", background: "rgba(255,255,255,0.1)", borderRadius: "8px", border: "1px solid white", color: "white", textAlign: "center" }}>
                <div style={{ fontSize: "40px", marginBottom: "15px" }}>✅</div>
                <h3 style={{ margin: "0 0 10px 0", fontFamily: "var(--fd)" }}>Request Sent!</h3>
                <p style={{ margin: 0, opacity: 0.9 }}>Thank you. We'll be in touch within 2 business hours.</p>
                <button 
                  type="button" 
                  className="qbtn" 
                  style={{ marginTop: "20px" }} 
                  onClick={() => setFormStatus("idle")}
                >
                  Send another request
                </button>
              </div>
            ) : (
              <form onSubmit={handleFormSubmit}>
                <div style={{ fontFamily: "var(--fd)", fontSize: "17px", fontWeight: 700, textTransform: "uppercase", color: "var(--white)", letterSpacing: ".04em", marginBottom: "4px" }}>Request a staining quote</div>
                <div style={{ fontSize: "12px", color: "rgba(255,255,255,.6)", marginBottom: "20px" }}>Response within 2 business hours</div>
                
                <div className="qrow">
                  <div>
                    <label className="ql">Your name</label>
                    <input 
                      className="qi" 
                      type="text" 
                      name="name" 
                      placeholder="John Smith"
                      value={formData.name}
                      onChange={handleInputChange}
                      required
                    />
                  </div>
                  <div>
                    <label className="ql">Phone</label>
                    <input 
                      className="qi" 
                      type="tel" 
                      name="phone" 
                      placeholder="519-xxx-xxxx"
                      value={formData.phone}
                      onChange={handleInputChange}
                      required
                    />
                  </div>
                </div>

                <label className="ql">Email</label>
                <input 
                  className="qi" 
                  type="email" 
                  name="email" 
                  placeholder="you@email.com"
                  value={formData.email}
                  onChange={handleInputChange}
                  required
                />

                <label className="ql">Service needed</label>
                <select 
                  className="qi" 
                  name="service" 
                  value={formData.service} 
                  onChange={handleInputChange}
                  required
                >
                  <option value="">Select service...</option>
                  <option value="Fence staining — new wood">Fence staining — new wood</option>
                  <option value="Fence staining — existing / restoration">Fence staining — existing / restoration</option>
                  <option value="Deck staining — new wood">Deck staining — new wood</option>
                  <option value="Deck staining — restoration">Deck staining — restoration</option>
                  <option value="Pergola / structure staining">Pergola / structure staining</option>
                  <option value="Log cabin / cedar siding">Log cabin / cedar siding</option>
                  <option value="Pre-staining — fence boards before install">Pre-staining — fence boards before install</option>
                  <option value="Expert Stain &amp; Seal product only — contractor purchase">Expert Stain &amp; Seal product only — contractor purchase</option>
                  <option value="Multiple services — describe below">Multiple services — describe below</option>
                </select>

                <div className="qrow">
                  <div>
                    <label className="ql">City / location</label>
                    <input 
                      className="qi" 
                      type="text" 
                      name="location" 
                      placeholder="Kitchener, Guelph..."
                      value={formData.location}
                      onChange={handleInputChange}
                      required
                    />
                  </div>
                  <div>
                    <label className="ql">Approximate size</label>
                    <input 
                      className="qi" 
                      type="text" 
                      name="size" 
                      placeholder="e.g. 150 ft fence / 400 sq ft deck"
                      value={formData.size}
                      onChange={handleInputChange}
                      required
                    />
                  </div>
                </div>

                {formStatus === "error" && (
                  <p style={{ color: "#fee2e2", fontSize: "14px", marginBottom: "15px" }}>
                    ⚠️ Failed to send request. Please try again or email us directly.
                  </p>
                )}

                <button 
                  className="qbtn" 
                  type="submit" 
                  disabled={formStatus === "submitting"}
                >
                  {formStatus === "submitting" ? "Sending..." : "Send quote request →"}
                </button>
              </form>
            )}
          </div>
        </div>
      </section>
    </div>
  );
}
