function ChannelScreen({ moduleCode, onPickLesson, onExit }) {
  const [lessons, setLessons] = React.useState([]);
  const [status, setStatus] = React.useState('loading'); // loading | ready | error
  const [error, setError] = React.useState('');

  React.useEffect(() => {
    let active = true;
    setStatus('loading');
    setError('');
    (async () => {
      try {
        const { lessons: rows } = await window.ayaniFetchLessons(moduleCode);
        if (!active) return;
        setLessons(rows);
        setStatus('ready');
      } catch (err) {
        if (active) { setError(err.message || 'Could not load lessons.'); setStatus('error'); }
      }
    })();
    return () => { active = false; };
  }, [moduleCode]);

  return (
    <div className="ay-screen ay-channel" data-screen-label="03 Channel">
      <AyaniBeam />
      <ExitPanel onExit={onExit} simple />

      <div className="ay-channel-body">
        {status === 'loading' && <div className="ay-menu-status">Loading lessons…</div>}
        {status === 'error' && <div className="ay-menu-status is-error">{error}</div>}
        {status === 'ready' && (
          <div className="ay-lesson-list">
            {lessons.map((l) => (
              <React.Fragment key={l.id}>
              {l.divider_label && (
                <div className="ay-lesson-divider"><span>{l.divider_label}</span></div>
              )}
              <button
                className={`ay-lesson-row ${l.progress > 0 && l.progress < 95 ? 'is-active' : ''}`}
                onClick={() => onPickLesson(l)}
              >
                <img className="ay-lesson-mark" src="assets/ayani-wordmark-trimmed.jpg" alt="" />
                <span className="ay-lesson-title">{l.title}</span>
              </button>
              </React.Fragment>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}
window.ChannelScreen = ChannelScreen;