/* ===== CONTACTO / PQRS ===== */
function ContactoPage() {
  const [form, setForm] = React.useState({
    name: '', phone: '', city: '', service: '', message: '', tipo: 'peticion',
  });
  const [status, setStatus] = React.useState('idle');

  const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const onSubmit = (e) => {
    e.preventDefault();
    setStatus('sending');
    const msg = `Hola Polarizados Ya, soy ${form.name}.\nTeléfono: ${form.phone}\nCiudad: ${form.city}\nServicio: ${form.service}\nMensaje: ${form.message}`;
    setTimeout(() => {
      window.open(`https://wa.me/573106018633?text=${encodeURIComponent(msg)}`, '_blank');
      setStatus('sent');
    }, 600);
  };

  const services = ['Polarizado', 'Película de Seguridad', 'PPF', 'Wrap', 'Detailing', 'Accesorio', 'Otro'];
  const cities = ['Bogotá Norte', 'Bogotá Centro', 'Chía', 'Cali', 'Medellín', 'Villavicencio', 'Miami', 'Otra'];

  return (
    <>
      <PageHero
        eyebrow="Contacto / PQRS"
        title="Hablemos."
        accent="Respuesta en 2 horas en horario hábil."
        subtitle="Formulario rápido — al enviar, abrimos WhatsApp con tu información lista para nuestro equipo. También puedes radicar peticiones, quejas, reclamos o sugerencias."
      />

      <section className="page-content">
        <div className="container">
          <div className="contact-grid">
            <form className="contact-form reveal" onSubmit={onSubmit}>
              <div className="form-row">
                <div className="form-field">
                  <label htmlFor="cf-name">Nombre completo *</label>
                  <input id="cf-name" type="text" value={form.name} onChange={update('name')} required placeholder="Tu nombre" />
                </div>
                <div className="form-field">
                  <label htmlFor="cf-phone">Teléfono *</label>
                  <input id="cf-phone" type="tel" value={form.phone} onChange={update('phone')} required placeholder="+57 300 000 0000" />
                </div>
              </div>
              <div className="form-row">
                <div className="form-field">
                  <label htmlFor="cf-city">Ciudad / Sede más cercana *</label>
                  <select id="cf-city" value={form.city} onChange={update('city')} required>
                    <option value="">Selecciona una sede</option>
                    {cities.map((c) => <option key={c} value={c}>{c}</option>)}
                  </select>
                </div>
                <div className="form-field">
                  <label htmlFor="cf-service">Servicio de interés *</label>
                  <select id="cf-service" value={form.service} onChange={update('service')} required>
                    <option value="">Selecciona un servicio</option>
                    {services.map((s) => <option key={s} value={s}>{s}</option>)}
                  </select>
                </div>
              </div>
              <div className="form-field">
                <label htmlFor="cf-msg">Mensaje (opcional)</label>
                <textarea id="cf-msg" rows="4" value={form.message} onChange={update('message')} placeholder="Cuéntanos detalles del vehículo o lo que estás buscando." />
              </div>

              <div className="form-foot">
                <p className="form-note">Al enviar abriremos WhatsApp con los datos del formulario precargados.</p>
                <button type="submit" className="btn btn-whatsapp" disabled={status === 'sending'}>
                  {status === 'sent' ? '✓ Enviado' : (
                    <><Whatsapp /> Enviar por WhatsApp</>
                  )}
                </button>
              </div>
            </form>

            <aside className="contact-aside reveal" data-delay="2">
              <div className="aside-block">
                <span className="eyebrow">Respuesta en 2 horas</span>
                <h3>En horario hábil</h3>
                <p>Nuestro equipo responde solicitudes en menos de 2 horas durante el horario laboral. Fuera de horario, te respondemos a primera hora del día siguiente.</p>
              </div>
              <div className="aside-block">
                <span className="eyebrow">WhatsApp principal</span>
                <h3>+57 310 601 8633</h3>
                <a href="https://wa.me/573106018633" className="aside-link" target="_blank" rel="noopener">Abrir WhatsApp <Arrow /></a>
              </div>
              <div className="aside-block">
                <span className="eyebrow">Garantías reales</span>
                <h3>Por escrito · a tu nombre</h3>
                <p>Polarizados con garantía de por vida. PPF hasta 10 años. Cada instalación queda registrada y firmada.</p>
              </div>
            </aside>
          </div>
        </div>
      </section>

      <section className="page-content" style={{ paddingTop: 0 }}>
        <div className="container">
          <SectionHead
            eyebrow="PQRS"
            title="Peticiones, Quejas, Reclamos"
            accent="y Sugerencias."
            subtitle="Canal formal para tramitar cualquier solicitud relacionada con nuestros servicios. Tiempo de respuesta: dentro de las próximas 2 horas en horario hábil."
          />
          <div className="pqrs-grid reveal">
            {[
              { letter: 'P', title: 'Petición', desc: 'Solicitud de información o servicio adicional.' },
              { letter: 'Q', title: 'Queja', desc: 'Inconformidad con el servicio prestado.' },
              { letter: 'R', title: 'Reclamo', desc: 'Exigencia de corrección o compensación.' },
              { letter: 'S', title: 'Sugerencia', desc: 'Propuesta de mejora al servicio.' },
            ].map((p) => (
              <div className="pqrs-card" key={p.letter}>
                <div className="pqrs-letter">{p.letter}</div>
                <h3>{p.title}</h3>
                <p>{p.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

window.ContactoPage = ContactoPage;