// === Module 4 — UI: Overview, Badges, Mock Exam, Certificate ===

function M4OverviewSection({ state, update, go }) {
  const xp = computeXP(state);
  const lvl = computeLevel(xp);
  const badges = earnedBadges(state);
  const nextThreshold = lvl.next;
  const lvlPct = nextThreshold ? Math.min(100, Math.round((xp / nextThreshold) * 100)) : 100;
  const m1Done = M1_LESSON_IDS.filter(id => m1LessonComplete(id, state)).length;
  const m2Done = M2_TOOL_IDS.filter(id => sectionComplete(id, state)).length;
  const m3Done = state.m3?.finished ? 1 : 0;
  const m4Done = state.m4?.examScore !== null && state.m4?.examScore !== undefined ? 1 : 0;
  const examScore = state.m4?.examScore;
  const certEligible = m1Done >= 5 && m2Done >= 6 && m3Done >= 1 && examScore !== null && examScore !== undefined && examScore >= 70;

  return (
    <div>
      <div className="main-head">
        <div className="crumb">Modul 4 · Gamificare & evaluare</div>
        <h1 className="section-title">Profilul tău de PM</h1>
        <p className="section-lede">
          Acumulezi XP, deblochezi badge-uri, treci Mock Exam ANC și primești certificatul de parcurgere. Toate progresele tale într-un singur loc.
        </p>
        <div className="section-meta">
          <span><Pill kind="info">{badges.length} / {BADGES.length} badge-uri</Pill></span>
          <span className="dot"></span>
          <span>{xp.toLocaleString("ro-RO")} XP · Nivel {lvl.level}</span>
        </div>
      </div>

      {/* Profile card */}
      <div className="profile-card">
        <div className="profile-rank">
          <div className="profile-rank-num">L{lvl.level}</div>
        </div>
        <div className="profile-info">
          <div className="profile-name">{lvl.name}</div>
          <div className="profile-xp-row">
            <span style={{fontFamily: "var(--mono)", fontSize: 12, color: "var(--ink-3)"}}>{xp.toLocaleString("ro-RO")} XP</span>
            {nextThreshold && <span style={{fontFamily: "var(--mono)", fontSize: 12, color: "var(--ink-3)"}}>Următorul nivel: {nextThreshold.toLocaleString("ro-RO")} XP</span>}
            {!nextThreshold && <span style={{fontFamily: "var(--mono)", fontSize: 12, color: "var(--good)"}}>Nivel maxim</span>}
          </div>
          <div className="profile-xp-bar">
            <div className="profile-xp-fill" style={{width: `${lvlPct}%`}}></div>
          </div>
        </div>
      </div>

      {/* Progress strips per module */}
      <div className="m4-progress-grid">
        <div className="m4-prog-card">
          <div className="m4-prog-head">
            <span className="m4-prog-code">M1</span>
            <span className="m4-prog-name">Teorie</span>
          </div>
          <div className="m4-prog-val">{m1Done} / 6</div>
          <div className="m4-prog-bar"><div style={{width: `${(m1Done/6)*100}%`}}></div></div>
          <button className="btn ghost small m4-prog-cta" onClick={() => go("m1-overview")}>Deschide →</button>
        </div>
        <div className="m4-prog-card">
          <div className="m4-prog-head">
            <span className="m4-prog-code">M2</span>
            <span className="m4-prog-name">Instrumente</span>
          </div>
          <div className="m4-prog-val">{m2Done} / 8</div>
          <div className="m4-prog-bar"><div style={{width: `${(m2Done/8)*100}%`}}></div></div>
          <button className="btn ghost small m4-prog-cta" onClick={() => go("m2-overview")}>Deschide →</button>
        </div>
        <div className="m4-prog-card">
          <div className="m4-prog-head">
            <span className="m4-prog-code">M3</span>
            <span className="m4-prog-name">Simulator</span>
          </div>
          <div className="m4-prog-val">{state.m3?.finalScore !== null && state.m3?.finalScore !== undefined ? state.m3.finalScore : "—"}{state.m3?.finalScore !== null && state.m3?.finalScore !== undefined && <span style={{fontSize: 14, color: "var(--ink-3)"}}> / 100</span>}</div>
          <div className="m4-prog-bar"><div style={{width: `${state.m3?.finalScore || 0}%`}}></div></div>
          <button className="btn ghost small m4-prog-cta" onClick={() => go("m3-overview")}>Deschide →</button>
        </div>
        <div className="m4-prog-card mock">
          <div className="m4-prog-head">
            <span className="m4-prog-code">M4</span>
            <span className="m4-prog-name">Mock Exam ANC</span>
          </div>
          <div className="m4-prog-val">{examScore !== null && examScore !== undefined ? `${examScore}%` : "—"}</div>
          <div className="m4-prog-bar"><div style={{width: `${examScore || 0}%`}}></div></div>
          <button className="btn primary small m4-prog-cta" onClick={() => go("m4-exam")}>{examScore !== null && examScore !== undefined ? "Reia examenul" : "Începe →"}</button>
        </div>
      </div>

      {/* Badges */}
      <Card title="Badge-uri" sub={`${badges.length} / ${BADGES.length} OBȚINUTE`}>
        <div className="badges-grid">
          {BADGES.map(b => {
            const earned = b.criterion(state);
            return (
              <div key={b.id} className={`badge ${earned ? `earned tier-${b.tier}` : "locked"}`} title={b.desc}>
                <div className="badge-icon">{b.icon}</div>
                <div className="badge-name">{b.name}</div>
                <div className="badge-desc">{b.desc}</div>
                {earned && <div className="badge-tier-tag">{b.tier}</div>}
              </div>
            );
          })}
        </div>
      </Card>

      {/* Certificate */}
      <Card title="Certificat de parcurgere"
        sub={certEligible ? "DISPONIBIL" : "BLOCAT"}
        action={
          certEligible
            ? <button className="btn primary small" onClick={() => go("m4-certificate")}>Vezi certificat →</button>
            : <Pill>În progres</Pill>
        }>
        <div className="cert-criteria">
          <div className={`cert-crit ${m1Done >= 5 ? "done" : ""}`}>
            <span className="cert-check">{m1Done >= 5 ? "✓" : "○"}</span>
            <span>Modulul 1 finalizat <strong>(5/5 lecții + quiz)</strong></span>
            <span className="cert-status">{m1Done} / 6</span>
          </div>
          <div className={`cert-crit ${m2Done >= 6 ? "done" : ""}`}>
            <span className="cert-check">{m2Done >= 6 ? "✓" : "○"}</span>
            <span>Modulul 2: cel puțin <strong>6 din 8 instrumente</strong> complete</span>
            <span className="cert-status">{m2Done} / 8</span>
          </div>
          <div className={`cert-crit ${m3Done >= 1 ? "done" : ""}`}>
            <span className="cert-check">{m3Done >= 1 ? "✓" : "○"}</span>
            <span>Modulul 3: <strong>cel puțin o simulare</strong> finalizată</span>
            <span className="cert-status">{m3Done >= 1 ? "✓" : "—"}</span>
          </div>
          <div className={`cert-crit ${examScore !== null && examScore !== undefined && examScore >= 70 ? "done" : ""}`}>
            <span className="cert-check">{examScore !== null && examScore !== undefined && examScore >= 70 ? "✓" : "○"}</span>
            <span>Mock Exam ANC trecut cu <strong>cel puțin 70%</strong></span>
            <span className="cert-status">{examScore !== null && examScore !== undefined ? `${examScore}%` : "—"}</span>
          </div>
        </div>
      </Card>
    </div>
  );
}

