// KSANET — Contacto

function ContactPage() {
  useReveal();
  return (
    <>
      <Header active="contacto"/>

      <section className="page-head">
        <div className="container">
          <span className="eyebrow"><span className="dot"></span>Contacto</span>
          <h1 className="h-display" style={{ fontSize: 'clamp(46px, 6vw, 88px)', marginTop: 18 }}>
            Hablemos.<br/><em>Sin venta encubierta.</em>
          </h1>
          <p className="lede" style={{ marginTop: 28 }}>
            Una llamada de 20 minutos. Te explicamos cómo funciona, qué cooperativas están abiertas y cuál encaja con tu plan. Decides después.
          </p>
        </div>
      </section>

      <section className="section paper" style={{ paddingTop: 60 }}>
        <div className="container">
          <div className="contact-grid">
            <div className="contact-info">
              <div className="contact-block">
                <span className="lbl">Llámanos</span>
                <span className="val"><a href="tel:+34916666608">+34 916 666 608</a></span>
                <p className="body" style={{ marginTop: 10 }}>De lunes a viernes · 9:00–19:00</p>
              </div>
              <div className="contact-block">
                <span className="lbl">Escríbenos</span>
                <span className="val"><a href="mailto:hola@ksanet.es">hola@ksanet.es</a></span>
                <p className="body" style={{ marginTop: 10 }}>Respuesta en menos de 24 horas laborables</p>
              </div>
              <div className="contact-block" style={{ borderBottom: 'none' }}>
                <span className="lbl">Visítanos</span>
                <span className="val">Calle Marie Curie, 7<br/>Edificio Beta · Of. 3.3</span>
                <p className="body" style={{ marginTop: 10 }}>28521 Rivas-Vaciamadrid · Madrid<br/>Cita previa por teléfono o email</p>
              </div>
            </div>

            <form className="contact-form" onSubmit={(e) => { e.preventDefault(); alert('Recibido. Te llamamos en 24h.'); }}>
              <h3>¿Cómo te gustaría que contactemos?</h3>
              <div className="field-row">
                <div className="field"><label>Nombre y apellidos</label><input type="text" required/></div>
                <div className="field"><label>Email</label><input type="email" required/></div>
              </div>
              <div className="field-row">
                <div className="field"><label>Teléfono</label><input type="tel" required/></div>
                <div className="field">
                  <label>Promoción de interés</label>
                  <select>
                    <option>Sin preferencia</option>
                    {PROMOS.map(p => <option key={p.id}>{p.name} · {p.province}</option>)}
                    <option>Otra · proponer cooperativa nueva</option>
                  </select>
                </div>
              </div>
              <div className="field-row">
                <div className="field">
                  <label>Cuándo te interesa</label>
                  <select>
                    <option>Lo antes posible</option>
                    <option>En 3 meses</option>
                    <option>En 6–12 meses</option>
                    <option>Solo informarme por ahora</option>
                  </select>
                </div>
                <div className="field">
                  <label>Cuántas personas vivirían</label>
                  <select>
                    <option>1</option><option>2</option><option>3</option><option>4 o más</option>
                  </select>
                </div>
              </div>
              <div className="field">
                <label>Cuéntanos brevemente</label>
                <textarea rows="3" placeholder="Por ejemplo: pareja con un bebé, buscamos 3 dorm en la zona sur de Madrid…"></textarea>
              </div>
              <label className="checkbox" style={{ marginTop: 10 }}>
                <input type="checkbox" required/>
                <span>Acepto la política de privacidad y el contacto comercial.</span>
              </label>
              <button type="submit" className="btn btn-primary" style={{ marginTop: 24, width: '100%', justifyContent: 'space-between' }}>
                Enviar solicitud <span className="btn-arrow">→</span>
              </button>
            </form>
          </div>

          <div className="office">
            <div className="office-text">
              <span className="eyebrow" style={{ color: 'rgba(243,232,218,0.7)' }}><span className="dot" style={{ background: 'var(--silver)' }}></span>Nuestra sede</span>
              <h2 className="h-1" style={{ marginTop: 18 }}>
                Cuarenta años<br/><em>en la misma calle.</em>
              </h2>
              <p className="lede" style={{ marginTop: 24, color: 'rgba(243,232,218,0.78)' }}>
                Edificio Beta de Rivas, oficina 3.3. Aquí pasan los socios, los consejos rectores, los auditores. Aquí firmamos cada acta. Si vienes, te enseñamos cómo funciona la maquinaria.
              </p>
            </div>
            <div className="office-map">
              <svg viewBox="0 0 400 400" preserveAspectRatio="xMidYMid slice" style={{ width: '100%', height: '100%' }}>
                <rect width="400" height="400" fill="#1a1715"/>
                <g stroke="#2a2522" strokeWidth="14">
                  <line x1="0" y1="160" x2="400" y2="200"/>
                  <line x1="0" y1="280" x2="400" y2="260"/>
                  <line x1="120" y1="0" x2="100" y2="400"/>
                  <line x1="280" y1="0" x2="320" y2="400"/>
                </g>
                <g stroke="#252220" strokeWidth="6">
                  <line x1="0" y1="80" x2="400" y2="100"/>
                  <line x1="200" y1="0" x2="220" y2="400"/>
                </g>
                <rect x="40" y="280" width="60" height="60" fill="#4a5a3a" opacity="0.4"/>
                <circle cx="200" cy="200" r="14" fill="#8C1E22"/>
                <circle cx="200" cy="200" r="5" fill="#f3e8da"/>
                <text x="200" y="240" fontSize="11" fontFamily="var(--tight)" fontWeight="500" fill="#f3e8da" textAnchor="middle">KSANET · Edificio Beta</text>
                <text x="200" y="256" fontSize="9" fontFamily="var(--mono)" fill="rgba(243,232,218,0.6)" letterSpacing="2" textAnchor="middle">RIVAS-VACIAMADRID</text>
              </svg>
            </div>
          </div>
        </div>
      </section>

      <Footer/>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<ContactPage/>);