const DSC = window.ConstruimosTuEdificioDesignSystem_3f039f;
const D_C = window.CTE_DATA;

function ContactPage({ onNavigate }) {
  const { Button, Icon, Eyebrow, Field, Input, Select, Textarea, Checkbox } = DSC;
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [error, setError] = React.useState("");

  const submit = e => {
    e.preventDefault();
    const consent = document.getElementById("c-consent");
    if (consent && !consent.checked) {
      setError("Autoriza el tratamiento de tus datos para continuar.");
      return;
    }
    const val = id => { const el = document.getElementById(id); return el ? el.value : ""; };
    const fields = {
      Nombre: val("cn"),
      "Teléfono": val("cp"),
      Correo: val("ce"),
      "Servicio de interés": val("cs"),
      "Ciudad del proyecto": val("cc"),
      "Etapa del proyecto": val("cet"),
      Mensaje: val("cm"),
    };
    setSending(true);
    setError("");
    fetch(window.CTE_REST_URL, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ form: "contacto", fields, website: val("c-hp") }),
    })
      .then(r => r.json().then(data => ({ ok: r.ok, data })))
      .then(({ ok, data }) => {
        setSending(false);
        if (ok && data && data.ok) { setSent(true); }
        else { setError((data && data.message) || "No pudimos enviar tu mensaje. Intenta de nuevo o escríbenos por WhatsApp."); }
      })
      .catch(() => {
        setSending(false);
        setError("No pudimos enviar tu mensaje. Intenta de nuevo o escríbenos por WhatsApp.");
      });
  };

  return (
    <React.Fragment>
      <PageHero image={D_C.photos.contactHero}
        title="Hablemos de tu proyecto"
        subtitle="Cuéntanos qué necesitas construir, diseñar o calcular. Te respondemos en menos de 24 horas hábiles."
        crumbs={[{ label: "Inicio", href: "/" }, { label: "Contacto" }]} />
      <section className="section container reveal">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: "clamp(32px,5vw,72px)", alignItems: "start" }} className="split">
          <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
            <Eyebrow>Contacto</Eyebrow>
            <h2 style={{ fontSize: "var(--text-display-m)", letterSpacing: "var(--track-display)" }}>Un solo equipo, una sola conversación</h2>
            <p style={{ fontSize: "var(--text-md)", lineHeight: "var(--lh-body)", color: "var(--text-muted)" }}>Atendemos proyectos de construcción, diseño y estructuras para edificios y departamentos, además de propuestas de terreno para desarrollo.</p>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              {[["phone", "Teléfono", "+52 55 1234 5678"], ["message-circle", "WhatsApp", "+52 55 8765 4321"], ["mail", "Correo", "contacto@construimostuedificio.mx"], ["map-pin", "Oficina", "Av. Reforma 1290, Piso 8, CDMX"], ["clock", "Horarios", "Lunes a viernes · 9:00 a 18:00 h"]].map(([ic, l, v]) => (
                <div key={l} style={{ display: "flex", gap: 14, alignItems: "center", padding: "14px 16px", borderRadius: "var(--radius-md)", border: "1px solid var(--border-subtle)", background: "var(--surface-card)" }}>
                  <span style={{ display: "grid", placeItems: "center", width: 38, height: 38, flex: "none", borderRadius: "var(--radius-sm)", background: "var(--concrete-100)", color: "var(--amber-600)" }}><Icon name={ic} size={17} /></span>
                  <span style={{ display: "flex", flexDirection: "column", gap: 2 }}>
                    <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", textTransform: "uppercase", letterSpacing: "var(--track-eyebrow)", color: "var(--text-faint)" }}>{l}</span>
                    <span style={{ fontSize: "var(--text-sm)", fontWeight: "var(--weight-medium)", color: "var(--text-strong)" }}>{v}</span>
                  </span>
                </div>
              ))}
            </div>
          </div>
          <div style={{ background: "var(--surface-card)", borderRadius: "var(--radius-xl)", border: "1px solid var(--border-subtle)", boxShadow: "var(--shadow-md)", padding: "clamp(26px,3vw,44px)" }}>
            {sent ? (
              <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 14, padding: "60px 20px", textAlign: "center" }}>
                <span style={{ display: "grid", placeItems: "center", width: 56, height: 56, borderRadius: "var(--radius-pill)", background: "var(--state-success-soft)", color: "var(--state-success)" }}><Icon name="check" size={26} strokeWidth={2} /></span>
                <h3 style={{ fontSize: "var(--text-display-s)" }}>Mensaje enviado</h3>
                <p style={{ fontSize: "var(--text-sm)", color: "var(--text-muted)" }}>Te contactamos en menos de 24 horas hábiles.</p>
                <Button variant="secondary" onClick={() => setSent(false)}>Enviar otro mensaje</Button>
              </div>
            ) : (
              <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 20 }}>
                <input id="c-hp" type="text" autoComplete="off" tabIndex={-1} style={{ position: "absolute", left: "-9999px", width: 1, height: 1, opacity: 0 }} aria-hidden="true" />
                <div className="form-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
                  <Field label="Nombre" required htmlFor="cn"><Input id="cn" required placeholder="Tu nombre" /></Field>
                  <Field label="Teléfono / WhatsApp" required htmlFor="cp"><Input id="cp" icon="phone" required placeholder="+52 55 0000 0000" /></Field>
                  <Field label="Correo" required htmlFor="ce" style={{ gridColumn: "span 2" }}><Input id="ce" icon="mail" type="email" required placeholder="tucorreo@dominio.mx" /></Field>
                  <Field label="Servicio de interés" htmlFor="cs" style={{ gridColumn: "span 2" }}>
                    <Select id="cs" placeholder="Selecciona un servicio" options={["Constructora de Edificios", "Constructora de Departamentos", "Diseño de Edificios", "Diseño de Departamentos", "Estructuras para Edificios", "Estructuras para Departamentos", "Ofrecer un terreno", "Otro"]} />
                  </Field>
                  <Field label="Ciudad del proyecto" htmlFor="cc"><Input id="cc" icon="map-pin" placeholder="Ej. Monterrey" /></Field>
                  <Field label="Etapa del proyecto" htmlFor="cet"><Select id="cet" placeholder="Selecciona una etapa" options={["Sólo tengo la idea", "Tengo el terreno", "Tengo el proyecto", "Obra en curso"]} /></Field>
                </div>
                <Field label="Cuéntanos del proyecto" htmlFor="cm"><Textarea id="cm" rows={5} placeholder="Superficie, número de niveles, plazos estimados, lo que tengas." /></Field>
                <Checkbox id="c-consent" label="Autorizo el tratamiento de mis datos conforme al aviso de privacidad." />
                {error ? <p style={{ fontSize: "var(--text-sm)", color: "var(--state-danger)", margin: 0 }}>{error}</p> : null}
                <Button variant="primary" size="lg" arrow block type="submit" disabled={sending}>{sending ? "Enviando…" : "Solicitar cotización"}</Button>
              </form>
            )}
          </div>
        </div>
      </section>
      <OfficeSection />
      <FaqSection limit={5} title="Antes de escribirnos" />
    </React.Fragment>
  );
}
Object.assign(window, { ContactPage });