function MockExamSection({ state, update, go }) {
  const SHUFFLE_KEY = "m4_exam_order";
  const TIME_LIMIT = 30 * 60; // 30 minutes

  const [order, setOrder] = React.useState(() => {
    // Shuffle once per session
    try {
      const saved = sessionStorage.getItem(SHUFFLE_KEY);
      if (saved) return JSON.parse(saved);
    } catch (e) {}
    const idx = MOCK_EXAM.map((_, i) => i);
    for (let i = idx.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [idx[i], idx[j]] = [idx[j], idx[i]];
    }
    try { sessionStorage.setItem(SHUFFLE_KEY, JSON.stringify(idx)); } catch (e) {}
    return idx;
  });

  const [answers, setAnswers] = React.useState({});
  const [submitted, setSubmitted] = React.useState(false);
  const [timeLeft, setTimeLeft] = React.useState(TIME_LIMIT);
  const [started, setStarted] = React.useState(false);
  const [currentIdx, setCurrentIdx] = React.useState(0);
  // Captured the moment the user clicks "Start exam" — used for `quiz_attempts.started_at`
  const [startedAt, setStartedAt] = React.useState(null);

  React.useEffect(() => {
    if (!started || submitted) return;
    const t = setInterval(() => {
      setTimeLeft(prev => {
        if (prev <= 1) { clearInterval(t); doSubmit(); return 0; }
        return prev - 1;
      });
    }, 1000);
    return () => clearInterval(t);
  }, [started, submitted]);

  const startExam = () => {
    setStarted(true);
    setTimeLeft(TIME_LIMIT);
    setAnswers({});
    setSubmitted(false);
    setCurrentIdx(0);
    setStartedAt(new Date().toISOString());
  };

  const select = (qIdx, optIdx) => {
    if (submitted) return;
    setAnswers(prev => ({ ...prev, [qIdx]: optIdx }));
  };

  const doSubmit = () => {
    if (submitted) return;
    const correct = order.filter(qIdx => answers[qIdx] === MOCK_EXAM[qIdx].correct).length;
    const score = Math.round((correct / MOCK_EXAM.length) * 100);
    setSubmitted(true);
    update(s => ({ ...s, m4: { ...(s.m4 || {}), examScore: score, examAttempts: (s.m4?.examAttempts || 0) + 1, examTimestamp: Date.now() }}));

    // Persist the exam attempt to Supabase
    if (window.Storage?.recordQuizAttempt) {
      const questionSet = order.map((qIdx, i) => ({
        idx: i,
        bankIdx: qIdx,
        q: MOCK_EXAM[qIdx].q,
        cat: MOCK_EXAM[qIdx].cat,
        correct: MOCK_EXAM[qIdx].correct
      }));
      const answersArray = order.map((qIdx, i) => ({
        idx: i,
        chosen: answers[qIdx] ?? null,
        correct: answers[qIdx] === MOCK_EXAM[qIdx].correct
      }));
      window.Storage.recordQuizAttempt({
        module: "m4_exam",
        questionSet,
        answers: answersArray,
        score,
        startedAt: startedAt || new Date().toISOString(),
        finishedAt: new Date().toISOString()
      }).catch(() => {});
    }
  };

  const fmtTime = (sec) => {
    const m = Math.floor(sec / 60);
    const s = sec % 60;
    return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
  };

  const answered = Object.keys(answers).length;
  const correct = submitted ? order.filter(qIdx => answers[qIdx] === MOCK_EXAM[qIdx].correct).length : 0;
  const score = submitted ? Math.round((correct / MOCK_EXAM.length) * 100) : 0;
  const passed = score >= 70;
  const distinction = score >= 90;

  if (!started && !submitted) {
    return (
      <div>
        <div className="main-head">
          <div className="crumb">Mock Exam · Modul 4</div>
          <h1 className="section-title">Examenul de simulare ANC</h1>
          <p className="section-lede">
            25 de întrebări din toate cele 3 module. <strong>30 de minute</strong>. Treci cu <strong>minim 70%</strong>. Format similar examenelor ANC reale.
          </p>
        </div>

        <div className="exam-prep-card">
          <div>
            <h3 style={{fontFamily: "var(--display)", fontSize: 22, fontWeight: 600, margin: "0 0 14px", letterSpacing: "-0.02em"}}>Pregătire examen</h3>
            <ul style={{margin: 0, paddingLeft: 20, fontSize: 14, color: "var(--ink-2)", lineHeight: 1.7}}>
              <li><strong>25 întrebări</strong> mixte din: cadru PM, programare, control, risc, organizare, instrumente, planificare, închidere</li>
              <li><strong>30 minute</strong> timer activ — la 0 examenul se închide automat</li>
              <li><strong>Ordinea întrebărilor</strong> e randomizată — diferită la fiecare încercare</li>
              <li><strong>Trecere la 70%</strong> (18+ răspunsuri corecte)</li>
              <li><strong>Distincție la 90%</strong> (23+ răspunsuri corecte)</li>
              <li><strong>Explicații</strong> arătate după trimitere pentru fiecare întrebare</li>
            </ul>
            <p style={{marginTop: 18, fontSize: 13, color: "var(--ink-3)", lineHeight: 1.5}}>
              Nu poți întrerupe examenul. Asigură-te că ai 30 minute libere acum.
            </p>
          </div>
          <button className="btn primary exam-start-btn" onClick={startExam}>Pornește examenul →</button>
        </div>

        {state.m4?.examScore !== null && state.m4?.examScore !== undefined && (
          <Card title="Rezultate anterioare" sub={`${state.m4.examAttempts} încercări`}>
            <div className="exam-prev">
              <div className="exam-prev-score">{state.m4.examScore}%</div>
              <div>
                <div style={{fontFamily: "var(--display)", fontSize: 16, fontWeight: 600}}>{state.m4.examScore >= 70 ? "Trecut" : "Picat"}</div>
                <div className="muted" style={{fontSize: 13}}>{state.m4.examTimestamp ? new Date(state.m4.examTimestamp).toLocaleString("ro-RO") : ""}</div>
              </div>
              {state.m4.examScore >= 70 && (
                <button className="btn primary" onClick={() => go("m4-certificate")}>Certificat →</button>
              )}
            </div>
          </Card>
        )}

        <div className="foot-actions">
          <button className="btn ghost" onClick={() => go("m4-overview")}>← Înapoi la profil</button>
          <span></span>
        </div>
      </div>
    );
  }

  if (submitted) {
    return (
      <div>
        <div className="main-head">
          <div className="crumb">Rezultate · Mock Exam ANC</div>
          <h1 className="section-title">{passed ? (distinction ? "Distincție! 🏆" : "Felicitări — ai trecut!") : "Nu ai trecut acum"}</h1>
          <p className="section-lede">
            Ai răspuns corect la {correct} din {MOCK_EXAM.length} întrebări. Vezi mai jos analiza detaliată.
          </p>
        </div>

        <div className={`exam-result ${passed ? "pass" : "fail"} ${distinction ? "distinction" : ""}`}>
          <div className="exam-result-num">{score}%</div>
          <div className="exam-result-text">
            <div className="exam-result-title">{correct} / {MOCK_EXAM.length} corecte</div>
            <div className="exam-result-sub">
              {distinction ? "Performanță excepțională — sub 5% trec cu distincție." : passed ? "Treci la nivelul minim ANC. Certificatul îți e disponibil." : "Sub pragul de 70%. Revizuiește lecțiile și încearcă din nou."}
            </div>
          </div>
          <div style={{display: "flex", gap: 8, flexDirection: "column"}}>
            <button className="btn ghost" onClick={() => { try { sessionStorage.removeItem(SHUFFLE_KEY); } catch (e) {} setStarted(false); setSubmitted(false); }}>↻ Reia examenul</button>
            {passed && <button className="btn primary" onClick={() => go("m4-certificate")}>Vezi certificat →</button>}
          </div>
        </div>

        {/* Per-category breakdown */}
        <Card title="Analiză pe categorii" sub="UNDE TREBUIE SĂ MAI STUDIEZI">
          {(() => {
            const cats = {};
            order.forEach(qIdx => {
              const q = MOCK_EXAM[qIdx];
              cats[q.cat] = cats[q.cat] || { total: 0, ok: 0 };
              cats[q.cat].total++;
              if (answers[qIdx] === q.correct) cats[q.cat].ok++;
            });
            return (
              <div className="exam-cats">
                {Object.entries(cats).map(([cat, val]) => {
                  const pct = Math.round((val.ok / val.total) * 100);
                  return (
                    <div key={cat} className="exam-cat">
                      <div className="exam-cat-head">
                        <span className="exam-cat-name">{cat}</span>
                        <span className="exam-cat-score">{val.ok} / {val.total}</span>
                      </div>
                      <div className="exam-cat-bar">
                        <div style={{width: `${pct}%`, background: pct >= 70 ? "var(--good)" : pct >= 40 ? "var(--warn)" : "var(--bad)"}}></div>
                      </div>
                    </div>
                  );
                })}
              </div>
            );
          })()}
        </Card>

        <Card title="Toate întrebările — explicații" sub="REVIZUIRE">
          <div className="exam-review">
            {order.map((qIdx, i) => {
              const q = MOCK_EXAM[qIdx];
              const chosen = answers[qIdx];
              const isCorrect = chosen === q.correct;
              return (
                <details key={qIdx} className={`exam-rev-item ${isCorrect ? "ok" : "bad"}`}>
                  <summary>
                    <span className="exam-rev-num">Q{i + 1}</span>
                    <span className="exam-rev-q">{q.q}</span>
                    <span className="exam-rev-mark">{isCorrect ? "✓" : "✗"}</span>
                  </summary>
                  <div className="exam-rev-body">
                    {q.options.map((opt, j) => (
                      <div key={j} className={`exam-rev-opt ${j === q.correct ? "correct" : ""} ${j === chosen && !isCorrect ? "incorrect" : ""}`}>
                        <span className="exam-rev-letter">{String.fromCharCode(65 + j)}</span>
                        <span>{opt}</span>
                        {j === q.correct && <span style={{marginLeft: "auto", color: "var(--good)", fontWeight: 700}}>corect</span>}
                        {j === chosen && j !== q.correct && <span style={{marginLeft: "auto", color: "var(--bad)", fontWeight: 700}}>răspunsul tău</span>}
                      </div>
                    ))}
                    <div className="exam-rev-explain"><strong>Explicație:</strong> {q.explain}</div>
                  </div>
                </details>
              );
            })}
          </div>
        </Card>

        <div className="foot-actions">
          <button className="btn ghost" onClick={() => go("m4-overview")}>← Profil</button>
          {passed && <button className="btn primary" onClick={() => go("m4-certificate")}>Vezi certificat →</button>}
        </div>
      </div>
    );
  }

  // Active exam
  const currentQuestionIdx = order[currentIdx];
  const q = MOCK_EXAM[currentQuestionIdx];

  return (
    <div>
      <div className="exam-bar">
        <div className="exam-bar-progress">
          <span style={{fontFamily: "var(--mono)", fontSize: 12, color: "var(--ink-3)"}}>Întrebarea</span>
          <span style={{fontFamily: "var(--display)", fontSize: 22, fontWeight: 700}}>{currentIdx + 1}</span>
          <span style={{fontFamily: "var(--mono)", fontSize: 13, color: "var(--ink-3)"}}>/ {MOCK_EXAM.length}</span>
        </div>
        <div className="exam-bar-fill">
          <div className="progress-bar" style={{flex: 1, background: "var(--line)"}}>
            <div className="progress-bar-fill" style={{width: `${(answered/MOCK_EXAM.length)*100}%`}}></div>
          </div>
          <span className="muted" style={{fontFamily: "var(--mono)", fontSize: 12, marginLeft: 12}}>{answered} răspunse</span>
        </div>
        <div className={`exam-timer ${timeLeft < 300 ? "danger" : ""}`}>
          <span className="exam-timer-icon">⏱</span>
          <span>{fmtTime(timeLeft)}</span>
        </div>
      </div>

      <div className="exam-question-card">
        <div style={{display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 14, minHeight: 24}}>
          <span style={{fontFamily: "var(--mono)", fontSize: 11, color: "var(--accent)", fontWeight: 700}}>Q{currentIdx + 1} · {q.cat}</span>
          <span style={{visibility: answers[currentQuestionIdx] !== undefined ? "visible" : "hidden"}}>
            <Pill kind="ok">✓ Răspuns</Pill>
          </span>
        </div>
        <h2 className="exam-q-text">{q.q}</h2>
        <div className="exam-options">
          {q.options.map((opt, j) => (
            <button key={j} className={`quiz-opt ${answers[currentQuestionIdx] === j ? "selected" : ""}`}
              onClick={() => select(currentQuestionIdx, j)}>
              <span className="quiz-opt-letter">{String.fromCharCode(65 + j)}</span>
              <span>{opt}</span>
            </button>
          ))}
        </div>
      </div>

      <div className="exam-nav">
        <button className="btn ghost" disabled={currentIdx === 0} onClick={() => setCurrentIdx(currentIdx - 1)}>← Anterior</button>
        <div className="exam-nav-dots">
          {order.map((qIdx, i) => (
            <button key={i}
              className={`exam-dot ${i === currentIdx ? "current" : ""} ${answers[qIdx] !== undefined ? "answered" : ""}`}
              onClick={() => setCurrentIdx(i)}
              title={`Întrebarea ${i + 1}${answers[qIdx] !== undefined ? " · răspuns" : ""}`}>
              {i + 1}
            </button>
          ))}
        </div>
        {currentIdx < MOCK_EXAM.length - 1
          ? <button className="btn" onClick={() => setCurrentIdx(currentIdx + 1)}>Următor →</button>
          : <span style={{width: 90}}></span>  /* spacer to keep nav balanced on last question */
        }
      </div>

      {/* Submit panel — always visible, like a real ANC exam.
          Allows submitting early; unanswered questions count as wrong. */}
      <div className="exam-submit-panel">
        <div className="exam-submit-info">
          <strong>{answered}</strong> din {MOCK_EXAM.length} răspunse
          {answered < MOCK_EXAM.length && (
            <span className="muted" style={{marginLeft: 8}}>
              · {MOCK_EXAM.length - answered} rămase
            </span>
          )}
        </div>
        <button
          className="btn primary"
          onClick={() => {
            if (answered < MOCK_EXAM.length) {
              const skipped = MOCK_EXAM.length - answered;
              if (!confirm(`Mai ai ${skipped} întrebări nerăspunse. Acestea vor fi marcate ca greșite.\n\nSigur vrei să trimiți examenul acum?`)) return;
            }
            doSubmit();
          }}
        >
          Trimite examen →
        </button>
      </div>
    </div>
  );
}

