{/* Breadcrumb (same as player) */}

{/* LEFT — stage + meta + completion */}

{type === "written" && } {type === "graphic" && } {type === "carousel" && } {/* Title + intro + Save — same meta block as the video player */}

{s.eyebrow}

{lesson.title[locale] || lesson.title.en}

{mod && mod.intro &&

{mod.intro[locale] || mod.intro.en}

}

{/* Completion bar */}

{completed ? ( <> {s.doneMsg} ) : ( {type === "written" && (locale === "de" ? "Bis zum Ende scrollen, um abzuschlie\u00DFen" : locale === "id" ? "Scroll ke bawah untuk menyelesaikan" : "Scroll to the end to complete")} {type === "carousel" && (locale === "de" ? "Alle Karten ansehen, um abzuschlie\u00DFen" : locale === "id" ? "Lihat semua kartu untuk menyelesaikan" : "View all cards to complete")} {type === "graphic" && (locale === "de" ? "Wird beim Ansehen abgeschlossen" : locale === "id" ? "Selesai saat dilihat" : "Completes on view")} )}

{/* RIGHT — Notes (NO chapters) + Resources, same structure as player */}

{s.notes}

setNoteDraft(e.target.value)} placeholder={s.addNote} rows={2} />
                  <button className="btn btn-primary btn-sm" onClick={addNote} disabled={!noteDraft.trim()}>
                    <Icon name="plus" size={12} /> {s.save}
                  </button>
                </div>
                <div className="note-saved-h">
                  <span className="eyebrow">{s.savedNotes}</span>
                  <span className="subtle">{notes.length}</span>
                </div>
                <div className="notes-list">
                  {notes.map((n, i) => (
                    <div key={i} className="note cv-note">
                      <div className="note-text">{n.text}</div>
                      <button className="note-x" onClick={() => setConfirmDel(i)} aria-label="Delete note"><Icon name="x" size={12} /></button>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>

{/* Resources — same as the video player */}
          <div className="player-resources">
            <div className="player-resources-head">
              <span className="eyebrow">{s.resources}</span>
            </div>
            <div className="res-list">
              <ResRow icon="file-text" name={(lesson.title[locale] || lesson.title.en) + " \u2014 recap.pdf"} sub={locale === "de" ? "2 Seiten \u00B7 320 KB" : locale === "id" ? "2 halaman \u00B7 320 KB" : "2 pages \u00B7 320 KB"} />
              <ResRow icon="file-text" name={locale === "de" ? "Spickzettel.pdf" : locale === "id" ? "Contekan.pdf" : "Cheat-sheet.pdf"} sub={locale === "de" ? "1 Seite \u00B7 180 KB" : locale === "id" ? "1 halaman \u00B7 180 KB" : "1 page \u00B7 180 KB"} />
              <ResRow icon="external-link" name="UFS Future Menus 2026" sub={locale === "de" ? "Auszug" : locale === "id" ? "Cuplikan" : "Extract"} cta={locale === "de" ? "\u00D6ffnen" : locale === "id" ? "Buka" : "Open"} />
            </div>
          </div>
        </div>
      </div>

{/* Delete-note confirmation */}
      {confirmDel !== null && (
        <div className="cv-confirm-overlay" onClick={() => setConfirmDel(null)}>
          <div className="cv-confirm" onClick={e => e.stopPropagation()} role="dialog" aria-modal="true">
            <div className="cv-confirm-ic"><Icon name="trash-2" size={20} /></div>
            <h3 className="cv-confirm-title">{s.delTitle}</h3>
            <p className="cv-confirm-body">{s.delBody}</p>
            <div className="cv-confirm-actions">
              <button className="btn btn-outline" onClick={() => setConfirmDel(null)}>{s.delCancel}</button>
              <button className="btn cv-confirm-del" onClick={() => { removeNote(confirmDel); setConfirmDel(null); }}>{s.delConfirm}</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// ── WRITTEN STAGE — completes on scroll-to-bottom ──
function LvWrittenStage({ lesson, locale, completed, onComplete }) {
  const sentinel = useRefLv(null);
  useEffectLv(() => {
    if (completed) return;
    const el = sentinel.current;
    if (!el || !("IntersectionObserver" in window)) { onComplete(); return; }
    const io = new IntersectionObserver((entries) => {
      if (entries.some(e => e.isIntersecting)) { onComplete(); io.disconnect(); }
    }, { threshold: 1.0 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  const paras = _lvWritten(lesson, locale);
  return (
    <div className="lv-stage lv-stage-written">
      <article className="lv-article">
        {paras.map((p, i) => <p key={i}>{p}</p>)}
        <div ref={sentinel} className="lv-article-sentinel" aria-hidden="true" />
      </article>
    </div>
  );
}

// ── GRAPHIC STAGE — completes on view ──
function LvGraphicStage({ lesson, locale, completed, onComplete }) {
  useEffectLv(() => {
    if (completed) return;
    const id = setTimeout(onComplete, 1200);
    return () => clearTimeout(id);
  }, []);
  return (
    <div className="lv-stage lv-stage-graphic">
      <div className="lv-graphic-frame">
        <Icon name="image" size={44} />
        <div className="lv-graphic-cap">{lesson.title[locale] || lesson.title.en}</div>
        <div className="lv-graphic-note">{locale === "de" ? "Infografik" : locale === "id" ? "Infografik" : "Infographic"}</div>
      </div>
    </div>
  );
}

// ── CAROUSEL STAGE — completes when all cards seen ──
function LvCarouselStage({ lesson, locale, completed, onComplete }) {
  const cards = _lvCards(lesson, locale);
  const [idx, setIdx] = useStateLv(0);
  const [seen, setSeen] = useStateLv(() => new Set(completed ? cards.map((_, i) => i) : [0]));
  useEffectLv(() => {
    setSeen(prev => {
      if (prev.has(idx)) return prev;
      const nx = new Set(prev); nx.add(idx);
      if (nx.size === cards.length && !completed) onComplete();
      return nx;
    });
  }, [idx]);
  const atStart = idx === 0, atEnd = idx === cards.length - 1;
  return (
    <div className="lv-stage lv-stage-carousel">
      <div className="lv-carousel-card">
        <div className="lv-carousel-card-h">{cards[idx].h}</div>
        <div className="lv-carousel-card-b">{cards[idx].b}</div>
      </div>
      <div className="lv-carousel-controls">
        <button className="lv-carousel-arrow" disabled={atStart} onClick={() => setIdx(i => Math.max(0, i - 1))} aria-label="Previous"><Icon name="chevron-left" size={18} /></button>
        <div className="lv-carousel-dots">
          {cards.map((_, i) => (
            <button key={i} className={"lv-carousel-dot" + (i === idx ? " active" : "") + (seen.has(i) ? " seen" : "")} onClick={() => setIdx(i)} aria-label={`Card ${i + 1}`} />
          ))}
        </div>
        <button className="lv-carousel-arrow" disabled={atEnd} onClick={() => setIdx(i => Math.min(cards.length - 1, i + 1))} aria-label="Next"><Icon name="chevron-right" size={18} /></button>
      </div>
      <div className="lv-carousel-count">{locale === "de" ? `Karte ${idx + 1} von ${cards.length}` : locale === "id" ? `Kartu ${idx + 1} dari ${cards.length}` : `Card ${idx + 1} of ${cards.length}`}</div>
    </div>
  );
}

window.LessonViewer = LessonViewer;