// Sample-quiz funnel page for batteori.no — 5 hardcoded båtførerprøven questions
const I = window.Icons;
const { useState } = React;

const QUESTIONS = [
  {
    q: "Hvilken farge har lanternene på en motorbåt om natten — sett forfra?",
    options: [
      "Grønn på babord, rød på styrbord",
      "Rød på babord, grønn på styrbord",
      "Hvit på babord, rød på styrbord",
      "Hvit på begge sider",
    ],
    correct: 1,
    explanation: "Babord (venstre) er rød, styrbord (høyre) er grønn. Mnemonic: «Red Port» — rom og babord begynner begge med tre bokstaver.",
  },
  {
    q: "To motorbåter nærmer seg på krysskurs. Hvem har vikeplikt?",
    options: [
      "Den lengste båten har forrang",
      "Den raskeste båten viker",
      "Båten som har den andre på sin styrbord side viker",
      "Båten som ser den andre først viker",
    ],
    correct: 2,
    explanation: "COLREGS regel 15: «Når to maskindrevne fartøy krysser hverandres kurs slik at fare for sammenstøt oppstår, skal det fartøy som har det andre på sin styrbord side holde unna.»",
  },
  {
    q: "Hva er promillegrensen for fører av motorbåt over 15 hk i Norge?",
    options: [
      "0,2 ‰",
      "0,5 ‰",
      "0,8 ‰",
      "1,0 ‰",
    ],
    correct: 2,
    explanation: "Til sjøs er grensen 0,8 ‰ for fartøy som er minst 15 meter eller med motor over 15 hk. Aktsomhetsplikten gjelder alltid uansett båtstørrelse.",
  },
  {
    q: "Hvilken kanal er internasjonal nødanrop og oppropskanal på VHF?",
    options: [
      "Kanal 6",
      "Kanal 13",
      "Kanal 16",
      "Kanal 70",
    ],
    correct: 2,
    explanation: "Kanal 16 (156,800 MHz) er den internasjonale nød- og kallekanalen. «Mayday» sendes alltid på kanal 16.",
  },
  {
    q: "Hva betyr en gul markeringsbøye?",
    options: [
      "Grunne under vann",
      "Spesielt område — vis aktsomhet",
      "Markerer havnens grense",
      "Sikker passasje",
    ],
    correct: 1,
    explanation: "Gule spesialmerker angir områder med spesielle forhold — kabler, fiskemerker, militære øvingsfelt, rør. Du må passere med aktsomhet.",
  },
];

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.Anchor size={20} /></span>
          <span>båtteori<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 score = answers.filter(a => a.selected === a.correct).length;
  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 400+ spørsmål, smart repetisjon og bestått-garanti — slik at du går trygt til båtførerprø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 båtførerprøven</span>
          <h1 className="sq-title">Prøv en spørsmålsrunde.</h1>
          <p className="sq-sub">Ingen registrering. 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.Anchor size={20} /></span>
              <span>båtteori<span style={{color:'var(--forest)'}}>.no</span></span>
            </div>
            <p>Norsk trening til båtførerbeviset. Laget i samarbeid med instruktører langs kysten.</p>
          </div>
          <div className="footer-col">
            <h4>Produkt</h4>
            <ul>
              <li><a href="index.html#veien">Veien til bestått</a></li>
              <li><a href="index.html#pensum">Pensum</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 batteori.no — Made in Norway</span>
          <span>Made in Norway</span>
        </div>
      </div>
    </footer>
  );
}

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