/* Contact.jsx — formulario de presupuesto */
const OBRA_TIPOS = ["Movimiento de suelos", "Pavimento de hormigón", "Pavimento asfáltico", "Adoquinado", "Mantenimiento vial", "Otro / no estoy seguro"];

const PHONES = [
  { label: "351 675-3199", tel: "+5493516753199", wa: "5493516753199" },
  { label: "351 563-7672", tel: "+5493515637672", wa: "5493515637672" },
];
const WA_MSG = encodeURIComponent("Hola RS Vial Constructora, quiero pedir un presupuesto.");

function WaIcon({ size = 17 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M17.5 14.4c-.3-.15-1.7-.84-2-.94-.27-.1-.46-.15-.65.15-.2.3-.75.93-.92 1.12-.17.2-.34.22-.63.08-.3-.15-1.25-.46-2.38-1.47-.88-.78-1.47-1.75-1.64-2.05-.17-.3-.02-.46.13-.6.13-.13.3-.34.44-.5.15-.18.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.65-1.57-.9-2.15-.23-.56-.47-.48-.65-.49l-.55-.01c-.2 0-.5.07-.77.37-.26.3-1 .98-1 2.4 0 1.4 1.03 2.76 1.17 2.95.15.2 2.03 3.1 4.9 4.35.69.3 1.22.47 1.64.6.69.22 1.31.19 1.8.12.55-.08 1.7-.7 1.94-1.36.24-.67.24-1.24.17-1.36-.07-.12-.26-.2-.55-.34zM12.04 21.5h-.01a9.45 9.45 0 0 1-4.8-1.32l-.34-.2-3.57.94.95-3.48-.22-.36a9.43 9.43 0 1 1 8 4.42zM12.05 2.5a11.4 11.4 0 0 0-9.77 17.2L1 23.5l3.9-1.02a11.4 11.4 0 1 0 7.15-19.98z" />
    </svg>
  );
}

function Field({ label, children, error, span }) {
  return (
    <label style={{ display: "flex", flexDirection: "column", gap: 7, gridColumn: span ? "1/-1" : "auto" }}>
      <span style={{ fontFamily: "var(--font-mono)", fontSize: ".74rem", letterSpacing: ".06em", textTransform: "uppercase", color: error ? "var(--accent-2)" : "var(--ink-2)" }}>
        {label}{error ? " · " + error : ""}
      </span>
      {children}
    </label>
  );
}

