// Auré website UI kit — Clases (cards + inscripción + FAQ)
const { Eyebrow, Section, CONTACT } = window.AureShared;
const { Button, Card, Badge, Accordion } = window.AurDesignSystem_11b9b2;

const CLASES = [
  { clave: 'nivel_1', n: 'Nivel 1', d: 'Principiantes', dia: 'Domingo', hora: '11:00am', lugar: 'Medellín 143' },
  { clave: 'nivel_2', n: 'Nivel 2', d: 'Bases y Fluidez', dia: 'Domingo', hora: '1:00pm', lugar: 'Puebla 46' },
  { clave: 'nivel_3', n: 'Nivel 3', d: 'Intermedio', dia: 'Martes', hora: '8:00pm', lugar: 'Puebla 46' },
  { clave: 'nivel_4', n: 'Nivel 4', d: 'Intermedio Avanzado', dia: 'Jueves', hora: '8:30pm', lugar: 'Puebla 46' },
];

const FAQ = [
  { q: 'Nunca he bailado, ¿puedo entrar?', a: 'Sí. Nivel 1 está pensado para empezar de cero, acompañada y a tu ritmo.' },
  { q: '¿Qué ropa llevo?', a: 'Ropa cómoda con la que te sientas tú. Los tacones son opcionales; te avisamos cuándo traerlos.' },
  { q: '¿Hay límite de edad?', a: 'No. Auré es para mujeres de todas las edades.' },
  { q: '¿Cómo sé qué nivel soy?', a: 'Escríbenos por WhatsApp y lo encontramos juntas — sin exámenes ni presión.' },
  { q: '¿Qué pasa si falto?', a: 'Puedes reponer tu clase dentro del mes. Tu proceso no se detiene por una semana.' },
];

function ClasesScreen() {
  return (
    <main data-screen-label="Clases">
      <Section bg="var(--surface-page)" style={{ paddingBottom: 'var(--space-7)' }}>
        <div style={{ textAlign: 'center', maxWidth: 'var(--content-narrow)', margin: '0 auto' }}>
          <Eyebrow style={{ marginBottom: '16px' }}>Clases</Eyebrow>
          <h1 style={{ margin: '0 0 20px', font: 'var(--text-display)', color: 'var(--text-primary)' }}>
            Cuatro niveles, <em>un mismo camino</em>
          </h1>
          <p style={{ margin: 0, font: 'var(--text-lead)', color: 'var(--text-secondary)' }}>
            Técnica con estructura, en grupos pequeños, en Roma Norte.
          </p>
        </div>
      </Section>
      <Section bg="var(--surface-page)" style={{ paddingTop: 0 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '24px' }} className="grid-2">
          {CLASES.map((c) => (
            <Card key={c.n} padding="36px" hoverable
              title={c.d}
              eyebrow={c.n}
              footer={<Button fullWidth onClick={() => { window.location.href = '/registro?clase=' + c.clave; }}>Inscribirme</Button>}>
              <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap', marginBottom: '6px' }}>
                <Badge tone="sage">{c.dia} · {c.hora}</Badge>
                <Badge>{c.lugar}</Badge>
              </div>
              Roma Norte, Ciudad de México.
            </Card>
          ))}
        </div>
      </Section>
      <Section bg="var(--surface-card)" narrow>
        <Eyebrow style={{ marginBottom: '14px' }}>Preguntas frecuentes</Eyebrow>
        <h2 style={{ margin: '0 0 32px', font: 'var(--text-title)', color: 'var(--text-primary)' }}>Antes de tu primera clase</h2>
        <Accordion items={FAQ} />
      </Section>
    </main>
  );
}

Object.assign(window, { ClasesScreen });