// CCSE 2026 website — interactive sample-question Quiz + user Reviews.

function Quiz({ t, lang }) {
  const { SectionHeading: SH } = dsLib();
  const Q = window.CCSE_QUIZ || [];
  const total = Q.length;
  const isEs = lang === "es";
  const rtl = t.dir === "rtl";
  const tr = t.quiz;

  const [idx, setIdx] = React.useState(0);
  const [sel, setSel] = React.useState(null);
  const [revealed, setRevealed] = React.useState(false);
  const [score, setScore] = React.useState(0);
  const [done, setDone] = React.useState(false);

  if (!total) return null;
  const q = Q[idx];
  const cur = q.byLang[lang] || q.byLang.es;
  const es = q.byLang.es;
  const answerIdx = cur.answerIndex;

  const choose = (i) => { if (!revealed) setSel(i); };
  const check = () => {
    if (sel == null || revealed) return;
    setRevealed(true);
    if (sel === answerIdx) setScore((s) => s + 1);
  };
  const next = () => {
    if (idx + 1 >= total) { setDone(true); return; }
    setIdx(idx + 1); setSel(null); setRevealed(false);
  };
  const restart = () => { setIdx(0); setSel(null); setRevealed(false); setScore(0); setDone(false); };

  return (
    <section className="section alt" id="preguntas">
      <div className="container">
        <Reveal><SH eyebrow={tr.eyebrow} title={tr.title} lede={tr.lede} /></Reveal>
        <Reveal delay={120}>
          <div className="quizcard" dir={t.dir}>
            {done ? (
              <div className="quizdone">
                <div className="quizscore">{score}<span>/{total}</span></div>
                <p>{fmt(tr.result, { n: score, total })}</p>
                <button className="quizbtn primary" onClick={restart}>{tr.restart}</button>
              </div>
            ) : (
              <React.Fragment>
                <div className="quizmeta">
                  <span className="quizcat">{cur.cat}</span>
                  <span className="quizcount">{fmt(tr.qOf, { i: idx + 1, total })}</span>
                </div>
                <div className="quizq">
                  <p className="quizq-main">{cur.q}</p>
                  {!isEs ? <p className="quizq-sub" dir="ltr">{es.q}</p> : null}
                </div>
                <div className="quizopts">
                  {cur.options.map((opt, i) => {
                    let cls = "quizopt";
                    if (revealed) {
                      if (i === answerIdx) cls += " correct";
                      else if (i === sel) cls += " wrong";
                    } else if (i === sel) cls += " sel";
                    return (
                      <button key={i} className={cls} onClick={() => choose(i)} disabled={revealed}>
                        <span className="quizopt-mark" aria-hidden="true">
                          {revealed && i === answerIdx ? "✓" : revealed && i === sel ? "✕" : String.fromCharCode(65 + i)}
                        </span>
                        <span className="quizopt-text">
                          <span className="quizopt-main">{opt}</span>
                          {!isEs ? <span className="quizopt-sub" dir="ltr">{es.options[i]}</span> : null}
                        </span>
                      </button>
                    );
                  })}
                </div>
                {revealed ? (
                  <div className={"quizexp " + (sel === answerIdx ? "ok" : "no")}>
                    <strong>{sel === answerIdx ? tr.correct : tr.incorrect}</strong>
                    <p>{cur.info}</p>
                  </div>
                ) : null}
                <div className="quizactions">
                  {!revealed
                    ? <button className="quizbtn primary" onClick={check} disabled={sel == null}>{tr.check}</button>
                    : <button className="quizbtn primary" onClick={next}>{tr.next}</button>}
                </div>
              </React.Fragment>
            )}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Reviews({ t }) {
  const { SectionHeading: SH } = dsLib();
  const R = window.CCSE_REVIEWS || [];
  const avg = R.length ? (R.reduce((s, r) => s + r.rating, 0) / R.length) : 0;
  const stars = (n) => "★★★★★".slice(0, n) + "☆☆☆☆☆".slice(0, 5 - n);

  return (
    <section className="section" id="opiniones">
      <div className="container">
        <Reveal><SH eyebrow={t.reviews.eyebrow} title={t.reviews.title} lede={t.reviews.lede} /></Reveal>
        <Reveal delay={100}>
          <div className="ratingline">
            <span className="ratingstars" aria-hidden="true">★★★★★</span>
            <span className="ratingnum">{avg.toFixed(1)}</span>
            <span className="ratingmeta">· App Store &amp; Google Play</span>
          </div>
        </Reveal>
        <div className="reviewgrid">
          {R.map((r, i) => (
            <Reveal key={i} delay={(i % 3) * 80}>
              <figure className="reviewcard" dir={r.lang === "ar" ? "rtl" : "ltr"}>
                <div className="reviewhead">
                  <span className="reviewav" aria-hidden="true">{r.initials}</span>
                  <span className="reviewwho">
                    <span className="reviewname">{r.name}</span>
                    <span className="reviewcity">{r.city} · {r.langLabel}</span>
                  </span>
                  <span className="reviewstars" aria-label={r.rating + "/5"}>{stars(r.rating)}</span>
                </div>
                <blockquote className="reviewtext">{r.text}</blockquote>
                <figcaption className="reviewverified">
                  <Icon name="badge-check" size={13} /> {t.reviews.verified}
                </figcaption>
              </figure>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Quiz, Reviews });