// Classes / Programs section — based on Knockout Fitness Lake Mary's actual programs
const CLASSES = [
  {
    n: '01',
    title: 'FITNESS KICKBOXING',
    sub: 'Group classes · All levels',
    desc: 'Tired of the same cardio? Our group fitness kickboxing classes burn 800+ calories with high-energy music and a community that keeps you coming back.',
    level: 'ALL LEVELS',
    duration: '60 MIN',
    intensity: 4,
    img: 'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=1200&q=80',
  },
  {
    n: '02',
    title: 'PERSONAL TRAINING',
    sub: 'One-on-one coaching',
    desc: 'Your Personal Coach builds a meal program, exercise plan, and works with you daily to keep you on track. We even offer prepared meals delivered to your door.',
    level: '1-ON-1',
    duration: '60 MIN',
    intensity: 5,
    img: 'https://images.unsplash.com/photo-1583473848882-f9a5bc7fd2ee?w=1200&q=80',
  },
  {
    n: '03',
    title: '6-WEEK CHALLENGE',
    sub: 'Annual transformation',
    desc: 'Our flagship challenge. Members have lost 25+ lbs and 8% body fat in six weeks. Includes nutrition coaching, InBody scans, and full accountability support.',
    level: 'COMMITTED',
    duration: '6 WEEKS',
    intensity: 5,
    img: 'https://images.unsplash.com/photo-1599058917765-a780eda07a3e?w=1200&q=80',
  },
  {
    n: '04',
    title: 'GROUP FITNESS',
    sub: 'Cardio · Strength · HIIT',
    desc: 'A full body workout that mixes cardio, strength, and HIIT into a variety of formats. State-of-the-art programs for every age and ability — newbie-friendly, advanced-tested.',
    level: 'ALL LEVELS',
    duration: '50 MIN',
    intensity: 4,
    img: 'https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=1200&q=80',
  },
];

function Classes({ accent }) {
  const [active, setActive] = React.useState(0);
  const c = CLASSES[active];

  return (
    <section className="ko-section" id="classes">
      <div className="ko-container">
        <div className="ko-section-head">
          <div className="ko-mono ko-eyebrow">
            <span className="ko-eyebrow-bar" style={{ background: accent }} />
            §02 · THE PROGRAMS
          </div>
          <h2 className="ko-h2">
            FOUR WAYS<br />TO GET <span style={{ color: accent, fontStyle: 'italic' }}>RESULTS</span>.
          </h2>
          <p className="ko-section-lead">
            From your first class to your six-week transformation. Everyone starts somewhere — we'll meet you there.
          </p>
        </div>

        <div className="ko-classes-grid">
          {/* Tab list */}
          <div className="ko-classes-tabs">
            {CLASSES.map((cls, i) => (
              <button
                key={cls.n}
                className={`ko-class-tab ${i === active ? 'is-active' : ''}`}
                onClick={() => setActive(i)}
                style={i === active ? { borderColor: accent } : {}}
              >
                <span className="ko-mono ko-class-num" style={i === active ? { color: accent } : {}}>{cls.n}</span>
                <span className="ko-class-title-row">
                  <span className="ko-class-title">{cls.title}</span>
                  <span className="ko-mono ko-class-sub">{cls.sub}</span>
                </span>
                <span className="ko-class-arrow" style={i === active ? { color: accent } : {}}>
                  {i === active ? '●' : '→'}
                </span>
              </button>
            ))}
          </div>

          {/* Active panel */}
          <div className="ko-class-panel">
            <div className="ko-class-img">
              <img
                src={c.img}
                alt={c.title}
                onError={(e) => { e.target.style.opacity = 0; }}
              />
              <div className="ko-class-img-overlay" />
              <div className="ko-class-img-meta">
                <span className="ko-mono">{c.level}</span>
                <span className="ko-mono">{c.duration}</span>
                <span className="ko-mono ko-intensity">
                  INTENSITY {Array.from({ length: 5 }).map((_, i) => (
                    <span key={i} style={{ color: i < c.intensity ? accent : 'currentColor', opacity: i < c.intensity ? 1 : 0.2 }}>■</span>
                  ))}
                </span>
              </div>
              <div className="ko-class-num-big" style={{ color: accent }}>{c.n}</div>
            </div>
            <div className="ko-class-body">
              <h3 className="ko-class-h3">{c.title}</h3>
              <p>{c.desc}</p>
              <div className="ko-class-actions">
                <a className="ko-link-arrow" style={{ color: accent }}>BOOK A SESSION →</a>
                <a className="ko-link-arrow ko-link-muted">VIEW SCHEDULE →</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Classes = Classes;