// Auré website UI kit — Membresías
const { Eyebrow, Section, CONTACT } = window.AureShared;
const { Button, Card, Badge } = window.AurDesignSystem_11b9b2;

const PLANES = [
  { clave: 'esencia', nombre: 'Esencia', tone: 'white', desc: '4 clases al mes. Tu primer paso.', precio: '$500 /mes' },
  { clave: 'brillo', nombre: 'Brillo', tone: 'rose', desc: '8 clases en total al mes.', precio: '$900 /mes' },
  { clave: 'luz', nombre: 'Luz', tone: 'emerald', destacado: true, desc: '8 clases al mes + la actividad o clase extra de convivencia del mes.', precio: '$1,200 /mes',
    nota: 'No todos los meses hay actividades o convivencias extra; cuando las hay, se avisan con anticipación.' },
];

function MembresiasScreen() {
  return (
    <main data-screen-label="Membresías">
      <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' }}>Membresías</Eyebrow>
          <h1 style={{ margin: '0 0 20px', font: 'var(--text-display)', color: 'var(--text-primary)' }}>
            Elige cómo quieres <em>brillar</em>
          </h1>
          <p style={{ margin: 0, font: 'var(--text-lead)', color: 'var(--text-secondary)' }}>
            Sin inscripción. Sin permanencia. Solo tu proceso.
          </p>
        </div>
      </Section>
      <Section bg="var(--surface-page)" style={{ paddingTop: 0 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '20px', alignItems: 'stretch', maxWidth: '980px', margin: '0 auto' }} className="grid-3">
          {PLANES.map((p) => (
            <Card key={p.nombre} tone={p.tone} padding="32px" hoverable
              eyebrow="Membresía" title={p.nombre}
              footer={
                <Button fullWidth size="sm"
                  variant={p.tone === 'emerald' ? 'primary' : 'secondary'}
                  style={p.tone === 'emerald' ? { background: 'var(--aure-rose)', color: 'var(--aure-plum)' } : undefined}
                  onClick={() => { window.location.href = '/registro?membresia=' + p.clave; }}>
                  Quiero ser parte
                </Button>
              }>
              {p.destacado && <div style={{ marginBottom: '10px' }}><Badge tone="plum">La favorita</Badge></div>}
              <p style={{ margin: '0 0 18px' }}>{p.desc}</p>
              <p style={{ margin: 0, font: 'var(--text-title)', fontSize: '30px', color: p.tone === 'emerald' ? 'var(--text-on-emerald)' : 'var(--text-primary)' }}>{p.precio}</p>
              {p.nota && <p style={{ margin: '14px 0 0', fontFamily: 'var(--font-sans)', fontSize: '12.5px', lineHeight: 1.6, color: p.tone === 'emerald' ? 'rgba(233,239,233,0.75)' : 'var(--text-muted)' }}>{p.nota}</p>}
            </Card>
          ))}
        </div>
        <p style={{ margin: '28px 0 0', textAlign: 'center', fontFamily: 'var(--font-sans)', fontSize: '13px', color: 'var(--text-muted)' }}>
          Precios en pesos mexicanos. Las actividades y convivencias extra se avisan con anticipación.
        </p>
      </Section>
    </main>
  );
}

Object.assign(window, { MembresiasScreen });