// Contact page — polished w/ inline validation, success animation, map placeholder

const { SectionEyebrow: SE_C } = window.AMSChrome;
const { Reveal: RevC } = window.AMSPrim;
const D5 = window.AMS_DATA;

// GoHighLevel webhook — fires on every successful contact-form submit.
const AMS_CONTACT_WEBHOOK = "https://services.leadconnectorhq.com/hooks/Jx498vFpyvZUSLnIfT0B/webhook-trigger/63U6ipDUGKtglsr1QeUq";

function ContactPage() {
  const [form, setForm] = React.useState({
    name: "", phone: "", email: "", service: "Solar Installation", message: "",
  });
  const [errors, setErrors] = React.useState({});
  const [touched, setTouched] = React.useState({});
  const [submitted, setSubmitted] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [submitError, setSubmitError] = React.useState(null);

  function validateField(k, v) {
    if (k === "name" && !v.trim()) return "Please enter your name.";
    if (k === "email" && v && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)) return "Enter a valid email.";
    if (k === "phone" && v && !/[\d]{7,}/.test(v.replace(/\D/g, ""))) return "Enter a valid phone.";
    return null;
  }

  function update(k, v) {
    setForm((f) => ({ ...f, [k]: v }));
    if (touched[k]) {
      setErrors((e) => ({ ...e, [k]: validateField(k, v) }));
    }
  }
  function blur(k) {
    setTouched((t) => ({ ...t, [k]: true }));
    setErrors((e) => ({ ...e, [k]: validateField(k, form[k]) }));
  }

  async function submit(e) {
    e.preventDefault();
    const errs = {};
    Object.keys(form).forEach((k) => { const er = validateField(k, form[k]); if (er) errs[k] = er; });
    if (!form.phone.trim() && !form.email.trim()) errs.phone = "Phone or email required.";
    setTouched(Object.fromEntries(Object.keys(form).map((k) => [k, true])));
    setErrors(errs);
    if (Object.keys(errs).filter((k) => errs[k]).length) return;

    setSubmitError(null);
    setSubmitting(true);
    try {
      const payload = {
        full_name: form.name,
        first_name: form.name.split(" ").slice(0, -1).join(" ") || form.name,
        last_name: form.name.split(" ").slice(-1).join(" ") || "",
        phone: form.phone,
        email: form.email,
        service_interest: form.service,
        message: form.message,
        source: "ams-energy-solutions website",
        page_url: typeof window !== "undefined" ? window.location.href : "",
        submitted_at: new Date().toISOString(),
      };
      const res = await fetch(AMS_CONTACT_WEBHOOK, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });
      if (!res.ok) throw new Error("Webhook returned " + res.status);
      setSubmitted(true);
    } catch (err) {
      console.error("[AMS contact form] webhook error", err);
      setSubmitError("Something went wrong sending your request. Please call " + D5.business.phone + " or try again in a moment.");
    } finally {
      setSubmitting(false);
    }
  }

  function reset() {
    setSubmitted(false);
    setForm({ name: "", phone: "", email: "", service: "Solar Installation", message: "" });
    setErrors({}); setTouched({});
    setSubmitError(null);
  }

  return (
    <main className="ams-contact">
      <section className="ams-page-hero">
        <div className="ams-container ams-page-hero-grid">
          <div>
            <RevC as="p" className="ams-eyebrow"><span className="ams-eyebrow-rule" />Get in touch</RevC>
            <RevC as="h1" className="ams-page-title" delay={80}>
              Talk to <span className="ams-orange">Sal directly.</span>
            </RevC>
            <RevC as="p" className="ams-page-lede" delay={160}>
              Free consultations, 10-minute response, every day except Sunday. Call,
              text, or send the form below — whichever's easiest.
            </RevC>
          </div>
          <RevC delay={120}>
            <div className="ams-contact-card">
              <a href={D5.business.phoneHref} className="ams-contact-phone">{D5.business.phone}</a>
              <p className="ams-contact-hours">{D5.business.hours}</p>
              <p className="ams-contact-area">{D5.business.serviceArea}</p>
              <div className="ams-contact-socials">
                <a href={D5.social.yelp} target="_blank" rel="noreferrer">Yelp →</a>
                <a href={D5.social.facebook} target="_blank" rel="noreferrer">Facebook →</a>
                <a href={D5.social.instagram} target="_blank" rel="noreferrer">Instagram →</a>
              </div>
            </div>
          </RevC>
        </div>
      </section>

      <section className="ams-section">
        <div className="ams-container ams-contact-grid">
          <RevC>
            <SE_C>Request a quote</SE_C>
            <h2 className="ams-h2">Tell us about the roof.</h2>
            <p className="ams-section-lede">
              The more you can share — system size, roof type, what you'd like fixed —
              the faster we can come back with a real number.
            </p>
            <ul className="ams-contact-bullets">
              <li><strong>Free consultations</strong> · we come to you</li>
              <li><strong>{D5.business.response}</strong></li>
              <li><strong>{D5.business.payments.join(" · ")}</strong></li>
            </ul>
          </RevC>

          <RevC delay={120}>
            {submitted ? (
              <div className="ams-form ams-form-success">
                <div className="ams-success-check" aria-hidden="true">
                  <svg viewBox="0 0 52 52" width="56" height="56">
                    <circle cx="26" cy="26" r="24" fill="none" stroke="#F07F21" strokeWidth="3" className="ams-success-circle" />
                    <path fill="none" stroke="#F07F21" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" d="M14 27l8 8 16-18" className="ams-success-path" />
                  </svg>
                </div>
                <h3 className="ams-success-h">Thanks — request sent.</h3>
                <p>Salvador will text or call within 10 minutes (Mon–Sat, 9 AM – 8 PM).</p>
                <div className="ams-form-actions">
                  <button onClick={reset} className="ams-btn ams-btn-ghost-dark">Send another</button>
                  <a href={D5.business.phoneHref} className="ams-btn ams-btn-primary">Or call now</a>
                </div>
              </div>
            ) : (
              <form className="ams-form" onSubmit={submit} noValidate>
                <div className="ams-form-row">
                  <label className="ams-form-field">
                    <span>Name *</span>
                    <input type="text" value={form.name} onChange={(e) => update("name", e.target.value)} onBlur={() => blur("name")} aria-invalid={!!errors.name} />
                    {errors.name && <small className="ams-form-err">{errors.name}</small>}
                  </label>
                </div>
                <div className="ams-form-row ams-form-row-2">
                  <label className="ams-form-field">
                    <span>Phone</span>
                    <input type="tel" value={form.phone} onChange={(e) => update("phone", e.target.value)} onBlur={() => blur("phone")} aria-invalid={!!errors.phone} />
                    {errors.phone && <small className="ams-form-err">{errors.phone}</small>}
                  </label>
                  <label className="ams-form-field">
                    <span>Email</span>
                    <input type="email" value={form.email} onChange={(e) => update("email", e.target.value)} onBlur={() => blur("email")} aria-invalid={!!errors.email} />
                    {errors.email && <small className="ams-form-err">{errors.email}</small>}
                  </label>
                </div>
                <div className="ams-form-row">
                  <label className="ams-form-field">
                    <span>Service interest</span>
                    <select value={form.service} onChange={(e) => update("service", e.target.value)}>
                      <option>Solar Installation</option>
                      <option>Solar Cleaning</option>
                      <option>Roofing</option>
                      <option>Maintenance</option>
                      <option>Battery storage</option>
                      <option>Not sure yet</option>
                    </select>
                  </label>
                </div>
                <div className="ams-form-row">
                  <label className="ams-form-field">
                    <span>Tell us about the project</span>
                    <textarea rows={5} value={form.message} onChange={(e) => update("message", e.target.value)} placeholder="Roof type, system size if known, what you'd like done..." />
                  </label>
                </div>
                {submitError && (
                  <div className="ams-form-row">
                    <p className="ams-form-err" role="alert">{submitError}</p>
                  </div>
                )}
                <div className="ams-form-actions">
                  <button type="submit" className="ams-btn ams-btn-primary" disabled={submitting} aria-busy={submitting}>
                    {submitting ? "Sending…" : "Send request →"}
                  </button>
                  <a href={D5.business.phoneHref} className="ams-btn ams-btn-ghost-dark">Or call {D5.business.phone}</a>
                </div>
              </form>
            )}
          </RevC>
        </div>
      </section>
    </main>
  );
}

window.ContactPage = ContactPage;