/* global React, ReactDOM, HomePage, PriserPage, KontaktPage, EcocPage, FaqPage, TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakColor */
const { useState, useEffect } = React;

const SITE = 'https://vereg.no';
const PATHS = { home: '/', priser: '/priser', ecoc: '/ecoc-2026', faq: '/faq', kontakt: '/kontakt' };
const SEO = {
  home: { title: 'vereg: eCoC-portal for kjøretøyimport i Norge', desc: 'Verifiser, registrer og signer eCoC-dokumentasjon digitalt. Direkte integrasjon mot Statens vegvesen for norske kjøretøyimportører.' },
  priser: { title: 'Priser | vereg', desc: 'Se priser for vereg sin eCoC-portal. Fire nivåer basert på antall transaksjoner per år — ingen oppstartsavgift, ingen brukerlisenser.' },
  ecoc: { title: 'eCoC 2026 — digital omregistrering | vereg', desc: 'Fra 5. juli 2026 blir eCoC digitalt i EU. Se hva regelendringen betyr for norske kjøretøyimportører og hvordan vereg hjelper deg klargjøre deg.' },
  faq: { title: 'Hjelp og vanlige spørsmål | vereg', desc: 'Svar på vanlige spørsmål om pris, oppstart, integrasjon og tilganger hos vereg.' },
  kontakt: { title: 'Kontakt oss | vereg', desc: 'Ta kontakt med vereg for spørsmål om eCoC-portalen, priser eller oppstart. Vi svarer raskt, på norsk.' },
};

function useSEO(route) {
  useEffect(() => {
    const meta = SEO[route] || SEO.home;
    document.title = meta.title;
    const setMeta = (sel, attr, val) => { const el = document.querySelector(sel); if (el) el.setAttribute(attr, val); };
    setMeta('meta[name="description"]', 'content', meta.desc);
    setMeta('meta[property="og:title"]', 'content', meta.title);
    setMeta('meta[property="og:description"]', 'content', meta.desc);
    setMeta('meta[property="og:url"]', 'content', SITE + (PATHS[route] || '/'));
    setMeta('meta[name="twitter:title"]', 'content', meta.title);
    setMeta('meta[name="twitter:description"]', 'content', meta.desc);
    let canon = document.querySelector('link[rel="canonical"]');
    if (!canon) { canon = document.createElement('link'); canon.setAttribute('rel', 'canonical'); document.head.appendChild(canon); }
    canon.setAttribute('href', SITE + (PATHS[route] || '/'));
  }, [route]);
}

/* ============================================================
   TWEAK DEFAULTS — wrapped in EDITMODE markers for persistence
   ============================================================ */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroCopy": "direct",
  "density": "comfortable"
}/*EDITMODE-END*/;

/* ============================================================
   NAV
   ============================================================ */
function Nav({ route, go }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 4);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  useEffect(() => { setMenuOpen(false); }, [route]);

  const links = [
    { r: 'home', label: 'Forside' },
    { r: 'priser', label: 'Priser' },
    { r: 'ecoc', label: 'Nyheter' },
    { r: 'faq', label: 'Hjelp' },
    { r: 'kontakt', label: 'Kontakt' },
  ];

  return (
    <header className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="container nav-inner">
        <a className="nav-logo" href={PATHS.home} onClick={(e) => { e.preventDefault(); go('home'); }}>
          <img src="assets/vereg-primary.svg" alt="vereg" />
          <span className="tld">.no</span>
        </a>
        <nav className="nav-links">
          {links.map((l) => (
            <a key={l.r} className={`nav-link ${route === l.r ? 'active' : ''}`} href={PATHS[l.r]} onClick={(e) => { e.preventDefault(); go(l.r); }}>{l.label}</a>
          ))}
        </nav>
        <div className="nav-right">
          <a className="btn btn-login" href="https://app.vereg.no/">
            Logg inn
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" style={{ marginLeft: 2 }}>
              <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
              <polyline points="10 17 15 12 10 7"></polyline>
              <line x1="15" y1="12" x2="3" y2="12"></line>
            </svg>
          </a>
          <button className="btn btn-primary" onClick={() => go('kontakt')}>Kom i gang</button>
          <button className={`nav-burger ${menuOpen ? 'open' : ''}`} aria-label="Meny" aria-expanded={menuOpen} onClick={() => setMenuOpen((v) => !v)}>
            <span></span><span></span><span></span>
          </button>
        </div>
      </div>
      {menuOpen && (
        <nav className="nav-mobile-menu">
          {links.map((l) => (
            <a key={l.r} className={`nav-mobile-link ${route === l.r ? 'active' : ''}`} href={PATHS[l.r]} onClick={(e) => { e.preventDefault(); go(l.r); }}>{l.label}</a>
          ))}
        </nav>
      )}
    </header>
  );
}

