import { useState, useEffect } from "react";

const STYLE = `
  @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@400;500;600&display=swap');

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --forest: #1C2B1E;
    --forest-mid: #243228;
    --forest-light: #2E3F31;
    --sage: #7A9E7E;
    --sage-light: #A8C4AB;
    --cream: #F0EDE4;
    --cream-dim: #C8C4B8;
    --terracotta: #C4704A;
    --terracotta-light: #E8906A;
    --gold: #D4A853;
    --correct: #4A8C5C;
    --correct-bg: #1E3828;
    --wrong: #9C3D2E;
    --wrong-bg: #2E1A18;
    --radius: 16px;
    --card-w: min(420px, 92vw);
    --card-h: 340px;
  }

  body {
    font-family: 'Inter', sans-serif;
    background: var(--forest);
    color: var(--cream);
    min-height: 100vh;
    line-height: 1.6;
  }

  .app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 16px 60px;
    background:
      radial-gradient(ellipse 80% 40% at 50% 0%, #2A4A2E 0%, transparent 70%),
      var(--forest);
  }

  /* ── Header ─────────────────────────────── */
  .header {
    text-align: center;
    padding: 48px 0 32px;
    max-width: 560px;
  }
  .header-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--sage);
    margin-bottom: 12px;
  }
  .header h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(28px, 6vw, 42px);
    font-weight: 700;
    color: var(--cream);
    line-height: 1.15;
    margin-bottom: 14px;
  }
  .header h1 em {
    font-style: italic;
    color: var(--sage-light);
  }
  .header p {
    font-size: 15px;
    color: var(--cream-dim);
    max-width: 380px;
    margin: 0 auto;
  }

  /* ── Progress bar ───────────────────────── */
  .progress-wrap {
    width: 100%;
    max-width: 560px;
    margin: 0 auto 32px;
  }
  .progress-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--cream-dim);
  }
  .progress-meta strong { color: var(--cream); }
  .progress-track {
    height: 4px;
    background: var(--forest-light);
    border-radius: 99px;
    overflow: hidden;
  }
  .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--sage), var(--sage-light));
    border-radius: 99px;
    transition: width 0.5s cubic-bezier(.4,0,.2,1);
  }

  /* ── Score dots ─────────────────────────── */
  .score-dots {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 24px;
  }
  .dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--forest-light);
    border: 1.5px solid transparent;
    transition: all 0.3s;
  }
  .dot.correct { background: var(--correct); border-color: var(--sage); }
  .dot.wrong { background: var(--wrong); border-color: var(--terracotta); }
  .dot.current { border-color: var(--sage-light); }

  /* ── Flip card ──────────────────────────── */
  .scene {
    width: var(--card-w);
    height: var(--card-h);
    perspective: 1000px;
    margin: 0 auto 28px;
  }
  .card {
    width: 100%; height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.65s cubic-bezier(.4,0,.2,1);
  }
  .card.flipped { transform: rotateY(180deg); }

  .card-face {
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  /* Back face — botanical pattern */
  .card-back {
    background: var(--forest-mid);
    border: 1.5px solid #3A5A3E;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .card-back svg.pattern {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    opacity: 0.13;
  }
  .card-back-content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 28px;
  }
  .card-back-content .q-number {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--sage);
    margin-bottom: 16px;
  }
  .card-back-content .question-text {
    font-family: 'Playfair Display', serif;
    font-size: clamp(16px, 3.5vw, 20px);
    line-height: 1.45;
    color: var(--cream);
    margin-bottom: 20px;
  }
  .flip-hint {
    font-size: 12px;
    color: var(--sage);
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    opacity: 0.8;
  }

  /* Front face — answers */
  .card-front {
    background: var(--forest-mid);
    border: 1.5px solid #3A5A3E;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    padding: 20px;
    overflow: hidden;
  }
  .card-front .q-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--sage);
    margin-bottom: 10px;
  }
  .card-front .q-short {
    font-family: 'Playfair Display', serif;
    font-size: 13px;
    color: var(--cream-dim);
    margin-bottom: 14px;
    line-height: 1.35;
    /* clamp to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
  }
  .option-btn {
    background: var(--forest-light);
    border: 1.5px solid #3A5A3E;
    border-radius: 10px;
    color: var(--cream);
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    padding: 9px 14px;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1.35;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .option-btn:hover:not(:disabled) {
    background: #3A5A3E;
    border-color: var(--sage);
    color: var(--cream);
  }
  .option-btn:disabled { cursor: default; }
  .option-btn.correct {
    background: var(--correct-bg);
    border-color: var(--sage);
    color: #90D4A0;
  }
  .option-btn.wrong {
    background: var(--wrong-bg);
    border-color: var(--terracotta);
    color: #F09080;
  }
  .option-btn.reveal-correct {
    background: var(--correct-bg);
    border-color: #4A8C5C;
    color: #90D4A0;
    opacity: 0.7;
  }
  .opt-letter {
    min-width: 22px; height: 22px;
    border-radius: 6px;
    background: rgba(255,255,255,0.07);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    flex-shrink: 0;
  }
  .option-btn.correct .opt-letter { background: rgba(74,140,92,0.3); }
  .option-btn.wrong .opt-letter { background: rgba(156,61,46,0.3); }

  /* ── Explanation panel ──────────────────── */
  .explanation {
    background: var(--forest-mid);
    border: 1.5px solid;
    border-radius: var(--radius);
    padding: 18px 20px;
    max-width: var(--card-w);
    width: 100%;
    margin: 0 auto 24px;
    animation: slideUp 0.35s ease;
  }
  .explanation.correct { border-color: var(--correct); }
  .explanation.wrong { border-color: var(--terracotta); }
  .explanation-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
  }
  .result-badge {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 99px;
  }
  .result-badge.correct { background: var(--correct-bg); color: #90D4A0; border: 1px solid var(--correct); }
  .result-badge.wrong { background: var(--wrong-bg); color: #F09080; border: 1px solid var(--terracotta); }
  .explanation p {
    font-size: 13.5px;
    color: var(--cream-dim);
    line-height: 1.6;
  }
  .explanation p em {
    font-style: italic;
    color: var(--sage-light);
  }

  /* ── Next button ────────────────────────── */
  .btn-next {
    display: block;
    margin: 0 auto;
    padding: 13px 36px;
    background: linear-gradient(135deg, var(--sage), #5A8060);
    border: none;
    border-radius: 99px;
    color: var(--forest);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 20px rgba(122,158,126,0.25);
  }
  .btn-next:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(122,158,126,0.35); }
  .btn-next:active { transform: translateY(0); }

  /* ── Loading ────────────────────────────── */
  .loading-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 60px 0;
  }
  .leaf-spinner {
    width: 56px; height: 56px;
    animation: spin 1.8s linear infinite;
    filter: drop-shadow(0 0 12px rgba(122,158,126,0.4));
  }
  .loading-wrap p {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    color: var(--sage-light);
    font-size: 16px;
  }

  /* ── Results screen ─────────────────────── */
  .results {
    text-align: center;
    padding: 40px 0;
    max-width: 480px;
    animation: fadeIn 0.5s ease;
  }
  .results-icon {
    font-size: 56px;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 20px rgba(122,158,126,0.5));
  }
  .results h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(24px, 5vw, 34px);
    margin-bottom: 10px;
    color: var(--cream);
  }
  .score-big {
    font-family: 'Playfair Display', serif;
    font-size: clamp(52px, 12vw, 80px);
    font-weight: 700;
    color: var(--sage-light);
    line-height: 1;
    margin: 20px 0;
    letter-spacing: -2px;
  }
  .score-big span { font-size: 0.45em; color: var(--cream-dim); vertical-align: middle; }
  .results-comment {
    font-size: 15px;
    color: var(--cream-dim);
    margin-bottom: 36px;
    line-height: 1.7;
  }
  .btn-restart {
    padding: 14px 44px;
    background: linear-gradient(135deg, var(--terracotta), #A05A38);
    border: none;
    border-radius: 99px;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 20px rgba(196,112,74,0.3);
  }
  .btn-restart:hover { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(196,112,74,0.4); }

  /* ── Error ──────────────────────────────── */
  .error-box {
    background: var(--wrong-bg);
    border: 1.5px solid var(--terracotta);
    border-radius: var(--radius);
    padding: 24px;
    max-width: 440px;
    text-align: center;
    margin: 40px auto;
  }
  .error-box h3 {
    font-family: 'Playfair Display', serif;
    color: #F09080;
    margin-bottom: 10px;
    font-size: 20px;
  }
  .error-box p { font-size: 14px; color: var(--cream-dim); margin-bottom: 20px; }

  /* ── Animations ─────────────────────────── */
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes slideUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .card { transition: none; }
    .explanation { animation: none; }
  }
`;

