// Ritmos — Latino / Estándar tabs of dance rhythms.
function Ritmos() {
  const [estilo, setEstilo] = React.useState('latino');
  const data = {
    latino: [
      ['music-double-note','Cha-Cha-Cha','Medio · Sensual','Ideal para comenzar',true],
      ['heart','Rumba','Lento · Romántico','Ideal para comenzar',true],
      ['flash','Samba','Rápido · Energético','Nivel intermedio',false],
      ['sparks','Jive','Muy rápido · Divertido','Nivel intermedio',false],
      ['fire-flame','Paso Doble','Medio · Dramático','Nivel avanzado',false],
    ],
    estandar: [
      ['sparks','Vals Vienés','Rápido · Elegante','Ideal para comenzar',true],
      ['heart','Vals Inglés','Lento · Romántico','Nivel intermedio',false],
      ['fire-flame','Tango','Medio · Pasional','Nivel intermedio',false],
      ['crown','Slow Foxtrot','Lento · Sofisticado','Nivel intermedio',false],
      ['sun-light','Quickstep','Muy rápido · Alegre','Nivel avanzado',false],
    ],
  };
  const tab = (id, label) => (
    <button onClick={() => setEstilo(id)} style={{
      padding: '0.5rem 1.5rem', borderRadius: 'var(--radius-pill)',
      border: estilo === id ? '1px solid transparent' : '1px solid var(--blush)',
      background: estilo === id ? 'var(--grad-gold)' : 'var(--white)',
      color: estilo === id ? 'var(--white)' : 'var(--taupe)', cursor: 'pointer',
      fontFamily: 'var(--font-label)', fontSize: 'var(--text-xs)', letterSpacing: '0.15em',
      textTransform: 'uppercase', transition: 'all var(--dur-fast) var(--ease-soft)',
    }}>{label}</button>
  );
  return (
    <SectionShell id="ritmos" bg="var(--cream)">
      <Reveal>
        <div style={{ textAlign: 'center', marginBottom: '3.5rem' }}>
          <Eyebrow style={{ textAlign: 'center' }}>Lo que aprenderás</Eyebrow>
          <SectionHeading align="center">10 ritmos <em style={{ fontStyle: 'italic', color: 'var(--gold-dark)' }}>Ballroom</em></SectionHeading>
          <p style={{ fontSize: 'var(--text-base)', lineHeight: 'var(--lh-body)', color: 'var(--taupe)', maxWidth: '540px', margin: '1rem auto 0' }}>
            Desde los más accesibles para principiantes hasta los más sofisticados. Avanzas a tu propio ritmo.
          </p>
        </div>
      </Reveal>
      <div style={{ display: 'flex', justifyContent: 'center', gap: '0.5rem', marginBottom: '2.5rem' }}>
        {tab('latino', 'Latino')}{tab('estandar', 'Estándar')}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: '1rem' }} className="ritmos-grid">
        {data[estilo].map((r, i) => (
          <Reveal key={estilo + i} delay={i * 0.06}>
            <RitmoCard emoji={<Icon name={r[0]} size="1.7rem" color="var(--gold-dark)" />} name={r[1]} tempo={r[2]} level={r[3]} recommended={r[4]} />
          </Reveal>
        ))}
      </div>
    </SectionShell>
  );
}
window.Ritmos = Ritmos;