// CONTACT — Artesanías Chepe

const Contact = ({ onNav }) => {
  const [sent, setSent] = useState(false);
  const [form, setForm] = useState({ name: "", email: "", phone: "", topic: "Consulta general", message: "" });
  const upd = (k, v) => setForm(f => ({ ...f, [k]: v }));

  return (
    <div className="page" data-screen-label="08 Contacto">
      <section style={{ padding: "20px 20px 0" }}>
        <div className="eyebrow">Conversemos</div>
        <h1 className="display" style={{ fontSize: "clamp(56px, 16vw, 92px)", margin: "12px 0 14px", lineHeight: 0.95 }}>
          Hola, soy <span className="italic" style={{ color: "var(--clay)" }}>Lucía</span>.
        </h1>
        <p style={{ color: "var(--ink-80)", fontSize: 16, lineHeight: 1.55, maxWidth: 360 }}>
          Asesoro proyectos, mayoreo y pedidos especiales. Respondo personalmente por WhatsApp y correo.
        </p>
      </section>

      {/* Quick contact cards */}
      <section className="container" style={{ paddingTop: 28 }}>
        <div className="stack-3">
          <a className="card" style={{
            display: "flex", alignItems: "center", gap: 16,
            padding: 18, borderRadius: 16,
            background: "#1a8e4a", color: "var(--bone)",
          }} onClick={(e) => e.preventDefault()} href="#">
            <div style={{ width: 48, height: 48, borderRadius: 999, background: "color-mix(in srgb, var(--bone) 18%, transparent)", display: "grid", placeItems: "center" }}>
              <Icon name="wa" size={22} stroke={1.8} />
            </div>
            <div style={{ flex: 1 }}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", opacity: 0.8 }}>Más rápido</div>
              <div className="serif" style={{ fontSize: 22, marginTop: 2 }}>WhatsApp directo</div>
              <div className="mono" style={{ fontSize: 11, marginTop: 4 }}>+52 999 123 4567</div>
            </div>
            <Icon name="arrow" size={18} />
          </a>
          <a className="card hair" style={{ display: "flex", alignItems: "center", gap: 16, padding: 18, borderRadius: 16, background: "var(--paper)" }} href="#" onClick={(e) => e.preventDefault()}>
            <div style={{ width: 48, height: 48, borderRadius: 999, background: "var(--ink)", color: "var(--bone)", display: "grid", placeItems: "center" }}>
              <Icon name="mail" size={20} />
            </div>
            <div style={{ flex: 1 }}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-60)" }}>Correo</div>
              <div className="serif" style={{ fontSize: 22, marginTop: 2 }}>hola@chepe.mx</div>
            </div>
            <Icon name="arrow" size={18} />
          </a>
          <a className="card hair" style={{ display: "flex", alignItems: "center", gap: 16, padding: 18, borderRadius: 16, background: "var(--paper)" }} href="#" onClick={(e) => e.preventDefault()}>
            <div style={{ width: 48, height: 48, borderRadius: 999, background: "var(--ink)", color: "var(--bone)", display: "grid", placeItems: "center" }}>
              <Icon name="phone" size={20} />
            </div>
            <div style={{ flex: 1 }}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-60)" }}>Llamada</div>
              <div className="serif" style={{ fontSize: 22, marginTop: 2 }}>+52 999 123 4567</div>
            </div>
            <Icon name="arrow" size={18} />
          </a>
        </div>
      </section>

      {/* Mapa / showroom */}
      <section className="container" style={{ paddingTop: 36 }}>
        <SectionHead eyebrow="Showroom" title="Visítanos" />
        <div className="card hair" style={{ borderRadius: 18, overflow: "hidden" }}>
          <div className="ph ph-warm" style={{
            aspectRatio: "16/10", position: "relative", fontSize: 9,
          }}>
            <span style={{ position: "absolute", bottom: 16, left: 16 }}>Mapa — Mérida Centro</span>
            <span style={{
              position: "absolute", top: "44%", left: "48%",
              width: 18, height: 18, borderRadius: 999, background: "var(--clay)",
              border: "3px solid var(--bone)", boxShadow: "0 4px 12px rgba(0,0,0,0.25)",
            }}></span>
          </div>
          <div style={{ padding: 18 }}>
            <div className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-60)" }}>Taller-tienda</div>
            <div className="serif" style={{ fontSize: 22, marginTop: 4 }}>Calle 60 × 41, Centro</div>
            <p style={{ color: "var(--ink-80)", fontSize: 14, lineHeight: 1.5, marginTop: 8, marginBottom: 14 }}>
              Mérida, Yucatán, 97000<br />Lun – Sáb · 10:00 – 19:00
            </p>
            <button className="btn btn-ghost btn-sm">Cómo llegar <Icon name="arrow" size={14} /></button>
          </div>
        </div>
      </section>

      {/* Form */}
      <section className="container" style={{ paddingTop: 48 }}>
        <SectionHead eyebrow="Formulario" title="O escríbenos aquí" />
        {sent ? (
          <div className="card hair" style={{ padding: 28, borderRadius: 18, textAlign: "center" }}>
            <div style={{ width: 64, height: 64, borderRadius: 999, background: "var(--clay)", color: "var(--bone)", display: "grid", placeItems: "center", margin: "0 auto 16px" }}>
              <Icon name="check" size={28} stroke={2} />
            </div>
            <h3 className="display" style={{ fontSize: 28, margin: 0 }}>Mensaje enviado.</h3>
            <p style={{ color: "var(--ink-80)", fontSize: 14, marginTop: 8 }}>Te respondemos hoy mismo si llegó antes de las 18 hrs.</p>
          </div>
        ) : (
          <div className="stack-4">
            <div className="field"><label>Nombre</label>
              <input value={form.name} onChange={e => upd("name", e.target.value)} placeholder="Tu nombre" />
            </div>
            <div className="field"><label>Correo</label>
              <input type="email" value={form.email} onChange={e => upd("email", e.target.value)} placeholder="tu@correo.mx" />
            </div>
            <div className="field"><label>WhatsApp (opcional)</label>
              <input value={form.phone} onChange={e => upd("phone", e.target.value)} placeholder="999 123 4567" />
            </div>
            <div className="field"><label>Tema</label>
              <select value={form.topic} onChange={e => upd("topic", e.target.value)}>
                <option>Consulta general</option>
                <option>Pedido especial / a medida</option>
                <option>Mayoreo</option>
                <option>Proyecto comercial</option>
                <option>Servicio postventa</option>
              </select>
            </div>
            <div className="field"><label>Mensaje</label>
              <textarea rows={4} value={form.message} onChange={e => upd("message", e.target.value)} placeholder="Cuéntanos en qué te podemos ayudar..." />
            </div>
            <button className="btn btn-primary btn-block" style={{ height: 54 }} onClick={() => setSent(true)}>
              Enviar mensaje <Icon name="arrow" size={16} />
            </button>
          </div>
        )}
      </section>

      <Footer onNav={onNav} />
    </div>
  );
};

window.Contact = Contact;