/* === How it works, Demo, Features, Stats, Testimonials === */

function HowItWorks({ examConfig }) {
  const steps = [
    {
      n: "01",
      title: "Diagnose på 5 minutter",
      body: "En kort start-test viser hvor du står i pensum. Vi tegner opp læringsruten din basert på hva du faktisk trenger.",
      icon: <Glyph.Document size={56} />,
    },
    {
      n: "02",
      title: "Daglige økter på 10 min",
      body: examConfig.howStep2 || "Korte, fokuserte runder med alkoholloven, vikeplikt for styrer, kontroll og praktiske vurderinger.",
      icon: examConfig.howStep2Icon || <Glyph.Clock size={56} />,
    },
    {
      n: "03",
      title: "Full prøveeksamen",
      body: "Når modellen vår mener du er klar, kjører du full mock-test under reelle forhold. Bestå tre på rad — så er du klar for kommunens prøve.",
      icon: <Glyph.Stamp size={56} />,
    },
  ];
  return (
    <section id="how" className="how">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="dot" />SLIK FUNGERER DET</span>
          <h2>Fra forvirret til forberedt — på under to uker.</h2>
          <p className="lead">Legg opp 7–10 dager, så rekker de fleste hele opplegget. Du trenger ikke pugge hele loven. Du trenger en plan.</p>
        </div>
        <div className="how-grid">
          {steps.map((s,i)=>(
            <div key={i} className="how-step card">
              <div className="how-step-top">
                <span className="how-step-n mono">{s.n}</span>
                <div className="how-step-sign">{s.icon}</div>
              </div>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
              <div className="how-step-arrow" aria-hidden>→</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function DemoQuestion({ examConfig }) {
  const [idx, setIdx] = React.useState(0);
  const [picked, setPicked] = React.useState(null);
  const DEMO = examConfig.demoQuestions;
  const q = DEMO[idx];
  const reveal = picked !== null;
  const correct = picked === q.answer;
  const next = () => { setIdx((idx+1) % DEMO.length); setPicked(null); };
  return (
    <section id="demo" className="demo">
      <div className="container demo-grid">
        <div className="demo-copy">
          <span className="eyebrow"><span className="dot" />PRØV NÅ — INGEN INNLOGGING</span>
          <h2>Slik føles et spørsmål i Bevillingen.</h2>
          <p className="lead">Tre tilfeldige spørsmål fra øvingsbanken vår — på norsk, med forklaringer som faktisk gir mening. Ingen avgift, ingen e-post.</p>
          <ul className="demo-list">
            <li><span className="check-circle">✓</span> Forklaring etter hvert svar — med lovreferanse</li>
            <li><span className="check-circle">✓</span> Caser fra virkelige kontrollsituasjoner</li>
            <li><span className="check-circle">✓</span> Adaptiv: feil svar dukker opp igjen senere</li>
          </ul>
          <a href={['hub','etablerer','skjenke','salg'].includes(examConfig.exam) ? '#pricing' : 'Priser'} className="btn btn-primary btn-lg" style={{marginTop:8}}>Lås opp alle {examConfig.bankSize} spørsmål <span className="arrow">→</span></a>
        </div>

        <div className="demo-card card">
          <div className="demo-card-head">
            <div className="row gap-3">
              <span className="mono small accent">{q.cat}</span>
              <span className="demo-dots">
                {DEMO.map((_,i)=>(
                  <span key={i} className={"dd " + (i===idx?'on':'')} />
                ))}
              </span>
            </div>
            <span className="mono small muted">Spørsmål {idx+1} / {DEMO.length}</span>
          </div>
          <div className="demo-question">
            <div className="demo-sign">{q.icon}</div>
            <h3>{q.q}</h3>
          </div>
          <div className="demo-options">
            {q.options.map((opt,i)=>{
              const cls = ['demo-opt'];
              if (reveal && i === q.answer) cls.push('correct');
              if (reveal && i === picked && i !== q.answer) cls.push('wrong');
              return (
                <button key={i} className={cls.join(' ')}
                        disabled={reveal}
                        onClick={()=>setPicked(i)}>
                  <span className="demo-opt-key">{String.fromCharCode(65+i)}</span>
                  <span className="demo-opt-text">{opt}</span>
                  {reveal && i === q.answer && <span className="demo-opt-mark good">✓</span>}
                  {reveal && i === picked && i !== q.answer && <span className="demo-opt-mark bad">✕</span>}
                </button>
              );
            })}
          </div>
          {reveal && (
            <div className={"demo-explain " + (correct ? 'good' : 'bad')}>
              <strong>{correct ? 'Riktig!' : 'Ikke helt.'}</strong> {q.explain}
            </div>
          )}
          <div className="demo-card-foot">
            <span className="mono small muted">{q.law || 'Alkoholloven · Praksis 2026'}</span>
            <button className="btn btn-primary" onClick={next}>
              {reveal ? 'Neste spørsmål' : 'Hopp over'} <span className="arrow">→</span>
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

function Features({ examConfig }) {
  const features = [
    {
      title: "Adaptiv øving",
      body: "Svake områder dukker oftere opp. Solide blir spaced-repetition-husket. Du sløser ikke tid på det du allerede kan.",
      visual: "adaptive",
    },
    {
      title: "Forklart på norsk",
      body: "Hvert spørsmål kommer med en menneskelig forklaring — med direkte lovreferanse til alkoholloven eller serveringsloven.",
      visual: "explain",
    },
    {
      title: "Alle tre prøvene",
      body: "Etablererprøven, skjenkebevilling og salgsbevilling — én tilgang dekker alt. Du velger selv hva du vil øve på først.",
      visual: "bundle",
    },
    {
      title: "Prøveeksamen som ekte",
      body: "Samme antall spørsmål, samme tidsramme og samme krav til riktig som kommunens prøve. Vi måler hvor klar du er.",
      visual: "exam",
    },
    {
      title: "Mobil først",
      body: "Designet for buss, pause og kvelden før prøven. Fungerer i nettleseren, lagrer fremgangen din — ingen nedlasting nødvendig.",
      visual: "mobile",
    },
    {
      title: "Pengene tilbake",
      body: "Bestå prøven på første forsøk eller få pengene tilbake. Vi mener det. 94% av aktive brukere består på første forsøk.",
      visual: "guarantee",
    },
  ];
  return (
    <section id="features" className="features">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="dot" />HVA DU FÅR</span>
          <h2>Bygd for å bestå — ikke for å holde deg på plattformen.</h2>
        </div>
        <div className="features-grid">
          {features.map((f,i)=>(
            <div key={i} className={"feature card f-" + f.visual}>
              <div className="feature-visual">{featureVisual(f.visual, examConfig)}</div>
              <div className="feature-body">
                <h3>{f.title}</h3>
                <p>{f.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function featureVisual(kind, examConfig) {
  if (kind === 'adaptive') {
    const cats = examConfig.adaptiveCats || [
      ['Alkoholloven', 82],
      ['Aldersgrenser', 55],
      ['Skjenketider', 30],
      ['Styrer & ansvar', 68],
      ['Kontroll', 45],
      ['Praktisk case', 90],
    ];
    return (
      <div className="fv-adaptive">
        {cats.map(([t,w],i)=>(
          <div key={t} className="fv-row">
            <span className="fv-label">{t}</span>
            <div className="bar"><span style={{width:w+'%'}} /></div>
            <span className="mono small muted">{w}%</span>
          </div>
        ))}
      </div>
    );
  }
  if (kind === 'explain') {
    return (
      <div className="fv-explain">
        <div className="fv-bubble">
          <div className="mono small muted">DU SVARTE</div>
          <div>«Det er lov å skjenke vin til en på 17 år hvis foreldrene er med»</div>
        </div>
        <div className="fv-bubble fv-bubble--good">
          <div className="mono small">FORKLARING · ALK § 1-5</div>
          <div>Aldersgrensen for <strong>skjenking</strong> av vin/øl er 18 år — uavhengig av om en foresatt er til stede. Aldersgrensen for brennevin er 20 år.</div>
        </div>
      </div>
    );
  }
  if (kind === 'bundle') {
    return (
      <div style={{display:'flex', flexDirection:'column', gap:10, width:'100%'}}>
        <div style={{display:'flex', alignItems:'center', gap:10, padding:'8px 12px', background:'var(--bg-elev)', border:'1px solid var(--line)', borderRadius:10}}>
          <Glyph.Tray size={28} color="#B4541F" />
          <span style={{flex:1, fontSize:13}}>Etablererprøven</span>
          <span className="mono small good">✓ inkludert</span>
        </div>
        <div style={{display:'flex', alignItems:'center', gap:10, padding:'8px 12px', background:'var(--bg-elev)', border:'1px solid var(--line)', borderRadius:10}}>
          <Glyph.Glass size={28} color="#8B2D3E" />
          <span style={{flex:1, fontSize:13}}>Skjenkebevilling</span>
          <span className="mono small good">✓ inkludert</span>
        </div>
        <div style={{display:'flex', alignItems:'center', gap:10, padding:'8px 12px', background:'var(--bg-elev)', border:'1px solid var(--line)', borderRadius:10}}>
          <Glyph.Storefront size={28} color="#1A5A4F" />
          <span style={{flex:1, fontSize:13}}>Salgsbevilling</span>
          <span className="mono small good">✓ inkludert</span>
        </div>
      </div>
    );
  }
  if (kind === 'exam') {
    return (
      <div className="fv-exam">
        <div className="fv-exam-row">
          <span className="mono small muted">PRØVEEKSAMEN</span>
          <span className="mono small good">BESTÅTT</span>
        </div>
        <div className="fv-exam-num">26<span>/30</span></div>
        <div className="fv-exam-bar"><div className="bar"><span style={{width:'87%'}} /></div></div>
        <div className="fv-exam-meta mono small muted">4 feil · 87% · 36 min brukt</div>
      </div>
    );
  }
  if (kind === 'mobile') {
    return (
      <div className="fv-mobile">
        <div className="fv-phone">
          <div className="fv-phone-notch" />
          <div className="fv-phone-screen">
            <div className="mono small muted">I DAG</div>
            <div className="fv-phone-title">Aldersgrenser — runde 3</div>
            <div className="bar"><span style={{width:'72%'}}/></div>
            <div className="fv-phone-row">
              <Glyph.Age size={24} value={18} />
              <span>Vin & øl</span>
              <span className="mono small good">7/8</span>
            </div>
            <div className="fv-phone-row">
              <Glyph.Age size={24} value={20} />
              <span>Brennevin</span>
              <span className="mono small">4/8</span>
            </div>
          </div>
        </div>
      </div>
    );
  }
  if (kind === 'guarantee') {
    return (
      <div className="fv-guarantee">
        <div className="fv-stamp">
          <div className="mono small">BESTÅ-</div>
          <div className="mono">GARANTI</div>
        </div>
        <div className="fv-guarantee-text">
          <div className="fv-big">94%</div>
          <div className="muted small">består på første forsøk</div>
        </div>
      </div>
    );
  }
  return null;
}

function Stats({ examConfig }) {
  const stats = examConfig.stats || [
    { n: "94%", label: "består på første forsøk", note: "blant aktive brukere siste 90 dager" },
    { n: "600+", label: "norske spørsmål", note: "alle tre prøvene · skrevet av jurister" },
    { n: "9 dg", label: "snittforberedelse", note: "fra start-test til bestått mock-eksamen" },
    { n: "4.8★", label: "brukervurdering", note: "basert på 1 380 anmeldelser" },
  ];
  return (
    <section className="stats">
      <div className="container">
        <div className="stats-grid">
          {stats.map((s,i)=>(
            <div key={i} className="stat">
              <div className="stat-num">{s.n}</div>
              <div className="stat-label">{s.label}</div>
              <div className="stat-note">{s.note}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Testimonials({ examConfig }) {
  const items = examConfig.testimonials || [
    {
      quote: "Hadde aldri klart å pugge hele alkoholloven på egenhånd. Forklaringene gjorde det forståelig — jeg bestod skjenkeprøven på første forsøk.",
      who: "Maria, 29", where: "Bergen · Daglig leder bar", days: "Forberedt på 7 dager",
      avatar: "M", color: "#8B2D3E",
    },
    {
      quote: "Brukte appen mens jeg pendlet. Lærte mer på 20 minutter om dagen enn ved å lese boka helgen før.",
      who: "Henrik, 34", where: "Trondheim · Etablerer", days: "Forberedt på 12 dager",
      avatar: "H", color: "#B4541F",
    },
    {
      quote: "Trengte salgsbevilling for kiosken. Prøveeksamenene traff formatet på kommunens prøve veldig godt. Anbefales.",
      who: "Aisha, 41", where: "Oslo · Kioskeier", days: "Forberedt på 5 dager",
      avatar: "A", color: "#1A5A4F",
    },
  ];
  return (
    <section className="testimonials">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="dot" />FRA KUNDENE VÅRE</span>
          <h2>Folk som strøk én gang — og som nå har bevilling.</h2>
        </div>
        <div className="t-grid">
          {items.map((t,i)=>(
            <figure key={i} className="t-card card">
              <Stars n={5} />
              <blockquote>«{t.quote}»</blockquote>
              <figcaption>
                <span className="t-avatar" style={{background:t.color}}>{t.avatar}</span>
                <span className="t-meta">
                  <strong>{t.who}</strong>
                  <span className="muted small">{t.where} · {t.days}</span>
                </span>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

window.HowItWorks = HowItWorks;
window.DemoQuestion = DemoQuestion;
window.Features = Features;
window.Stats = Stats;
window.Testimonials = Testimonials;