/* ============================================================
   FOOTER
   ============================================================ */
function Footer({ go }) {
  return (
    <footer>
      <div className="container">
        <div className="footer-grid">
          <div className="footer-logo">
            <img src="assets/vereg-primary.svg" alt="vereg" />
            <p className="footer-tag">eCoC-portal for norske kjøretøyimportører. Direkte integrasjon mot Statens vegvesen.</p>
          </div>
          <div className="footer-col">
            <h4>Produkt</h4>
            <ul>
              <li><a href={PATHS.priser} onClick={(e) => { e.preventDefault(); go('priser'); }}>Priser</a></li>
              <li><a href={PATHS.ecoc} onClick={(e) => { e.preventDefault(); go('ecoc'); }}>Nyheter</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Selskap</h4>
            <ul>
              <li><a href={PATHS.faq} onClick={(e) => { e.preventDefault(); go('faq'); }}>Hjelp</a></li>
              <li><a href={PATHS.kontakt} onClick={(e) => { e.preventDefault(); go('kontakt'); }}>Kontakt</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Juridisk</h4>
            <ul>
              <li><a href="https://docs.leapit.no/nb-NO/legal/privacy-policy/" target="_blank" rel="noopener noreferrer">Personvernerklæring</a></li>
              <li><a href="https://docs.leapit.no/nb-NO/legal/eula/" target="_blank" rel="noopener noreferrer">Sluttbrukeravtale</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 Leap It AS</div>
        </div>
      </div>
    </footer>
  );
}

/* ============================================================
   APP — hash routing
   ============================================================ */
function App() {
  const [route, setRoute] = useState(() => routeFromPath());
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useSEO(route);

  useEffect(() => {
    const onPop = () => {
      setRoute(routeFromPath());
      window.scrollTo({ top: 0 });
    };
    window.addEventListener('popstate', onPop);
    return () => window.removeEventListener('popstate', onPop);
  }, []);

  // Apply density to body (palette stays brand-locked per style guide)
  useEffect(() => {
    document.body.classList.forEach((c) => {
      if (c.startsWith('density-')) document.body.classList.remove(c);
    });
    if (tweaks.density === 'compact') document.body.classList.add('density-compact');
  }, [tweaks.density]);

  function go(r) {
    const path = PATHS[r] || '/';
    if (window.location.pathname !== path) window.history.pushState({}, '', path);
    setRoute(r);
    window.scrollTo({ top: 0 });
  }

  function routeFromPath() {
    const p = (window.location.pathname || '/').replace(/\/$/, '') || '/';
    if (p === '/priser') return 'priser';
    if (p === '/kontakt') return 'kontakt';
    if (p === '/ecoc-2026' || p === '/ecoc') return 'ecoc';
    if (p === '/faq') return 'faq';
    return 'home';
  }

  return (
    <>
      <Nav route={route} go={go} />
      {route === 'home'    && <HomePage tweaks={tweaks} go={go} />}
      {route === 'priser'  && <PriserPage go={go} />}
      {route === 'ecoc'    && <EcocPage go={go} />}
      {route === 'faq'     && <FaqPage go={go} />}
      {route === 'kontakt' && <KontaktPage />}
      <Footer go={go} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero-tekst">
          <TweakRadio
            label="Vinkling"
            value={tweaks.heroCopy}
            onChange={(v) => setTweak('heroCopy', v)}
            options={[
              { value: 'direct',  label: 'Direkte' },
              { value: 'benefit', label: 'To klikk' },
              { value: 'punchy',  label: 'Punchy' },
            ]}
          />
        </TweakSection>
        <TweakSection label="Tetthet">
          <TweakRadio
            label="Seksjoner"
            value={tweaks.density}
            onChange={(v) => setTweak('density', v)}
            options={[
              { value: 'comfortable', label: 'Romslig' },
              { value: 'compact',     label: 'Tett' },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);