const DSL = window.ConstruimosTuEdificioDesignSystem_3f039f;
const D_L = window.CTE_DATA;

function LandPage({ onNavigate }) {
  const { Button, Icon, Eyebrow, SectionHeading, Figure, Field, Input, Select, Textarea, Checkbox, FileDrop, Pill } = DSL;
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [error, setError] = React.useState("");
  const criterios = [
    ["map-pin", "Ubicaciones estratégicas", "Zonas con demanda comprobada de vivienda vertical."],
    ["building-2", "Terrenos urbanos", "Con servicios municipales y frente a vialidad consolidada."],
    ["trending-up", "Potencial habitacional", "Uso de suelo compatible con vivienda o uso mixto."],
    ["route", "Buena conectividad", "Acceso a transporte, vialidades primarias y equipamiento."],
    ["layers", "Potencial para desarrollo vertical", "Superficie y normativa que permitan varios niveles."],
    ["file-text", "Situación legal clara", "Documentación disponible para revisión."]
  ];
  const esquemas = [
    ["Aportación de terreno", "El propietario aporta el predio al proyecto bajo un esquema formalizado legalmente."],
    ["Asociación con la constructora", "Se define una participación conforme al análisis técnico y financiero."],
    ["Desarrollo conjunto", "Ambas partes participan en la ejecución y en la toma de decisiones del proyecto."],
    ["Participación en el proyecto inmobiliario", "Alternativas de participación acordadas caso por caso."]
  ];

  const submit = e => {
    e.preventDefault();
    const consent = document.getElementById("l-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("ln"),
      "Teléfono": val("lt"),
      WhatsApp: val("lw"),
      Correo: val("le"),
      Ciudad: val("lc"),
      Estado: val("les"),
      "Ubicación del terreno": val("lu"),
      "Superficie (m²)": val("ls"),
      "Tipo de propiedad": val("lp"),
      "Uso de suelo": val("lus"),
      "¿Cuenta con escrituras?": val("lesc"),
      Comentarios: val("lcm"),
    };
    setSending(true);
    setError("");
    fetch(window.CTE_REST_URL, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ form: "terreno", fields, website: val("l-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 información. Intenta de nuevo o escríbenos por WhatsApp."); }
      })
      .catch(() => {
        setSending(false);
        setError("No pudimos enviar tu información. Intenta de nuevo o escríbenos por WhatsApp.");
      });
  };

  return (
    <React.Fragment>
      <PageHero image={D_L.photos.landHero}
        title="¿Tienes un terreno? Podría convertirse en un proyecto inmobiliario"
        subtitle="Analizamos terrenos para desarrollar proyectos mediante distintos esquemas de asociación. Cada predio se evalúa con criterios técnicos, legales, financieros y de mercado."
        crumbs={[{ label: "Inicio", href: "/" }, { label: "Ofrece tu Terreno" }]}
        primaryCta={{ label: "Quiero ofrecer mi terreno", href: "#formulario" }}
        secondaryCta={{ label: "Hablar con un especialista", href: "/contacto/" }} />
      <section className="section container reveal">
        <SectionHeading eyebrow="¿Qué buscamos?" title="Criterios con los que evaluamos un terreno" subtitle="No todos los predios son viables para desarrollo vertical. Estos son los factores que revisamos primero." />
        <div className="grid g3" style={{ marginTop: 48 }}>
          {criterios.map(([ic, t, d]) => (
            <div key={t} style={{ display: "flex", flexDirection: "column", gap: 12, padding: "28px 28px 30px", borderRadius: "var(--radius-lg)", background: "var(--surface-card)", border: "1px solid var(--border-subtle)", boxShadow: "var(--shadow-xs)" }}>
              <span style={{ display: "grid", placeItems: "center", width: 44, height: 44, borderRadius: "var(--radius-sm)", background: "var(--concrete-100)", color: "var(--concrete-700)" }}><Icon name={ic} size={20} /></span>
              <h3 style={{ fontSize: "var(--text-lg)" }}>{t}</h3>
              <p style={{ fontSize: "var(--text-sm)", lineHeight: "var(--lh-body)", color: "var(--text-muted)" }}>{d}</p>
            </div>
          ))}
        </div>
      </section>
      <section style={{ background: "var(--surface-inverse)" }}>
        <div className="section container reveal">
          <div className="split" style={{ alignItems: "center" }}>
            <Figure src={D_L.photos.land} alt="Terreno urbano" ratio="4 / 3" caption="FOTO · TERRENO" />
            <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
              <Eyebrow tone="dark">Esquemas de trabajo</Eyebrow>
              <h2 style={{ fontSize: "var(--text-display-m)", color: "var(--text-inverse)", letterSpacing: "var(--track-display)" }}>Distintas maneras de desarrollar tu terreno</h2>
              <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
                {esquemas.map(([t, d]) => (
                  <div key={t} style={{ padding: "20px 0", borderBottom: "1px solid var(--border-inverse)" }}>
                    <h3 style={{ fontSize: "var(--text-md)", color: "var(--text-inverse)", marginBottom: 6 }}>{t}</h3>
                    <p style={{ fontSize: "var(--text-sm)", lineHeight: "var(--lh-body)", color: "var(--text-inverse-muted)" }}>{d}</p>
                  </div>
                ))}
              </div>
              <p style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", textTransform: "uppercase", letterSpacing: "var(--track-eyebrow)", lineHeight: 1.8, color: "var(--text-inverse-faint)" }}>
                Ningún esquema implica rendimientos garantizados ni aprobación automática. Cada terreno queda sujeto a análisis técnico, legal, financiero y de mercado.
              </p>
            </div>
          </div>
        </div>
      </section>
      <section id="formulario" className="section container-narrow reveal">
        <div style={{ maxWidth: 880, margin: "0 auto", background: "var(--surface-card)", borderRadius: "var(--radius-xl)", border: "1px solid var(--border-subtle)", boxShadow: "var(--shadow-md)", padding: "clamp(28px,4vw,56px)" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 10, marginBottom: 32 }}>
            <Eyebrow>Ofrece tu terreno</Eyebrow>
            <h2 style={{ fontSize: "var(--text-display-s)", letterSpacing: "var(--track-display)" }}>Cuéntanos del predio y lo revisamos</h2>
            <p style={{ fontSize: "var(--text-sm)", lineHeight: "var(--lh-body)", color: "var(--text-muted)" }}>Con esta información hacemos una primera revisión de factibilidad y te contactamos para explicarte el resultado, sea cual sea.</p>
          </div>
          {sent ? (
            <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 14, padding: "48px 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)" }}>Recibimos tu información</h3>
              <p style={{ fontSize: "var(--text-sm)", color: "var(--text-muted)", maxWidth: 420 }}>Un integrante del equipo de desarrollo inmobiliario te contactará para revisar el predio. Sin compromiso.</p>
              <Button variant="secondary" onClick={() => setSent(false)}>Enviar otro terreno</Button>
            </div>
          ) : (
            <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 22 }}>
              <input id="l-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: 20 }}>
                <Field label="Nombre completo" required htmlFor="ln"><Input id="ln" required placeholder="Ej. Laura Domínguez" /></Field>
                <Field label="Teléfono" required htmlFor="lt"><Input id="lt" icon="phone" required placeholder="+52 55 0000 0000" /></Field>
                <Field label="WhatsApp" htmlFor="lw"><Input id="lw" icon="message-circle" placeholder="+52 55 0000 0000" /></Field>
                <Field label="Correo electrónico" required htmlFor="le"><Input id="le" icon="mail" type="email" required placeholder="tucorreo@dominio.mx" /></Field>
                <Field label="Ciudad" htmlFor="lc"><Input id="lc" placeholder="Ej. Guadalajara" /></Field>
                <Field label="Estado" htmlFor="les"><Select id="les" placeholder="Selecciona el estado" options={["Ciudad de México", "Estado de México", "Jalisco", "Nuevo León", "Puebla", "Querétaro", "Otro"]} /></Field>
                <Field label="Ubicación del terreno" htmlFor="lu" style={{ gridColumn: "span 2" }}><Input id="lu" icon="map-pin" placeholder="Calle, colonia y referencias" /></Field>
                <Field label="Superficie del terreno" hint="En m². Un aproximado es suficiente." htmlFor="ls"><Input id="ls" placeholder="Ej. 640" /></Field>
                <Field label="Tipo de propiedad" htmlFor="lp"><Select id="lp" placeholder="Selecciona una opción" options={["Terreno baldío", "Terreno con construcción", "Predio en esquina", "Varios predios contiguos"]} /></Field>
                <Field label="Uso de suelo" hint="Si no lo conoces, lo consultamos nosotros." htmlFor="lus"><Select id="lus" placeholder="Selecciona una opción" options={["Habitacional", "Mixto", "Comercial", "No lo conozco"]} /></Field>
                <Field label="¿Cuenta con escrituras?" htmlFor="lesc"><Select id="lesc" placeholder="Selecciona una opción" options={["Sí, escrituras a mi nombre", "Sí, a nombre de un tercero", "En trámite", "No"]} /></Field>
              </div>
              <Field label="Comentarios" htmlFor="lcm"><Textarea id="lcm" rows={4} placeholder="Cuéntanos cualquier detalle relevante del predio o del proyecto que imaginas." /></Field>
              <Field label="Documentación y fotografías" hint="Escrituras, uso de suelo, levantamiento o fotos del predio. (Envíanoslas por WhatsApp o correo tras enviar este formulario — aún no adjuntamos archivos aquí.)"><FileDrop /></Field>
              <Checkbox id="l-consent" label="Autorizo el tratamiento de mis datos conforme al aviso de privacidad. Entiendo que el envío de esta información no implica aprobación del proyecto." />
              {error ? <p style={{ fontSize: "var(--text-sm)", color: "var(--state-danger)", margin: 0 }}>{error}</p> : null}
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, flexWrap: "wrap", marginTop: 4 }}>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", textTransform: "uppercase", letterSpacing: "var(--track-eyebrow)", color: "var(--text-faint)" }}>Sujeto a análisis técnico, legal y financiero</span>
                <Button variant="primary" size="lg" arrow type="submit" disabled={sending}>{sending ? "Enviando…" : "Quiero ofrecer mi terreno"}</Button>
              </div>
            </form>
          )}
        </div>
      </section>
      <FinalCTA onNavigate={onNavigate} />
      <FaqSection items={[D_L.faqs[6], D_L.faqs[7], D_L.faqs[8], D_L.faqs[9]]} title="Preguntas sobre aportación de terreno" />
    </React.Fragment>
  );
}
Object.assign(window, { LandPage });