/* Schedule.jsx — class timetable converted to card layout
   The original sparse 6-day table (75% empty) was visually wasteful.
   Card layout shows only the active cohorts with per-cohort capacity
   indicators. Rationale: spec §4.2 — scarcity marketing. */

const COHORTS = [
  { id: 'low_a', label: ['저학년 (1–3)', 'Low elementary (1–3)'], time: '4–5pm',
    sessions: [{ day: '수', dayEn: 'Wed', filled: 3, cap: 8 },
               { day: '금', dayEn: 'Fri', filled: 1, cap: 8 }],
    tone: { accent: '#A78BFA', deep: '#5B21B6', bg: 'rgba(167,139,250,0.10)' } },
  { id: 'low_b', label: ['저학년 (1–3)', 'Low elementary (1–3)'], time: '5–6pm',
    sessions: [{ day: '수', dayEn: 'Wed', filled: 6, cap: 8 },
               { day: '금', dayEn: 'Fri', filled: 2, cap: 8 }],
    tone: { accent: '#6D28D9', deep: '#4C1D95', bg: 'rgba(109,40,217,0.10)' } },
  { id: 'high_a', label: ['고학년 (4–6)', 'High elementary (4–6)'], time: '4–5pm',
    sessions: [{ day: '수', dayEn: 'Wed', filled: 2, cap: 8 },
               { day: '금', dayEn: 'Fri', state: 'wait' }],
    tone: { accent: '#3B82F6', deep: '#1E40AF', bg: 'rgba(59,130,246,0.10)' } },
  { id: 'high_b', label: ['고학년 (4–6)', 'High elementary (4–6)'], time: '5–6pm',
    sessions: [{ day: '수', dayEn: 'Wed', filled: 5, cap: 8 },
               { day: '금', dayEn: 'Fri', filled: 4, cap: 8 }],
    tone: { accent: '#14B8A6', deep: '#115E59', bg: 'rgba(20,184,166,0.10)' } },
];

