{INNHOLD.hero.tittel_lys}{INNHOLD.hero.tittel_uthevet}

{INNHOLD.hero.undertekst}

{[0, 1].map(sett => ( {BUZZ.map(b => {b})} ))}

/ {String(steg + 1).padStart(2,"0")} av 04

{STEG[steg].hjelp}

{steg === 0 && ( sett("navn", e.target.value)} onKeyDown={paaTast} placeholder={INNHOLD.skjema.ph_navn} autoComplete="name" aria-label="Navn"/> )} {steg === 1 && ( <> sett("epost", e.target.value)} onKeyDown={paaTast} placeholder={INNHOLD.skjema.ph_epost} autoComplete="email" aria-label="E-post"/> sett("telefon", e.target.value)} onKeyDown={paaTast} placeholder={INNHOLD.skjema.ph_telefon} autoComplete="tel" aria-label="Telefon, valgfritt"/> sett("firma", e.target.value)} onKeyDown={paaTast} placeholder={INNHOLD.skjema.ph_firma} autoComplete="organization" aria-label="Firma, valgfritt"/> )} {steg === 2 && (

{TEMAER.map((t, i) => ( ))}

)} {steg === 3 && ( <>

sett("melding", e.target.value)}
                            placeholder={INNHOLD.skjema.ph_melding}
                            aria-label="Melding"/>

<label className="sl-avkrys">
                    <input type="checkbox" checked={data.nyhetsbrev}
                           onChange={e => sett("nyhetsbrev", e.target.checked)}/>
                    <span className="sl-avkrys__boks" aria-hidden="true">
                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"
                           strokeLinecap="round" strokeLinejoin="round"><path d="m5 12.5 4.5 4.5L19 7.5"/></svg>
                    </span>
                    <span className="sl-avkrys__tekst">
                      {INNHOLD.skjema.nyhetsbrev}
                      <span className="sl-avkrys__note">{INNHOLD.skjema.nyhetsbrev_note}</span>
                    </span>
                  </label>
                </>
              )}
            </div>

{feil && <p className="sl-modal__feil" role="alert">{feil}</p>}

<div className="sl-modal__knapper">
              {steg > 0 && <button className="sl-btn sl-btn--ghost" onClick={forrige}>{INNHOLD.skjema.knapp_tilbake}</button>}
              {steg !== 2 && (
                <button className="sl-btn sl-btn--primary" onClick={neste}>
                  {steg === 3 ? INNHOLD.skjema.knapp_send : INNHOLD.skjema.knapp_neste}
                </button>
              )}
              {steg !== 2 && <span className="sl-modal__hint">{INNHOLD.skjema.hint} <kbd>{INNHOLD.skjema.hint_tast}</kbd></span>}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

/* =============================================================
   Jens — kundevendt assistent, nede til høyre
   ============================================================= */
const APNINGSREPLIKK = INNHOLD.jens.apningsreplikk;
const FORSLAG = INNHOLD.jens.forslag;

