// Sample-quiz funnel page for bileksamen.no — 5 hardcoded Klasse B questions
const { useState, useEffect } = React;

// Inline CarLogo (kept here so Sample doesn't need to load all of hero.jsx)
function SampleCarLogo({ size = 28 }) {
  const w = size * 1.15, h = size;
  return (
    <svg width={w} height={h} viewBox="0 0 46 40" aria-hidden="true">
      <rect x="1" y="1" width="44" height="38" rx="9" fill="var(--ink)" />
      <g transform="translate(4 10)">
        <path
          d="M2 14 L2 11 C2 10 3 9 4 9 L9 9 L13 3 C14 1.5 15.5 1 17 1 L26 1 C27.5 1 29 1.5 30.5 3 L34 9 L36 9 C37 9 38 10 38 11 L38 14 Z"
          fill="var(--bg)"
        />
        <path
          d="M14 4 L17 8.2 L23 8.2 L23 3.2 L17.8 3.2 C16.6 3.2 15.7 3.4 14.9 4 Z M24.5 3.2 L24.5 8.2 L32 8.2 L29.4 4.6 C28.6 3.6 27.7 3.2 26.5 3.2 Z"
          fill="var(--ink)"
        />
        <circle cx="36" cy="11.5" r="1.5" fill="var(--accent)" />
        <rect x="34" y="13" width="4" height="1" rx="0.5" fill="var(--muted-2)" opacity="0.45" />
        <circle cx="9" cy="14" r="3.4" fill="var(--ink)" stroke="var(--bg)" strokeWidth="1.4" />
        <circle cx="9" cy="14" r="1" fill="var(--bg)" />
        <circle cx="29" cy="14" r="3.4" fill="var(--ink)" stroke="var(--bg)" strokeWidth="1.4" />
        <circle cx="29" cy="14" r="1" fill="var(--bg)" />
      </g>
    </svg>
  );
}

const QUESTIONS = [
  {
    q: "Hva betyr høyreregelen i et likeverdig kryss?",
    options: [
      "Du må vike for trafikk fra høyre.",
      "Du har alltid forkjørsrett.",
      "Du må vike for trafikk fra venstre.",
    ],
    correct: 0,
    explanation: "I et kryss uten skilt eller vikepliktslinjer gjelder høyreregelen — du må vike for kjøretøy som kommer fra høyre.",
  },
  {
    q: "Hva er den generelle fartsgrensen i tettbygd strøk når intet annet er skiltet?",
    options: [
      "30 km/t",
      "50 km/t",
      "60 km/t",
    ],
    correct: 1,
    explanation: "I tettbygd strøk er den generelle fartsgrensen 50 km/t. Lavere grenser (f.eks. 30-soner ved skoler) skiltes særskilt.",
  },
  {
    q: "Hva betyr en heltrukken gul linje i midten av veien?",
    options: [
      "Forbudt å krysse — du kan ikke kjøre forbi eller skifte felt.",
      "Du kan krysse hvis det er trygt.",
      "Linjen markerer kun fylkesgrense.",
    ],
    correct: 0,
    explanation: "En heltrukken gul (eller hvit) midtlinje er sperrelinje — du har ikke lov å krysse den verken for å forbikjøre eller bytte felt.",
  },
  {
    q: "Et trekantet, gult skilt med rød kant og et utropstegn (!) — hva betyr det?",
    options: [
      "Forbud — kjør ikke videre.",
      "Annen fare — vis aktsomhet.",
      "Påbud om å stoppe.",
    ],
    correct: 1,
    explanation: "Trekantede fareskilt varsler om en fare lenger fremme. «!» betyr «annen fare» — tilpass farten og vær ekstra oppmerksom.",
  },
  {
    q: "Hva er den lovlige grensen for promille i blod for førere i Norge?",
    options: [
      "0,5 ‰",
      "0,2 ‰",
      "0,0 ‰",
    ],
    correct: 1,
    explanation: "Promillegrensen i Norge er 0,2 ‰. Selv små mengder alkohol kan gi inndragelse av førerkort og bot.",
  },
];

function SampleNav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header className={"bt-subnav " + (scrolled ? 'scrolled' : '')}>
      <div className="bt-subnav-inner">
        <a href="index.html" className="bt-logo" aria-label="Bileksamen forside">
          <span className="bt-logo-mark" aria-hidden="true"><SampleCarLogo size={28} /></span>
          <span className="bt-logo-word">Bileksamen</span>
          <span className="bt-logo-tag">.no</span>
        </a>
        <div className="row gap-2">
          <a href="index.html" className="btn btn-ghost btn-sm">← Tilbake</a>
          <a href="Priser" className="btn btn-accent btn-sm">Kom i gang</a>
        </div>
      </div>
    </header>
  );
}

