VG-Fence-Products-NextJS/components/Staining/StainingQuote.tsx

"use client";

import { useState } from 'react';
import axios from 'axios';

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

  const [status, setStatus] = useState<"idle" | "submitting" | "success" | "error">("idle");

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

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    setStatus("submitting");

    const emailData = {
      name: formData.name,
      email: formData.email,
      phone: formData.phone,
      service: formData.projectType || "Wood Staining",
      message: `
        <b>Service:</b> ${formData.projectType}<br />
        <b>Location:</b> ${formData.location}<br />
        <b>Approx Size:</b> ${formData.size}<br /><br />
        <b>Additional Notes:</b> ${formData.message || "N/A"}
      `,
      to: "info@vgfenceproducts.com",
      senderName: "VG Fence Staining Page",
    };

    try {
      await axios.post("https://mailserver.metatronnest.com/send", emailData, {
        headers: { "Content-Type": "application/json" },
      });
      setStatus("success");
      setFormData({
        name: '',
        email: '',
        phone: '',
        projectType: 'fence',
        location: '',
        size: '',
        message: ''
      });
    } catch (error) {
      console.error("❌ Error sending staining quote request:", error);
      setStatus("error");
    }
  };


  return (
    <section className="quote-cta quote-cta-orange" id="quote-section">
      <div className="quote-inner">
        <div className="quote-left">
          <h2 className="text-white">TELL US WHAT YOU NEED<br />AND WHERE IT'S GOING.</h2>
          <p className="text-white">
            Get a wood staining quote and timeline within 2 business hours.
          </p>
        </div>
        <div className="quote-form-card">
            {status === "success" ? (
              <div className="q-form-success" style={{ padding: '30px', background: 'rgba(255,255,255,0.1)', borderRadius: '8px', border: '1px solid white', color: 'white', textAlign: 'center' }}>
                <div style={{ fontSize: '40px', marginBottom: '15px' }}>✅</div>
                <h3 style={{ margin: '0 0 10px 0' }}>Request Sent!</h3>
                <p style={{ margin: 0, opacity: 0.9 }}>Thank you. We'll be in touch within 2 business hours.</p>
                <button type="button" className="qbtn btn-white-orange" style={{ marginTop: '20px' }} onClick={() => setStatus("idle")}>Send another request</button>
              </div>
            ) : (
              <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" 
                      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" 
                      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" 
                  placeholder="you@email.com" 
                  required 
                  value={formData.email}
                  onChange={handleChange}
                />

                <label className="ql text-white">SERVICE NEEDED</label>
                <select 
                  name="projectType" 
                  className="qi" 
                  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" 
                      placeholder="Kitchener, Guelph..." 
                      value={formData.location}
                      onChange={handleChange}
                    />
                  </div>
                  <div>
                    <label className="ql text-white">APPROXIMATE SIZE</label>
                    <input 
                      type="text" 
                      name="size" 
                      className="qi" 
                      placeholder="e.g. 150 ft fence / 400 sq ft deck" 
                      value={formData.size}
                      onChange={handleChange}
                    />
                  </div>
                </div>

                {status === "error" && (
                  <p style={{ color: '#fee2e2', fontSize: '14px', marginBottom: '15px' }}>
                    ⚠️ Failed to send request. Please try again or email us directly.
                  </p>
                )}

                <button type="submit" className="qbtn btn-white-orange" disabled={status === "submitting"}>
                  {status === "submitting" ? "SENDING..." : "SEND QUOTE REQUEST →"}
                </button>
              </form>
            )}

        </div>
      </div>
    </section>
  );
}