// ─────────────────────────────────────────────────────────
// ChefVerse · Course overview (pre-enrollment) screen
// Shown when a NEW chef clicks a course before enrolling.
// ─────────────────────────────────────────────────────────
const COV_STRINGS = {
  en: {
    eyebrow: "COURSE OVERVIEW",
    about: "About this path",
    outcomes: "What you'll be able to do",
    syllabus: "What's inside",
    instructor: "Your instructor",
    enroll: "Enroll & start first module",
    bookmark: "Save for later",
    minutes: "min",
    modules_lab: "modules",
    hours_lab: "hours",
    level_lab: "Level",
    pillar_lab: "Pillar",
    market_fit: "Made for your market",
    paid_brief_unlock: "Unlocks paid briefs in this pillar",
    back: "All paths",
  },
  de: {
    eyebrow: "PFAD-ÜBERSICHT",
    about: "Über diesen Pfad",
    outcomes: "Was du danach können wirst",
    syllabus: "Inhalt",
    instructor: "Deine Lehrkraft",
    enroll: "Einschreiben & erstes Modul starten",
    bookmark: "Merken",
    minutes: "Min.",
    modules_lab: "Module",
    hours_lab: "Stunden",
    level_lab: "Niveau",
    pillar_lab: "Säule",
    market_fit: "Für deinen Markt gemacht",
    paid_brief_unlock: "Schaltet bezahlte Briefings in dieser Säule frei",
    back: "Alle Pfade",
  },
  id: {
    eyebrow: "RINGKASAN JALUR",
    about: "Tentang jalur ini",
    outcomes: "Yang bisa kamu lakukan setelahnya",
    syllabus: "Isi materi",
    instructor: "Pengajar kamu",
    enroll: "Daftar & mulai modul pertama",
    bookmark: "Simpan dulu",
    minutes: "mnt",
    modules_lab: "modul",
    hours_lab: "jam",
    level_lab: "Level",
    pillar_lab: "Pilar",
    market_fit: "Dibuat untuk pasarmu",
    paid_brief_unlock: "Membuka brief berbayar di pilar ini",
    back: "Semua jalur",
  },
};

const COURSE_OUTCOMES = {
  fundamentals: {
    en: ["Light a plate without studio gear", "Hold a phone steady on a hot line", "Pick the angle that flatters your dish in 5 seconds"],
    de: ["Einen Teller ohne Studiotechnik ausleuchten", "Das Handy am Pass ruhig halten", "In 5 Sekunden den Winkel wählen, der dem Gericht schmeichelt"],
    id: ["Tata cahaya piring tanpa alat studio", "Pegang HP stabil di atas line yang panas", "Pilih sudut yang menyanjung dalam 5 detik"],
  },
  story: {
    en: ["Open with a hook that earns 3 seconds", "Build beats your audience can taste", "Land a payoff that drives saves"],
    de: ["Mit einem Hook starten, der 3 Sekunden hält", "Beats bauen, die das Publikum schmeckt", "Ein Payoff landen, das Saves bringt"],
    id: ["Buka dengan hook yang mengikat 3 detik", "Susun beat yang bisa 'dirasakan' penonton", "Tutup dengan payoff yang memicu save"],
  },
  voice: {
    en: ["Speak to one viewer, not the room", "Drop the script, keep the structure", "Sound like yourself on camera, every time"],
    de: ["Zu einer Person sprechen, nicht zum Raum", "Das Skript loslassen, die Struktur halten", "Vor der Kamera klingen wie du selbst"],
    id: ["Bicara ke satu orang, bukan ruangan", "Lepas naskah, pertahankan struktur", "Tetap terdengar 'kamu' di depan kamera"],
  },
  edit: {
    en: ["Cut a 30-second piece in 10 minutes", "Match audio to motion without thinking", "Export-ready in one phone, on the line"],
    de: ["Ein 30-Sekunden-Stück in 10 Minuten schneiden", "Ton an Bewegung anpassen ohne Nachdenken", "Export-bereit auf einem Handy, am Pass"],
    id: ["Potong klip 30 detik dalam 10 menit", "Sinkronkan audio & gerakan tanpa berpikir", "Siap export dari satu HP, langsung di line"],
  },
  brand: {
    en: ["Position your kitchen against three competitors", "Build a content pillar plan you can hold for a year", "Turn followers into a wait-list"],
    de: ["Deine Küche gegenüber drei Wettbewerbern positionieren", "Einen Content-Säulenplan für ein Jahr aufstellen", "Follower zu einer Warteliste machen"],
    id: ["Posisikan dapurmu vs tiga kompetitor", "Susun pilar konten yang tahan setahun", "Ubah follower jadi waiting list"],
  },
  analytics: {
    en: ["Read watch-time the way a chef reads a ticket", "Spot a winning post in its first hour", "Cut what's not working without ego"],
    de: ["Watch-Time lesen wie ein Koch einen Ticket-Bon", "Einen Treffer in der ersten Stunde erkennen", "Schneiden, was nicht funktioniert — ohne Ego"],
    id: ["Baca watch-time seperti chef baca ticket", "Kenali post yang menang di jam pertama", "Buang yang tidak jalan, tanpa ego"],
  },
};

