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

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

  const submit = (e) => {
    e.preventDefault();
    const body = [
      `Name: ${form.name}`,
      `Email: ${form.email}`,
      `Phone: ${form.phone}`,
      `Service: ${form.service || "Not specified"}`,
      ``,
      `Message:`,
      form.message || "(none)",
    ].join("\n");
    const subject = `Website inquiry — ${form.name}`;
    window.location.href =
      `mailto:info@acehomesolutionstx.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
    setSent(true);
  };

  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}>
                    <div className="form-row-2">
                      <div className="form-group">
                        <label htmlFor="name">Full Name *</label>
                        <input id="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" 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" 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" 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"
                        rows="5"
                        value={form.message}
                        onChange={set("message")}
                        placeholder="Room size, materials you're considering, timeline…"
                      />
                    </div>
                    <button type="submit" className="btn btn-primary" style={{ width: "100%" }}>
                      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:info@acehomesolutionstx.com">info@acehomesolutionstx.com</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 />);