/* === Brand mark, Nav, Hero === */

/* Logo: A "B" monogram with a stemmed-glass accent. Accent dot picks up the brand color per page. */
function BevLogo({ size = 32 }) {
  const w = size * 1.15, h = size;
  return (
    <svg width={w} height={h} viewBox="0 0 46 40" aria-hidden="true">
      {/* rounded square plate */}
      <rect x="1" y="1" width="44" height="38" rx="9" fill="var(--ink)" />
      {/* B letterform */}
      <g fill="var(--bg)">
        <rect x="12" y="9" width="3.5" height="22" rx="1" />
        <path d="M15.5 9 L24 9 C27 9 29 11 29 14 C29 16.5 27.5 18 25.5 18.5 C28 19 30 20.5 30 23.5 C30 28 27 31 23.5 31 L15.5 31 Z M19 13 L19 17.5 L23 17.5 C24.5 17.5 25.5 16.5 25.5 15.25 C25.5 14 24.5 13 23 13 Z M19 21 L19 27 L23 27 C25 27 26.5 25.8 26.5 24 C26.5 22.2 25 21 23 21 Z" />
      </g>
      {/* glass dot (accent) — sits like a wine-glass body next to the B */}
      <circle cx="36" cy="14" r="3" fill="var(--accent)" />
      <rect x="35.25" y="17" width="1.5" height="6" fill="var(--accent)" />
      <rect x="33" y="22.5" width="6" height="1.5" rx="0.5" fill="var(--accent)" />
    </svg>
  );
}
window.BevLogo = BevLogo;

function Nav({ exam = "hub" }) {
  const [open, setOpen] = React.useState(false);
  const cur = exam;
  // Priser/Sample har ikke seksjonsankrene (#how osv.) — pek dem til forsiden.
  const onLp = ['hub', 'etablerer', 'skjenke', 'salg'].includes(cur);
  const anchor = (h) => (onLp ? h : `index.html${h}`);
  return (
    <header className="bv-nav">
      <div className="container bv-nav-inner">
        <a href="index.html" className="bv-logo" aria-label="Bevillingen hjem">
          <span className="bv-logo-mark" aria-hidden="true"><BevLogo size={32} /></span>
          <span className="bv-logo-word">Bevillingen</span>
        </a>

        <nav className="bv-nav-links" aria-label="Primary">
          <span className="bv-nav-exam-group">
            <a href="etablerer.html" className={cur==='etablerer'?'active':''}>Etablerer</a>
            <a href="skjenke.html" className={cur==='skjenke'?'active':''}>Skjenke</a>
            <a href="salg.html" className={cur==='salg'?'active':''}>Salg</a>
          </span>
          <a href={anchor('#how')}>Slik fungerer det</a>
          <a href={anchor('#features')}>Funksjoner</a>
          <a href={anchor('#pricing')}>Priser</a>
          <a href={anchor('#faq')}>FAQ</a>
        </nav>

        <div className="bv-nav-cta">
          <a href="https://app.teorihuset.no/" className="bv-nav-login">Logg inn</a>
          <a href="Sample" className="btn btn-accent">Start gratis prøve <span className="arrow">→</span></a>
        </div>

        <button className="bv-nav-burger" onClick={() => setOpen(o=>!o)} aria-label="Menu" aria-expanded={open}>
          <span /><span /><span />
        </button>
      </div>
      {open && (
        <div className="bv-nav-mobile">
          <a href="index.html" onClick={()=>setOpen(false)}>Sammenlign prøvene</a>
          <a href="etablerer.html" onClick={()=>setOpen(false)}>Etablererprøven</a>
          <a href="skjenke.html" onClick={()=>setOpen(false)}>Skjenkebevilling</a>
          <a href="salg.html" onClick={()=>setOpen(false)}>Salgsbevilling</a>
          <a href={anchor('#how')} onClick={()=>setOpen(false)}>Slik fungerer det</a>
          <a href={anchor('#features')} onClick={()=>setOpen(false)}>Funksjoner</a>
          <a href={anchor('#pricing')} onClick={()=>setOpen(false)}>Priser</a>
          <a href={anchor('#faq')} onClick={()=>setOpen(false)}>FAQ</a>
          <a href="Sample" className="btn btn-accent btn-block" onClick={()=>setOpen(false)}>Start gratis prøve</a>
        </div>
      )}
    </header>
  );
}

/* Hero visual — adapts per exam. config.heroVisual === 'paths' triggers the hub layout. */
function HeroVisualStudy({ examConfig }) {
  const q = examConfig.heroQuestion;
  return (
    <div className="hero-stage" aria-hidden="true">
      <div className="hero-card hero-card--main">
        <div className="hero-card-top">
          <div className="row gap-2">
            <span className="pill"><span className="dot-pulse" /> Øving · {examConfig.shortName}</span>
          </div>
          <span className="mono small muted">Spørsmål 12 / 40</span>
        </div>
        <div className="hero-question">
          <div className="hero-question-sign">{q.icon}</div>
          <div className="hero-question-text">
            <div className="mono small accent">{q.cat}</div>
            <h3>{q.text}</h3>
          </div>
        </div>
        <div className="hero-options">
          {q.options.map((opt, i) => (
            <div key={i} className={"hero-option " + (i === q.answer ? "correct" : "")}>
              <span className="hero-option-key">{String.fromCharCode(65+i)}</span>
              <span>{opt}</span>
              {i === q.answer && <span className="hero-option-mark">✓</span>}
            </div>
          ))}
        </div>
        <div className="hero-card-foot">
          <div className="bar" style={{flex:1}}><span style={{width:'62%'}} /></div>
          <span className="mono small muted">62%</span>
        </div>
      </div>

      <div className="hero-card hero-card--streak">
        <div className="streak-row">
          <div className="streak-flame" aria-hidden>🔥</div>
          <div>
            <div className="mono small muted">DAGSSTRIPE</div>
            <div className="streak-num">9 dager</div>
          </div>
        </div>
        <div className="streak-dots">
          {Array.from({length:9}).map((_,i)=>(
            <span key={i} className={"dot " + (i<8 ? "on" : "today")} />
          ))}
        </div>
      </div>

      <div className="hero-card hero-card--score">
        <div className="mono small muted">PRØVEEKSAMEN</div>
        <div className="score-num">26<span>/30</span></div>
        <div className="score-label good">Bestått · over kravet</div>
      </div>

      <div className="hero-symbol-rail">
        {examConfig.heroRail.map((el, i) => <span key={i}>{el}</span>)}
      </div>
    </div>
  );
}