function CertificateSection({ state, update, go }) {
  const m1Done = M1_LESSON_IDS.filter(id => m1LessonComplete(id, state)).length;
  const m2Done = M2_TOOL_IDS.filter(id => sectionComplete(id, state)).length;
  const m3Done = state.m3?.finished ? 1 : 0;
  const examScore = state.m4?.examScore;
  const certEligible = m1Done >= 5 && m2Done >= 6 && m3Done >= 1 && examScore !== null && examScore !== undefined && examScore >= 70;

  const [name, setName] = React.useState(state.org?.authorName || "");
  const [showPrint, setShowPrint] = React.useState(false);
  const today = new Date().toLocaleDateString("ro-RO", { day: "numeric", month: "long", year: "numeric" });
  const certNumber = "PMH-" + (state.m4?.examTimestamp || Date.now()).toString().slice(-8);

  if (!certEligible) {
    return (
      <div>
        <div className="main-head">
          <div className="crumb">Certificat · Modul 4</div>
          <h1 className="section-title">Certificatul tău te așteaptă</h1>
          <p className="section-lede">
            Mai ai puțin până să-l deblochezi. Verifică progresul.
          </p>
        </div>
        <div className="cert-locked">
          <div className="cert-locked-icon">🔒</div>
          <h3 style={{fontFamily: "var(--display)", fontSize: 22, fontWeight: 600, margin: "12px 0 8px"}}>Certificat blocat</h3>
          <p style={{margin: "0 0 18px", color: "var(--ink-2)"}}>Completează cele 4 criterii din profilul tău pentru a debloca certificatul.</p>
          <button className="btn primary" onClick={() => go("m4-overview")}>← Vezi profil</button>
        </div>
      </div>
    );
  }

  return (
    <div>
      <div className="main-head">
        <div className="crumb">Certificat · Modul 4</div>
        <h1 className="section-title">Certificat de parcurgere</h1>
        <p className="section-lede">
          Felicitări! Ai parcurs toate modulele PM Interactive Hub și ai trecut examenul de simulare ANC.
        </p>
      </div>

      <div className="cert-prep">
        <div className="cert-prep-row">
          <label className="lbl">Numele care apare pe certificat</label>
          <input className="txt" value={name} onChange={e => setName(e.target.value)} placeholder="ex. Popescu Andrei-Mihai" />
        </div>
        <div style={{display: "flex", gap: 8, justifyContent: "flex-end"}}>
          <button className="btn ghost" onClick={() => window.print()}>🖨 Tipărește / PDF</button>
        </div>
      </div>

      <div className="cert-doc" id="certificate">
        <div className="cert-corner cert-tl"></div>
        <div className="cert-corner cert-tr"></div>
        <div className="cert-corner cert-bl"></div>
        <div className="cert-corner cert-br"></div>

        <div className="cert-seal">
          <div className="cert-seal-inner">
            <div className="cert-seal-text">PM<br/>HUB</div>
          </div>
        </div>

        <div className="cert-header">
          <div className="cert-eyebrow">PM Interactive Hub · Certificat oficial</div>
        </div>

        <h1 className="cert-title">Certificat de parcurgere</h1>

        <div className="cert-line">Acest document atestă că</div>

        <div className="cert-name">{name || "—"}</div>

        <p className="cert-body">
          a parcurs cu succes programul complet de Management de Proiect oferit prin PM Interactive Hub,<br/>
          incluzând <strong>{m1Done} lecții de teorie</strong>, <strong>{m2Done} instrumente practice</strong>,<br/>
          o simulare integrală de proiect, și a trecut examenul de simulare ANC<br/>
          cu un scor de <strong>{examScore}%</strong>{examScore >= 90 ? " (cu distincție)" : ""}.
        </p>

        <div className="cert-meta">
          <div className="cert-meta-block">
            <div className="cert-meta-label">Data eliberării</div>
            <div className="cert-meta-val">{today}</div>
          </div>
          <div className="cert-meta-block">
            <div className="cert-meta-label">Numărul certificatului</div>
            <div className="cert-meta-val">{certNumber}</div>
          </div>
          <div className="cert-meta-block">
            <div className="cert-meta-label">Scor examen</div>
            <div className="cert-meta-val">{examScore}%</div>
          </div>
        </div>

        <div className="cert-signature">
          <div className="cert-sig-line"></div>
          <div className="cert-sig-label">PM Interactive Hub<br/><span>Platforma de învățare</span></div>
        </div>

        <div className="cert-footer">
          Acest certificat atestă parcurgerea programului. Pentru certificarea oficială ANC, prezintă-te la un centru acreditat.
        </div>
      </div>

      <div className="foot-actions">
        <button className="btn ghost" onClick={() => go("m4-overview")}>← Înapoi la profil</button>
        <button className="btn primary" onClick={() => window.print()}>🖨 Tipărește certificat</button>
      </div>
    </div>
  );
}

Object.assign(window, { M4OverviewSection, MockExamSection, CertificateSection });