// Clases — pricing / modality grid + pilot banner.
function Clases() {
  return (
    <SectionShell id="clases" bg="var(--white)">
      <Reveal>
        <Eyebrow>Modalidades</Eyebrow>
        <SectionHeading>Elige cómo <em style={{ fontStyle: 'italic', color: 'var(--gold-dark)' }}>quieres bailar</em></SectionHeading>
        <p style={{ fontSize: 'var(--text-base)', lineHeight: 'var(--lh-body)', color: 'var(--taupe)', maxWidth: '540px', margin: '1rem 0' }}>
          Sin experiencia previa, sin pareja necesaria. Solo tú y las ganas de aprender.
        </p>
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '1.5rem', marginTop: '3rem' }} className="clases-grid">
        <Reveal delay={0}>
          <PriceCard icon={<Icon name="community" size="1.9rem" color="var(--gold-dark)" />} name="Clase Grupal" price="$45.000" period="por mes · 4 clases de 60 min"
            description="Aprende en un ambiente cálido y motivador. Grupos pequeños de máximo 8 personas."
            features={['4 clases al mes', 'Grupos de hasta 8 personas', 'Cha-Cha y Rumba para principiantes', 'Precio especial de lanzamiento']}
            cta={<Button variant="secondary" size="sm" href="#contacto" style={{ width: '100%' }}>Reservar lugar</Button>} />
        </Reveal>
        <Reveal delay={0.1}>
          <PriceCard featured ribbon="Más popular" icon={<Icon name="user-star" size="1.9rem" color="#fff" />} name="Pack Individual" price="$70.000" period="4 clases personalizadas de 60 min"
            description="Atención completamente personalizada. Avanzas al doble de velocidad con Constanza."
            features={['4 clases 1 a 1 contigo', 'Ritmo y nivel totalmente adaptado', 'Horario flexible', 'Ahorra $10.000 vs. clases sueltas']}
            cta={<Button variant="ghost" size="sm" href="#contacto" style={{ width: '100%' }}>Reservar ahora</Button>} />
        </Reveal>
        <Reveal delay={0.2}>
          <PriceCard icon={<Icon name="gift" size="1.9rem" color="var(--gold-dark)" />} name="Clase de Prueba" price="$5.000" period="única clase · 60 min"
            description="¿No sabes si es para ti? Ven a conocerme sin compromiso y descubre lo que sientes."
            features={['Clase individual o grupal', 'Sin compromiso de continuidad', 'Se descuenta si te inscribes', 'Ideal para indecisos']}
            cta={<Button variant="secondary" size="sm" href="#contacto" style={{ width: '100%' }}>Reservar prueba</Button>} />
        </Reveal>
      </div>
      <Reveal delay={0.1}>
        <div style={{ marginTop: '2rem', padding: '1.3rem 2rem', background: 'var(--blush-pale)',
          border: '1px solid var(--blush)', borderRadius: 'var(--radius-lg)', textAlign: 'center' }}>
          <p style={{ fontSize: 'var(--text-base)', color: 'var(--brown)', lineHeight: 1.7, margin: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.5rem', flexWrap: 'wrap' }}>
            <Icon name="flower" size="1rem" color="var(--gold-dark)" /> <strong style={{ color: 'var(--gold-dark)' }}>Clase piloto gratuita disponible</strong> — Inscríbete sin costo para conocer a Constanza y vivir tu primera clase de Ballroom. Cupos limitados a 8 personas. <a href="#contacto" style={{ color: 'var(--gold-dark)', fontWeight: 500 }}>Reserva aquí →</a>
          </p>
        </div>
      </Reveal>
    </SectionShell>
  );
}
window.Clases = Clases;