function CourseOverview({ courseId, locale, onBack, onEnroll, onOpenModule }) {
  const v2 = true;
  const s = COV_STRINGS[locale];
  const t = window.I18N[locale];
  const progress = window.useCourseProgress();
  const c = window.COURSES.find(x => x.id === courseId) || window.COURSES[0];
  const pillar = window.PILLARS[c.pillar];
  const outcomes = (COURSE_OUTCOMES[c.id] || COURSE_OUTCOMES.fundamentals)[locale];
  const modList = (window.COURSE_MODULES_BY_ID && window.COURSE_MODULES_BY_ID[c.id]) || [];
  const ms = window.MOD_STRINGS ? window.MOD_STRINGS[locale] : null;

  return (
    <div className="page cov-page">
      {!v2 && (
        <button className="link-btn cov-back" onClick={onBack}>
          <Icon name="arrow-left" size={12} /> {s.back}
        </button>
      )}
      {v2 && (
        <div className="page-head">
          <div>
            <h1>{locale === "de" ? "Module" : locale === "id" ? "Modul" : "Modules"}</h1>
            <p className="lead display-italic">{locale === "de" ? "Acht Module — in Reihenfolge freigeschaltet." : locale === "id" ? "Delapan modul — dibuka berurutan." : "Eight modules — unlocked in order."}</p>
          </div>
        </div>
      )}

      {/* V2 · Featured "current module" card — full width above the grid */}
      {v2 && (() => {
        const featuredIdx = (() => {
          if (!c.enrolled) return 0;
          const cur = modList.findIndex((_, i) => progress.moduleStatus(c.id, i) === "current");
          if (cur >= 0) return cur;
          const nxt = modList.findIndex((_, i) => progress.moduleStatus(c.id, i) === "next");
          return nxt >= 0 ? nxt : 0;
        })();
        const fm = modList[featuredIdx];
        if (!fm) return null;
        const fStatus = c.enrolled ? progress.moduleStatus(c.id, featuredIdx) : "next";
        const fPct = c.enrolled ? progress.modulePct(c.id, featuredIdx) : 0;
        const { done: fDone, total: fTotal } = c.enrolled
          ? progress.moduleChaptersDone(c.id, featuredIdx)
          : { done: 0, total: progress.chapterCount(c.id, featuredIdx) };
        const fMinutes = Math.floor((fm.dur || 360) / 60);
        const fCover = (window.MODULE_COVERS && window.MODULE_COVERS[featuredIdx]) || c.cover;
        const eyebrow = !c.enrolled
          ? (locale === "de" ? "STARTE HIER" : locale === "id" ? "MULAI DI SINI" : "START HERE")
          : fStatus === "current"
            ? (locale === "de" ? "AKTUELLES MODUL" : locale === "id" ? "MODUL SAAT INI" : "CURRENT MODULE")
            : fStatus === "next"
              ? (locale === "de" ? "ALS NÄCHSTES" : locale === "id" ? "BERIKUTNYA" : "UP NEXT")
              : (locale === "de" ? "EMPFOHLEN" : locale === "id" ? "DIREKOMENDASIKAN" : "RECOMMENDED");
        const cta = !c.enrolled
          ? (locale === "de" ? "Kurs starten" : locale === "id" ? "Mulai kursus" : "Start course")
          : fStatus === "current" && fPct === 0
            ? (locale === "de" ? "Modul starten" : locale === "id" ? "Mulai modul" : "Start module")
            : fStatus === "current"
              ? (locale === "de" ? "Fortsetzen" : locale === "id" ? "Lanjutkan" : "Resume")
              : (locale === "de" ? "Modul starten" : locale === "id" ? "Mulai modul" : "Start module");
        const onPrimary = !c.enrolled
          ? () => onEnroll && onEnroll(c.id)
          : () => onOpenModule && onOpenModule(c.id, featuredIdx);
        const moduleLab = locale === "de" ? "Modul" : "Modul" === "Modul" && locale === "id" ? "Modul" : "Module";
        const minutesLab = locale === "de" ? "Min" : locale === "id" ? "menit" : "min";
        const chaptersLab = locale === "de" ? "Kapitel" : locale === "id" ? "bab" : "chapters";
        const ofLab = locale === "de" ? "von" : locale === "id" ? "dari" : "of";
        return (
          <div className="featured-path featured-path-mod">
            <div className="featured-cover" style={{ background: fCover }}>
              <CoverImage src={window.PHOTOS && window.PHOTOS.moduleCoverFor(c.id, featuredIdx)} dim={0.45} />
              <div className="featured-cover-inner">
                <span className="eyebrow" style={{ color: "#fff" }}>{eyebrow}</span>
                <div className="featured-h">{fm.title[locale]}</div>
                {fPct > 0 && fPct < 1 && (
                  <div style={{ marginTop: 18, maxWidth: 320 }}>
                    <div className="cp-bar light"><div style={{ width: `${fPct * 100}%` }} /></div>
                    <div className="subtle" style={{ color: "rgba(255,255,255,0.85)", fontSize: 12, marginTop: 6 }}>
                      {Math.round(fPct * 100)}% · {fDone} / {fTotal} {chaptersLab}
                    </div>
                  </div>
                )}
              </div>
            </div>
            <div className="featured-meta">
              <div className="featured-pill display-italic">
                {moduleLab} {String(featuredIdx + 1).padStart(2, "0")} {ofLab} {String(modList.length).padStart(2, "0")} · with Marco Pierre
              </div>
              <h2>{fm.title[locale]}</h2>
              <p className="lead display-italic" style={{ color: "var(--smoke)" }}>
                {locale === "de"
                  ? `${fTotal} kurze Kapitel mit Praxis und einem Test am Ende. Spielst du das gesamte Modul, sind ${fMinutes} Min eingeplant.`
                  : locale === "id"
                    ? `${fTotal} bab pendek dengan praktik dan kuis di akhir. Modul ini memakan waktu sekitar ${fMinutes} menit.`
                    : `${fTotal} short chapters with hands-on practice and a quick check at the end. The full module runs about ${fMinutes} minutes.`}
              </p>
              <div className="featured-stats">
                <div className="fs-item">
                  <div className="fs-val">{fTotal}</div>
                  <div className="fs-lab">{chaptersLab}</div>
                </div>
                <div className="fs-item">
                  <div className="fs-val">{fMinutes}</div>
                  <div className="fs-lab">{minutesLab}</div>
                </div>
                <div className="fs-item">
                  <div className="fs-val">{c.level[locale]}</div>
                  <div className="fs-lab">{s.level_lab}</div>
                </div>
              </div>
              <div style={{ display: "flex", gap: 8 }}>
                <button className="btn btn-primary" onClick={onPrimary}>
                  <Icon name="play" size={14} /> {cta}
                </button>
                <button className="btn btn-outline" onClick={() => onOpenModule && onOpenModule(c.id, featuredIdx)}>
                  <Icon name="list-video" size={14} /> {locale === "de" ? "Details" : locale === "id" ? "Detail" : "Details"}
                </button>
              </div>
            </div>
          </div>
        );
      })()}

      {/* HERO — hidden in v2 (flat catalog, no marketing) */}
      {!v2 && (
      <div className="cov-hero">
        <div className="cov-cover" style={{ background: c.cover }}>
          <CoverImage src={window.PHOTOS && window.PHOTOS.courseCoverFor(c.id)} dim={0.2} />
          <div className="cov-cover-tag" style={{ background: "rgba(255,255,255,0.92)", color: pillar.color }}>
            {pillar.name[locale]}
          </div>
          <div className="cov-cover-play"><Icon name="play" size={28} style={{ marginLeft: 3 }} /></div>
        </div>
        <div className="cov-meta">
          <span className="eyebrow">{s.eyebrow}</span>
          <h1 className="cov-title">{c.title[locale]}</h1>
          <p className="cov-desc display-italic">{c.desc[locale]}</p>

          <div className="cov-stats">
            <div className="cov-stat">
              <div className="cov-stat-val">{c.modules}</div>
              <div className="cov-stat-lab">{s.modules_lab}</div>
            </div>
            <div className="cov-stat">
              <div className="cov-stat-val">{c.hours}</div>
              <div className="cov-stat-lab">{s.hours_lab}</div>
            </div>
            <div className="cov-stat">
              <div className="cov-stat-val">{c.level[locale]}</div>
              <div className="cov-stat-lab">{s.level_lab}</div>
            </div>
            <div className="cov-stat">
              <div className="cov-stat-val" style={{ color: pillar.color }}>{pillar.name[locale].split(" ")[0]}</div>
              <div className="cov-stat-lab">{s.pillar_lab}</div>
            </div>
          </div>

          <div className="cov-actions">
            <button className="btn btn-primary" onClick={() => onEnroll(c.id)}>
              <Icon name="play" size={14} /> {s.enroll}
            </button>
            <button className="btn btn-outline">
              <Icon name="bookmark-plus" size={14} /> {s.bookmark}
            </button>
          </div>

          <div className="cov-perks">
            <div className="cov-perk"><Icon name="check" size={12} /> {s.market_fit}</div>
            <div className="cov-perk"><Icon name="check" size={12} /> {s.paid_brief_unlock}</div>
          </div>
        </div>
      </div>

      )}

      {/* OUTCOMES — hidden in v2 */}
      {!v2 && (
      <section className="cov-section">
        <h2 className="cov-h2">{s.outcomes}</h2>
        <ul className="cov-outcomes">
          {outcomes.map((o, i) => (
            <li key={i} className="cov-outcome">
              <div className="cov-outcome-pin"><Icon name="check" size={14} /></div>
              <div>{o}</div>
            </li>
          ))}
        </ul>
      </section>

      )}

      {/* SYLLABUS / Modules list */}
      <section className="cov-section">
        {!v2 && <h2 className="cov-h2">{s.syllabus}</h2>}
        {v2 ? (
          <div className="mod-grid">
            {modList.map((m, i) => {
              const status = c.enrolled ? progress.moduleStatus(c.id, i) : (m.status || "next");
              const pct = c.enrolled ? progress.modulePct(c.id, i) : 0;
              const { done, total } = c.enrolled ? progress.moduleChaptersDone(c.id, i) : { done: 0, total: progress.chapterCount(c.id, i) };
              return (
                <window.ModuleCard
                  key={i}
                  module={m}
                  idx={i}
                  locale={locale}
                  status={status}
                  pct={pct}
                  done={done}
                  total={total}
                  onClick={() => onOpenModule && onOpenModule(c.id, i)}
                />
              );
              // Locked modules still open the detail page; the detail's
              // primary CTA disables itself when status === "locked".
            })}
          </div>
        ) : (
          <div className="cov-syllabus">
            {modList.map((m, i) => {
              const status = c.enrolled ? progress.moduleStatus(c.id, i) : (m.status || "next");
              const locked = status === "locked";
              const pct = c.enrolled ? progress.modulePct(c.id, i) : 0;
              const { done, total } = c.enrolled ? progress.moduleChaptersDone(c.id, i) : { done: 0, total: progress.chapterCount(c.id, i) };
              return (
                <button
                  key={i}
                  className={"cov-mod is-" + status + (locked ? " is-locked" : "")}
                  onClick={() => !locked && onOpenModule && onOpenModule(c.id, i)}
                  disabled={locked}
                >
                  <div className="cov-mod-num">
                    {status === "done"
                      ? <Icon name="check" size={14} />
                      : status === "current"
                        ? <span className="cov-mod-dot" />
                        : locked
                          ? <Icon name="lock" size={12} />
                          : String(i + 1).padStart(2, "0")}
                  </div>
                  <div className="cov-mod-body">
                    <div className="cov-mod-title">{m.title[locale]}</div>
                    <div className="cov-mod-meta">
                      <span className="subtle">{Math.floor(m.dur / 60)} {s.minutes}</span>
                      <span className="subtle">·</span>
                      <span className="subtle">{done} / {total} {ms?.chaptersShort || (locale === "de" ? "Kapitel" : locale === "id" ? "bab" : "chapters")}</span>
                      {ms && <ModuleStatusPill status={status} s={ms} />}
                    </div>
                    {c.enrolled && status !== "locked" && (
                      <div className="cov-mod-progress">
                        <div className="cov-mod-progress-fill" style={{ width: `${pct * 100}%` }} />
                      </div>
                    )}
                  </div>
                  {!locked && <Icon name="chevron-right" size={14} />}
                </button>
              );
            })}
          </div>
        )}
      </section>

      {!v2 && (
        <div className="cov-footer">
          <button className="btn btn-primary btn-lg" onClick={() => onEnroll(c.id)}>
            <Icon name="play" size={14} /> {s.enroll}
          </button>
        </div>
      )}
    </div>
  );
}

// Expose MOD_STRINGS to course-overview reuse (defined in module-detail.jsx)
window.CourseOverview = CourseOverview;