// Sample-quiz funnel page for jaktproven.no — 5 hardcoded jegerprøve questions
const I = window.Icons;
const { useState } = React;

const QUESTIONS = [
  {
    q: "Du har et byttedyr i sikte, men ser at det er bygninger 200 meter bak dyret. Hva gjør du?",
    options: [
      "Skyter — sikkerheten er ditt eget ansvar",
      "Tar skuddet hvis du er sikker på treff",
      "Avstår fra skuddet — du må se kulebanen helt klar",
      "Skyter lavt slik at kula treffer bakken bak dyret",
    ],
    correct: 2,
    explanation: "Du må alltid kunne se hvor kula vil havne om du bommer eller skuddet går gjennom dyret. Bygninger i bakkant er en absolutt stopper — sikkerheten kommer alltid først.",
  },
  {
    q: "Når starter den ordinære elgjakta i Norge?",
    options: [
      "25. august",
      "10. september",
      "25. september",
      "1. oktober",
    ],
    correct: 2,
    explanation: "Ordinær jaktstart er 25. september i de fleste elgvald, men det kan variere — sjekk lokale jaktregler for området ditt.",
  },
  {
    q: "Hva er den viktigste regelen for håndtering av våpen?",
    options: [
      "Behandle alltid våpenet som om det er ladd",
      "Lade våpenet rett før skudd",
      "Ha sikringen på når du går",
      "Bruke alltid lyddemper",
    ],
    correct: 0,
    explanation: "Selv om du tror våpenet er tomt, skal det alltid behandles som ladd. Pek aldri munningen mot noe du ikke vil skyte.",
  },
  {
    q: "Etter et skudd løper byttedyret bort uten klare tegn på treff. Hva gjør du?",
    options: [
      "Avbryter jakta og venter til neste dag",
      "Sjekker skuddstedet grundig før du eventuelt sporer",
      "Følger umiddelbart etter dyret",
      "Skyter et nytt dyr",
    ],
    correct: 1,
    explanation: "Sjekk skuddstedet for blod, hår eller bein. Det forteller deg om dyret er truffet og hvor — slik unngår du unødig lidelse.",
  },
  {
    q: "Hvor er bly-hagl IKKE lov å bruke i Norge?",
    options: [
      "På åpne fjell",
      "I skog",
      "Over våtmarker (vassdrag, dammer, myrer)",
      "På innmark",
    ],
    correct: 2,
    explanation: "Bly-hagl er forbudt over våtmark for å beskytte vannfugler. Bruk stålhagl eller andre alternativer der.",
  },
];

function SampleNav() {
  const [scrolled, setScrolled] = useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="wrap nav-inner">
        <a href="index.html" className="brand">
          <span className="brand-mark"><I.Deer size={20} /></span>
          <span>jegerprøven<span style={{color:'var(--forest)'}}>.no</span></span>
        </a>
        <div className="nav-cta">
          <a href="index.html" className="btn btn-ghost btn-sm" style={{display:'inline-flex'}}>← Tilbake</a>
          <a href="Priser" className="btn btn-primary 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="wrap">
          <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 <strong>500+ spørsmål</strong>, smart repetisjon og bestått-garanti — slik at du går trygt til den teoretiske jegerprøven.
            </p>
            <div className="sq-result-actions">
              <a href="Priser" className="btn btn-primary btn-lg">
                Kom i gang <I.Arrow size={18} />
              </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="wrap">
        <div className="sq-header">
          <span className="eyebrow">Smakebit · 5 spørsmål fra jegerprøve-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 && <I.Check size={18} className="sq-opt-icon" />}
                </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-primary btn-lg"
              onClick={next}
              disabled={!answered}
            >
              {isLast ? 'Vis resultat' : 'Neste'} <I.Arrow size={16} />
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

function SampleFooter() {
  return (
    <footer>
      <div className="wrap">
        <div className="footer-grid">
          <div className="footer-brand">
            <div className="brand">
              <span className="brand-mark"><I.Deer size={20} /></span>
              <span>jegerprøven<span style={{color:'var(--forest)'}}>.no</span></span>
            </div>
            <p>Den moderne måten å forberede seg til jegerprøven. Laget i Norge, for norske jegere.</p>
          </div>
          <div className="footer-col">
            <h4>Produkt</h4>
            <ul>
              <li><a href="index.html#hvordan">Slik fungerer det</a></li>
              <li><a href="index.html#funksjoner">Funksjoner</a></li>
              <li><a href="Priser">Priser</a></li>
              <li><a href="index.html#faq">FAQ</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Selskap</h4>
            <ul>
              <li><a href="#">Om oss</a></li>
              <li><a href="#">Kontakt</a></li>
              <li><a href="Personvern">Personvern</a></li>
              <li><a href="#">Vilkår</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 jaktproven.no — Made in Norway</span>
          <span>Made in Norway</span>
        </div>
      </div>
    </footer>
  );
}

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