/* global React, DashboardMock, FloatCard */
const { useState: useStateP, useEffect: useEffectP } = React;

/* ============================================================
   HERO COPY VARIANTS — selectable via Tweaks
   Style guide: Plus Jakarta Sans only, accent via .accent span
   ============================================================ */
const HERO_COPY = {
  direct: {
    h1: <>eCoC til Statens vegvesen. <span className="accent">Ferdig.</span></>,
    sub: 'Nettportalen for norske kjøretøyimportører som leverer elektronisk samsvarserklæring (eCoC) ved førstegangsregistrering.'
  },
  benefit: {
    h1: <>Lever <span className="accent">eCoC</span> på to klikk.</>,
    sub: 'Vereg sender elektronisk samsvarserklæring rett til Statens vegvesen. Bygget for norske bil-, MC- og tilhengerimportører.'
  },
  punchy: {
    h1: <>Én ting. <span className="accent">Gjort riktig.</span></>,
    sub: 'Vereg gjør eCoC mot Statens vegvesen. Ikke regnskap, ikke CRM, ikke 47 andre moduler du ikke trenger. Kun det importører faktisk skal levere.'
  }
};

/* ============================================================
   HOMEPAGE
   ============================================================ */
function HomePage({ tweaks, go }) {
  const copy = HERO_COPY[tweaks.heroCopy] || HERO_COPY.direct;

  return (
    <main>
      {/* HERO */}
      <section className="hero">
        <div className="container">
          <div className="hero-grid">
            <div className="hero-text">
              <div className="hero-eyebrow">
                <span className="dot"></span>
                <span>eCoC</span><span className="sep">/</span>
                <span>Statens vegvesen</span><span className="sep">/</span>
                <span>Norge</span>
              </div>
              <h1 className="hero-h1">{copy.h1}</h1>
              <p className="hero-sub">{copy.sub}</p>
              <div className="hero-actions">
                <button className="btn btn-primary btn-lg" onClick={() => go('kontakt')}>
                  Kom i gang <span className="arrow">→</span>
                </button>
                <button className="btn btn-secondary btn-lg" onClick={() => go('priser')}>
                  Se priser
                </button>
              </div>
              <div className="hero-meta">
                <span className="hero-meta-item"><span className="check">✓</span> For norske org.nr.</span>
                <span className="hero-meta-item"><span className="check">✓</span> Direkte mot Statens vegvesen</span>
                <span className="hero-meta-item"><span className="check">✓</span> Norsk support</span>
              </div>
            </div>

            <div className="hero-visual">
              <DashboardMock />
              <FloatCard
                position="top-left"
                label="Innsendt i dag"
                value="142 / 142 OK"
                icon={
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
                } />
              
            </div>
          </div>
        </div>
      </section>

      {/* TRUST STRIP */}
      <section className="trust">
        <div className="container">
          <div className="trust-inner">
            <div className="trust-item"><span className="ico">●</span> Direkte integrasjon · Statens vegvesen</div>
            <div className="trust-item"><span className="ico">●</span> DRIFTET I NORGE</div>
            <div className="trust-item"><span className="ico">●</span> Nytt eCoC-format · klart</div>
          </div>
        </div>
      </section>

      {/* HOW IT WORKS */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow">Slik fungerer det</span>
            <h2>Tre steg fra eCoC til <span className="accent">godkjent</span> hos Statens vegvesen.</h2>
            <p className="section-lede"></p>
          </div>
          <div className="steps">
            <div className="step">
              <div className="step-num">01</div>
              <h3>Fyll inn opplysninger</h3>
              <p>Fyll inn obligatoriske felter som understellsnummer og typegodkjenning.</p>
              <div className="step-detail">→ Understellsnummer · typegodkjenning</div>
            </div>
            <div className="step">
              <div className="step-num">02</div>
              <h3>Vereg validerer</h3>
              <p>Struktur, signaturer og obligatoriske felt sjekkes mot Vegvesenets nyeste skjema før innsending. Feil fanges før de blir avvik.</p>
              <div className="step-detail">→ Validering · feltkontroll</div>
            </div>
            <div className="step">
              <div className="step-num">03</div>
              <h3>Sendt og bekreftet</h3>
              <p>Innsendingen går rett til Statens vegvesen. Status vises umiddelbart i portalen.</p>
              <div className="step-detail">→ Statens vegvesen · status i portalen</div>
            </div>
          </div>
        </div>
      </section>

      {/* PRICING TEASER */}
      <section className="section" style={{ paddingTop: 32 }}>
        <div className="container">
          <div className="section-head">
            <span className="eyebrow">Priser</span>
            <h2>Én volumbasert <span style={{ letterSpacing: '-0.8px' }}>årsavgift</span>. <span className="accent">Ingen overraskelser.</span></h2>
            <p className="section-lede">Pris bestemmes av antall transaksjoner per år. Ingen avvik på timepris, ingen oppstartsavgift.</p>
          </div>
          <div className="pricing-strip">
            <div className="price-tier">
              <div className="tier-name">Mini</div>
              <div className="tier-volume">0 – 100 transaksjoner</div>
              <div style={{ flex: 1 }}></div>
              <div><span className="tier-amount">13 000</span><span className="tier-unit">kr/år</span></div>
            </div>
            <div className="price-tier">
              <div className="tier-name">Standard</div>
              <div className="tier-volume">100 – 500 transaksjoner</div>
              <div style={{ flex: 1 }}></div>
              <div><span className="tier-amount">20 000</span><span className="tier-unit">kr/år</span></div>
            </div>
            <div className="price-tier">
              <div className="tier-name">Pluss</div>
              <div className="tier-volume">500 – 1 500 transaksjoner</div>
              <div style={{ flex: 1 }}></div>
              <div><span className="tier-amount">24 000</span><span className="tier-unit">kr/år</span></div>
            </div>
            <div className="price-tier">
              <div className="tier-name">Max</div>
              <div className="tier-volume">1 500 + transaksjoner</div>
              <div style={{ flex: 1 }}></div>
              <div><span className="tier-amount">31 000</span><span className="tier-unit">kr/år</span></div>
            </div>
          </div>
          <div style={{ marginTop: 24, textAlign: 'center' }}>
            <button className="btn btn-quiet" onClick={() => go('priser')}>
              Se hele prissiden <span className="arrow">→</span>
            </button>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="cta-section">
        <div className="container">
          <h2>Klar til å sende første <span className="accent">eCoC?</span></h2>
          <div className="cta-actions">
            <button className="btn btn-primary btn-lg" onClick={() => go('kontakt')}>
              Kom i gang <span className="arrow">→</span>
            </button>
            <button className="btn btn-secondary btn-lg" onClick={() => go('priser')}>Se priser</button>
          </div>
          <div className="cta-meta"></div>
        </div>
      </section>
    </main>);

}

/* ============================================================
   PRISER PAGE
   ============================================================ */
function PriserPage({ go }) {
  const tiers = [
  { name: 'Mini', vol: '0 – 100', price: '13 000', featured: false },
  { name: 'Standard', vol: '100 – 500', price: '20 000', featured: false },
  { name: 'Pluss', vol: '500 – 1 500', price: '24 000', featured: false },
  { name: 'Max', vol: '1 500 +', price: '31 000', featured: false }];


  return (
    <main>
      <section className="priser-hero">
        <div className="container">
          <span className="eyebrow" style={{ marginBottom: 14, display: 'block' }}>Priser</span>
          <h1>Fire nivåer. <span className="accent">Velg etter volum.</span></h1>
          <p className="lede">Pris bestemmes utelukkende av antall transaksjoner per år. Ingen oppstartsavgift, ingen brukerlisenser.</p>
        </div>
      </section>

      <section style={{ paddingBottom: 0 }}>
        <div className="container">
          <div className="priser-table">
            <div className="priser-table-head">
              <div>Nivå</div>
              <div>Transaksjoner / år</div>
              <div>Pris</div>
            </div>
            {tiers.map((t) =>
            <div key={t.name} className="priser-row">
                <div>
                  <div className="priser-tier-name">{t.name}</div>
                </div>
                <div className="priser-vol">{t.vol}</div>
                <div>
                  <div className="priser-price">{t.price}<span className="unit">kr/år</span></div>
                </div>
              </div>
            )}
          </div>
          <div className="priser-included">
            <span className="priser-included-label">Inkludert i alle nivåer</span>
            <span className="priser-included-items">Webportal · Direkte integrasjon mot Statens vegvesen · Sporing og historikk · Norsk support · Onboarding</span>
          </div>
          <p className="priser-fineprint">Alle priser er eks. mva. og gjelder per organisasjonsnummer. Pris kan justeres årlig — ikke midt i en avtaleperiode.</p>
        </div>
      </section>

      <section style={{ padding: '0 0 var(--section-y)' }}>
        <div className="container">
        </div>
      </section>

      <section className="section" style={{ paddingTop: 32 }}>
        <div className="container-narrow">
          <a className="help-banner" onClick={() => go('faq')}>
            <div className="help-banner-text">
              <div className="help-banner-title">Spørsmål om pris, oppstart eller Altinn?</div>
              <div className="help-banner-sub">Se vanlige spørsmål — svar på transaksjoner, bytte av nivå, tilganger og mer.</div>
            </div>
            <span className="help-banner-cta">Gå til Hjelp <span className="arrow">→</span></span>
          </a>
        </div>
      </section>

      <section className="cta-section" style={{ padding: '64px 0 96px' }}>
        <div className="container">
          <h2>Klar til å <span className="accent">komme i gang?</span></h2>
          <div className="cta-actions">
            <button className="btn btn-primary btn-lg" onClick={() => go('kontakt')}>Kom i gang <span className="arrow">→</span></button>
          </div>
        </div>
      </section>
    </main>);

}

/* ============================================================
   KONTAKT PAGE
   ============================================================ */
function KontaktPage() {
  const [sent, setSent] = useStateP(false);
  const [form, setForm] = useStateP({ navn: '', firma: '', orgnr: '', epost: '', telefon: '', volum: '0 – 100', melding: '', website: '' });

  const [sending, setSending] = useStateP(false);
  const [error, setError] = useStateP('');

  function submit(e) {
    e.preventDefault();
    if (form.website) return; // honeypot — bot fylte ut det skjulte feltet
    setSending(true);
    setError('');
    fetch('https://prod-00.norwayeast.logic.azure.com:443/workflows/a14e8d8d5de64e83b0b93e5109ebb602/triggers/When_an_HTTP_request_is_received/paths/invoke?api-version=2016-10-01&sp=%2Ftriggers%2FWhen_an_HTTP_request_is_received%2Frun&sv=1.0&sig=nVuGOEj0_BQEzBJAY62yz2oU2G9THLWwWYgQbzxgQWs', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(form),
    })
      .then((res) => { if (!res.ok) throw new Error(); setSent(true); })
      .catch(() => setError('Noe gikk feil. Prøv igjen, eller send oss en e-post direkte.'))
      .finally(() => setSending(false));
  }

  function update(k, v) {setForm((f) => ({ ...f, [k]: v }));}

  return (
    <main>
      <div className="container">
        <div className="kontakt-grid">
          <div className="kontakt-left">
            <span className="eyebrow" style={{ marginBottom: 14, display: 'block' }}>Kontakt</span>
            <h1>Vi svarer raskt, <span className="accent">på norsk.</span></h1>
            <p className="lede"></p>
            <div className="kontakt-info">
              <div className="kontakt-info-row">
                <div className="label">E-post</div>
                <div className="value"><a href="mailto:hei@vereg.no">hei@vereg.no</a></div>
                <div className="sub">For salg, support og demo.</div>
              </div>
              <div className="kontakt-info-row">
                <div className="label">Selskap</div>
                <div className="value">Leap It AS</div>
                <div className="sub">Øvre Langgate 59, 3110 Tønsberg<br /><br />Tlf.: 918 23 318</div>
              </div>
              <div className="kontakt-info-row">
                <div className="label">Drift &amp; sikkerhet</div>
                <div className="value">Norsk hosting </div>
                <div className="sub">Direkte integrasjon mot Statens vegvesen.</div>
              </div>
            </div>
          </div>

          <div className="kontakt-form">
            {sent ?
            <div className="success-state">
                <div className="check-big">✓</div>
                <h3>Takk, {form.navn || 'der'}.</h3>
                <p>Vi tar snart kontakt på {form.epost || 'oppgitt e-post'}.</p>
              </div> :

            <form onSubmit={submit}>
                <h3>Send oss en melding</h3>
                <div className="field-row">
                  <div className="field">
                    <label>Navn</label>
                    <input required value={form.navn} onChange={(e) => update('navn', e.target.value)} placeholder="Kari Nordmann" />
                  </div>
                  <div className="field">
                    <label>Firma</label>
                    <input required value={form.firma} onChange={(e) => update('firma', e.target.value)} placeholder="Eksempel AS" />
                  </div>
                </div>
                <div className="field-row">
                  <div className="field">
                    <label>Org.nr.</label>
                    <input value={form.orgnr} onChange={(e) => update('orgnr', e.target.value)} placeholder="912 345 678" />
                  </div>
                  <div className="field">
                    <label>E-post</label>
                    <input required type="email" value={form.epost} onChange={(e) => update('epost', e.target.value)} placeholder="kari@eksempel.no" />
                  </div>
                </div>
                <div className="field">
                  <label>Telefon</label>
                  <input type="tel" value={form.telefon} onChange={(e) => update('telefon', e.target.value)} placeholder="912 34 567" />
                </div>
                <div className="field">
                  <label>Forventet volum</label>
                  <select value={form.volum} onChange={(e) => update('volum', e.target.value)}>
                    <option>0 – 100 transaksjoner / år</option>
                    <option>100 – 500 transaksjoner / år</option>
                    <option>500 – 1 500 transaksjoner / år</option>
                    <option>1 500 + transaksjoner / år</option>
                    <option>Vet ikke ennå</option>
                  </select>
                </div>
                <div className="field">
                  <label>Melding</label>
                  <textarea value={form.melding} onChange={(e) => update('melding', e.target.value)} placeholder="Fortell kort om behovet ditt, f.eks. antall eCoC-innsendinger dere forventer per år." />
                </div>
                <div className="field" style={{ position: 'absolute', left: '-9999px', opacity: 0 }} aria-hidden="true">
                  <label>La stå tom</label>
                  <input tabIndex="-1" autoComplete="off" value={form.website} onChange={(e) => update('website', e.target.value)} />
                </div>
                <button type="submit" className="btn btn-primary" disabled={sending}>{sending ? 'Sender…' : 'Send melding'} <span className="arrow">→</span></button>
                {error && <p className="form-error">{error}</p>}
                <div className="fineprint"></div>
              </form>
            }
          </div>
        </div>
      </div>
    </main>);

}

