// /precios

function PreciosPage() {
  return (
    <Layout active="precios">
      <PageHero
        crumb={[{ label:'Inicio', href:'index.html' }, { label:'Precios' }]}
        eyebrow="Sin permanencia, sin sorpresas"
        title="Empieza gratis. Crece cuando quieras."
        subtitle="No cobramos por agente ni por usuario. Cobramos solo por uso real cuando tu negocio crezca lo suficiente para necesitarlo."
      />

      <Pricing />

      <section className="section" data-screen-label="Pricing FAQ">
        <div className="container" style={{ maxWidth: 880 }}>
          <h2 className="h-section" style={{ fontSize: 28, textAlign:'center', marginBottom: 32 }}>Sobre los tokens y precios</h2>
          <div style={{ display:'flex', flexDirection:'column', gap: 12 }}>
            {[
              ['¿Qué es un token y cómo se consume?', 'Cada interacción de tus colaboradores consume tokens — generar un post, responder a un cliente, analizar métricas. El plan Gratis incluye tokens iniciales suficientes para varios días de operación normal de un negocio pequeño.'],
              ['¿Qué pasa cuando se acaban mis tokens?', 'Te avisamos antes. Puedes comprar paquetes de tokens desde $5 USD o esperar al reinicio mensual del plan gratis. Los colaboradores no se "rompen" — pausan tareas hasta que tengan tokens disponibles.'],
              ['¿Hay descuento si pago un año completo?', 'Sí. El plan Profesional tendrá descuento anual del 20% al lanzamiento. Suscríbete a la lista para recibir el precio early-bird.'],
              ['¿Puedo migrar entre planes?', 'En cualquier momento. Cambiar de plan no pierde datos ni resetea a tus colaboradores. Solo te ajusta el límite de tokens y desbloquea (o limita) funciones.'],
            ].map(([q, a], i) => (
              <details key={i} style={{
                border:'1px solid var(--line)', borderRadius: 14, background:'#fff',
              }}>
                <summary style={{ padding:'16px 22px', fontWeight: 600, cursor: 'pointer', listStyle: 'none' }}>{q}</summary>
                <div style={{ padding:'0 22px 18px', color:'var(--ink-soft)', fontSize: 14.5 }}>{a}</div>
              </details>
            ))}
          </div>
        </div>
      </section>

      <Comparison theme={readPersistedTheme().custom || THEMES['ai-company']} />
      <CTAFinal />
    </Layout>
  );
}

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