const Schedule = () => {
  const t = window.useT();
  const { lang } = React.useContext(window.LangContext);
  const isKo = lang === 'ko';

  return (
    <section id="schedule" className="section">
      <div className="section-inner">
        <div className="label-ko" style={{ marginBottom: 16 }}>{t('sch.eyebrow')}</div>
        <h2 style={{
          fontFamily: 'var(--font-sans)', fontFeatureSettings: '"ss01"',
          fontSize: 'clamp(15px, 4.6vw, 38px)', fontWeight: 700, letterSpacing: '-0.4px',
          color: '#0B1727', margin: 0, maxWidth: 760, lineHeight: 1.22,
          whiteSpace: 'nowrap',
        }}>{t('sch.h2')}</h2>

        <div className="sch-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)',
          gap: 16, marginTop: 36,
        }}>
          {COHORTS.map(c => {
            const totalCap = c.sessions.reduce((s, x) => s + (x.cap || 0), 0);
            const totalFilled = c.sessions.reduce((s, x) => s + (x.filled || 0), 0);
            const pct = totalCap ? Math.round((totalFilled / totalCap) * 100) : 0;
            return (
              <div key={c.id} className="card" style={{
                padding: 26,
                display: 'flex', flexDirection: 'column', gap: 18,
                position: 'relative', overflow: 'hidden',
              }}>
                {/* Accent bar */}
                <span aria-hidden="true" style={{
                  position: 'absolute', top: 0, left: 0, right: 0, height: 3,
                  background: `linear-gradient(90deg, ${c.tone.accent}, ${c.tone.deep})`,
                }} />

                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <span style={{
                    padding: '5px 12px', borderRadius: 9999,
                    background: c.tone.bg, color: c.tone.deep,
                    fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 700,
                    letterSpacing: '0.06em', textTransform: 'uppercase',
                  }}>{isKo ? c.label[0] : c.label[1]}</span>
                  <span style={{
                    fontFamily: 'var(--font-sans)', fontSize: 20, fontWeight: 700,
                    color: '#0B1727',
                  }}>{c.time}</span>
                </div>

                {/* Sessions */}
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {c.sessions.map((s, i) => {
                    const isWait = s.state === 'wait';
                    const fill = isWait ? 100 : Math.round((s.filled / s.cap) * 100);
                    return (
                      <div key={i} style={{
                        padding: '14px 16px',
                        border: '1px solid #EEF2F7', borderRadius: 10,
                        background: isWait ? '#FAFCFE' : '#fff',
                        display: 'flex', alignItems: 'center', gap: 14,
                      }}>
                        <span style={{
                          width: 36, height: 36, borderRadius: 8,
                          background: isWait ? '#F1F5F9' : c.tone.bg,
                          color: isWait ? '#94A3B8' : c.tone.deep,
                          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                          fontFamily: 'var(--font-sans)', fontSize: 15, fontWeight: 700,
                          flexShrink: 0,
                        }}>{isKo ? s.day : s.dayEn}</span>

                        <div style={{ flex: 1, minWidth: 0 }}>
                          <div style={{
                            fontSize: 14, fontWeight: 600, color: isWait ? '#64748B' : '#0B1727',
                            display: 'flex', alignItems: 'center', gap: 8,
                          }}>
                            {isWait ? (
                              <>{isKo ? '대기자 명단 · ' : 'Waitlist · '}<span style={{ fontSize: 11, fontWeight: 700, padding: '2px 8px', borderRadius: 9999, background: '#F1F5F9', color: '#64748B' }}>{isKo ? '마감' : 'Full'}</span></>
                            ) : (
                              <>
                                <span className="tnum" style={{ color: c.tone.deep, fontWeight: 700 }}>{s.filled}</span>
                                <span style={{ color: '#94A3B8' }}>/</span>
                                <span className="tnum" style={{ color: '#94A3B8' }}>{s.cap}{isKo ? ' 자리' : ' seats'}</span>
                              </>
                            )}
                          </div>
                          {/* Capacity bar */}
                          <div style={{
                            height: 4, borderRadius: 2,
                            background: '#F1F5F9', marginTop: 8,
                            overflow: 'hidden',
                          }}>
                            <div style={{
                              width: `${fill}%`, height: '100%',
                              background: isWait ? '#CBD5E1' : `linear-gradient(90deg, ${c.tone.accent}, ${c.tone.deep})`,
                              transition: 'width 400ms ease',
                            }} />
                          </div>
                        </div>

                        <button style={{
                          ...pillBtn,
                          background: isWait ? '#fff' : c.tone.bg,
                          color: isWait ? '#64748B' : c.tone.deep,
                          borderColor: isWait ? '#E2E8F0' : 'transparent',
                        }}>
                          {isWait ? (isKo ? '대기 등록' : 'Join waitlist') : (isKo ? '예약' : 'Reserve')}
                        </button>
                      </div>
                    );
                  })}
                </div>

                <div style={{
                  display: 'flex', alignItems: 'center', gap: 10,
                  marginTop: 'auto', paddingTop: 8,
                  fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600,
                  color: '#94A3B8', letterSpacing: '0.06em', textTransform: 'uppercase',
                }}>
                  <span>{isKo ? `현재 ${pct}% 충원` : `${pct}% filled`}</span>
                </div>
              </div>
            );
          })}
        </div>

        <div style={{
          display: 'flex', gap: 10, marginTop: 24,
          flexWrap: 'wrap', alignItems: 'center',
        }}>
          <Button variant="primary"   size="md">{t('sch.book')} →</Button>
          <Button variant="secondary" size="md">{t('sch.wait')}</Button>
          <span style={{
            marginLeft: 8, fontSize: 12, fontWeight: 500, color: '#94A3B8',
          }}>{isKo ? '* 자리 수는 실시간으로 변경됩니다.' : '* Seat counts update in real time.'}</span>
        </div>
      </div>

      <style>{`
        @media (max-width: 720px) { .sch-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
};

const pillBtn = {
  border: '1px solid',
  borderRadius: 8, padding: '8px 14px',
  cursor: 'pointer',
  fontFamily: 'var(--font-sans)', fontFeatureSettings: '"ss01"',
  fontSize: 13, fontWeight: 700,
  flexShrink: 0,
  transition: 'all 140ms ease',
};

window.Schedule = Schedule;