// /demo

function DemoPage() {
  const [sent, setSent] = React.useState(false);

  return (
    <Layout active="">
      <PageHero
        crumb={[{ label:'Inicio', href:'index.html' }, { label:'Demo' }]}
        eyebrow="Agenda una demo personalizada"
        title="Mira tu equipo IA en acción — 20 minutos."
        subtitle="Te conectamos a un Director General configurado para tu industria. Verás en vivo cómo respondería un lead, publicaría un post o coordinaría un envío para TU negocio."
      />

      <section className="section" data-screen-label="Demo form">
        <div className="container" style={{
          maxWidth: 1100,
          display:'grid', gridTemplateColumns:'minmax(0, 1.2fr) minmax(0, 1fr)', gap: 56,
        }}>
          <div>
            {!sent ? (
              <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} className="form-grid">
                <div className="full">
                  <h2 className="h-section" style={{ fontSize: 24, marginBottom: 12 }}>Cuéntanos sobre tu negocio</h2>
                </div>
                <div>
                  <label className="form-label">Nombre</label>
                  <input type="text" required placeholder="Ej. Diego Velasco"/>
                </div>
                <div>
                  <label className="form-label">Empresa</label>
                  <input type="text" required placeholder="Ej. Tostadora Cumbres"/>
                </div>
                <div>
                  <label className="form-label">Email corporativo</label>
                  <input type="email" required placeholder="tu@empresa.com"/>
                </div>
                <div>
                  <label className="form-label">WhatsApp (opcional)</label>
                  <input type="text" placeholder="+52 …"/>
                </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>
                  <label className="form-label">Tamaño de equipo actual</label>
                  <select>
                    <option>1 persona (yo solo/a)</option>
                    <option>2-5 personas</option>
                    <option>6-15 personas</option>
                    <option>16-50 personas</option>
                    <option>Más de 50</option>
                  </select>
                </div>
                <div className="full">
                  <label className="form-label">¿Qué te gustaría automatizar primero?</label>
                  <textarea rows={4} placeholder="Ej. Quiero que conteste leads de Instagram, redacte fichas de propiedades y dé seguimiento a visitas agendadas…"/>
                </div>
                <div className="full" style={{ display:'flex', alignItems:'center', gap: 12, flexWrap:'wrap' }}>
                  <button type="submit" className="btn btn-primary btn-lg">Agendar demo de 20 min <Icon.arrow/></button>
                  <span className="form-help">Te respondemos en &lt; 30 min con horarios disponibles.</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: 36, borderRadius: 22,
              }}>
                <div style={{
                  width: 52, height: 52, borderRadius: 999, background:'var(--success)', color:'#fff',
                  display:'inline-flex', alignItems:'center', justifyContent:'center', marginBottom: 16, fontSize: 24,
                }}>✓</div>
                <h2 className="h-section" style={{ fontSize: 26, marginBottom: 10 }}>¡Demo solicitada!</h2>
                <p style={{ fontSize: 15.5, color:'var(--ink-soft)' }}>
                  Nuestro Director General está revisando tu información para preparar la demo. En menos de 30 minutos recibirás un correo con 3 horarios disponibles para esta semana.
                </p>
                <a href="blog.html" className="btn btn-outline" style={{ marginTop: 22 }}>Mientras tanto, lee el blog →</a>
              </div>
            )}
          </div>

          <aside>
            <div className="card" style={{ background: 'linear-gradient(180deg, color-mix(in oklab, var(--brand-primary), white 96%), #fff)' }}>
              <h3 className="h-card" style={{ fontSize: 18 }}>Qué verás en la demo</h3>
              <ul style={{ listStyle:'none', padding: 0, margin:'14px 0 0', display:'flex', flexDirection:'column', gap: 12 }}>
                {[
                  ['🎯', 'Configuración inicial', 'Cómo se ve la conversación con el Director cuando le explicas tu negocio.'],
                  ['🤝', 'Tu equipo en vivo',     'Activamos 3-4 colaboradores y los ves trabajar en pantalla.'],
                  ['📊', 'Métricas de ejemplo',   'Te mostramos el panel con datos de un negocio de tu industria.'],
                  ['💬', 'Resolvemos tus dudas',  'Tiempo para preguntar todo lo que necesites antes de empezar.'],
                ].map(([emoji, title, desc]) => (
                  <li key={title} style={{ display:'flex', gap: 12 }}>
                    <span style={{ fontSize: 22, lineHeight: 1.1, flexShrink: 0 }}>{emoji}</span>
                    <div>
                      <div style={{ fontSize: 14.5, fontWeight: 600 }}>{title}</div>
                      <div style={{ fontSize: 13, color:'var(--ink-soft)', marginTop: 2 }}>{desc}</div>
                    </div>
                  </li>
                ))}
              </ul>
            </div>
            <div style={{
              marginTop: 16, padding: 22, background:'var(--bg-subtle)',
              border:'1px solid var(--line)', borderRadius: 18, fontSize: 13.5,
            }}>
              <b>Sin compromiso.</b> No te pediremos tarjeta. Si después de la demo decides probar, lo haces en el plan gratis.
            </div>
          </aside>
        </div>
      </section>
    </Layout>
  );
}

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