function SampleQuiz() {
  const [idx, setIdx] = useState(0);
  const [selected, setSelected] = useState(null);
  const [answers, setAnswers] = useState([]);
  const [done, setDone] = useState(false);

  const total = QUESTIONS.length;
  const current = QUESTIONS[idx];
  const answered = selected !== null;
  const isLast = idx + 1 === total;

  const choose = (i) => {
    if (answered) return;
    setSelected(i);
  };

  const next = () => {
    const updated = [...answers, { selected, correct: current.correct }];
    setAnswers(updated);
    setSelected(null);
    if (isLast) setDone(true);
    else setIdx(idx + 1);
  };

  const reset = () => {
    setIdx(0);
    setSelected(null);
    setAnswers([]);
    setDone(false);
  };

  if (done) {
    const finalScore = answers.filter(a => a.selected === a.correct).length;
    const emoji = finalScore >= 4 ? '🎯' : finalScore >= 2 ? '👍' : '💪';
    const title =
      finalScore === 5 ? 'Perfekt! Du er på god vei.' :
      finalScore >= 3 ? 'Godt jobbet!' :
      'Bra forsøk — repetisjon hjelper.';
    return (
      <section className="sq-section">
        <div className="container">
          <div className="sq-result-card">
            <div className="sq-result-emoji" aria-hidden="true">{emoji}</div>
            <div className="sq-result-score">{finalScore} av {total} riktig</div>
            <h2 className="sq-result-title">{title}</h2>
            <p className="sq-result-sub">
              I appen får du 1 600+ spørsmål med forklaringer på norsk, adaptiv læringsplan og full prøveeksamen — slik at du møter trafikkstasjonen trygg og forberedt.
            </p>
            <div className="sq-result-actions">
              <a href="Priser" className="btn btn-accent btn-lg">
                Kom i gang <span className="arrow">→</span>
              </a>
              <button onClick={reset} className="btn btn-ghost btn-lg">Ta quizen igjen</button>
            </div>
          </div>
        </div>
      </section>
    );
  }

  const correctIdx = current.correct;
  const wasCorrect = selected === correctIdx;

  return (
    <section className="sq-section">
      <div className="container">
        <div className="sq-header">
          <span className="eyebrow"><span className="dot" />SMAKEBIT · 5 SPØRSMÅL FRA KLASSE B-PENSUMET</span>
          <h1 className="sq-title">Prøv en spørsmålsrunde.</h1>
          <p className="sq-sub">Ingen registrering. Ingen kortinformasjon. Bare et glimt av hvordan øving med oss føles.</p>
        </div>

        <div className="sq-card">
          <div className="sq-progress">
            <div className="sq-progress-meta">Spørsmål {idx + 1} av {total}</div>
            <div className="sq-progress-bar" aria-hidden="true">
              {QUESTIONS.map((_, i) => (
                <span key={i} className={"sq-progress-pip " + (i <= idx ? 'active' : '')} />
              ))}
            </div>
          </div>

          <h2 className="sq-question">{current.q}</h2>

          <div className="sq-options">
            {current.options.map((opt, i) => {
              const isSelected = selected === i;
              const isCorrect = i === correctIdx;
              let stateClass = '';
              if (answered) {
                if (isCorrect) stateClass = 'sq-opt--correct';
                else if (isSelected) stateClass = 'sq-opt--wrong';
              }
              return (
                <button
                  key={i}
                  type="button"
                  className={"sq-opt " + stateClass}
                  onClick={() => choose(i)}
                  disabled={answered}
                  aria-pressed={isSelected}
                >
                  <span className="sq-opt-letter">{String.fromCharCode(65 + i)}</span>
                  <span className="sq-opt-text">{opt}</span>
                  {answered && isCorrect && <span className="sq-opt-icon" aria-hidden="true">✓</span>}
                </button>
              );
            })}
          </div>

          {answered && (
            <div className={"sq-feedback " + (wasCorrect ? 'sq-feedback--correct' : 'sq-feedback--wrong')}>
              <strong>
                {wasCorrect
                  ? '✓ Riktig!'
                  : `Ikke helt — riktig svar er ${String.fromCharCode(65 + correctIdx)}.`}
              </strong>
              <p>{current.explanation}</p>
            </div>
          )}

          <div className="sq-actions">
            <button
              type="button"
              className="btn btn-accent btn-lg"
              onClick={next}
              disabled={!answered}
            >
              {isLast ? 'Vis resultat' : 'Neste'} <span className="arrow">→</span>
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

function SampleFooter() {
  return (
    <footer className="bt-subfoot">
      <div className="container bt-subfoot-row">
        <span>© 2026 bileksamen.no — Made in Norway</span>
        <span className="bt-subfoot-links">
          <a href="index.html">Forside</a>
          <a href="Priser">Priser</a>
          <a href="Personvern">Personvern</a>
          <span>Made in Norway</span>
        </span>
      </div>
    </footer>
  );
}

window.SampleNav = SampleNav;
window.SampleQuiz = SampleQuiz;
window.SampleFooter = SampleFooter;