// ====== Contact Page ======
function ContactPage() {
  const [form, setForm] = React.useState({
    name: "", email: "", phone: "", service: "", message: "",
  });
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [submitError, setSubmitError] = React.useState("");

  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const submit = async (e) => {
    e.preventDefault();
    setSubmitError("");
    setSending(true);

    try {
      await window.submitWebsiteForm({
        _subject: `Website inquiry - ${form.name}`,
        form_type: "Contact page inquiry",
        name: form.name,
        email: form.email,
        phone: form.phone || "Not provided",
        service: form.service || "Not specified",
        message: form.message || "(none)",
      });
      setSent(true);
      setForm({ name: "", email: "", phone: "", service: "", message: "" });
    } catch (error) {
      setSubmitError("Sorry, we could not send your message. Please call or email us directly.");
    } finally {
      setSending(false);
    }
  };

  return (
    <PageLayout activeSection="contact">

      {/* Hero */}
      <section className="page-hero">
        <div className="container">
          <span className="eyebrow">Get in Touch</span>
          <h1>Contact Ace Home Solutions</h1>
          <p className="lede">
            Ready to start your project? Have a question? We'd love to hear from you.
            Call us, send a message, or request a free estimate below.
          </p>
        </div>
      </section>

      {/* Contact Grid */}
      <section className="page-section">
        <div className="container">
          <div className="contact-grid">

            {/* Form */}
            <div className="contact-form-card">
              {sent ? (
                <div style={{ textAlign: "center", padding: "40px 0" }}>
                  <div style={{ fontSize: 48 }}>✓</div>
                  <h3 style={{ color: "var(--navy)" }}>Message Sent!</h3>
                  <p style={{ color: "var(--muted)" }}>
                    Thanks — we'll get back to you within one business day.
                  </p>
                  <button
                    className="btn btn-primary"
                    style={{ marginTop: 16 }}
                    onClick={() => setSent(false)}
                  >
                    Send Another
                  </button>
                </div>
              ) : (
                <React.Fragment>
                  <h3>Send Us a Message</h3>
                  <form onSubmit={submit} action={window.FORM_ENDPOINT} method="POST">
                    <div className="form-row-2">
                      <div className="form-group">
                        <label htmlFor="name">Full Name *</label>
                        <input id="name" name="name" required value={form.name} onChange={set("name")} placeholder="Jane Doe" />
                      </div>
                      <div className="form-group">
                        <label htmlFor="phone">Phone Number</label>
                        <input id="phone" name="phone" type="tel" value={form.phone} onChange={set("phone")} placeholder="(555) 123-4567" />
                      </div>
                    </div>
                    <div className="form-group">
                      <label htmlFor="email">Email Address *</label>
                      <input id="email" name="email" type="email" required value={form.email} onChange={set("email")} placeholder="jane@example.com" />
                    </div>
                    <div className="form-group">
                      <label htmlFor="service">Service Needed</label>
                      <select id="service" name="service" value={form.service} onChange={set("service")}>
                        <option value="">Select a service…</option>
                        <option>Flooring Installation</option>
                        <option>Interior &amp; Exterior Painting</option>
                        <option>Cabinet Installation</option>
                        <option>Window Replacement</option>
                        <option>Door Installation</option>
                        <option>Home Improvement / Remodeling</option>
                        <option>Multiple Services</option>
                        <option>Other</option>
                      </select>
                    </div>
                    <div className="form-group">
                      <label htmlFor="message">Tell Us About Your Project</label>
                      <textarea
                        id="message"
                        name="message"
                        rows="5"
                        value={form.message}
                        onChange={set("message")}
                        placeholder="Room size, materials you're considering, timeline…"
                      />
                    </div>
                    {submitError && (
                      <div className="form-error" role="alert">{submitError}</div>
                    )}
                    <button type="submit" className="btn btn-primary" style={{ width: "100%" }} disabled={sending}>
                      {sending ? "Sending..." : "Send Message"} <span className="arr"><I.Arrow size={14} /></span>
                    </button>
                  </form>
                </React.Fragment>
              )}
            </div>

            {/* Contact Info */}
            <div>
              <div className="contact-info-card">
                <h3>Contact Information</h3>

                <div className="contact-info-item">
                  <div className="ico"><I.Phone size={20} /></div>
                  <div>
                    <div className="label">Phone</div>
                    <a href="tel:9403264695">(940) 326-4695</a>
                  </div>
                </div>

                <div className="contact-info-item">
                  <div className="ico"><I.Mail size={20} /></div>
                  <div>
                    <div className="label">Email</div>
                    <a href={`mailto:${window.CONTACT_EMAIL}`}>{window.CONTACT_EMAIL}</a>
                  </div>
                </div>

                <div className="contact-info-item">
                  <div className="ico"><I.Pin size={20} /></div>
                  <div>
                    <div className="label">Address</div>
                    <span>200 N Kimball Ave Suite 221 #1112<br />Southlake, TX 76092</span>
                  </div>
                </div>

                <div className="contact-info-item">
                  <div className="ico"><I.Shield size={20} /></div>
                  <div>
                    <div className="label">Business Hours</div>
                    <div className="hours-grid">
                      <span>Mon – Sat</span><span>8:00 AM – 8:00 PM</span>
                      <span>Sunday</span><span>By appointment</span>
                    </div>
                  </div>
                </div>
              </div>

              <div style={{
                marginTop: 24,
                background: "var(--bg-soft)",
                border: "1px solid var(--line)",
                borderRadius: 12,
                padding: "24px",
              }}>
                <h4 style={{ margin: "0 0 8px", color: "var(--navy)" }}>Serving DFW Since Day One</h4>
                <p style={{ margin: 0, color: "var(--muted)", fontSize: ".95rem", lineHeight: 1.6 }}>
                  We cover 28+ communities across the Dallas-Fort Worth Metroplex.
                  Free estimates anywhere in our service area — no travel fees.
                </p>
                <a href="/service-areas/" style={{ display: "inline-flex", alignItems: "center", gap: 6, color: "var(--orange)", fontWeight: 600, textDecoration: "none", marginTop: 12, fontSize: ".9rem" }}>
                  View Service Areas <I.Arrow size={13} />
                </a>
              </div>
            </div>

          </div>
        </div>
      </section>

      {/* CTA */}
      <div className="cta-band">
        <div className="container">
          <h2>Prefer to Call?</h2>
          <p>Speak directly with our team — we're available Mon–Sat, 8 AM to 8 PM.</p>
          <a href="tel:9403264695" className="btn-white" style={{ textDecoration: "none" }}>
            (940) 326-4695
          </a>
        </div>
      </div>

    </PageLayout>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<ContactPage />);