const LETTERS = ["A", "B", "C", "D"];

function BotanicalPattern() {
  return (
    <svg className="pattern" viewBox="0 0 400 340" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      {/* Wattle sprigs */}
      <line x1="40" y1="200" x2="100" y2="120" stroke="#7A9E7E" strokeWidth="1.5"/>
      <circle cx="78" cy="148" r="5" fill="#7A9E7E"/>
      <circle cx="62" cy="168" r="4" fill="#7A9E7E"/>
      <circle cx="90" cy="130" r="6" fill="#7A9E7E"/>
      <circle cx="100" cy="120" r="4" fill="#7A9E7E"/>
      {/* Leaf pairs on stem */}
      <ellipse cx="60" cy="163" rx="14" ry="5" fill="none" stroke="#7A9E7E" strokeWidth="1" transform="rotate(-40 60 163)"/>
      <ellipse cx="74" cy="143" rx="13" ry="5" fill="none" stroke="#7A9E7E" strokeWidth="1" transform="rotate(-50 74 143)"/>
      <ellipse cx="88" cy="127" rx="12" ry="4" fill="none" stroke="#7A9E7E" strokeWidth="1" transform="rotate(-55 88 127)"/>
      {/* Banksia cone */}
      <ellipse cx="300" cy="100" rx="22" ry="38" fill="none" stroke="#7A9E7E" strokeWidth="1.5"/>
      {[0,1,2,3,4,5,6,7].map(i => (
        <ellipse key={i} cx="300" cy={70 + i*9.5} rx={14 - Math.abs(i-3.5)*1.5} ry="3.5" fill="none" stroke="#7A9E7E" strokeWidth="1"/>
      ))}
      <line x1="300" y1="138" x2="300" y2="200" stroke="#7A9E7E" strokeWidth="1.5"/>
      {/* Banksia leaves */}
      <path d="M300 175 Q270 168 258 155" fill="none" stroke="#7A9E7E" strokeWidth="1.5"/>
      <path d="M258 155 Q264 162 270 160" fill="none" stroke="#7A9E7E" strokeWidth="1"/>
      <path d="M300 185 Q330 178 340 165" fill="none" stroke="#7A9E7E" strokeWidth="1.5"/>
      {/* Grass tree */}
      <line x1="200" y1="340" x2="200" y2="220" stroke="#7A9E7E" strokeWidth="2.5"/>
      <line x1="200" y1="220" x2="200" y2="140" stroke="#7A9E7E" strokeWidth="1.5"/>
      {[...Array(16)].map((_, i) => {
        const angle = (i / 15) * Math.PI * 2;
        const len = 28 + Math.sin(i * 1.3) * 8;
        return (
          <line key={i}
            x1="200" y1="220"
            x2={200 + Math.cos(angle) * len}
            y2={220 + Math.sin(angle) * len * 0.3}
            stroke="#7A9E7E" strokeWidth="0.8" />
        );
      })}
      {/* Bottlebrush */}
      <line x1="80" y1="290" x2="150" y2="250" stroke="#7A9E7E" strokeWidth="1.5"/>
      {[0,1,2,3,4,5].map(i => {
        const t = i / 5;
        const bx = 80 + t * 70;
        const by = 290 - t * 40;
        return (
          <g key={i}>
            {[0,1,2,3,4,5,6,7].map(j => {
              const a = (j / 8) * Math.PI * 2;
              return <line key={j} x1={bx} y1={by} x2={bx + Math.cos(a)*9} y2={by + Math.sin(a)*9} stroke="#7A9E7E" strokeWidth="0.7"/>;
            })}
          </g>
        );
      })}
      {/* Kangaroo paw outlines */}
      <path d="M340 280 Q360 260 355 240 Q350 235 345 240 Q348 255 330 268Z" fill="none" stroke="#7A9E7E" strokeWidth="1.2"/>
      <path d="M345 275 Q368 255 362 232 Q356 226 351 233 Q355 248 336 262Z" fill="none" stroke="#7A9E7E" strokeWidth="1.2"/>
      <line x1="338" y1="278" x2="338" y2="340" stroke="#7A9E7E" strokeWidth="1.5"/>
    </svg>
  );
}