function Jens() {
  const [apen, setApen]       = useState(false);
  const [meldinger, setMeld]  = useState([{ rolle: "jens", tekst: APNINGSREPLIKK }]);
  const [tekst, setTekst]     = useState("");
  const [venter, setVenter]   = useState(false);
  const [ulest, setUlest]     = useState(false);
  const [paaMorkt, setMorkt]  = useState(false);

const logRef   = useRef(null);
  const feltRef  = useRef(null);
  const knappRef = useRef(null);

useEffect(() => {
    if (logRef.current) logRef.current.scrollTop = logRef.current.scrollHeight;
  }, [meldinger, venter]);

useEffect(() => {
    if (apen) {
      setUlest(false);
      const t = setTimeout(() => feltRef.current && feltRef.current.focus(), 240);
      return () => clearTimeout(t);
    }
  }, [apen]);

/* Bytter knappen til lys når den svever over kontaktfeltet eller footeren,
     som begge er svarte. Uten dette forsvinner den i bakgrunnen. */
  useEffect(() => {
    let ventende = false;
    const sjekk = () => {
      ventende = false;
      const k = knappRef.current;
      if (!k) return;
      const boks = k.getBoundingClientRect();
      const midt = boks.top + boks.height / 2;
      let over = false;
      document.querySelectorAll(".sl-contact, .sl-footer").forEach(felt => {
        const f = felt.getBoundingClientRect();
        if (midt >= f.top && midt <= f.bottom) over = true;
      });
      setMorkt(over);
    };
    const paaScroll = () => {
      if (ventende) return;
      ventende = true;
      requestAnimationFrame(sjekk);
    };
    sjekk();
    window.addEventListener("scroll", paaScroll, { passive: true });
    window.addEventListener("resize", paaScroll);
    return () => {
      window.removeEventListener("scroll", paaScroll);
      window.removeEventListener("resize", paaScroll);
    };
  }, []);

/* Liten pling første gang, så folk oppdager at han er der */
  useEffect(() => {
    const t = setTimeout(() => { if (!apen) setUlest(true); }, 9000);
    return () => clearTimeout(t);
  }, []);

useEffect(() => {
    if (!apen) return;
    const tast = (e) => { if (e.key === "Escape") setApen(false); };
    document.addEventListener("keydown", tast);
    return () => document.removeEventListener("keydown", tast);
  }, [apen]);

return (
    <>
      <button ref={knappRef}
              className={"sl-jens-knapp" + (apen ? " sl-jens-knapp--apen" : "")
                         + (paaMorkt && !apen ? " sl-jens-knapp--lys" : "")}
              onClick={() => setApen(!apen)}
              aria-expanded={apen} aria-controls="sl-jens-panel"
              aria-label={apen ? "Lukk chat med Jens" : "Åpne chat med Jens"}>
        {apen ? (
          <span className="sl-jens-knapp__x" aria-hidden="true">×</span>
        ) : (
          <>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"
                 strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <path d="M20 15a2 2 0 0 1-2 2H8l-4 4V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2z"/>
            </svg>
            <span className="sl-jens-knapp__navn">{INNHOLD.jens.knapp}</span>
            {ulest && <span className="sl-jens-knapp__prikk" aria-hidden="true"></span>}
          </>
        )}
      </button>

{apen && (
        <div className="sl-jens" id="sl-jens-panel" role="dialog" aria-label="Chat med Jens">
          <div className="sl-jens__topp">
            <div className="sl-jens__ident">
              <span className="sl-jens__merke" aria-hidden="true">J</span>
              <span>
                <strong>Jens</strong>
                <span className="sl-jens__rolle">{INNHOLD.jens.rolle}</span>
              </span>
            </div>
            <button className="sl-jens__lukk" onClick={() => setApen(false)} aria-label="Lukk">×</button>
          </div>

<div className="sl-jens__log" ref={logRef} role="log" aria-live="polite">
            {meldinger.map((m, i) => (
              <React.Fragment key={i}>
                <div className={"sl-jens__melding sl-jens__melding--" + m.rolle}>{m.tekst}</div>
                {m.skjema && (
                  <button className="sl-jens__handling"
                          onClick={() => { setApen(false); apneSkjema(); }}>
                    Send oss en melding →
                  </button>
                )}
              </React.Fragment>
            ))}
            {venter && (
              <div className="sl-jens__melding sl-jens__melding--jens sl-jens__skriver" aria-label="Jens skriver">
                <span></span><span></span><span></span>
              </div>
            )}
            {meldinger.length === 1 && !venter && (
              <div className="sl-jens__forslag">
                {FORSLAG.map(f => (
                  <button key={f} onClick={() => send(f)}>{f}</button>
                ))}
              </div>
            )}
          </div>

<div className="sl-jens__bunn">
            <input ref={feltRef} className="sl-jens__felt" value={tekst}
                   onChange={e => setTekst(e.target.value)}
                   onKeyDown={e => { if (e.key === "Enter") { e.preventDefault(); send(); } }}
                   placeholder={INNHOLD.jens.placeholder} aria-label="Melding til Jens" maxLength={1000}/>
            <button className="sl-jens__send" onClick={() => send()}
                    disabled={venter || !tekst.trim()} aria-label="Send melding">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"
                   strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <path d="M5 12h13M12 5l7 7-7 7"/>
              </svg>
            </button>
          </div>
          <p className="sl-jens__fot">{INNHOLD.jens.fot}</p>
        </div>
      )}
    </>
  );
}

{INNHOLD.hero.tittel_lys}{INNHOLD.hero.tittel_uthevet}

{INNHOLD.tjenester.tittel}

{i.t}

{INNHOLD.metode.tittel}

{s.t}

{INNHOLD.ki.tittel_for}{INNHOLD.ki.tittel_uthevet}

{INNHOLD.kontakt.tittel_for}{INNHOLD.kontakt.tittel_uthevet}{INNHOLD.kontakt.tittel_etter}