"use client";

import React from 'react';

const ChainLinkHero = () => {
  return (
    <section className="hero">
      <div className="hero-grid-bg"></div>
      <div className="hero-mesh"></div>
      <div className="hero-accent"></div>
      <div className="hero-inner">
        <div className="hero-eyebrow">Chain link fence materials · KWC Ontario</div>
        <h1>
          Everything you need<br />
          <em>to build.</em>
        </h1>
        <p className="hero-desc">
          We stock a <strong>full range of chain link fence materials</strong> for both residential and commercial installation — mesh, posts, rails, gates, hardware and all accessories. Serving contractors and builders across a <strong>250km radius from Kitchener–Waterloo</strong>.
        </p>
        <div className="hero-badges">
          <span className="badge badge-fill">Galvanized &amp; Vinyl Coated</span>
          <span className="badge">Residential &amp; Commercial</span>
          <span className="badge">Scheduled Job Site Delivery</span>
          <span className="badge">Contractor Pricing</span>
        </div>
        <div className="hero-stats">
          <div>
            <div className="stat-val">17+</div>
            <div className="stat-label">Material types in stock</div>
          </div>
          <div>
            <div className="stat-val">250km</div>
            <div className="stat-label">Ontario delivery radius</div>
          </div>
          <div>
            <div className="stat-val">B2B</div>
            <div className="stat-label">Contractor focus</div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default ChainLinkHero;