/* =============================================================
   Integrasjoner og systemflyt — viser hva vi kobler sammen.
   Systemnavn som tekst, ikke varemerkelogoer.
   ============================================================= */

const FLYT_KILDER = ["Skjema på nett", "E-post", "Nettbutikk", "Timeregistrering"];
const FLYT_MAL    = ["Regnskap", "CRM", "Lager", "Rapport"];

const SYSTEMGRUPPER = [
  { ikon:"prat",     navn:"Kommunikasjon",
    sys:["Slack", "Microsoft Teams", "Google Workspace", "Microsoft 365", "Outlook"] },
  { ikon:"oppgave",  navn:"Oppgaver og prosjekt",
    sys:["Asana", "Trello", "Jira", "Monday", "Notion", "ClickUp"] },
  { ikon:"okonomi",  navn:"Regnskap og lønn",
    sys:["Fiken", "Tripletex", "PowerOffice", "Visma", "Xledger"] },
  { ikon:"kunde",    navn:"CRM og salg",
    sys:["HubSpot", "Pipedrive", "Salesforce", "Superoffice"] },
  { ikon:"handel",   navn:"Netthandel",
    sys:["Shopify", "WooCommerce", "Klaviyo", "Voyado", "Mailchimp"] },
  { ikon:"betaling", navn:"Betaling og identitet",
    sys:["Vipps", "Stripe", "Nets", "BankID", "Klarna", "ID-porten"] },
  { ikon:"lagring",  navn:"Filer og lagring",
    sys:["Google Drive", "SharePoint", "Dropbox", "OneDrive"] },
  { ikon:"flyt",     navn:"Automasjon",
    sys:["Zapier", "Make", "n8n", "Webhooks", "Apps Script"] },
];

const SYS_IKON = {
  prat:`<path d="M20 15a2 2 0 0 1-2 2H8l-4 4V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2z"/>`,
  oppgave:`<rect x="3" y="4" width="18" height="17" rx="2"/><path d="M8 3v3M16 3v3M8 12l2.5 2.5L16 9"/>`,
  okonomi:`<rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 10h18M7 15h4"/>`,
  kunde:`<circle cx="12" cy="8" r="3.5"/><path d="M5 20a7 7 0 0 1 14 0"/>`,
  handel:`<path d="M4 7h16l-1.4 11.2A2 2 0 0 1 16.6 20H7.4a2 2 0 0 1-2-1.8z"/><path d="M9 7V5.5a3 3 0 0 1 6 0V7"/>`,
  betaling:`<rect x="2.5" y="6" width="19" height="12" rx="2"/><path d="M2.5 10h19M6 14.5h3"/>`,
  lagring:`<path d="M3 7.5V17a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-7L10 5H5a2 2 0 0 0-2 2z"/>`,
  flyt:`<circle cx="6" cy="6" r="2.5"/><circle cx="18" cy="18" r="2.5"/><path d="M8.5 6H15a3 3 0 0 1 3 3v6"/>`,
};

const AUTOMASJONER = [
  { nar: "en ordre kommer inn i nettbutikken",
    sa: ["Kunden opprettes i CRM — eller oppdateres hvis hun finnes fra før",
         "Varen trekkes fra lageret",
         "Bekreftelsen går ut på e-post",
         "Salget bokføres i regnskapet"] },
  { nar: "noen fyller ut skjemaet på nettsiden",
    sa: ["Henvendelsen havner i CRM med kilde og tidspunkt",
         "Riktig person får varsel i Slack",
         "Kunden får svar med en gang, ikke på mandag"] },
  { nar: "en time registreres på et prosjekt",
    sa: ["Timen legges på riktig prosjekt",
         "Fakturagrunnlaget oppdateres samtidig",
         "Prosjektlederen ser forbruket samme dag, ikke ved månedsslutt"] },
  { nar: "en faktura nærmer seg forfall",
    sa: ["Påminnelsen klargjøres automatisk",
         "Regnskapsfører ser hvem som ligger etter",
         "Kunden får en vennlig melding før det blir ubehagelig"] },
  { nar: "noe stopper opp",
    sa: ["Feilen logges med hele sporet bakover",
         "Systemet prøver på nytt av seg selv",
         "Står det fortsatt fast, får et menneske beskjed"] },
];

