"use client";

import { useState } from 'react';

export default function StainingQuote() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phone: '',
    projectType: 'fence',
    message: ''
  });

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log('Form submitted:', formData);
    alert('Thank you for your request! We will contact you shortly.');
  };

  return (
    <section className="quote-cta quote-cta-orange" id="quote-section">
      <div className="quote-inner">
        <div className="quote-left">
          <h2 className="text-white">GET A WOOD STAINING QUOTE.</h2>
          <p className="text-white">
            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 orange-card">
          <form onSubmit={handleSubmit}>
            <div className="q-form-title">REQUEST A STAINING QUOTE</div>
            <div className="q-form-sub text-white-70">Response within 2 business hours</div>
            
            <div className="qrow">
              <div>
                <label className="ql text-white">YOUR NAME</label>
                <input 
                  type="text" 
                  name="name" 
                  className="qi orange-input" 
                  placeholder="John Smith" 
                  required 
                  value={formData.name}
                  onChange={handleChange}
                />
              </div>
              <div>
                <label className="ql text-white">PHONE</label>
                <input 
                  type="tel" 
                  name="phone" 
                  className="qi orange-input" 
                  placeholder="519-xxx-xxxx" 
                  required 
                  value={formData.phone}
                  onChange={handleChange}
                />
              </div>
            </div>

            <label className="ql text-white">EMAIL</label>
            <input 
              type="email" 
              name="email" 
              className="qi orange-input" 
              placeholder="you@email.com" 
              required 
              value={formData.email}
              onChange={handleChange}
            />

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

            <div className="qrow">
              <div>
                <label className="ql text-white">CITY / LOCATION</label>
                <input 
                  type="text" 
                  name="location" 
                  className="qi orange-input" 
                  placeholder="Kitchener, Guelph..." 
                  onChange={handleChange}
                />
              </div>
              <div>
                <label className="ql text-white">APPROXIMATE SIZE</label>
                <input 
                  type="text" 
                  name="size" 
                  className="qi orange-input" 
                  placeholder="e.g. 150 ft fence / 400 sq ft deck" 
                  onChange={handleChange}
                />
              </div>
            </div>

            <button type="submit" className="qbtn btn-white-orange">SEND QUOTE REQUEST →</button>
          </form>
        </div>
      </div>
    </section>
  );
}