function LeafSpinner() {
  return (
    <svg className="leaf-spinner" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M28 4 C14 4 4 16 4 28 C4 22 10 14 20 12 C18 20 20 30 28 36 C36 30 38 20 36 12 C46 14 52 22 52 28 C52 16 42 4 28 4Z" fill="#7A9E7E" opacity="0.9"/>
      <line x1="28" y1="36" x2="28" y2="52" stroke="#7A9E7E" strokeWidth="2.5" strokeLinecap="round"/>
    </svg>
  );
}

async function fetchQuestions() {
  const prompt = `You are a botanist creating a quiz about native Victorian plants (Victoria, Australia).
Generate exactly 10 multiple-choice quiz questions about native Victorian plants.
Cover diverse topics: identification features, habitats, ecological roles, Aboriginal uses, common names vs scientific names, flowering seasons, conservation status.

Respond ONLY with a valid JSON array, no markdown, no preamble. Format:
[
  {
    "question": "Full question text?",
    "options": ["Option A", "Option B", "Option C", "Option D"],
    "correct": 0,
    "explanation": "2-3 sentence explanation of the correct answer, mentioning the plant's scientific name in italics using HTML <em> tags."
  }
]
"correct" is the 0-based index of the correct option.`;

  const res = await fetch("https://api.anthropic.com/v1/messages", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "x-api-key": "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",
      "anthropic-version": "2023-06-01",
      "anthropic-dangerous-direct-browser-access": "true",
    },
    body: JSON.stringify({
      model: "claude-sonnet-4-6",
      max_tokens: 3000,
      messages: [{ role: "user", content: prompt }],
    }),
  });

  if (!res.ok) {
    const err = await res.json().catch(() => ({}));
    throw new Error(err?.error?.message || `API error ${res.status}`);
  }

  const data = await res.json();
  const text = data.content.map(b => b.text || "").join("");
  const clean = text.replace(/```json|```/g, "").trim();
  const questions = JSON.parse(clean);
  if (!Array.isArray(questions) || questions.length === 0) throw new Error("Invalid response format");
  return questions;
}

