// Demo quiz — 3 questions with progress + result animation
const QUESTIONS = [
  {
    subject: "Історія",
    q: "Перемога українсько-татарських військ над московськими військами в битві під Конотопом відбулася...",
    options: ["1648 р.", "1649 р.", "1659 р.", "1672 р."],
    correct: 2,
  },
  {
    subject: "Математика",
    q: "Спрости вираз: 2(3x − 4) + 5(x − 2) = ?",
    options: ["11x − 18", "6x + 3", "11x − 2", "8x − 14"],
    correct: 0,
  },
  {
    subject: "Українська мова",
    q: "Виберіть рядок, у якому всі іменники чоловічого роду:",
    options: ["біль, степ, путь", "Сибір, степ, шампунь", "тюль, мати, Дніпро", "ніч, Київ, степ"],
    correct: 1,
  },
];

function DemoQuiz() {
  const [idx, setIdx] = React.useState(0);
  const [picked, setPicked] = React.useState(null);
  const [answered, setAnswered] = React.useState(false);
  const [score, setScore] = React.useState(0);
  const [done, setDone] = React.useState(false);
  const [xp, setXp] = React.useState(0);

  const q = QUESTIONS[idx];
  const total = QUESTIONS.length;
  const progress = done ? 100 : ((idx + (answered ? 1 : 0)) / total) * 100;

  const submit = () => {
    if (picked == null) return;
    const ok = picked === q.correct;
    setAnswered(true);
    if (ok) {
      setScore((s) => s + 1);
      setXp((x) => x + 10);
    }
  };
  const next = () => {
    if (idx + 1 >= total) { setDone(true); return; }
    setIdx(idx + 1);
    setPicked(null);
    setAnswered(false);
  };
  const reset = () => { setIdx(0); setPicked(null); setAnswered(false); setScore(0); setDone(false); setXp(0); };

  return (
    <section className="section-pad" id="quiz">
      <div className="container">
        <div className="quiz-shell">
          <div>
            <span className="section-eyebrow">Спробуй просто зараз</span>
            <h2 className="section-title">Як це відчувається? <span style={{ color: "var(--o-500)" }}>Зіграй.</span></h2>
            <p className="section-sub">Три справжні питання з НМТ. Без реєстрації, без email, без СМС. Просто щоб побачити, наскільки це затягує.</p>
            <div style={{ marginTop: 28, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
              <div className="card stat-mini">
                <div className="ic" style={{ background: "#FFEDD5", color: "#F97316" }}><Icon name="flame"/></div>
                <div>
                  <div className="big">7 днів</div>
                  <div className="lbl">Стрік</div>
                </div>
              </div>
              <div className="card stat-mini">
                <div className="ic" style={{ background: "#FEF3C7", color: "#CA8A04" }}><Icon name="bolt"/></div>
                <div>
                  <div className="big">+120 XP</div>
                  <div className="lbl">За сесію</div>
                </div>
              </div>
              <div className="card stat-mini">
                <div className="ic" style={{ background: "#DCFCE7", color: "#22C55E" }}><Icon name="target"/></div>
                <div>
                  <div className="big">82%</div>
                  <div className="lbl">Точність</div>
                </div>
              </div>
              <div className="card stat-mini">
                <div className="ic" style={{ background: "#DBEAFE", color: "#3B82F6" }}><Icon name="book"/></div>
                <div>
                  <div className="big">2 460</div>
                  <div className="lbl">Питань пройдено</div>
                </div>
              </div>
            </div>
          </div>

          <div className="quiz-card">
            {!done ? (
              <React.Fragment>
                <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 20 }}>
                  <div className="q-progress" style={{ flex: 1 }}>
                    <i style={{ width: progress + "%" }}/>
                  </div>
                  <span style={{ fontSize: 13, fontWeight: 800, color: "var(--muted)" }}>{idx + 1}/{total}</span>
                </div>
                <span className="tag" style={{ background: "#DBEAFE", color: "#1D4ED8" }}>{q.subject.toUpperCase()}</span>
                <h3 style={{ fontSize: 22, fontWeight: 800, lineHeight: 1.3, margin: "14px 0 22px" }}>{q.q}</h3>
                <div style={{ display: "grid", gap: 10 }}>
                  {q.options.map((opt, i) => {
                    let cls = "q-option";
                    if (answered) {
                      if (i === q.correct) cls += " correct";
                      else if (i === picked) cls += " wrong";
                    } else if (picked === i) cls += " selected";
                    return (
                      <button key={i} className={cls} onClick={() => !answered && setPicked(i)}>
                        <span className="letter">{["А","Б","В","Г"][i]}</span>
                        <span>{opt}</span>
                      </button>
                    );
                  })}
                </div>
                <div style={{ marginTop: 20 }}>
                  {!answered ? (
                    <button className="btn btn-orange" style={{ width: "100%", justifyContent: "center", opacity: picked == null ? 0.5 : 1 }} onClick={submit} disabled={picked == null}>
                      Відповісти
                    </button>
                  ) : (
                    <button className="btn btn-primary" style={{ width: "100%", justifyContent: "center" }} onClick={next}>
                      {idx + 1 >= total ? "Побачити результат" : "Наступне питання"}
                      <Icon name="arrow" size={16}/>
                    </button>
                  )}
                </div>
              </React.Fragment>
            ) : (
              <div style={{ textAlign: "center", padding: "16px 8px" }}>
                <div style={{ fontSize: 14, color: "var(--muted)", fontWeight: 700 }}>Сесію завершено!</div>
                <div style={{ fontSize: 84, fontWeight: 900, color: "var(--o-500)", lineHeight: 1, letterSpacing: "-0.04em", margin: "10px 0" }}>
                  {score}<span style={{ color: "#CBD5E1", fontSize: 48 }}>/{total}</span>
                </div>
                <div style={{ fontSize: 18, fontWeight: 800, color: "var(--o-600)" }}>+{xp} XP</div>
                <div style={{ background: "var(--bg-2)", borderRadius: 18, padding: 16, marginTop: 20, fontWeight: 600, color: "var(--ink-2)" }}>
                  {score === total ? "🚀 Ідеально! Ти готовий до 200 балів." :
                   score >= 2 ? "🔥 Сильно! Невелике тренування і будеш топом." :
                   "💪 Не страшно — для того й тренування. Спробуй у застосунку."}
                </div>
                <div style={{ display: "flex", gap: 10, marginTop: 22 }}>
                  <button className="btn btn-ghost" style={{ flex: 1, justifyContent: "center" }} onClick={reset}>Ще раз</button>
                  <a href="#download" className="btn btn-orange" style={{ flex: 1, justifyContent: "center" }}>Грати в застосунку</a>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}
window.DemoQuiz = DemoQuiz;