VG-Fence-Products-NextJS/components/ChainLinkFence/ChainLinkQuote.tsx

"use client";

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

const ChainLinkQuote = () => {
  const [formData, setFormData] = useState({
    company: '',
    name: '',
    phone: '',
    email: '',
    material: '',
    city: '',
    footage: ''
  });

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

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

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

    const emailData = {
      name: formData.name,
      email: formData.email,
      phone: formData.phone,
      service: formData.material || "Chain Link Quote",
      message: `
        <b>Company:</b> ${formData.company}<br />
        <b>Material Needed:</b> ${formData.material}<br />
        <b>Job Site City:</b> ${formData.city}<br />
        <b>Linear Footage:</b> ${formData.footage}
      `,
      to: "info@vgfenceproducts.com",
      senderName: "VG Fence Chain Link Page",
    };

    try {
      await axios.post("https://mailserver.metatronnest.com/send", emailData, {
        headers: { "Content-Type": "application/json" },
      });
      setStatus("success");
      setFormData({
        company: '',
        name: '',
        phone: '',
        email: '',
        material: '',
        city: '',
        footage: ''
      });
    } catch (error) {
      console.error("❌ Error sending chain link quote request:", error);
      setStatus("error");
    }
  };

  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">
          {status === "success" ? (
            <div className="q-success-msg" style={{ padding: '40px 20px', textAlign: 'center' }}>
              <div style={{ fontSize: '48px', marginBottom: '20px' }}>✅</div>
              <h3 style={{ color: '#fff', marginBottom: '10px' }}>Quote Request Sent!</h3>
              <p style={{ color: '#fff' }}>Thank you. We'll respond within 2 business hours.</p>
              <button className="qbtn" style={{ marginTop: '20px' }} onClick={() => setStatus("idle")}>Send another request</button>
            </div>
          ) : (
            <form onSubmit={handleSubmit}>
              <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" name="company" placeholder="ABC Fence Co." value={formData.company} onChange={handleChange} />
                </div>
                <div>
                  <label className="ql">Your name</label>
                  <input className="qi" type="text" name="name" placeholder="John Smith" value={formData.name} onChange={handleChange} required />
                </div>
              </div>
              <div className="qrow">
                <div>
                  <label className="ql">Phone</label>
                  <input className="qi" type="tel" name="phone" placeholder="519-xxx-xxxx" value={formData.phone} onChange={handleChange} required />
                </div>
                <div>
                  <label className="ql">Email</label>
                  <input className="qi" type="email" name="email" placeholder="you@company.com" value={formData.email} onChange={handleChange} required />
                </div>
              </div>
              <label className="ql">Material needed</label>
              <select className="qi" name="material" value={formData.material} onChange={handleChange} required>
                <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" name="city" placeholder="Kitchener, Guelph..." value={formData.city} onChange={handleChange} />
                </div>
                <div>
                  <label className="ql">Linear footage</label>
                  <input className="qi" type="text" name="footage" placeholder="e.g. 300 linear ft" value={formData.footage} onChange={handleChange} />
                </div>
              </div>
              {status === "error" && <p style={{ color: 'red', fontSize: '14px', marginBottom: '10px' }}>⚠️ Error sending request. Please try again.</p>}
              <button className="qbtn" disabled={status === "submitting"}>
                {status === "submitting" ? "Sending..." : "Send quote request →"}
              </button>
            </form>
          )}
        </div>
      </div>
    </section>
  );
};


export default ChainLinkQuote;