const { ClassCard, Button, Tag, SectionLabel } = window.PilatesLifeStudioDesignSystem_f49721;

function ClassGrid({ onBook, limit }) {
  const [family, setFamily] = React.useState('todas');
  const families = ['todas', 'reformer', 'private'];
  const labels = { todas: 'Todas', reformer: 'Grupal', private: 'Personalizada' };
  const list = CLASSES.filter(c => family === 'todas' || c.family === family).slice(0, limit || 99);
  return (
    <section className="section">
      <div className="wrap">
        <div className="mob-stack" style={{ display: 'flex', alignItems: 'flex-end', gap: 'var(--space-6)', marginBottom: 'var(--space-6)' }}>
          <div>
            <div className="eyebrow">Clases</div>
            <h2 style={{ fontSize: 'var(--size-display-md)', marginTop: 14 }}>Nuestras clases</h2>
          </div>
          <div style={{ display: 'flex', gap: 'var(--space-2)', marginLeft: 'auto', flexWrap: 'wrap' }}>
            {families.map(f => (
              <Tag key={f} selected={family === f} accent={f === 'todas' ? 'var(--slate)' : 'var(--class-' + (f === 'private' ? 'private' : f) + ')'}
                onClick={() => setFamily(f)}>{labels[f]}</Tag>
            ))}
          </div>
        </div>
        <div className="mob-stack" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 'var(--space-5)' }}>
          {list.map(c => (
            <ClassCard key={c.title} title={c.title} family={c.family} instructor={c.instructor} time={c.time}
              level={c.level} spots={c.spots} image={c.image} onBook={() => onBook(c)} />
          ))}
        </div>
      </div>
    </section>
  );
}

function Method() {
  const steps = [
    { n: '01', t: 'Valoración', d: 'Media hora para revisar postura, historial y objetivos antes de tu primera clase.' },
    { n: '02', t: 'Fundamentos', d: 'Cuatro sesiones de respiración, alineación y control de muelles.' },
    { n: '03', t: 'Progresión', d: 'Pasas a intermedio cuando el movimiento es limpio, no cuando pasa el mes.' }
  ];
  return (
    <section className="section" style={{ background: 'var(--bone)' }}>
      <div className="wrap mob-stack" style={{ display: 'flex', gap: 'var(--space-9)' }}>
        <SectionLabel size="24px">Método</SectionLabel>
        <div style={{ flex: 1 }}>
          <h2 style={{ fontSize: 'var(--size-display-md)', marginBottom: 'var(--space-6)' }}>Tres pasos, sin prisa</h2>
          <div className="mob-stack" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-6)' }}>
            {steps.map(s => (
              <div key={s.n} style={{ borderTop: '1px solid var(--border-strong)', paddingTop: 'var(--space-4)' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 34, fontWeight: 'var(--weight-hairline)', color: 'var(--steel)' }}>{s.n}</div>
                <h3 style={{ fontSize: 20, letterSpacing: 'var(--tracking-display-tight)', margin: '12px 0 8px' }}>{s.t}</h3>
                <p style={{ fontSize: 'var(--size-body-sm)' }}>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function CtaBand({ onBook }) {
  return (
    <section style={{ background: 'var(--steel)', padding: 'var(--space-8) 0' }}>
      <div className="wrap mob-stack" style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-6)' }}>
        <h2 style={{ color: 'var(--white)', fontSize: 'var(--size-display-sm)', flex: 1 }}>¡Adquiere tu paquete de clases aquí!</h2>
        <Button variant="inverse" size="lg" onClick={onBook}>Comprar y reservar</Button>
      </div>
    </section>
  );
}

Object.assign(window, { ClassGrid, Method, CtaBand });