function Contact({ name }) {
  const [f, setF] = useState({ nombre: "", empresa: "", email: "", tel: "", tipo: "", msg: "" });
  const [err, setErr] = useState({});
  const [sent, setSent] = useState(false);
  const set = (k) => (e) => setF((s) => ({ ...s, [k]: e.target.value }));

  const inputStyle = {
    fontFamily: "var(--font-body)", fontSize: "1rem", padding: "13px 14px",
    border: "1.5px solid var(--line)", borderRadius: 4, background: "var(--paper)", color: "var(--ink)",
    width: "100%", outline: "none",
  };

  const submit = (e) => {
    e.preventDefault();
    const next = {};
    if (!f.nombre.trim()) next.nombre = "requerido";
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(f.email)) next.email = "email inválido";
    if (!f.tipo) next.tipo = "elegí una opción";
    setErr(next);
    if (Object.keys(next).length === 0) setSent(true);
  };

  return (
    <section id="contacto" className="dark-band" style={{ background: "var(--dark)", color: "var(--on-dark)" }}>
      <div className="hazard" />
      <div className="wrap sec-pad" style={{
        display: "grid", gridTemplateColumns: "1fr 1.05fr", gap: "clamp(36px,6vw,80px)", alignItems: "start",
      }}>
        <div className="contact-left">
          <SecHead num="05" kicker="Contacto" title="Pedí tu presupuesto" onDark
            intro="Contanos qué obra tenés en mente. Te respondemos con un presupuesto claro, sin vueltas." />
          <div style={{ marginTop: 36, display: "flex", flexDirection: "column", gap: 0 }}>
            {PHONES.map((ph, i) => (
              <div key={ph.tel} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, padding: "13px 0", borderTop: "1px solid var(--line-dark)" }}>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: ".78rem", textTransform: "uppercase", letterSpacing: ".06em", color: "var(--on-dark-2)" }}>Teléfono{PHONES.length > 1 ? " " + (i + 1) : ""}</span>
                <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                  <a href={`tel:${ph.tel}`} style={{ fontWeight: 600, color: "var(--on-dark)" }}>{ph.label}</a>
                  <a href={`https://wa.me/${ph.wa}?text=${WA_MSG}`} target="_blank" rel="noopener" aria-label={`WhatsApp ${ph.label}`}
                    style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 32, height: 32, borderRadius: "50%", background: "#25D366", color: "#fff", flexShrink: 0 }}>
                    <WaIcon />
                  </a>
                </div>
              </div>
            ))}
            {[
              { k: "Email", v: "rsvialcor@gmail.com", href: "mailto:rsvialcor@gmail.com" },
              { k: "Obrador", v: "Marino Gabbarini 750, Córdoba", href: "https://maps.google.com/?q=Marino+Gabbarini+750+Cordoba" },
              { k: "Oficinas", v: "Leopoldo Lugones 44, 9º B, Córdoba", href: "https://maps.google.com/?q=Leopoldo+Lugones+44+Cordoba" },
              { k: "Horarios", v: "Lun a Vie · 8:30 a 18 hs" },
            ].map((c) => (
              <div key={c.k} style={{ display: "flex", justifyContent: "space-between", gap: 16, padding: "15px 0", borderTop: "1px solid var(--line-dark)" }}>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: ".78rem", textTransform: "uppercase", letterSpacing: ".06em", color: "var(--on-dark-2)" }}>{c.k}</span>
                {c.href
                  ? <a href={c.href} target={c.href.startsWith("http") ? "_blank" : undefined} rel="noopener" style={{ fontWeight: 600, color: "var(--on-dark)" }}>{c.v}</a>
                  : <span style={{ fontWeight: 600, color: "var(--on-dark)" }}>{c.v}</span>}
              </div>
            ))}
          </div>

          <a href={`https://wa.me/${PHONES[0].wa}?text=${WA_MSG}`} target="_blank" rel="noopener"
            className="btn" style={{ marginTop: 26, background: "#25D366", color: "#fff", width: "100%" }}>
            <WaIcon size={19} /> Escribinos por WhatsApp
          </a>
        </div>

        {/* form card */}
        <div style={{ background: "var(--paper)", color: "var(--ink)", borderRadius: 6, padding: "clamp(24px,3vw,40px)" }}>
          {sent ? (
            <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", minHeight: 380, gap: 16 }}>
              <div style={{ width: 60, height: 60, borderRadius: "50%", background: "var(--accent)", display: "grid", placeItems: "center" }}>
                <svg width="30" height="30" viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="var(--on-accent)" strokeWidth="2.6" strokeLinecap="square" /></svg>
              </div>
              <h3 className="display" style={{ fontSize: "1.8rem" }}>¡Recibido!</h3>
              <p style={{ color: "var(--ink-2)", maxWidth: 340 }}>Gracias{f.nombre ? `, ${f.nombre.split(" ")[0]}` : ""}. Te vamos a contactar a la brevedad con tu presupuesto.</p>
              <button onClick={() => { setSent(false); setF({ nombre: "", empresa: "", email: "", tel: "", tipo: "", msg: "" }); }} className="btn btn-ghost" style={{ marginTop: 8 }}>Enviar otra consulta</button>
            </div>
          ) : (
            <form onSubmit={submit} noValidate style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
              <Field label="Nombre" error={err.nombre}><input style={inputStyle} value={f.nombre} onChange={set("nombre")} placeholder="Tu nombre" /></Field>
              <Field label="Empresa (opcional)"><input style={inputStyle} value={f.empresa} onChange={set("empresa")} placeholder="Razón social" /></Field>
              <Field label="Email" error={err.email}><input style={inputStyle} type="email" value={f.email} onChange={set("email")} placeholder="vos@email.com" /></Field>
              <Field label="Teléfono"><input style={inputStyle} value={f.tel} onChange={set("tel")} placeholder="+54 9 ..." /></Field>
              <Field label="Tipo de obra" error={err.tipo} span>
                <select style={{ ...inputStyle, appearance: "none", cursor: "pointer" }} value={f.tipo} onChange={set("tipo")}>
                  <option value="" disabled>Elegí una opción…</option>
                  {OBRA_TIPOS.map((o) => <option key={o} value={o}>{o}</option>)}
                </select>
              </Field>
              <Field label="Mensaje" span><textarea style={{ ...inputStyle, resize: "vertical", minHeight: 96 }} value={f.msg} onChange={set("msg")} placeholder="Ubicación, metros aproximados, plazos…" /></Field>
              <button type="submit" className="btn btn-accent" style={{ gridColumn: "1/-1", padding: "15px" }}>Solicitar presupuesto <Arrow /></button>
            </form>
          )}
        </div>
      </div>
      <style>{`
        @media (max-width:840px){ #contacto .wrap{grid-template-columns:1fr!important} }
        @media (max-width:480px){ #contacto form{grid-template-columns:1fr!important} }
      `}</style>
    </section>
  );
}
Object.assign(window, { Contact });