function getResultComment(score, total) {
  const pct = score / total;
  if (pct === 1) return "A perfect score! You know Victorian flora like a seasoned field botanist. The bush would be proud.";
  if (pct >= 0.8) return "Excellent work — you clearly have a keen eye for our native bush. A few more walks through the Grampians and you'll be unbeatable.";
  if (pct >= 0.6) return "A solid effort! Victoria's flora is wonderfully complex. Keep exploring and the names will become second nature.";
  if (pct >= 0.4) return "A good start on your botanical journey. Victoria has over 4,000 native plant species — there's plenty more to discover.";
  return "Every expert started somewhere. Grab a field guide and head to your nearest bushland — the plants are waiting to introduce themselves.";
}

export default function App() {
  const [questions, setQuestions] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [current, setCurrent] = useState(0);
  const [flipped, setFlipped] = useState(false);
  const [selected, setSelected] = useState(null);
  const [answers, setAnswers] = useState([]);

  const load = async () => {
    setLoading(true);
    setError(null);
    setQuestions([]);
    setCurrent(0);
    setFlipped(false);
    setSelected(null);
    setAnswers([]);
    try {
      const qs = await fetchQuestions();
      setQuestions(qs);
    } catch (e) {
      setError(e.message);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => { load(); }, []);

  const q = questions[current];
  const answered = selected !== null;
  const finished = answers.length === questions.length && questions.length > 0;
  const score = answers.filter(Boolean).length;

  const handleFlip = () => {
    if (!answered) setFlipped(f => !f);
  };

  const handleSelect = (idx) => {
    if (answered) return;
    setSelected(idx);
    setAnswers(a => [...a, idx === q.correct]);
  };

  const handleNext = () => {
    setCurrent(c => c + 1);
    setFlipped(false);
    setSelected(null);
  };

  return (
    <>
      <style>{STYLE}</style>
      <div className="app">
        <header className="header">
          <div className="header-eyebrow">Field Guide · Victoria, Australia</div>
          <h1>Native Plants of <em>Victoria</em></h1>
          <p>Ten fresh questions generated by AI — test your knowledge of the remarkable flora of the Victorian bush.</p>
        </header>

        {loading && (
          <div className="loading-wrap">
            <LeafSpinner />
            <p>Consulting the field guide…</p>
          </div>
        )}

        {error && (
          <div className="error-box">
            <h3>Something went wrong</h3>
            <p>{error}</p>
            <button className="btn-restart" onClick={load}>Try again</button>
          </div>
        )}

        {!loading && !error && questions.length > 0 && !finished && q && (
          <>
            {/* Progress */}
            <div className="progress-wrap">
              <div className="progress-meta">
                <span>Question <strong>{current + 1}</strong> of {questions.length}</span>
                <span>Score <strong>{score}</strong></span>
              </div>
              <div className="progress-track">
                <div className="progress-fill" style={{ width: `${((current) / questions.length) * 100}%` }} />
              </div>
            </div>

            {/* Answer dots */}
            <div className="score-dots">
              {questions.map((_, i) => (
                <div key={i} className={`dot ${i < answers.length ? (answers[i] ? "correct" : "wrong") : i === current ? "current" : ""}`} />
              ))}
            </div>

            {/* Flip card */}
            <div className="scene" onClick={!answered ? handleFlip : undefined} style={{ cursor: answered ? "default" : "pointer" }}>
              <div className={`card ${flipped || answered ? "flipped" : ""}`}>
                {/* Back = question */}
                <div className="card-face card-back">
                  <BotanicalPattern />
                  <div className="card-back-content">
                    <div className="q-number">Question {current + 1} of {questions.length}</div>
                    <div className="question-text">{q.question}</div>
                    <div className="flip-hint">
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                        <path d="M1 4v6h6M23 20v-6h-6"/><path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"/>
                      </svg>
                      Tap to answer
                    </div>
                  </div>
                </div>
                {/* Front = options */}
                <div className="card-face card-front">
                  <div className="q-label">Choose your answer</div>
                  <div className="q-short">{q.question}</div>
                  <div className="options">
                    {q.options.map((opt, idx) => {
                      let cls = "";
                      if (answered) {
                        if (idx === q.correct) cls = selected === idx ? "correct" : "reveal-correct";
                        else if (idx === selected) cls = "wrong";
                      }
                      return (
                        <button
                          key={idx}
                          className={`option-btn ${cls}`}
                          onClick={() => handleSelect(idx)}
                          disabled={answered}
                        >
                          <span className="opt-letter">{LETTERS[idx]}</span>
                          {opt}
                        </button>
                      );
                    })}
                  </div>
                </div>
              </div>
            </div>

            {/* Explanation */}
            {answered && (
              <div className={`explanation ${answers[answers.length - 1] ? "correct" : "wrong"}`}>
                <div className="explanation-header">
                  <span className={`result-badge ${answers[answers.length - 1] ? "correct" : "wrong"}`}>
                    {answers[answers.length - 1] ? "✓ Correct" : "✗ Incorrect"}
                  </span>
                </div>
                <p dangerouslySetInnerHTML={{ __html: q.explanation }} />
              </div>
            )}

            {/* Next */}
            {answered && (
              <button className="btn-next" onClick={handleNext}>
                {current + 1 < questions.length ? "Next question →" : "See results →"}
              </button>
            )}
          </>
        )}

        {finished && (
          <div className="results">
            <div className="results-icon">{score === questions.length ? "🌿" : score >= 7 ? "🌸" : score >= 5 ? "🍃" : "🌱"}</div>
            <h2>Quiz complete</h2>
            <div className="score-big">{score}<span> / {questions.length}</span></div>
            <p className="results-comment">{getResultComment(score, questions.length)}</p>
            <div className="score-dots" style={{ marginBottom: "32px" }}>
              {answers.map((a, i) => (
                <div key={i} className={`dot ${a ? "correct" : "wrong"}`} />
              ))}
            </div>
            <button className="btn-restart" onClick={load}>Play again with new questions</button>
          </div>
        )}
      </div>
    </>
  );
}