<?php
declare(strict_types=1);
@ini_set('display_errors', '1');
@error_reporting(E_ALL);
@date_default_timezone_set('UTC');

$now = date('Y-m-d H:i:s');
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
?>
<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Викторина «Что я знаю о Беларуси»</title>
<?php if ($projectDescription): ?>
  <meta name="description" content="<?= htmlspecialchars($projectDescription) ?>" />
  <meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
  <meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
<?php endif; ?>
<?php if ($projectImageUrl): ?>
  <meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
  <meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
<?php endif; ?>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="assets/css/custom.css?v=<?= time(); ?>" rel="stylesheet">
</head>
<body>
  <header class="border-bottom bg-white sticky-top">
    <nav class="navbar navbar-expand-lg navbar-light container py-3">
      <a class="navbar-brand fw-semibold" href="/">Викторина «Беларусь»</a>
      <div class="ms-auto d-flex gap-3 small text-muted">
        <span class="d-none d-md-inline">Режим: ведущий</span>
        <span>Обновлено: <?= htmlspecialchars($now) ?> (UTC)</span>
      </div>
    </nav>
  </header>

  <main class="container my-4 my-lg-5">
    <section class="hero-card mb-4 mb-lg-5">
      <div class="row g-4 align-items-center">
        <div class="col-lg-7">
          <p class="text-uppercase small text-muted mb-2">Интерактив для 5‑го класса</p>
          <h1 class="display-6 fw-bold mb-3">Что я знаю о Беларуси</h1>
          <p class="text-muted mb-4">
            Быстрый сценарий для учителя: вопросы на экране, варианты ответов,
            затем правильный ответ и короткий факт. Никаких аккаунтов и подготовки.
          </p>
          <div class="d-flex flex-wrap gap-2">
            <button id="startQuizBtn" class="btn btn-primary btn-lg">Начать викторину</button>
            <a href="#guide" class="btn btn-outline-secondary btn-lg">Как проводить</a>
          </div>
        </div>
        <div class="col-lg-5">
          <div class="stat-stack p-4">
            <div class="d-flex justify-content-between align-items-center border-bottom pb-3 mb-3">
              <span class="text-muted">Вопросов</span>
              <span class="fw-semibold" id="totalQuestions">12</span>
            </div>
            <div class="d-flex justify-content-between align-items-center border-bottom pb-3 mb-3">
              <span class="text-muted">Темы</span>
              <span class="fw-semibold">символы • география • культура</span>
            </div>
            <div class="d-flex justify-content-between align-items-center">
              <span class="text-muted">Длительность</span>
              <span class="fw-semibold">15–25 минут</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section id="quiz" class="quiz-card mb-4 mb-lg-5 d-none">
      <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-3">
        <div>
          <p class="text-muted small mb-1">Прогресс</p>
          <h2 class="h5 mb-0" id="questionProgress">Вопрос 1 из 12</h2>
        </div>
        <div class="score-badge">
          <span class="text-muted small">Счёт класса</span>
          <span class="fs-4 fw-semibold" id="classScore">0</span>
        </div>
      </div>

      <div class="question-area">
        <div class="question-label text-uppercase small text-muted mb-2">Вопрос</div>
        <h3 class="h4 mb-3" id="questionText">Готовы?</h3>
        <ul class="list-unstyled option-list" id="optionList"></ul>
      </div>

      <div class="answer-area mt-4 d-none" id="answerArea">
        <div class="alert alert-light border" role="status">
          <div class="d-flex flex-column flex-lg-row gap-3 align-items-start">
            <figure class="answer-figure mb-0">
              <img id="answerImage" src="" alt="" class="answer-image" loading="lazy" width="560" height="320">
            </figure>
            <div class="w-100">
              <div class="answer-pill mb-2">Правильный ответ</div>
              <p class="mb-1 fw-semibold" id="correctAnswer"></p>
              <p class="mb-0 text-muted" id="factText"></p>
            </div>
          </div>
        </div>
        <p class="mt-3 mb-0 fw-semibold" id="answerResult"></p>
      </div>

      <div class="d-flex flex-wrap gap-2 mt-4">
        <button class="btn btn-dark" id="revealBtn">Показать ответ</button>
        <button class="btn btn-outline-dark d-none" id="nextBtn">Следующий вопрос</button>
      </div>
    </section>

    <section id="summary" class="quiz-card d-none">
      <div class="d-flex flex-column flex-lg-row justify-content-between align-items-start gap-3 mb-3">
        <div>
          <p class="text-muted small mb-1">Итоги викторины</p>
          <h2 class="h4 mb-0">Класс набрал <span id="finalScore">0</span> баллов</h2>
        </div>
        <button class="btn btn-outline-primary" id="restartBtn">Пройти ещё раз</button>
      </div>
      <div class="alert alert-light border" role="status">
        <p class="mb-2 fw-semibold">Правильные ответы и факты</p>
        <div id="summaryList" class="summary-list"></div>
      </div>
    </section>

    <section id="guide" class="mb-5">
      <div class="row g-4">
        <div class="col-lg-6">
          <article class="info-card">
            <h2 class="h5 fw-semibold mb-3">Сценарий для учителя</h2>
            <ol class="text-muted">
              <li>Нажмите «Начать викторину» и выводите вопросы на экран.</li>
              <li>Дайте детям 20–30 секунд на обсуждение.</li>
              <li>Выберите вариант ответа, затем нажмите «Показать ответ».</li>
              <li>В конце покажите итоги и обсудите факты.</li>
            </ol>
          </article>
        </div>
        <div class="col-lg-6">
          <article class="info-card">
            <h2 class="h5 fw-semibold mb-3">Подсказки</h2>
            <ul class="text-muted mb-0">
              <li>Можно вести счёт по рядам или командам, используя «Счёт класса».</li>
              <li>Если нужно, остановите викторину и обсудите факт дня.</li>
              <li>Вопросы можно заменить прямо в <code>assets/js/main.js</code>.</li>
            </ul>
          </article>
        </div>
      </div>
    </section>
  </main>

  <footer class="border-top bg-white">
    <div class="container py-4 small text-muted d-flex flex-wrap justify-content-between gap-2">
      <span>Викторина для показа на экране.</span>
      <span>Сделано для урока в 5‑м классе.</span>
    </div>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" defer></script>
  <script src="assets/js/main.js?v=<?= time(); ?>" defer></script>
</body>
</html>
