<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Start: <%= quiz.title %></title>
  <link rel="stylesheet" href="<%= base %>/public/css/style.css">
</head>
<body>

<nav class="nav">
  <div class="nav-brand">&#9632; <span>Quiz</span>Platform</div>
  <div class="nav-links">
    <a href="<%= base %>/">All Quizzes</a>
  </div>
</nav>

<div class="page">
  <div class="container" style="max-width:540px;">

    <div style="text-align:center;margin-bottom:2rem;">
      <div style="display:inline-flex;align-items:center;gap:8px;background:var(--cream-dark);padding:6px 14px;border-radius:20px;font-size:0.82rem;color:var(--text-muted);margin-bottom:1rem;">
        &#9654; Ready to begin
      </div>
      <h1 style="margin-bottom:0.75rem;"><%= quiz.title %></h1>
      <p style="color:var(--text-muted);"><%= quiz.description || '' %></p>
    </div>

    <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:2rem;">
      <div style="background:var(--white);border-radius:var(--radius);padding:1.25rem;text-align:center;box-shadow:var(--shadow);">
        <div style="font-family:'DM Serif Display',serif;font-size:2rem;color:var(--accent);"><%= quiz.time_limit %></div>
        <div style="font-size:0.78rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.06em;">Minutes</div>
      </div>
      <div style="background:var(--white);border-radius:var(--radius);padding:1.25rem;text-align:center;box-shadow:var(--shadow);">
        <div style="font-family:'DM Serif Display',serif;font-size:2rem;color:var(--navy);">MCQ</div>
        <div style="font-size:0.78rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.06em;">Format</div>
      </div>
    </div>

    <div class="form-card" style="max-width:100%;">
      <p class="section-title">Your Details</p>
      <form action="<%= base %>/quiz/<%= quiz.id %>/attempt" method="GET">
        <div class="form-group">
          <label for="name">Full Name</label>
          <input type="text" id="name" name="name" placeholder="Enter your full name" required autofocus>
        </div>
        <button type="submit" class="btn btn-primary btn-full" style="padding:14px;">
          Begin Assessment &rarr;
        </button>
      </form>
    </div>

    <p style="text-align:center;margin-top:1.5rem;font-size:0.85rem;color:var(--text-muted);">
      The timer starts as soon as you begin. You cannot pause once started.
    </p>

  </div>
</div>

</body>
</html>
