/* Torre Auro — Contact page (editorial) */

function ContactPage() {
  const [submitted, setSubmitted] = useState(false);
  const [form, setForm] = useState({ nombre:'', email:'', tel:'', mensaje:'', nivel:'' });

  function up(k) { return (e) => setForm({ ...form, [k]: e.target.value }); }
  function onSubmit(e) {
    e.preventDefault();
    setSubmitted(true);
  }

  return (
    <div className="contact-page">
      <section className="contact-banner">
        <div className="container">
          <div className="kicker light">/ Asesoría comercial</div>
          <h1 style={{ marginTop:24 }}>Agendar <em>asesoría</em><br/>comercial.</h1>
          <p>Cuéntanos sobre tu giro, equipo y expectativas. Un asesor te orienta sobre el nivel adecuado, te comparte planos y coordina la visita. Respuesta en menos de 24 horas.</p>
        </div>
      </section>

      <section className="section tight">
        <div className="container">
          <div className="contact-grid">
            <div>
              {submitted ? (
                <div style={{
                  background:'#fff',border:'1px solid var(--line)',padding:'72px 56px',textAlign:'center'
                }}>
                  <div style={{fontFamily:'var(--serif)', fontSize:96, fontStyle:'italic', color:'var(--gold)', lineHeight:1, marginBottom:24}}>✓</div>
                  <h3 style={{ fontFamily:'var(--serif)', fontSize:34, color:'var(--navy)', margin:'0 0 16px', fontWeight:400, letterSpacing:'-0.01em' }}>
                    Solicitud <em style={{fontStyle:'italic', color:'var(--gold-deep)'}}>recibida.</em>
                  </h3>
                  <p style={{ color:'var(--muted)', maxWidth:420, margin:'0 auto', lineHeight:1.75, fontSize:15.5 }}>
                    Un asesor de Torre Auro se pondrá en contacto en menos de 24 horas para coordinar la visita y compartirte los planos del nivel que te interesa.
                  </p>
                  <button className="btn btn-outline" style={{ marginTop:36 }} onClick={() => navigate('/')}>
                    Volver al directorio
                  </button>
                </div>
              ) : (
                <form onSubmit={onSubmit}>
                  <div className="form-row">
                    <div className="field">
                      <label htmlFor="nombre">Nombre</label>
                      <input id="nombre" required value={form.nombre} onChange={up('nombre')} placeholder="Tu nombre completo" />
                    </div>
                    <div className="field">
                      <label htmlFor="email">Correo</label>
                      <input id="email" type="email" required value={form.email} onChange={up('email')} placeholder="tu@empresa.com" />
                    </div>
                  </div>
                  <div className="form-row">
                    <div className="field">
                      <label htmlFor="tel">Teléfono</label>
                      <input id="tel" type="tel" value={form.tel} onChange={up('tel')} placeholder="229 000 0000" />
                    </div>
                    <div className="field">
                      <label htmlFor="nivel">Nivel de interés</label>
                      <select id="nivel" value={form.nivel} onChange={up('nivel')}>
                        <option value="">Aún no lo sé — orientarme</option>
                        <option>Planta baja · Retail</option>
                        <option>Nivel 1 · Salud premium</option>
                        <option>Nivel 2 · Salud + servicios</option>
                        <option>Nivel 3 · Mixto inteligente</option>
                        <option>Nivel 4 · Corporativo medio</option>
                        <option>Nivel 5 · Corporativo premium</option>
                        <option>Nivel 6 · Planta completa</option>
                      </select>
                    </div>
                  </div>
                  <div className="field">
                    <label htmlFor="mensaje">Mensaje</label>
                    <textarea id="mensaje" value={form.mensaje} onChange={up('mensaje')} placeholder="Cuéntanos brevemente sobre tu giro, equipo y expectativas." />
                  </div>
                  <div style={{ display:'flex', gap:16, flexWrap:'wrap', marginTop:8 }}>
                    <button type="submit" className="btn btn-navy">
                      <Icon n="ti-send" /> Enviar solicitud
                    </button>
                    <button type="button" className="btn btn-outline" onClick={() => openChat('general')}>
                      <Icon n="ti-message-circle" /> Hablar ahora
                    </button>
                  </div>
                </form>
              )}
            </div>

            <aside className="contact-side">
              <h3>Contacto <em>directo</em></h3>
              <div className="contact-line">
                <Icon n="ti-phone" />
                <div>
                  <div className="k">Teléfono</div>
                  <div className="v">229 302 7197</div>
                </div>
              </div>
              <div className="contact-line">
                <Icon n="ti-mail" />
                <div>
                  <div className="k">Correo</div>
                  <div className="v">contacto@torreauro.com</div>
                </div>
              </div>
              <div className="contact-line">
                <Icon n="ti-map-pin" />
                <div>
                  <div className="k">Dirección</div>
                  <div className="v">Blvd. Adolfo Ruiz Cortines<br/>Costa de Oro, Boca del Río, Ver.</div>
                </div>
              </div>
              <div className="contact-line">
                <Icon n="ti-clock" />
                <div>
                  <div className="k">Horario comercial</div>
                  <div className="v">Lun – Vie · 9:00 a 19:00<br/>Sáb · 10:00 a 14:00</div>
                </div>
              </div>

              <div style={{
                marginTop:32, padding:22, background:'#fff', border:'1px solid var(--line)',
                fontSize:13.5, color:'var(--muted)', lineHeight:1.65
              }}>
                <div style={{ fontFamily:'var(--mono)', color:'var(--gold-deep)', fontWeight:600, fontSize:10, letterSpacing:'.16em', textTransform:'uppercase', marginBottom:10 }}>
                  / Respuesta en 24 horas
                </div>
                Una vez recibida tu solicitud, un asesor coordina visita, comparte planos y revisa condiciones. Sin compromiso.
              </div>
            </aside>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { ContactPage });