function Automasjon() {
  const [valgt, setValgt] = useState(0);
  const [pause, setPause] = useState(false);
  const rolig = typeof window !== "undefined" &&
                window.matchMedia("(prefers-reduced-motion: reduce)").matches;

  useEffect(() => {
    if (pause || rolig) return;
    const t = setTimeout(() => setValgt(v => (v + 1) % AUTOMASJONER.length), 6500);
    return () => clearTimeout(t);
  }, [valgt, pause, rolig]);

  const aktiv = AUTOMASJONER[valgt];

  return (
    <div className="sl-auto"
         onMouseEnter={() => setPause(true)}
         onMouseLeave={() => setPause(false)}>
      <div className="sl-auto__topp">
        <div className="sl-slash">/ neste steg — automasjon</div>
        <h3 className="sl-auto__tittel">Når dataene først flyter, kan de gjøre jobben selv.</h3>
        <p className="sl-auto__intro">
          At systemene snakker sammen er halve jobben. Den andre halvparten er at ting
          faktisk skjer — uten at noen må huske det, og uten at det gjøres to ganger.
        </p>
      </div>

      <div className="sl-auto__rutenett">
        <div className="sl-auto__venstre">
          <span className="sl-flyt__merke">Når dette skjer</span>
          <ul className="sl-auto__utlosere">
            {AUTOMASJONER.map((a, i) => (
              <li key={a.nar}>
                <button type="button"
                        className={"sl-auto__utloser" + (i === valgt ? " sl-auto__utloser--aktiv" : "")}
                        onClick={() => setValgt(i)}
                        aria-pressed={i === valgt}>
                  <span className="sl-auto__utlosertekst">{a.nar}</span>
                  {i === valgt && !rolig && !pause && <span className="sl-auto__tid" key={valgt} aria-hidden="true"></span>}
                </button>
              </li>
            ))}
          </ul>
        </div>

        <div className="sl-auto__hoyre">
          <span className="sl-flyt__merke">Så skjer dette — automatisk</span>
          <ol className="sl-auto__handlinger" key={valgt}>
            {aktiv.sa.map((h, i) => (
              <li className="sl-auto__handling" key={h} style={{ "--i": i }}>{h}</li>
            ))}
          </ol>
        </div>
      </div>

      <p className="sl-auto__fot">
        Alt som skjer blir logget, så det kan etterprøves i ettertid. Ingenting kjøres
        i blinde — og et menneske får alltid beskjed når noe faktisk krever et menneske.
      </p>
    </div>
  );
}

