// Weekly schedule — Knockout Fitness Lake Mary
const DAYS = ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'];

const SCHEDULE = {
  MON: [
    { time: '06:00', name: 'FITNESS KICKBOXING', coach: 'Coach Nate', tag: 'ALL' },
    { time: '09:30', name: 'FITNESS KICKBOXING', coach: 'Coach Mike', tag: 'ALL' },
    { time: '17:30', name: 'GROUP FITNESS', coach: 'Coach Nate', tag: 'ALL' },
    { time: '18:30', name: 'FITNESS KICKBOXING', coach: 'Coach Mike', tag: 'ALL' },
  ],
  TUE: [
    { time: '06:00', name: 'FITNESS KICKBOXING', coach: 'Coach Mike', tag: 'ALL' },
    { time: '09:30', name: 'GROUP FITNESS', coach: 'Coach Nate', tag: 'ALL' },
    { time: '17:30', name: 'FITNESS KICKBOXING', coach: 'Coach Nate', tag: 'ALL' },
    { time: '18:30', name: 'PERSONAL TRAINING', coach: 'By appt.', tag: '1-ON-1' },
  ],
  WED: [
    { time: '06:00', name: 'FITNESS KICKBOXING', coach: 'Coach Nate', tag: 'ALL' },
    { time: '09:30', name: 'FITNESS KICKBOXING', coach: 'Coach Mike', tag: 'ALL' },
    { time: '17:30', name: 'GROUP FITNESS', coach: 'Coach Nate', tag: 'ALL' },
    { time: '18:30', name: 'FITNESS KICKBOXING', coach: 'Coach Mike', tag: 'ALL' },
  ],
  THU: [
    { time: '06:00', name: 'FITNESS KICKBOXING', coach: 'Coach Mike', tag: 'ALL' },
    { time: '09:30', name: 'GROUP FITNESS', coach: 'Coach Nate', tag: 'ALL' },
    { time: '17:30', name: 'FITNESS KICKBOXING', coach: 'Coach Nate', tag: 'ALL' },
    { time: '18:30', name: 'PERSONAL TRAINING', coach: 'By appt.', tag: '1-ON-1' },
  ],
  FRI: [
    { time: '06:00', name: 'FITNESS KICKBOXING', coach: 'Coach Nate', tag: 'ALL' },
    { time: '09:30', name: 'FITNESS KICKBOXING', coach: 'Coach Mike', tag: 'ALL' },
    { time: '17:30', name: 'GROUP FITNESS', coach: 'Coach Nate', tag: 'ALL' },
  ],
  SAT: [
    { time: '08:00', name: 'FITNESS KICKBOXING', coach: 'Coach Mike', tag: 'ALL' },
    { time: '09:30', name: 'GROUP FITNESS', coach: 'Coach Nate', tag: 'ALL' },
    { time: '11:00', name: 'FITNESS KICKBOXING', coach: 'Coach Nate', tag: 'ALL' },
  ],
  SUN: [
    { time: '10:00', name: 'FITNESS KICKBOXING', coach: 'Coach Mike', tag: 'ALL' },
    { time: '11:30', name: 'GROUP FITNESS', coach: 'Coach Nate', tag: 'ALL' },
  ],
};

function Schedule({ accent }) {
  const [day, setDay] = React.useState('TUE');
  const tagColor = (t) => t === '1-ON-1' ? accent : t === 'INT' ? '#d4a017' : 'currentColor';

  return (
    <section className="ko-section" id="schedule">
      <div className="ko-container">
        <div className="ko-section-head">
          <div className="ko-mono ko-eyebrow">
            <span className="ko-eyebrow-bar" style={{ background: accent }} />
            §06 · THE WEEK
          </div>
          <h2 className="ko-h2">
            SHOW UP. <span style={{ color: accent, fontStyle: 'italic' }}>EVERY DAY.</span>
          </h2>
        </div>

        <div className="ko-schedule">
          <div className="ko-day-tabs" role="tablist">
            {DAYS.map((d) => (
              <button
                key={d}
                className={`ko-day-tab ${d === day ? 'is-active' : ''}`}
                onClick={() => setDay(d)}
                style={d === day ? { color: accent, borderColor: accent } : {}}
              >
                <span className="ko-mono">{d}</span>
                <span className="ko-day-count ko-mono">{SCHEDULE[d].length}</span>
              </button>
            ))}
          </div>

          <div className="ko-day-list">
            {SCHEDULE[day].map((s, i) => (
              <div key={i} className="ko-slot">
                <div className="ko-slot-time ko-mono">{s.time}</div>
                <div className="ko-slot-divider" style={{ background: accent }} />
                <div className="ko-slot-info">
                  <div className="ko-slot-name">{s.name}</div>
                  <div className="ko-mono ko-slot-coach">w/ {s.coach}</div>
                </div>
                <div className="ko-slot-tag ko-mono" style={{ color: tagColor(s.tag), borderColor: 'currentColor' }}>
                  {s.tag}
                </div>
                <button className="ko-slot-book ko-mono">BOOK →</button>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.Schedule = Schedule;