// CONTACT page
function ContactApp() {
  const [lang, setLang] = useLang();
  const t = mergeT(lang);
  const [submittedC, setSubmittedC] = React.useState(false);
  const [submittingC, setSubmittingC] = React.useState(false);
  const [errorC, setErrorC] = React.useState("");
  const cp = t.contact_page;
  const info = cp.info;
  return (
    <>
      <Header lang={lang} setLang={setLang} t={t} active="contact" />
      <PageHero
        crumbs={[{ label: cp.crumb }]}
        eyebrow={cp.eyebrow}
        titlePre={cp.title_pre}
        titleAccent={cp.title_accent}
        lead={cp.lead}
      />

      <section className="section">
        <div className="container">
          <div className="contact-grid">
            <form className="contact-form" onSubmit={async (e) => {
              e.preventDefault();
              setErrorC("");
              setSubmittingC(true);
              const fd = new FormData(e.target);
              const payload = {
                name: fd.get("name") || "",
                email: fd.get("email") || "",
                phone: fd.get("phone") || "",
                subject: fd.get("subject") || "",
                message: fd.get("message") || "",
              };
              try {
                const res = await fetch("/api/remodeling-contact", {
                  method: "POST",
                  headers: { "Content-Type": "application/json" },
                  body: JSON.stringify(payload),
                });
                const j = await res.json();
                if (j.success) {
                  setSubmittedC(true);
                  e.target.reset();
                  window.scrollTo({ top: 0, behavior: "smooth" });
                } else {
                  setErrorC(j.error || "Submission failed.");
                }
              } catch (err) {
                setErrorC(lang === "en" ? "Network error. Please call (737) 354-7787." : "Error de red. Llama (737) 354-7787.");
              } finally {
                setSubmittingC(false);
              }
            }}>
              {submittedC && (
                <div style={{ background: "#ECF6E8", border: "1px solid var(--green)", color: "var(--green-dark)", padding: 18, borderRadius: 14, marginBottom: 20, fontWeight: 600 }}>
                  {lang === "en" ? "✓ Message sent. We'll be in touch within one business day." : "✓ Mensaje enviado. Te contactamos en menos de un día hábil."}
                </div>
              )}
              {errorC && (
                <div style={{ background: "#FDECEA", border: "1px solid #e74c3c", color: "#c0392b", padding: 16, borderRadius: 14, marginBottom: 20, fontWeight: 600 }}>
                  ⚠️ {errorC}
                </div>
              )}
              <h3>{cp.form_h}</h3>
              <div className="form-row">
                <div className="field">
                  <label>{t.quote_page.form.name}</label>
                  <input type="text" name="name" required />
                </div>
                <div className="field">
                  <label>{t.quote_page.form.email}</label>
                  <input type="email" name="email" required />
                </div>
              </div>
              <div className="form-row">
                <div className="field">
                  <label>{t.quote_page.form.phone}</label>
                  <input type="tel" name="phone" />
                </div>
                <div className="field">
                  <label>{t.quote_page.form.zip}</label>
                  <input type="text" name="zip" />
                </div>
              </div>
              <div className="field">
                <label>{lang === 'en' ? 'Subject' : 'Asunto'}</label>
                <input type="text" name="subject" />
              </div>
              <div className="field">
                <label>{lang === 'en' ? 'Message' : 'Mensaje'}</label>
                <textarea name="message" rows="6" required></textarea>
              </div>
              <button type="submit" disabled={submittingC} className="btn btn-primary" style={{ alignSelf: "flex-start" }}>
                {lang === 'en' ? 'Send Message' : 'Enviar Mensaje'} <Icon.ArrowRight size={16} />
              </button>
            </form>

            <div className="contact-info-card">
              <h4>{lang === 'en' ? 'Reach us directly' : 'Contáctanos directamente'}</h4>

              <div className="info-row">
                <div className="ic"><Icon.Pin size={20} /></div>
                <div>
                  <div className="lbl">{info.addr_lbl}</div>
                  <div className="val" style={{ whiteSpace: "pre-line" }}>{info.addr_val}</div>
                </div>
              </div>

              <div className="info-row">
                <div className="ic"><Icon.Phone size={20} /></div>
                <div>
                  <div className="lbl">{info.phone_lbl}</div>
                  <div className="val"><a href={`tel:${info.phone_val.replace(/\D/g,'')}`}>{info.phone_val}</a></div>
                </div>
              </div>

              <div className="info-row">
                <div className="ic"><Icon.Mail size={20} /></div>
                <div style={{ flex: 1 }}>
                  <div className="lbl">{info.email_lbl}</div>
                  <div className="val" style={{ display: "flex", flexDirection: "column", gap: 6, fontSize: 14 }}>
                    <div><a href="mailto:help@prospecdesign.com">help@prospecdesign.com</a> <span style={{ color: "var(--muted)", fontSize: 12 }}>— {lang === 'en' ? 'Customer support' : 'Soporte al cliente'}</span></div>
                    <div><a href="mailto:hello@prospecdesign.com">hello@prospecdesign.com</a> <span style={{ color: "var(--muted)", fontSize: 12 }}>— {lang === 'en' ? 'General inquiries' : 'Consultas generales'}</span></div>
                    <div><a href="mailto:info@prospecdesign.com">info@prospecdesign.com</a> <span style={{ color: "var(--muted)", fontSize: 12 }}>— {lang === 'en' ? 'Information' : 'Información'}</span></div>
                    <div><a href="mailto:lissy@prospecdesign.com">lissy@prospecdesign.com</a> <span style={{ color: "var(--muted)", fontSize: 12 }}>— {lang === 'en' ? 'Partnerships' : 'Soporte para alianzas'}</span></div>
                    <div><a href="mailto:wellyton@prospecdesign.com">wellyton@prospecdesign.com</a> <span style={{ color: "var(--muted)", fontSize: 12 }}>— {lang === 'en' ? 'Technical support' : 'Soporte técnico'}</span></div>
                  </div>
                </div>
              </div>

              <div className="info-row">
                <div className="ic"><Icon.Clock size={20} /></div>
                <div>
                  <div className="lbl">{info.hours_lbl}</div>
                  <div className="val" style={{ whiteSpace: "pre-line" }}>{info.hours_val}</div>
                </div>
              </div>

              <div className="quote-side-divider" style={{ background: "var(--line)" }}></div>

              <h5 style={{ fontSize: 14, fontWeight: 800, color: "var(--ink-2)", textTransform: "uppercase", letterSpacing: "0.12em", margin: "8px 0 12px" }}>{cp.socials_h}</h5>
              <div className="socials" style={{ filter: "none" }}>
                <a href="#" aria-label="Facebook" style={{ background: "var(--cream)", color: "var(--ink)" }}><Icon.Facebook size={16} /></a>
                <a href="#" aria-label="Instagram" style={{ background: "var(--cream)", color: "var(--ink)" }}><Icon.Instagram size={16} /></a>
                <a href="#" aria-label="LinkedIn" style={{ background: "var(--cream)", color: "var(--ink)" }}><Icon.Linkedin size={16} /></a>
                <a href="#" aria-label="Yelp" style={{ background: "var(--cream)", color: "var(--ink)" }}><Icon.Yelp size={16} /></a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Service area */}
      <section className="section section-soft">
        <div className="container">
          <div style={{ maxWidth: 880, margin: "0 auto", textAlign: "center" }}>
            <h2>{cp.area_h}</h2>
            <p style={{ color: "var(--ink-2)", fontSize: 17, lineHeight: 1.7, marginTop: 18 }}>{cp.area_p}</p>
          </div>
          <div style={{ marginTop: 40, background: "#fff", border: "1px solid var(--line)", borderRadius: 24, padding: 40, boxShadow: "0 6px 24px rgba(13,27,58,0.04)" }}>
            <div style={{ aspectRatio: "16/10", maxHeight: 520 }}>
              <AustinMap cities={t.area.cities} />
            </div>
          </div>
        </div>
      </section>

      <CTABanner t={t} />
      <FooterMP lang={lang} t={t} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("app")).render(<ContactApp />);