function Systemflyt() {
  const [synlig, setSynlig] = useState(false);
  const [baner, setBaner]   = useState(null);
  const [aktiv, setAktiv]   = useState(null);

  const ref       = useRef(null);
  const kartRef   = useRef(null);
/* Skya er ikke tegnet for hånd. Den er unionen av fem knøler i ulik størrelse
   og en avrundet sokkel — omrisset er sporet numerisk og glattet med
   Catmull-Rom over 120 punkter. Avvik fra den ekte formen: 0,23 % av bredden.
   Asymmetrien er med vilje: en speilsymmetrisk sky leser som utklipp. */
const SKY_B = 202.0, SKY_H = 87.0, SKY_STEG = 2;
const SKY_BANE = "M 199.2 54.0 C 199.9 55.2 200.5 56.4 200.9 57.7 C 201.4 59.0 201.7 60.4 201.9 61.8 C 202.0 63.1 202.0 64.5 201.9 65.9 C 201.8 67.3 201.5 68.6 201.0 69.9 C 200.6 71.2 200.0 72.5 199.3 73.7 C 198.6 74.9 197.8 76.0 196.9 77.0 C 195.9 78.0 194.8 78.9 193.7 79.7 C 192.6 80.5 191.3 81.1 190.1 81.6 C 188.8 82.1 187.4 82.3 186.1 82.7 C 184.8 83.2 183.6 83.9 182.3 84.4 C 181.1 84.9 179.8 85.4 178.4 85.7 C 177.1 85.9 175.7 85.9 174.3 86.0 C 172.9 86.1 171.5 86.0 170.1 86.0 C 168.8 86.0 167.4 86.0 166.0 86.0 C 164.6 86.0 163.2 86.0 161.9 86.0 C 160.5 86.0 159.1 86.0 157.7 86.0 C 156.3 86.0 155.0 86.0 153.6 86.0 C 152.2 86.0 150.8 86.0 149.4 86.0 C 148.1 86.0 146.7 86.0 145.3 86.0 C 143.9 86.0 142.5 86.0 141.2 86.0 C 139.8 86.0 138.4 86.0 137.0 86.0 C 135.6 86.0 134.3 86.0 132.9 86.0 C 131.5 86.0 130.1 86.0 128.7 86.0 C 127.3 86.0 126.0 86.0 124.6 86.0 C 123.2 86.0 121.8 86.0 120.4 86.0 C 119.1 86.0 117.7 86.0 116.3 86.0 C 114.9 86.0 113.5 86.0 112.2 86.0 C 110.8 86.0 109.4 86.0 108.0 86.0 C 106.6 86.0 105.3 86.0 103.9 86.0 C 102.5 86.0 101.1 86.0 99.7 86.0 C 98.4 86.0 97.0 86.0 95.6 86.0 C 94.2 86.0 92.8 86.0 91.5 86.0 C 90.1 86.0 88.7 86.0 87.3 86.0 C 85.9 86.0 84.6 86.0 83.2 86.0 C 81.8 86.0 80.4 86.0 79.0 86.0 C 77.7 86.0 76.3 86.0 74.9 86.0 C 73.5 86.0 72.1 86.0 70.7 86.0 C 69.4 86.0 68.0 86.0 66.6 86.0 C 65.2 86.0 63.8 86.0 62.5 86.0 C 61.1 86.0 59.7 86.0 58.3 86.0 C 56.9 86.0 55.6 86.0 54.2 86.0 C 52.8 86.0 51.4 86.0 50.0 86.0 C 48.7 86.0 47.3 86.0 45.9 86.0 C 44.5 86.0 43.1 86.0 41.8 86.0 C 40.4 86.0 39.0 86.1 37.6 86.3 C 36.3 86.4 34.9 86.8 33.5 86.9 C 32.2 87.0 30.8 87.0 29.4 87.0 C 28.0 86.9 26.7 86.7 25.3 86.5 C 23.9 86.2 22.6 86.0 21.3 85.6 C 19.9 85.2 18.6 84.9 17.3 84.3 C 16.1 83.7 14.9 82.9 13.8 82.1 C 12.7 81.3 11.7 80.3 10.7 79.4 C 9.7 78.5 8.7 77.5 7.7 76.5 C 6.8 75.5 6.0 74.4 5.2 73.2 C 4.5 72.1 3.8 70.9 3.2 69.6 C 2.6 68.4 2.0 67.1 1.6 65.8 C 1.2 64.5 0.8 63.1 0.5 61.8 C 0.3 60.4 0.1 59.1 0.0 57.7 C -0.0 56.3 -0.0 54.9 0.1 53.5 C 0.2 52.2 0.4 50.8 0.7 49.5 C 1.0 48.1 1.4 46.8 1.8 45.5 C 2.3 44.2 2.9 42.9 3.5 41.7 C 4.1 40.5 4.9 39.3 5.7 38.2 C 6.4 37.0 7.3 35.9 8.3 34.9 C 9.2 33.9 10.2 33.0 11.3 32.1 C 12.3 31.2 13.5 30.4 14.6 29.7 C 15.8 29.0 17.0 28.3 18.3 27.7 C 19.5 27.2 20.8 26.7 22.2 26.3 C 23.5 25.9 24.8 25.6 26.2 25.4 C 27.6 25.2 28.9 25.0 30.3 25.0 C 31.7 25.0 33.4 25.7 34.5 25.2 C 35.5 24.7 35.8 23.2 36.5 22.0 C 37.2 20.9 37.7 19.6 38.5 18.4 C 39.2 17.2 39.9 16.1 40.8 15.0 C 41.6 13.9 42.5 12.8 43.5 11.8 C 44.4 10.8 45.4 9.9 46.5 9.0 C 47.5 8.1 48.6 7.2 49.8 6.5 C 50.9 5.7 52.1 5.0 53.3 4.4 C 54.6 3.7 55.8 3.1 57.1 2.6 C 58.4 2.1 59.7 1.7 61.0 1.3 C 62.4 1.0 63.7 0.7 65.1 0.5 C 66.4 0.3 67.8 0.1 69.2 0.0 C 70.6 -0.0 72.0 -0.0 73.3 0.1 C 74.7 0.2 76.1 0.3 77.4 0.6 C 78.8 0.8 80.2 1.1 81.5 1.5 C 82.8 1.9 84.1 2.3 85.4 2.8 C 86.7 3.4 87.9 3.9 89.1 4.6 C 90.3 5.3 91.5 6.0 92.7 6.8 C 93.8 7.6 94.8 9.0 95.9 9.3 C 97.0 9.6 98.0 9.1 99.2 8.6 C 100.3 8.2 101.5 7.1 102.7 6.5 C 103.9 5.9 105.2 5.3 106.5 4.8 C 107.8 4.4 109.1 4.0 110.5 3.7 C 111.8 3.4 113.2 3.2 114.6 3.1 C 115.9 3.0 117.3 3.0 118.7 3.0 C 120.1 3.1 121.5 3.3 122.8 3.5 C 124.2 3.8 125.5 4.2 126.8 4.6 C 128.1 5.0 129.4 5.6 130.6 6.2 C 131.9 6.8 133.1 7.5 134.2 8.2 C 135.4 9.0 136.5 9.8 137.5 10.7 C 138.5 11.7 139.5 12.6 140.4 13.7 C 141.3 14.7 142.2 15.8 142.9 17.0 C 143.7 18.1 144.4 19.4 144.9 20.6 C 145.5 21.8 145.6 23.8 146.5 24.4 C 147.3 25.1 148.7 24.5 150.0 24.4 C 151.3 24.4 152.8 24.1 154.1 24.0 C 155.5 24.0 156.9 24.0 158.3 24.2 C 159.6 24.4 161.0 24.6 162.3 25.0 C 163.7 25.3 165.0 25.8 166.2 26.4 C 167.5 26.9 168.7 27.6 169.9 28.3 C 171.1 29.0 172.2 29.8 173.2 30.7 C 174.3 31.6 175.3 32.6 176.2 33.7 C 177.1 34.7 177.9 35.8 178.6 37.0 C 179.4 38.1 180.0 39.4 180.6 40.6 C 181.1 41.9 181.1 43.8 182.0 44.5 C 182.8 45.3 184.4 44.9 185.7 45.2 C 187.0 45.5 188.5 45.8 189.7 46.2 C 191.0 46.7 192.3 47.4 193.4 48.1 C 194.6 48.9 195.7 49.8 196.6 50.7 C 197.6 51.7 198.4 52.8 199.2 54.0 Z";
const SKY_VENSTRE = [47.7,47.7,47.7,47.7,47.7,45.3,43.3,41.5,40.0,38.7,37.5,36.5,35.7,23.2,17.7,14.1,11.4,9.2,7.3,5.8,4.4,3.3,2.4,1.7,1.0,0.6,0.3,0.1,0.0,0.1,0.3,0.6,1.1,1.7,2.4,3.3,4.4,5.8,7.3,9.2,11.4,13.7,16.8,16.8];
const SKY_HOYRE = [133.9,133.9,133.9,133.9,133.9,136.6,138.8,140.7,142.2,143.6,144.7,145.6,146.3,165.4,169.4,172.3,174.6,176.4,178.0,179.2,180.3,181.2,181.8,189.1,193.2,195.8,197.7,199.2,200.2,201.0,201.6,201.9,202.0,201.9,201.6,201.0,200.2,199.2,197.7,195.8,193.2,189.1,183.2,183.2];

/* Hvor skykanten faktisk ligger i høyden vy, slik at pilene lander på
   omrisset og ikke på den usynlige boksen rundt. */
function skyKant(vy, venstre) {
  const t = venstre ? SKY_VENSTRE : SKY_HOYRE;
  const p = Math.max(0, Math.min(t.length - 1.001, vy / SKY_STEG));
  const i = Math.floor(p);
  return t[i] + (t[i + 1] - t[i]) * (p - i);
}

  const kjerneRef = useRef(null);
  const innRef    = useRef([]);
  const utRef     = useRef([]);

  const rolig = typeof window !== "undefined" &&
                window.matchMedia("(prefers-reduced-motion: reduce)").matches;

  useEffect(() => {
    const el = ref.current;
    if (!el || !window.IntersectionObserver) { setSynlig(true); return; }
    const obs = new IntersectionObserver(([p]) => {
      if (p.isIntersecting) { setSynlig(true); obs.disconnect(); }
    }, { threshold: 0.25 });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);

  /* Måler hvor boksene og kjernen faktisk står, og tegner kurvene mellom dem. */
  useEffect(() => {
    function beregn() {
      const kart = kartRef.current, kjerne = kjerneRef.current;
      if (!kart || !kjerne) return;
      if (window.matchMedia("(max-width: 720px)").matches) { setBaner(null); return; }

      const kb = kart.getBoundingClientRect();
      const cb = kjerne.getBoundingClientRect();
      if (!kb.width || !cb.width) return;
      const midtY = cb.top + cb.height / 2 - kb.top;

      const lag = (el, i, n, side) => {
        if (!el) return null;
        const b = el.getBoundingClientRect();
        const ny = b.top + b.height / 2 - kb.top;
        const ky = midtY + (i - (n - 1) / 2) * 13;
        const skala = cb.height / SKY_H;
        const vy = (kb.top + ky - cb.top) / skala;
        const skyV = cb.left - kb.left + skyKant(vy, true) * skala + 2;
        const skyH = cb.left - kb.left + skyKant(vy, false) * skala - 2;
        const sx = side === "inn" ? b.right - kb.left : skyH;
        const sy = side === "inn" ? ny : ky;
        const ex = side === "inn" ? skyV : b.left - kb.left;
        const ey = side === "inn" ? ky : ny;
        const k  = Math.max(26, (ex - sx) * 0.52);
        return { d: `M ${sx} ${sy} C ${sx + k} ${sy}, ${ex - k} ${ey}, ${ex} ${ey}` };
      };

      setBaner({
        w: kb.width, h: kb.height,
        inn: innRef.current.slice(0, FLYT_KILDER.length)
               .map((el, i) => lag(el, i, FLYT_KILDER.length, "inn")).filter(Boolean),
        ut:  utRef.current.slice(0, FLYT_MAL.length)
               .map((el, i) => lag(el, i, FLYT_MAL.length, "ut")).filter(Boolean),
      });
    }

    let rid = 0;
    const kjor = () => { cancelAnimationFrame(rid); rid = requestAnimationFrame(beregn); };
    kjor();
    window.addEventListener("resize", kjor);
    const ro = window.ResizeObserver ? new ResizeObserver(kjor) : null;
    if (ro && kartRef.current) ro.observe(kartRef.current);
    if (document.fonts && document.fonts.ready) document.fonts.ready.then(kjor).catch(() => {});
    return () => {
      cancelAnimationFrame(rid);
      window.removeEventListener("resize", kjor);
      if (ro) ro.disconnect();
    };
  }, [synlig]);

  const bane = (b, i, side) => (
    <path key={side + i} id={"sl-bane-" + side + "-" + i} d={b.d}
          markerStart="url(#sl-pil)" markerEnd="url(#sl-pil)"
          className={"sl-flyt__bane" + (aktiv === side + i ? " sl-flyt__bane--aktiv" : "")} />
  );

  /* Integrasjoner er sjelden enveis. Hver bane har derfor to prikker:
     en fylt som går mot skya, og en åpen som går tilbake ut igjen.
     keyPoints="1;0" spiller banen baklengs uten at vi må tegne den to ganger. */
  const FART = "7s";
  const prikk = (b, i, side, retur) => {
    const start = (retur ? 3.5 : 0) + (side === "inn" ? i * 0.85 : 0.42 + i * 0.85) + "s";
    return (
      <circle key={"p" + side + i + (retur ? "r" : "")} r={retur ? "2.6" : "3.2"}
              className={"sl-flyt__prikk" + (retur ? " sl-flyt__prikk--retur" : "")} opacity="0">
        <animateMotion dur={FART} repeatCount="indefinite" begin={start}
                       calcMode="linear" keyTimes="0;1"
                       keyPoints={retur ? "1;0" : "0;1"}>
          <mpath href={"#sl-bane-" + side + "-" + i} />
        </animateMotion>
        <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.14;0.82;1"
                 dur={FART} repeatCount="indefinite" begin={start} />
      </circle>
    );
  };

  return (
    <section className="sl-section sl-flyt" id="systemflyt">
      <div className="shell">
        <div className="sl-slash" style={{marginBottom:24}}>/ 04 — integrasjoner og systemflyt</div>
        <div className="sl-section__head">
          <h2 className="sl-section__title">Systemene dere allerede har. Endelig i samme flyt.</h2>
          <p className="sl-section__intro">
            De fleste trenger ikke et nytt system. De trenger at de gamle snakker sammen,
            slik at ingen legger inn samme kunde tre steder.
          </p>
        </div>

        {/* --- Flytdiagram --- */}
        <div className={"sl-flyt__kart" + (synlig ? " sl-flyt__kart--inn" : "")} ref={el => { ref.current = el; kartRef.current = el; }}>

          {baner && (
            <svg className="sl-flyt__lenker" key={baner.w + "x" + baner.h}
                 width={baner.w} height={baner.h}
                 viewBox={"0 0 " + baner.w + " " + baner.h} aria-hidden="true">
              <defs>
                <marker id="sl-pil" viewBox="0 0 8 8" refX="7" refY="4"
                        markerWidth="7" markerHeight="7" orient="auto-start-reverse">
                  <path d="M 0 1 L 7 4 L 0 7 z" className="sl-flyt__pil" />
                </marker>
              </defs>
              {baner.inn.map((b, i) => bane(b, i, "inn"))}
              {baner.ut.map((b, i) => bane(b, i, "ut"))}
              {!rolig && baner.inn.map((b, i) => prikk(b, i, "inn", false))}
              {!rolig && baner.ut.map((b, i) => prikk(b, i, "ut", false))}
              {!rolig && baner.inn.map((b, i) => prikk(b, i, "inn", true))}
              {!rolig && baner.ut.map((b, i) => prikk(b, i, "ut", true))}
            </svg>
          )}

          <div className="sl-flyt__kol">
            <div className="sl-flyt__koltopp">
              <span className="sl-flyt__merke">Inn</span>
              <span className="sl-flyt__kolhjelp">Der data oppstår</span>
            </div>
            {FLYT_KILDER.map((k, i) => (
              <div key={k} style={{ "--i": i }}
                   ref={el => (innRef.current[i] = el)}
                   onMouseEnter={() => setAktiv("inn" + i)}
                   onMouseLeave={() => setAktiv(null)}
                   className={"sl-flyt__node" + (aktiv === "inn" + i ? " sl-flyt__node--aktiv" : "")}>{k}</div>
            ))}
          </div>

          <div className="sl-flyt__midt">
            <div className="sl-flyt__nav" ref={kjerneRef}>
              <svg className="sl-flyt__sky" viewBox={"0 0 " + SKY_B + " " + SKY_H} aria-hidden="true">
                <g className="sl-flyt__skydrift">
                  <path d={SKY_BANE} vectorEffect="non-scaling-stroke" />
                </g>
              </svg>
              <span className="sl-flyt__navinnhold">
                <span className="sl-flyt__navprikk" aria-hidden="true"></span>
                <span className="sl-flyt__navtekst">Datastyring</span>
              </span>
            </div>
          </div>

          <div className="sl-flyt__kol">
            <div className="sl-flyt__koltopp">
              <span className="sl-flyt__merke">Ut</span>
              <span className="sl-flyt__kolhjelp">Dit dataene skal</span>
            </div>
            {FLYT_MAL.map((k, i) => (
              <div key={k} style={{ "--i": i }}
                   ref={el => (utRef.current[i] = el)}
                   onMouseEnter={() => setAktiv("ut" + i)}
                   onMouseLeave={() => setAktiv(null)}
                   className={"sl-flyt__node" + (aktiv === "ut" + i ? " sl-flyt__node--aktiv" : "")}>{k}</div>
            ))}
          </div>
        </div>

        <div className="sl-flyt__limet">
          <strong>Vi bygger limet</strong>
          <ul>
            <li>Oversetter formater mellom systemer</li>
            <li>Håndterer feil og prøver på nytt</li>
            <li>Logger alt som skjer, så det kan etterprøves</li>
            <li>Varsler dere når noe faktisk stopper</li>
          </ul>
        </div>

        <Automasjon />

        {/* --- Systemer vi kobler mot --- */}
        <div className="sl-flyt__grupper">
          {SYSTEMGRUPPER.map(g => (
            <div className="sl-flyt__gruppe" key={g.navn}>
              <div className="sl-flyt__gtopp">
                <span className="sl-flyt__gikon"
                      dangerouslySetInnerHTML={{ __html:
                        `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
                              stroke-linecap="round" stroke-linejoin="round">${SYS_IKON[g.ikon]}</svg>` }} />
                <h3>{g.navn}</h3>
              </div>
              <div className="sl-flyt__chips">
                {g.sys.map(s => <span className="sl-flyt__chip" key={s}>{s}</span>)}
              </div>
            </div>
          ))}
        </div>

        <p className="sl-flyt__fot">
          Står ikke systemet deres på listen? Har det et API, kobler vi det —
          og har det ikke, finnes det som regel en vei rundt.
        </p>
      </div>
    </section>
  );
}