// Sample-quiz funnel page for dronesertifikat.no — 5 hardcoded A2 questions
const I = window.Icons;
const { useState } = React;

const QUESTIONS = [
  {
    q: "Hvor høyt over bakken er det tillatt å fly i åpen kategori (A1/A2/A3)?",
    options: [
      "Maks 120 meter over bakken",
      "Maks 150 meter — fri flyt",
      "Maks 50 meter ved bebyggelse",
    ],
    correct: 0,
    explanation: "120 m er EU-grensen i åpen kategori og gjelder alle underkategorier — A1, A2 og A3.",
  },
  {
    q: "Hva er minste horisontale avstand til uinformerte personer ved A2-flyging (uten low-speed mode)?",
    options: [
      "Minst 30 meter",
      "Minst 5 meter",
      "Minst 150 meter",
    ],
    correct: 0,
    explanation: "A2 krever 30 m horisontal avstand fra uinformerte. Med low-speed mode (≤ 3 m/s) kan den reduseres til 5 m.",
  },
  {
    q: "Hvilken vektgrense gjelder for en C2-klassifisert drone som typisk flys med A2-sertifikat?",
    options: [
      "Maks 4 kg",
      "Maks 250 gram",
      "Maks 25 kg",
    ],
    correct: 0,
    explanation: "C2 er klasse-merkingen for droner opp til 4 kg, tiltenkt A2-flyging i åpen kategori.",
  },
  {
    q: "Hva betyr en CTR (Control Zone) på et luftromskart?",
    options: [
      "Kontrollert luftrom rundt en flyplass — krever klarering",
      "Område kun for militære droner",
      "Frittstående hobby-luftrom uten regler",
    ],
    correct: 0,
    explanation: "CTR er kontrollert luftrom rundt en flyplass. Du må ha klarering fra lufttrafikktjenesten for å fly der.",
  },
  {
    q: "Hvem må registrere seg som droneoperatør hos Luftfartstilsynet?",
    options: [
      "Alle som flyr drone over 250 g, eller har kamera/sensor",
      "Bare kommersielle brukere",
      "Ingen — registrering er frivillig",
    ],
    correct: 0,
    explanation: "Alle som opererer en drone over 250 g — eller med kamera/sensor — må registrere seg som operatør.",
  },
];

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.Drone size={18} /></span>
          <span>drone<span style={{color:'var(--forest)'}}>sertifikat.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 800 spørsmål, smart repetisjon og bestått-garanti — slik at du går trygt til Luftfartstilsynet.
            </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 A2-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.Drone size={18} /></span>
              <span>drone<span style={{color:'var(--forest)'}}>sertifikat.no</span></span>
            </div>
            <p>Norsk øvingsapp for dronesertifikat A2. Bygget sammen med erfarne dronepiloter — med norske eksempler og oppdatert regelverk.</p>
          </div>
          <div className="footer-col">
            <h4>Produkt</h4>
            <ul>
              <li><a href="index.html#veien">Slik virker det</a></li>
              <li><a href="index.html#temaer">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 dronesertifikat.no — Made in Norway</span>
          <span>Made in Norway</span>
        </div>
      </div>
    </footer>
  );
}

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