const { Tabs, ScheduleRow, Avatar, Card, SectionLabel, Divider } = window.PilatesLifeStudioDesignSystem_f49721;

function SchedulePage({ booked, onToggle }) {
  const [day, setDay] = React.useState('lun');
  const rows = SCHEDULE[day] || [];
  return (
    <section className="section">
      <div className="wrap">
        <div className="eyebrow">Horario semanal</div>
        <h2 style={{ fontSize: 'var(--size-display-lg)', margin: '16px 0 var(--space-6)' }}>Elige tu horario</h2>
        <div className="mob-stack" style={{ display: 'grid', gridTemplateColumns: '1fr 300px', gap: 'var(--space-7)', alignItems: 'start' }}>
          <div>
            <Tabs items={DAYS} active={day} onChange={setDay} />
            <p style={{ fontSize: 'var(--size-body-sm)', color: 'var(--text-muted)', marginTop: 'var(--space-4)' }}>
              Atención {DAY_HOURS[day]}
            </p>
            <div style={{ marginTop: 'var(--space-4)' }}>
              {rows.map(r => {
                const key = day + r.time;
                return (
                  <ScheduleRow key={key} time={r.time} title={r.title} family={r.family} instructor={r.instructor}
                    spots={r.spots} booked={booked.includes(key)} onAction={() => onToggle(key, r)} />
                );
              })}
            </div>
            <p style={{ fontSize: 'var(--size-body-sm)', color: 'var(--text-muted)', marginTop: 'var(--space-4)' }}>
              Los horarios están sujetos a la disponibilidad del estudio: programa tus clases con anticipación.
              Las cancelaciones deben hacerse con 6 horas de anticipación.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
            <Card tone="mist">
              <div className="eyebrow" style={{ fontSize: 'var(--size-micro)' }}>Tu semana</div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 44, fontWeight: 'var(--weight-hairline)', color: 'var(--ink)', margin: '10px 0 4px' }}>
                {booked.length}
              </div>
              <p style={{ fontSize: 'var(--size-body-sm)' }}>reservas activas de tu plan</p>
            </Card>
            <Card>
              <div className="eyebrow" style={{ fontSize: 'var(--size-micro)' }}>Instructores</div>
              <Divider style={{ margin: '12px 0' }} />
              {INSTRUCTORS.map((n, i) => (
                <div key={n} style={{ display: 'flex', gap: 12, alignItems: 'center', padding: '9px 0' }}>
                  <Avatar name={n} size={36} tone={['var(--steel)', 'var(--mauve)', 'var(--moss)', 'var(--deep-teal)'][i % 4]} />
                  <div style={{ fontSize: 'var(--size-body-sm)', color: 'var(--ink)' }}>{n}</div>
                </div>
              ))}
            </Card>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SchedulePage });