/* ============================================================
   eCoC 2026 ARTICLE PAGE — SEO + explainer
   ============================================================ */
function EcocPage({ go }) {
  return (
    <main>
      {/* HEAD */}
      <section className="ecoc-head">
        <div className="container-narrow">
          <span className="eyebrow" style={{ display: 'block', marginBottom: 14 }}>Regelverk · EU · 2026</span>
          <h1 className="ecoc-h1">
            eCoC blir digitalt. <span className="accent">Fra 5. juli 2026.</span>
          </h1>
          <p className="ecoc-lede">
            EU innfører krav om elektronisk samsvarssertifikat (eCoC) for nye kjøretøy. Papir-CoC fases ut, og kjøretøydata
            hentes i stedet fra en felles europeisk database — Eucaris. Her er hva norske importører og forhandlere må vite.
          </p>
        </div>
      </section>

      {/* KEY FACTS — at-a-glance grid */}
      <section className="ecoc-section">
        <div className="container-narrow">
          <div className="ecoc-facts">
            <div className="ecoc-fact">
              <div className="ecoc-fact-label">Ikrafttredelse</div>
              <div className="ecoc-fact-value">5. juli 2026</div>
              <div className="ecoc-fact-sub">Krav fra produsenter</div>
            </div>
            <div className="ecoc-fact">
              <div className="ecoc-fact-label">Omfang</div>
              <div className="ecoc-fact-value">M · N · O</div>
              <div className="ecoc-fact-sub">Personbil, varebil, tilhenger</div>
            </div>
            <div className="ecoc-fact">
              <div className="ecoc-fact-label">Database</div>
              <div className="ecoc-fact-value">Eucaris</div>
              <div className="ecoc-fact-sub">Felles europeisk register</div>
            </div>
            <div className="ecoc-fact">
              <div className="ecoc-fact-label">Forhandler melder</div>
              <div className="ecoc-fact-value">VIN + avgiftsklasse</div>
              <div className="ecoc-fact-sub">Resten hentes automatisk</div>
            </div>
          </div>
        </div>
      </section>

      {/* WHAT IS CHANGING */}
      <section className="ecoc-section">
        <div className="container-narrow">
          <h2 className="ecoc-h2">Hva endrer seg?</h2>
          <p>
            EU har vedtatt at det fra <strong>5. juli 2026</strong> stilles krav om at produsenter av kjøretøy leverer
            elektroniske samsvarssertifikater (eCoC) for nye kjøretøy. Ordningen gjelder kjøretøygruppene M, N og O — det
            vil si personbiler, varebiler, lastebiler, busser, bobiler og tilhengere.
          </p>
          <p>
            Papirbaserte Certificate of Conformity-dokumenter fases ut, og kjøretøydata gjøres i stedet tilgjengelig digitalt
            gjennom en felles europeisk database kjent som <strong>Eucaris</strong>.
          </p>

          <div className="ecoc-callout">
            <div className="ecoc-callout-label">Formålet er å</div>
            <ul className="ecoc-list">
              <li>Forenkle registreringsprosessene</li>
              <li>Redusere risiko for feil og forfalskninger</li>
              <li>Legge til rette for effektiv informasjonsutveksling mellom myndigheter, produsenter og forhandlere i Europa</li>
            </ul>
          </div>
        </div>
      </section>

      {/* HOW VEREG SOLVES IT */}
      <section className="ecoc-section">
        <div className="container-narrow">
          <h2 className="ecoc-h2">Slik er Vereg klar</h2>
          <p>
            Vereg er bygget for det nye eCoC-formatet fra dag én. Når kravet
            trer i kraft 5. juli 2026, leverer Vereg samsvarserklæring rett til Statens vegvesen for norske importører av
            bil, MC, tilhenger og bobil.
          </p>
          <div className="ecoc-product-card">
            <div>
              <div className="eyebrow" style={{ marginBottom: 10 }}>Vereg.no</div>
              <h3>Én ting. Gjort riktig.</h3>
              <p>
                Nettportal for elektronisk samsvarserklæring mot Statens vegvesen. Direkte integrasjon, norsk hosting,
                støtte for det nye XML-skjemaet. Fra 12 000 kr per år.
              </p>
              <div className="ecoc-product-actions">
                <button className="btn btn-primary" onClick={() => go('kontakt')}>Kom i gang <span className="arrow">→</span></button>
                <button className="btn btn-secondary" onClick={() => go('priser')}>Se priser</button>
              </div>
            </div>
            <div className="ecoc-product-side">
              <div className="row"><span className="k">Format</span><span className="v">XML · eCoC</span></div>
              <div className="row"><span className="k">Innsending</span><span className="v">Statens vegvesen</span></div>
              <div className="row"><span className="k">Onboarding</span><span className="v">Umiddelbart</span></div>
              <div className="row"><span className="k">Krav</span><span className="v">Norsk org.nr.</span></div>
              <div className="row"><span className="k">Klar fra</span><span className="v accent-v">Nå</span></div>
            </div>
          </div>
        </div>
      </section>

      {/* SOURCES */}
      <section className="ecoc-section">
        <div className="container-narrow">
          <h2 className="ecoc-h2">Kilder</h2>
          <div className="ecoc-sources">
            <div className="ecoc-source">
              <div className="ecoc-source-label">Statens vegvesen</div>
              <div className="ecoc-source-text">
                <em>«EU-forordningen 2018/858 pålegger fabrikantene å levere elektronisk CoC for kjøretøygruppene M, N og O.»</em>
                <br />
                Statens vegvesen, informasjon om innsendelse av samsvarserklæring. Se også <a href="https://www.vegvesen.no/" target="_blank" rel="noopener noreferrer">vegvesen.no</a> og forordning (EU) 2018/858 artikkel 37.
              </div>
            </div>
            <div className="ecoc-source">
              <div className="ecoc-source-label">Bobilverden.no</div>
              <div className="ecoc-source-text">
                «Nå blir bilens CoC digitalt», publisert 21. mars 2026. <a href="https://bobilverden.no/na-blir-bilens-coc-digitalt/" target="_blank" rel="noopener noreferrer">Les saken hos Bobilverden →</a>
              </div>
            </div>
            <div className="ecoc-source">
              <div className="ecoc-source-label">EU-regelverk</div>
              <div className="ecoc-source-text">
                Kommisjonens gjennomføringsforordning om elektronisk samsvarssertifikat (eCoC) for kjøretøygruppene M, N og O.
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="cta-section" style={{ padding: '64px 0 96px' }}>
        <div className="container">
          <h2>Trenger dere en <span className="accent">eCoC-løsning?</span></h2>
          <div className="cta-actions">
            <button className="btn btn-primary btn-lg" onClick={() => go('kontakt')}>Kom i gang <span className="arrow">→</span></button>
          </div>
        </div>
      </section>
    </main>);

}

