"use client";

import React from 'react';

const ChainLinkQuote = () => {
  return (
    <section className="quote-cta">
      <div className="quote-inner">
        <div className="quote-left">
          <h2>Get chain link fence materials pricing.</h2>
          <p>Fill in the quick form and we'll come back to you with contractor pricing within 2 business hours. Bulk orders welcome — we supply fence contractors, builders, and property managers across Ontario.</p>
        </div>
        <div className="quote-form-card">
          <div className="q-form-title">Request a quote</div>
          <div className="q-form-sub">Response within 2 business hours</div>
          <div className="qrow">
            <div>
              <label className="ql">Company name</label>
              <input className="qi" type="text" placeholder="ABC Fence Co." />
            </div>
            <div>
              <label className="ql">Your name</label>
              <input className="qi" type="text" placeholder="John Smith" />
            </div>
          </div>
          <div className="qrow">
            <div>
              <label className="ql">Phone</label>
              <input className="qi" type="tel" placeholder="519-xxx-xxxx" />
            </div>
            <div>
              <label className="ql">Email</label>
              <input className="qi" type="email" placeholder="you@company.com" />
            </div>
          </div>
          <label className="ql">Material needed</label>
          <select className="qi">
            <option value="">Select material type...</option>
            <option>Chain link mesh — galvanized</option>
            <option>Chain link mesh — vinyl coated black</option>
            <option>Posts (terminal &amp; line)</option>
            <option>Top rail</option>
            <option>Gates &amp; gate hardware</option>
            <option>Hardware &amp; fittings pack</option>
            <option>Privacy slats</option>
            <option>Barbed wire</option>
            <option>Complete material package</option>
          </select>
          <div className="qrow">
            <div>
              <label className="ql">Job site city</label>
              <input className="qi" type="text" placeholder="Kitchener, Guelph..." />
            </div>
            <div>
              <label className="ql">Linear footage</label>
              <input className="qi" type="text" placeholder="e.g. 300 linear ft" />
            </div>
          </div>
          <button className="qbtn">Send quote request →</button>
        </div>
      </div>
    </section>
  );
};

export default ChainLinkQuote;