/* Contacto Page */

// Google Apps Script URL — replace with your deployment URL after setting up
// Instructions: Extensions > Apps Script > paste script > Deploy as Web App
const APPS_SCRIPT_URL = "https://script.google.com/macros/s/YOUR_SCRIPT_ID/exec";

const ContactoPage = () => (
  <div>
    <div style={{ background: '#fff', padding: '52px 0 20px', textAlign: 'center' }}>
      <div className="container">
        <span className="sec-label sec-label-green">Contáctanos</span>
        <h2>Estamos aquí para <span style={{ color: 'var(--or)' }}>acompañarte</span></h2>
        <span className="heading-bar" style={{ background: 'var(--or)', margin: '10px auto 20px' }}></span>
        <p style={{ maxWidth: 520, margin: '0 auto' }}>Cuéntanos qué estás buscando preparar y te recomendamos exactamente lo que necesitas.</p>
      </div>
    </div>

    <section style={{ background: 'var(--bg)' }}>
      <div className="container">
        <div className="grid-2" style={{ gap: 'clamp(20px,4vw,48px)' }}>
          {/* Left — Info */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {/* WhatsApp card */}
            <a href={waLink("")} target="_blank" rel="noopener noreferrer" style={{ background: '#EAF5D6', borderRadius: 'var(--r-lg)', padding: '18px 20px', display: 'flex', alignItems: 'center', gap: 14, textDecoration: 'none', border: '1px solid var(--gr)' }}>
              <div style={{ width: 44, height: 44, borderRadius: 10, background: '#25D366', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <WhatsAppIcon size={22} />
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: 'var(--font-d)', fontWeight: 700, fontSize: 14, color: 'var(--t1)' }}>Escríbenos por WhatsApp</div>
                <div style={{ fontSize: 13, color: 'var(--t2)' }}>+57 319 564 0848 — Respuesta inmediata</div>
              </div>
              <span style={{ fontFamily: 'var(--font-d)', fontWeight: 700, fontSize: 13, color: 'var(--gr)' }}>Chatear →</span>
            </a>

            {/* Horario */}
            <div style={{ borderRadius: 'var(--r-lg)', border: '1px solid var(--bd)', padding: '18px 20px', display: 'flex', alignItems: 'center', gap: 14, background: '#fff' }}>
              <div style={{ width: 44, height: 44, borderRadius: 10, background: 'var(--or-lt)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <Icon name="clock" size={20} color="var(--or)" />
              </div>
              <div>
                <div style={{ fontFamily: 'var(--font-d)', fontWeight: 700, fontSize: 14, color: 'var(--t1)' }}>Horarios de atención</div>
                <div style={{ fontSize: 13, color: 'var(--t2)' }}>Lunes a Viernes: 9:30am – 6:00pm</div>
                <div style={{ fontSize: 13, color: 'var(--t2)' }}>Sábados: 9:30am – 4:00pm</div>
                <div style={{ fontSize: 13, color: 'var(--t3)' }}>Domingos: Cerrado</div>
              </div>
            </div>

            {/* Email */}
            <div style={{ borderRadius: 'var(--r-lg)', border: '1px solid var(--bd)', padding: '18px 20px', display: 'flex', alignItems: 'center', gap: 14, background: '#fff' }}>
              <div style={{ width: 44, height: 44, borderRadius: 10, background: 'var(--or-lt)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <Icon name="mail" size={20} color="var(--or)" />
              </div>
              <div>
                <div style={{ fontFamily: 'var(--font-d)', fontWeight: 700, fontSize: 14, color: 'var(--t1)' }}>Correo electrónico</div>
                <div style={{ fontSize: 13, color: 'var(--t2)' }}>Gerencia@lkmejia.com</div>
              </div>
            </div>

            {/* Location */}
            <div style={{ borderRadius: 'var(--r-lg)', border: '1px solid var(--bd)', padding: '18px 20px', display: 'flex', alignItems: 'center', gap: 14, background: '#fff' }}>
              <div style={{ width: 44, height: 44, borderRadius: 10, background: 'var(--or-lt)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <Icon name="map" size={20} color="var(--or)" />
              </div>
              <div>
                <div style={{ fontFamily: 'var(--font-d)', fontWeight: 700, fontSize: 14, color: 'var(--t1)' }}>Ubicación</div>
                <div style={{ fontSize: 13, color: 'var(--t2)' }}>Carrera 57C #128-27, Bogotá, Colombia</div>
                <a href="https://maps.app.goo.gl/qcyabs1e1LR2tbnYA" target="_blank" rel="noopener noreferrer" style={{ fontSize: 12, color: 'var(--gr)', fontWeight: 600, marginTop: 2, display: 'inline-block' }}>Abrir en Maps ↗</a>
              </div>
            </div>

            {/* Map embed */}
            <div style={{ borderRadius: 'var(--r-lg)', overflow: 'hidden', border: '1px solid var(--bd)', height: 220, position: 'relative' }}>
              <iframe
                title="LK Mejia ubicación"
                src="https://maps.google.com/maps?q=Carrera+57C+%23128-27,+Bogot%C3%A1,+Colombia&z=16&output=embed"
                width="100%"
                height="220"
                style={{ border: 0, display: 'block' }}
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
              ></iframe>
            </div>
          </div>

          {/* Right — Form */}
          <div style={{ background: '#fff', borderRadius: 'var(--r-lg)', border: '1px solid var(--bd)', padding: 28, boxShadow: 'var(--sh)' }}>
            <div style={{ fontFamily: 'var(--font-d)', fontWeight: 700, fontSize: 20, color: 'var(--t1)', marginBottom: 20 }}>Envíanos un mensaje</div>
            <ContactForm />
          </div>
        </div>
      </div>
    </section>
  </div>
);

const ContactForm = () => {
  const [sent, setSent] = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  const [form, setForm] = React.useState({ nombre: '', telefono: '', email: '', interes: 'Talleres presenciales', mensaje: '' });

  const inputStyle = {
    fontFamily: 'var(--font-b)', fontSize: 14, color: 'var(--t1)',
    background: 'var(--bg)', border: '1.5px solid var(--bd)', borderRadius: 'var(--r)',
    padding: '11px 14px', outline: 'none', width: '100%',
    transition: 'border-color 180ms',
  };
  const labelStyle = { fontFamily: 'var(--font-d)', fontWeight: 700, fontSize: 13, color: 'var(--t1)', marginBottom: 5, display: 'block' };

  const handleSubmit = (e) => {
    e.preventDefault();
    setLoading(true);
    // Build mailto link as primary delivery method
    const subject = encodeURIComponent(`Mensaje web LK Mejia — ${form.nombre} — ${form.interes}`);
    const body = encodeURIComponent(
      `Nombre: ${form.nombre}\nTeléfono: ${form.telefono}\nEmail: ${form.email}\nInterés: ${form.interes}\n\nMensaje:\n${form.mensaje}`
    );
    window.open(`mailto:gerencia@lkmejia.com?subject=${subject}&body=${body}`, '_blank');
    setTimeout(() => { setLoading(false); setSent(true); }, 600);
  };

  if (sent) {
    return (
      <div style={{ textAlign: 'center', padding: 40 }}>
        <div style={{ width: 60, height: 60, borderRadius: '50%', background: 'var(--gr-lt)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 16px' }}>
          <Icon name="check" size={28} color="var(--gr)" />
        </div>
        <h3 style={{ marginBottom: 8 }}>¡Mensaje enviado!</h3>
        <p style={{ fontSize: 14 }}>Se abrió tu cliente de correo con el mensaje listo para enviar a gerencia@lkmejia.com. También puedes escribirnos directamente por WhatsApp.</p>
        <a href={waLink("más información")} target="_blank" rel="noopener noreferrer" className="btn btn-md btn-green" style={{ marginTop: 16, display: 'inline-flex' }}>
          <WhatsAppIcon size={16} /> Escribir por WhatsApp
        </a>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 14 }}>
        <div><label style={labelStyle}>Nombre *</label><input style={inputStyle} placeholder="Tu nombre" required value={form.nombre} onChange={e => setForm({ ...form, nombre: e.target.value })} /></div>
        <div><label style={labelStyle}>Teléfono</label><input style={inputStyle} placeholder="+57 ..." value={form.telefono} onChange={e => setForm({ ...form, telefono: e.target.value })} /></div>
      </div>
      <div style={{ marginBottom: 14 }}><label style={labelStyle}>Correo electrónico *</label><input style={inputStyle} type="email" placeholder="tu@correo.com" required value={form.email} onChange={e => setForm({ ...form, email: e.target.value })} /></div>
      <div style={{ marginBottom: 14 }}>
        <label style={labelStyle}>¿Qué te interesa?</label>
        <select style={{ ...inputStyle, cursor: 'pointer' }} value={form.interes} onChange={e => setForm({ ...form, interes: e.target.value })}>
          <option>Talleres presenciales</option>
          <option>Compra de insumos</option>
          <option>Taller personalizado</option>
          <option>Asesoría técnica</option>
          <option>Otro</option>
        </select>
      </div>
      <div style={{ marginBottom: 20 }}><label style={labelStyle}>Mensaje *</label><textarea style={{ ...inputStyle, resize: 'vertical', minHeight: 100 }} placeholder="Cuéntanos qué necesitas..." required value={form.mensaje} onChange={e => setForm({ ...form, mensaje: e.target.value })}></textarea></div>
      <button type="submit" className="btn btn-lg btn-orange" style={{ width: '100%', justifyContent: 'center' }} disabled={loading}>
        {loading ? 'Preparando...' : <><Icon name="send" size={16} color="#fff" /> Enviar a gerencia@lkmejia.com</>}
      </button>
    </form>
  );
};

Object.assign(window, { ContactoPage, ContactForm });