// /contacto

function ContactoPage() {
  const [sent, setSent] = React.useState(false);
  return (
    <Layout active="">
      <PageHero
        crumb={[{ label:'Inicio', href:'index.html' }, { label:'Contacto' }]}
        eyebrow="Hablemos"
        title="¿Tienes una pregunta? Te respondemos en minutos."
        subtitle="Nuestro colaborador de Atención lee tu mensaje y te responde en segundos. Si tu duda necesita un humano, lo escala automáticamente."
      />

      <section className="section" data-screen-label="Contact form">
        <div className="container" style={{
          maxWidth: 1080, display:'grid', gridTemplateColumns:'minmax(0, 1.4fr) minmax(0, 1fr)', gap: 56,
        }}>
          <div>
            <h2 className="h-section" style={{ fontSize: 26, marginBottom: 22 }}>Envíanos un mensaje</h2>
            {!sent ? (
              <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} className="form-grid">
                <div>
                  <label className="form-label">Nombre</label>
                  <input type="text" required placeholder="Ej. María García"/>
                </div>
                <div>
                  <label className="form-label">Empresa o negocio</label>
                  <input type="text" placeholder="Ej. Boutique Lina"/>
                </div>
                <div>
                  <label className="form-label">Email</label>
                  <input type="email" required placeholder="tu@email.com"/>
                </div>
                <div>
                  <label className="form-label">Industria</label>
                  <select>
                    <option>Selecciona…</option>
                    <option>Inmobiliario</option>
                    <option>E-commerce</option>
                    <option>Alimentos y bebidas</option>
                    <option>Software y tecnología</option>
                    <option>Belleza y cuidado</option>
                    <option>Educación</option>
                    <option>Servicios profesionales</option>
                    <option>Otro</option>
                  </select>
                </div>
                <div className="full">
                  <label className="form-label">¿En qué te podemos ayudar?</label>
                  <textarea rows={5} placeholder="Cuéntanos brevemente qué buscas automatizar en tu negocio…"/>
                  <div className="form-help">Mientras más contexto nos des, mejor te responde nuestro colaborador.</div>
                </div>
                <div className="full" style={{ display:'flex', alignItems:'center', gap: 12 }}>
                  <button type="submit" className="btn btn-primary btn-lg">Enviar mensaje <Icon.arrow/></button>
                  <span className="form-help">Respuesta en &lt; 1 min · gestionado por colaborador IA</span>
                </div>
              </form>
            ) : (
              <div style={{
                background:'color-mix(in oklab, var(--success), white 90%)',
                border:'1px solid color-mix(in oklab, var(--success), white 70%)',
                padding: 28, borderRadius: 18,
              }}>
                <div style={{ fontSize: 28, marginBottom: 6 }}>✓</div>
                <h3 style={{ fontSize: 20, marginBottom: 8 }}>Mensaje recibido</h3>
                <p style={{ fontSize: 14.5, color:'var(--ink-soft)' }}>
                  Nuestro colaborador de Atención ya está leyendo tu mensaje. Te llegará respuesta al correo en menos de 1 minuto.
                </p>
              </div>
            )}
          </div>

          <aside style={{ display:'flex', flexDirection:'column', gap: 18 }}>
            <div className="card" style={{ padding: 22 }}>
              <h3 className="h-card">Otros canales</h3>
              <ul style={{ listStyle:'none', padding: 0, margin: '12px 0 0', display:'flex', flexDirection:'column', gap: 10 }}>
                <li><b>Soporte:</b> hola@aicompany.app</li>
                <li><b>Prensa:</b> prensa@aicompany.app</li>
                <li><b>Partnership:</b> partners@aicompany.app</li>
                <li><b>WhatsApp:</b> +52 (55) 0000-0000</li>
              </ul>
            </div>
            <div className="card" style={{ padding: 22 }}>
              <h3 className="h-card">¿Buscas algo específico?</h3>
              <div style={{ display:'flex', flexDirection:'column', gap: 8, marginTop: 12 }}>
                <a href="demo.html" style={{ fontSize: 14, color:'var(--brand-secondary)', display:'inline-flex', alignItems:'center', gap: 6 }}>
                  <Icon.arrow/> Solicitar una demo
                </a>
                <a href="precios.html" style={{ fontSize: 14, color:'var(--brand-secondary)', display:'inline-flex', alignItems:'center', gap: 6 }}>
                  <Icon.arrow/> Ver precios y planes
                </a>
                <a href="blog.html" style={{ fontSize: 14, color:'var(--brand-secondary)', display:'inline-flex', alignItems:'center', gap: 6 }}>
                  <Icon.arrow/> Leer el blog
                </a>
              </div>
            </div>
            <div className="card" style={{ padding: 22, background:'color-mix(in oklab, var(--brand-primary), white 96%)' }}>
              <span className="eyebrow" style={{ marginBottom: 10 }}><span className="dot"/> Tiempo de respuesta</span>
              <h3 className="h-card" style={{ marginTop: 6 }}>&lt; 1 minuto, 24/7</h3>
              <p className="text-muted" style={{ fontSize: 13.5, marginTop: 6 }}>
                Nuestro colaborador de Atención lee, clasifica y responde tu mensaje. Si necesita escalación humana, lo hace automáticamente.
              </p>
            </div>
          </aside>
        </div>
      </section>
    </Layout>
  );
}

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