"use client";
import Link from 'next/link';

export default function Hero() {
  return (
    <section className="hero">
      <div className="hero-pattern"></div>
      <div className="hero-accent"></div>
      <div className="hero-accent2"></div>

      <div className="hero-left">
        <div className="hero-eyebrow">Kitchener–Waterloo Region · Ontario</div>
        <h1 className="hero-h1">
          Ontario's B2B<br />
          <em>Fence Supply</em><br />
          Partner
        </h1>
        <p className="hero-sub">
          Supplying contractors, builders, and property managers across Ontario with{' '}
          <strong>chain link, ornamental, composite, glass railing, and stain products</strong> —
          with same-day job site delivery across a 250km radius from KWC.
        </p>
        <div className="hero-btns">
          <Link href="#quote" className="btn-primary">Request contractor pricing</Link>
          <Link href="/products" className="btn-secondary">View all products</Link>
        </div>
        <div className="hero-stats">
          <div>
            <div className="stat-val">3+</div>
            <div className="stat-label">Years serving KWC</div>
          </div>
          <div>
            <div className="stat-val">250km</div>
            <div className="stat-label">Delivery radius</div>
          </div>
          <div>
            <div className="stat-val">9+</div>
            <div className="stat-label">Product lines</div>
          </div>
          <div>
            <div className="stat-val">B2B</div>
            <div className="stat-label">Contractor focus</div>
          </div>
        </div>
      </div>

      <div className="hero-right" id="quote">
        <div className="quote-card">
          <div className="quote-card-title">Request a quote</div>
          <div className="quote-card-sub">Response within 2 business hours · Contractor pricing available</div>
          <form className="quote-form">
            <div className="form-row">
              <div className="form-group">
                <label className="form-label">Company name</label>
                <input className="form-input" type="text" placeholder="ABC Fence Co." />
              </div>
              <div className="form-group">
                <label className="form-label">Your name</label>
                <input className="form-input" type="text" placeholder="John Smith" />
              </div>
            </div>
            <div className="form-row">
              <div className="form-group">
                <label className="form-label">Phone</label>
                <input className="form-input" type="tel" placeholder="519-xxx-xxxx" />
              </div>
              <div className="form-group">
                <label className="form-label">Email</label>
                <input className="form-input" type="email" placeholder="you@company.com" />
              </div>
            </div>
            <div className="form-group">
              <label className="form-label">Product needed</label>
              <select className="form-select">
                <option value="">Select a product...</option>
                <option>Aluminum railing</option>
                <option>Chain link fence — commercial</option>
                <option>Chain link fence — residential</option>
                <option>Composite fence</option>
                <option>Expert Stain & Seal products</option>
                <option>Fence armor (post caps / guards)</option>
                <option>Glass railing</option>
                <option>Ornamental / iron fence</option>
                <option>Temporary fence rental</option>
                <option>Multiple products</option>
              </select>
            </div>
            <div className="form-row">
              <div className="form-group">
                <label className="form-label">Job site city</label>
                <input className="form-input" type="text" placeholder="Kitchener, Guelph..." />
              </div>
              <div className="form-group">
                <label className="form-label">Approximate quantity</label>
                <input className="form-input" type="text" placeholder="e.g. 200 linear ft" />
              </div>
            </div>
            <button type="submit" className="form-submit" onClick={(e) => e.preventDefault()}>Send quote request →</button>
            <div className="form-note">Or call us directly · info@vgfenceproducts.com</div>
          </form>
        </div>
      </div>
    </section>
  );
}