/* ============================================================
   FAQ PAGE
   ============================================================ */
function FaqPage({ go }) {
  const [openId, setOpenId] = useStateP('');

  const sections = [
  {
    id: 'pris',
    title: 'Pris og abonnement',
    items: [
    { q: 'Hva regnes som en «transaksjon»?', a: 'Hver eCoC som sendes til Statens vegvesen teller som én transaksjon. Validering, kladd og avviste innsendinger teller ikke — kun det som faktisk går mot Statens vegvesen.' },
    { q: 'Kan vi bytte nivå underveis i året?', a: 'Ja. Hvis du sprenger nivået ditt, oppgraderes abonnementet automatisk til neste trinn. Du betaler kun differansen for nåværende trinn til det nye.' }]

  },
  {
    id: 'oppstart',
    title: 'Komme i gang',
    items: [
    { q: 'Hva med oppstart og integrasjon?', a: 'Onboarding er automatisk når du registrerer deg og inngår et abonnement. Kontakt oss ved behov for hjelp, f.eks. til å gi tilganger i Altinn.' },
    { q: 'Trenger vi norsk organisasjonsnummer?', a: 'Ja. Vereg er kun tilgjengelig for selskaper med norsk org.nr., siden tjenesten har direkte integrasjon mot Statens vegvesen.' },
    { q: 'Hvordan gir vi tilgang/rettigheter i Altinn?', a: (<>For at Vereg skal kunne sende eCoC på vegne av selskapet, må daglig leder eller en med signaturrett i Altinn delegere rollen «Kjøretøy – registreringsoppgaver» (eller tilsvarende) til Vereg. Du finner det under Profil → Andre med rettigheter til virksomheten → Legg til. Vi sender en detaljert steg-for-steg-veiledning i onboarding, og hjelper gjerne på en kort skjermdeling om noe stopper opp.<br /><br />PS! Bedrifter som skal sende elektronisk samsvarserklæring må ha en aktiv avtale om dette med Statens Vegvesen.</>) }]

  }];


  return (
    <main>
      <section className="priser-hero">
        <div className="container" style={{ textAlign: 'center' }}>
          <span className="eyebrow" style={{ marginBottom: 14, display: 'block' }}>Hjelp</span>
          <h1>Vanlige <span className="accent">spørsmål.</span></h1>
          <p className="lede" style={{ margin: '0 auto' }}>Finn raske svar om pris, oppstart, integrasjon og tilganger. Mangler noe? Send oss en melding så svarer vi innen én arbeidsdag.</p>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 32 }}>
        <div className="container-narrow">
          {sections.map((sec) =>
          <div key={sec.id} className="faq-section">
              <h2 className="faq-section-title">{sec.title}</h2>
              <div className="faq">
                {sec.items.map((f, i) => {
                const id = `${sec.id}-${i}`;
                const open = openId === id;
                return (
                  <div key={id} className={`faq-item ${open ? 'open' : ''}`} onClick={() => setOpenId(open ? '' : id)}>
                      <div className="faq-q">
                        <span>{f.q}</span>
                        <span className="plus">+</span>
                      </div>
                      <div className="faq-a">{f.a}</div>
                    </div>);

              })}
              </div>
            </div>
          )}
        </div>
      </section>

      <section className="cta-section" style={{ padding: '64px 0 96px' }}>
        <div className="container">
          <h2>Fant du ikke <span className="accent">svaret?</span></h2>
          <div className="cta-actions">
            <button className="btn btn-primary btn-lg" onClick={() => go('kontakt')}>Kontakt oss <span className="arrow">→</span></button>
            <button className="btn btn-secondary btn-lg" onClick={() => go('priser')}>Se priser</button>
          </div>
        </div>
      </section>
    </main>);

}

/* Export */
Object.assign(window, { HomePage, PriserPage, KontaktPage, EcocPage, FaqPage });