"use client";

export default function StainingHero() {
  return (
    <section className="hero-staining">
      <div className="hero-grid-bg"></div>
      <div className="hero-wood-deco"></div>
      <div className="hero-accent-circle"></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 & 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 & Deck</span>
          <span className="badge">Expert Stain & Seal</span>
          <span className="badge">Pre-Staining Available</span>
          <span className="badge">KWC & Ontario</span>
        </div>
        <div className="hero-stats-row">
          <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>
  );
}