/* Hub hero visual — three exam paths as cards (replaces the route map metaphor). */
function HeroVisualPaths() {
  return (
    <div className="hero-stage hero-stage--paths" aria-hidden="true">
      <div className="path-card">
        <div className="path-card-icon"><Glyph.Tray size={36} color="#B4541F" /></div>
        <div className="path-card-text">
          <strong>Etablererprøven</strong>
          <span>For serveringsvirksomhet · 50 spørsmål</span>
        </div>
        <span className="path-card-arrow">→</span>
      </div>
      <div className="path-card">
        <div className="path-card-icon"><Glyph.Glass size={36} color="#8B2D3E" /></div>
        <div className="path-card-text">
          <strong>Kunnskapsprøven · Skjenkebevilling</strong>
          <span>Styrer/stedfortreder skjenkesteder · 30 spørsmål</span>
        </div>
        <span className="path-card-arrow">→</span>
      </div>
      <div className="path-card">
        <div className="path-card-icon"><Glyph.Storefront size={36} color="#1A5A4F" /></div>
        <div className="path-card-text">
          <strong>Kunnskapsprøven · Salgsbevilling</strong>
          <span>Styrer/stedfortreder dagligvare · 30 spørsmål</span>
        </div>
        <span className="path-card-arrow">→</span>
      </div>
      <div style={{marginTop:'auto', padding:'14px 18px', background:'var(--bg-elev)', border:'1px dashed var(--line-strong)', borderRadius:14, display:'flex', alignItems:'center', gap:12}}>
        <div style={{width:36, height:36, borderRadius:8, background:'var(--accent)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontWeight:700}}>3</div>
        <div style={{flex:1, fontSize:13}}>
          <strong style={{display:'block'}}>Alle tre inkludert i én tilgang</strong>
          <span style={{color:'var(--muted)'}}>Du velger selv hva du øver på.</span>
        </div>
      </div>
    </div>
  );
}

function Hero({ examConfig }) {
  const useHub = examConfig.heroVisual === 'paths';
  return (
    <section className="hero" id="top">
      <div className="container hero-grid">
        <div className="hero-copy">
          <div className="row gap-3" style={{marginBottom:20, flexWrap:'wrap'}}>
            <span className="pill"><span className="dot-pulse" /> {examConfig.heroPill}</span>
          </div>
          <h1>
            {examConfig.h1.before}<span className="hl">{examConfig.h1.highlight}</span>{examConfig.h1.after}
          </h1>
          <p className="lead" style={{marginTop:20, maxWidth:540}}>
            {examConfig.heroLead}
          </p>
          {examConfig.heroSub && (
            <p className="hero-sub"><strong>·</strong>{examConfig.heroSub}</p>
          )}
          <div className="row gap-3 hero-ctas" style={{marginTop:28, flexWrap:'wrap'}}>
            <a href="#pricing" className="btn btn-accent btn-lg">{examConfig.heroCta} <span className="arrow">→</span></a>
            <a href="#demo" className="btn btn-ghost btn-lg">Prøv et spørsmål</a>
          </div>
          <div className="hero-meta">
            <div className="row gap-2">
              <Stars n={5} />
              <span><strong>4.8</strong> · 1 380 anmeldelser</span>
            </div>
            <div className="hero-meta-divider" />
            <div className="row gap-2">
              <span className="check">✓</span> Engangskjøp
            </div>
            <div className="hero-meta-divider" />
            <div className="row gap-2">
              <span className="check">✓</span> Sikker kortbetaling
            </div>
          </div>
        </div>

        <div className="hero-visual">
          {useHub ? <HeroVisualPaths /> : <HeroVisualStudy examConfig={examConfig} />}
        </div>
      </div>

      <div className="hero-trust">
        <div className="container">
          <div className="trust-row">
            <span className="mono small muted">KORT FORTALT</span>
            <span className="trust-logo">Engangsbetaling</span>
            <span className="trust-logo">Ingen abonnement</span>
            <span className="trust-logo">Alle tre prøvene</span>
            <span className="trust-logo">Mobil, nettbrett og PC</span>
            <span className="trust-logo">Oppdatert 2026</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function Stars({ n = 5 }) {
  return (
    <span className="stars" aria-label={`${n} stars`}>
      {Array.from({length:n}).map((_,i)=>(
        <svg key={i} width="14" height="14" viewBox="0 0 24 24" fill="#D8A437">
          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14l-5-4.87 6.91-1.01L12 2z"/>
        </svg>
      ))}
    </span>
  );
}
window.Stars = Stars;

window.Nav = Nav;
window.Hero = Hero;