/* =============================================================
   Teknisk design — levende demo. Kunden klikker seg gjennom
   ulike målgrupper og ser grensesnittet endre seg i sanntid.
   Vi påstår ikke at vi kan design. Vi viser det.
   ============================================================= */

/* Hver tjeneste har sitt eget grensesnitt — ikke samme dashbord i ny farge. */

const V = (navn, t) => ({ navn, t });

const DESIGNPROFILER = [
  { id:"nettside", navn:"Nettside", kort:"Bli funnet og forstått", visning:"nettside",
    varianter:[
      V("Redaksjonell", { bak:"#F6F4EF", kort:"#FFFFFF", kant:"#E3DFD6", tekst:"#111010", svak:"#57534B",
        aksent:"#2E3B42", aksentTekst:"#FFFFFF", pille:"#E8EDEA", pilleTekst:"#2E4A3E", radius:"14px",
        skygge:"0 1px 2px rgba(17,16,16,.04), 0 10px 28px rgba(17,16,16,.06)",
        font:"var(--font-sans)", vekt:"600", sperr:"-0.015em", skala:"1.06", luft:"1.15" }),
      V("Håndverk", { bak:"#FFFDF8", kort:"#F7F2E8", kant:"#DCD2BE", tekst:"#1B1710", svak:"#5F5647",
        aksent:"#A8571F", aksentTekst:"#FFFFFF", pille:"#F0E3CE", pilleTekst:"#8A4415", radius:"3px",
        skygge:"none", font:"var(--font-sans)", vekt:"700", sperr:"0.01em", skala:"1.04", luft:"1.08" }),
      V("Mørk og rolig", { bak:"#14171A", kort:"#1D2226", kant:"#2F373D", tekst:"#EEF1F3", svak:"#9BA7AF",
        aksent:"#E8E4DA", aksentTekst:"#15181B", pille:"#272E34", pilleTekst:"#C9D2D8", radius:"12px",
        skygge:"none", font:"var(--font-sans)", vekt:"600", sperr:"-0.02em", skala:"1.06", luft:"1.18" }),
    ] },

  { id:"webapp", navn:"Webapplikasjon", kort:"Verktøyet folk jobber i", visning:"webapp",
    varianter:[
      V("Lys og luftig", { bak:"#FBFCFD", kort:"#FFFFFF", kant:"#D9E0E7", tekst:"#0D1519", svak:"#4B5A64",
        aksent:"#1F6FA8", aksentTekst:"#FFFFFF", pille:"#E4EEF6", pilleTekst:"#155A8A", radius:"8px",
        skygge:"0 1px 2px rgba(13,21,25,.06)", font:"var(--font-sans)", vekt:"600", sperr:"0", skala:"1", luft:"1" }),
      V("Kompakt", { bak:"#F2F3F5", kort:"#FFFFFF", kant:"#C9CFD6", tekst:"#0B0F13", svak:"#4A525A",
        aksent:"#20303F", aksentTekst:"#FFFFFF", pille:"#E1E5EA", pilleTekst:"#28323C", radius:"3px",
        skygge:"none", font:"var(--font-sans)", vekt:"600", sperr:"0", skala:"0.94", luft:"0.8" }),
      V("Mørk arbeidsflate", { bak:"#0F1418", kort:"#181F25", kant:"#2A343C", tekst:"#E6EDF2", svak:"#8FA0AC",
        aksent:"#3E9BD8", aksentTekst:"#0A1015", pille:"#1F2A33", pilleTekst:"#7EC2ED", radius:"8px",
        skygge:"none", font:"var(--font-sans)", vekt:"600", sperr:"0", skala:"1", luft:"1" }),
    ] },

  { id:"nettbutikk", navn:"Nettbutikk", kort:"Færre som faller av i kassa", visning:"nettbutikk",
    varianter:[
      V("Direkte", { bak:"#FFFFFF", kort:"#FAFAF9", kant:"#E7E5E2", tekst:"#141210", svak:"#5C5651",
        aksent:"#C4442B", aksentTekst:"#FFFFFF", pille:"#FBE9E4", pilleTekst:"#9A2E19", radius:"8px",
        skygge:"0 1px 3px rgba(0,0,0,.06)", font:"var(--font-sans)", vekt:"600", sperr:"-0.01em", skala:"1", luft:"0.96" }),
      V("Nordisk ro", { bak:"#F7F6F3", kort:"#FFFFFF", kant:"#E2E0DA", tekst:"#15171A", svak:"#5A5F66",
        aksent:"#2C4B3F", aksentTekst:"#FFFFFF", pille:"#E5EDE8", pilleTekst:"#1F3A30", radius:"18px",
        skygge:"0 1px 2px rgba(0,0,0,.04), 0 8px 22px rgba(0,0,0,.05)",
        font:"var(--font-sans)", vekt:"500", sperr:"-0.01em", skala:"1.04", luft:"1.14" }),
      V("Premium mørk", { bak:"#131211", kort:"#1C1A18", kant:"#2E2B27", tekst:"#F2EFEA", svak:"#A69E93",
        aksent:"#C9A227", aksentTekst:"#17150F", pille:"#2A2620", pilleTekst:"#DFC15F", radius:"2px",
        skygge:"none", font:"var(--font-sans)", vekt:"500", sperr:"0.04em", skala:"1", luft:"1.06" }),
    ] },

  { id:"modul", navn:"Modulsystem", kort:"Bygg ut når behovet kommer", visning:"modul",
    varianter:[
      V("Systematisk", { bak:"#F4F6F7", kort:"#FFFFFF", kant:"#D5DDE1", tekst:"#101619", svak:"#4C5A61",
        aksent:"#186E6A", aksentTekst:"#FFFFFF", pille:"#E0EFEE", pilleTekst:"#0F5450", radius:"6px",
        skygge:"0 1px 2px rgba(16,22,25,.05)", font:"var(--font-sans)", vekt:"600", sperr:"0", skala:"0.98", luft:"0.94" }),
      V("Mykt kort", { bak:"#F8F7FB", kort:"#FFFFFF", kant:"#E2E0EC", tekst:"#14131A", svak:"#575468",
        aksent:"#4B3FA8", aksentTekst:"#FFFFFF", pille:"#E9E6F6", pilleTekst:"#392F87", radius:"16px",
        skygge:"0 2px 4px rgba(20,19,26,.04), 0 10px 26px rgba(20,19,26,.06)",
        font:"var(--font-sans)", vekt:"600", sperr:"-0.01em", skala:"1.02", luft:"1.12" }),
      V("Teknisk", { bak:"#121517", kort:"#1B1F22", kant:"#2B3236", tekst:"#E9EDEF", svak:"#94A0A6",
        aksent:"#3FA98F", aksentTekst:"#0C1210", pille:"#212A2C", pilleTekst:"#77D2BC", radius:"2px",
        skygge:"none", font:"var(--font-mono)", vekt:"500", sperr:"0.02em", skala:"0.92", luft:"0.84" }),
    ] },

  { id:"agent", navn:"KI-agent", kort:"En hjelper som svarer selv", visning:"agent",
    varianter:[
      V("Kveldsmodus", { bak:"#14131C", kort:"#1E1D29", kant:"#302E42", tekst:"#EFEDF6", svak:"#A29EB8",
        aksent:"#8C7CF0", aksentTekst:"#0F0E16", pille:"#2A2740", pilleTekst:"#B5AAFB", radius:"16px",
        skygge:"none", font:"var(--font-sans)", vekt:"600", sperr:"-0.01em", skala:"1.02", luft:"1.08" }),
      V("Dagslys", { bak:"#FAFAFC", kort:"#FFFFFF", kant:"#E4E4EC", tekst:"#121218", svak:"#55555F",
        aksent:"#2F5FD8", aksentTekst:"#FFFFFF", pille:"#E6EDFB", pilleTekst:"#1E43A0", radius:"18px",
        skygge:"0 1px 2px rgba(18,18,24,.05)", font:"var(--font-sans)", vekt:"600", sperr:"-0.01em", skala:"1.04", luft:"1.1" }),
      V("Terminal", { bak:"#0C1210", kort:"#131B17", kant:"#22302A", tekst:"#DFEDE5", svak:"#87A093",
        aksent:"#4FCB8B", aksentTekst:"#08110C", pille:"#1A251F", pilleTekst:"#7FE0AE", radius:"2px",
        skygge:"none", font:"var(--font-mono)", vekt:"500", sperr:"0.02em", skala:"0.94", luft:"0.9" }),
    ] },

  { id:"ki-impl", navn:"KI-implementering", kort:"Fra kartlegging til drift", visning:"kiimpl",
    varianter:[
      V("Rapport", { bak:"#F7F6F2", kort:"#FFFFFF", kant:"#E0DDD3", tekst:"#131210", svak:"#575246",
        aksent:"#3F5D2E", aksentTekst:"#FFFFFF", pille:"#E7EEDF", pilleTekst:"#2F4A21", radius:"10px",
        skygge:"0 1px 2px rgba(19,18,16,.05)", font:"var(--font-sans)", vekt:"600", sperr:"0", skala:"1.02", luft:"1.06" }),
      V("Styrerom", { bak:"#FFFFFF", kort:"#F4F6F9", kant:"#C7D0DA", tekst:"#0A0F16", svak:"#3E4A58",
        aksent:"#123A6B", aksentTekst:"#FFFFFF", pille:"#E2E9F2", pilleTekst:"#123A6B", radius:"2px",
        skygge:"none", font:"var(--font-sans)", vekt:"700", sperr:"0", skala:"1.04", luft:"1" }),
      V("Datamørk", { bak:"#101418", kort:"#181E24", kant:"#28323A", tekst:"#E7EDF2", svak:"#8FA0AC",
        aksent:"#7BC96F", aksentTekst:"#0B1009", pille:"#1F272E", pilleTekst:"#A5E39B", radius:"8px",
        skygge:"none", font:"var(--font-mono)", vekt:"500", sperr:"0.02em", skala:"0.94", luft:"0.92" }),
    ] },

  { id:"automasjon", navn:"Automasjoner", kort:"Rutinene går av seg selv", visning:"automasjon",
    varianter:[
      V("Driftspanel", { bak:"#151310", kort:"#201D18", kant:"#332E26", tekst:"#F0EBE3", svak:"#A79C8C",
        aksent:"#D99A2B", aksentTekst:"#171310", pille:"#2E2921", pilleTekst:"#E8B863", radius:"4px",
        skygge:"none", font:"var(--font-mono)", vekt:"500", sperr:"0.02em", skala:"0.94", luft:"0.86" }),
      V("Lys oversikt", { bak:"#FBFAF7", kort:"#FFFFFF", kant:"#E2DED6", tekst:"#15130F", svak:"#575146",
        aksent:"#B5651D", aksentTekst:"#FFFFFF", pille:"#F5E7D6", pilleTekst:"#8C4A11", radius:"10px",
        skygge:"0 1px 2px rgba(21,19,15,.05)", font:"var(--font-sans)", vekt:"600", sperr:"0", skala:"1.02", luft:"1.06" }),
      V("Varsel", { bak:"#160F0F", kort:"#211717", kant:"#382626", tekst:"#F3E9E9", svak:"#AE9494",
        aksent:"#E4573D", aksentTekst:"#170D0C", pille:"#2E1F1F", pilleTekst:"#F0876F", radius:"2px",
        skygge:"none", font:"var(--font-mono)", vekt:"600", sperr:"0.03em", skala:"0.94", luft:"0.84" }),
    ] },

  { id:"integrasjon", navn:"Integrasjoner", kort:"Systemene snakker sammen", visning:"integrasjon",
    varianter:[
      V("Nattdrift", { bak:"#11161A", kort:"#1A2128", kant:"#2C363F", tekst:"#E8EDF1", svak:"#93A1AC",
        aksent:"#4FB0C4", aksentTekst:"#0B1114", pille:"#243039", pilleTekst:"#7FD3E3", radius:"4px",
        skygge:"none", font:"var(--font-mono)", vekt:"500", sperr:"0.02em", skala:"0.92", luft:"0.82" }),
      V("Kontorlys", { bak:"#F7F9FA", kort:"#FFFFFF", kant:"#D4DCE1", tekst:"#0E1417", svak:"#4A565D",
        aksent:"#0E6C7E", aksentTekst:"#FFFFFF", pille:"#DFEEF1", pilleTekst:"#0A5462", radius:"8px",
        skygge:"0 1px 2px rgba(14,20,23,.05)", font:"var(--font-sans)", vekt:"600", sperr:"0", skala:"1", luft:"1" }),
      V("Blåkopi", { bak:"#0D1220", kort:"#141C31", kant:"#243050", tekst:"#E3E9F7", svak:"#8D9BBD",
        aksent:"#6E8BFF", aksentTekst:"#080C17", pille:"#1C2542", pilleTekst:"#9FB3FF", radius:"2px",
        skygge:"none", font:"var(--font-mono)", vekt:"500", sperr:"0.03em", skala:"0.92", luft:"0.86" }),
    ] },
];

/* ---------- Åtte ulike grensesnitt ---------- */

function MockNettside() {
  return (
    <div className="m-nettside">
      <div className="m-ns__hero">
        <span className="m-merke">Byggmester Ohna AS</span>
        <h3>Tak som holder i vestlandsvær</h3>
        <p>Taklegging og rehabilitering i Rogaland siden 1998. Fast pris, ferdig til avtalt tid.</p>
        <div className="m-ns__cta">
          <button className="m-knapp">Be om befaring</button>
          <span className="m-ns__tlf">eller ring 51 XX XX XX</span>
        </div>
      </div>
      <div className="m-ns__bevis">
        <span>4,9 ★ på Google</span><span>Sentral godkjenning</span><span>Svar innen 24 t</span>
      </div>
      <div className="m-ns__sok">
        <span className="m-etikett">Synlighet</span>
        <div className="m-ns__rad"><span>«taklegger stavanger»</span><span className="m-pille">1. plass</span></div>
        <div className="m-ns__rad"><span>«bytte tak pris»</span><span className="m-pille">3. plass</span></div>
      </div>
    </div>
  );
}

function MockWebapp() {
  return (
    <div className="m-webapp">
      <div className="m-wa__liste">
        <span className="m-etikett">Til godkjenning</span>
        <div className="m-wa__rad m-wa__rad--valgt"><b>231</b><span>Timeliste uke 30</span></div>
        <div className="m-wa__rad"><b>230</b><span>Reiseregning</span></div>
        <div className="m-wa__rad"><b>229</b><span>Innkjøp verktøy</span></div>
      </div>
      <div className="m-wa__detalj">
        <span className="m-etikett">Sak 231</span>
        <h3>Timeliste uke 30 — Jonas B.</h3>
        <div className="m-wa__felt"><span>Timer</span><b>37,5</b></div>
        <div className="m-wa__felt"><span>Overtid</span><b>4,0</b></div>
        <div className="m-wa__felt"><span>Prosjekt</span><b>Tak — Hillevåg</b></div>
        <div className="m-wa__knapper">
          <button className="m-knapp">Godkjenn</button>
          <button className="m-knapp m-knapp--sek">Send tilbake</button>
        </div>
      </div>
    </div>
  );
}

function MockNettbutikk() {
  return (
    <div className="m-butikk">
      <span className="m-etikett">Kassen</span>
      <div className="m-bu__linje">
        <img className="m-bu__bilde" src="/assets/genser.webp" alt="" width="160" height="160" loading="lazy"/>
        <div><b>Ullgenser, mørk grå</b><span>Str. L · 1 stk</span></div>
        <b className="m-bu__pris">1 290,–</b>
      </div>
      <div className="m-bu__frakt">
        <div className="m-bu__valg m-bu__valg--valgt"><b>Posten pakke i postkassen</b><span>2–4 dager</span><b>0,–</b></div>
        <div className="m-bu__valg"><b>Hentested Bring</b><span>1–3 dager</span><b>59,–</b></div>
      </div>
      <div className="m-bu__sum">
        <div><span>Sum eks. mva</span><span>1 032,–</span></div>
        <div><span>Mva 25 %</span><span>258,–</span></div>
        <div className="m-bu__total"><b>Å betale</b><b>1 290,–</b></div>
      </div>
      <div className="m-bu__betal">
        <button className="m-knapp m-knapp--vipps">Betal med Vipps</button>
        <button className="m-knapp m-knapp--sek">Kort</button>
      </div>
      <span className="m-bu__fri">Fri frakt over 999,– er allerede trukket fra</span>
    </div>
  );
}

function MockModul() {
  const moduler = [
    ["Timebestilling","På","Kobler mot SMS-varsling"],
    ["Fakturering","På","Sender til Fiken"],
    ["BankID-innlogging","På","Pålogging for kunder"],
    ["Lagerstyring","Av","Kan skrus på senere"],
    ["Rapporter","Av","Krever fakturering"],
  ];
  return (
    <div className="m-modul">
      <span className="m-etikett">Moduler i drift</span>
      <div className="m-mo__grid">
        {moduler.map(([n, p, b]) => (
          <div key={n} className={"m-mo__kort" + (p === "På" ? " m-mo__kort--pa" : "")}>
            <div className="m-mo__topp"><b>{n}</b><span className={"m-bryter m-knapp-flate" + (p === "På" ? " m-bryter--pa" : "")}></span></div>
            <span>{b}</span>
          </div>
        ))}
      </div>
      <div className="m-mo__note">Rapporter krever at Fakturering står på. Resten er uavhengige.</div>
      <button className="m-knapp m-knapp--sek">Legg til modul</button>
    </div>
  );
}

function MockAgent() {
  return (
    <div className="m-agent">
      <div className="m-ag__boble m-ag__boble--kunde">Hei! Når kommer bestillingen min? Ordre 4192.</div>
      <div className="m-ag__verktoy">
        <span className="m-ag__snurr" aria-hidden="true"></span>
        slår opp ordre 4192 i nettbutikken · henter sporing fra Posten
      </div>
      <div className="m-ag__boble m-ag__boble--agent">
        Ordre 4192 ble sendt i går kl. 15:40 og er nå på Forus terminal.
        Forventet levering i postkassen din i morgen.
        <span className="m-ag__lenke">Sporing: 370 7318 …</span>
      </div>
      <div className="m-ag__boble m-ag__boble--kunde">Kan jeg endre leveringsadresse?</div>
      <div className="m-ag__boble m-ag__boble--agent m-ag__boble--grense">
        Det får jeg ikke gjort når pakken er sendt. Jeg setter deg over til Marius på kundeservice —
        han svarer innen 10 minutter.
      </div>
      <div className="m-ag__skriv m-knapp-flate">
        <span>Skriv en melding…</span>
        <span className="m-ag__send" aria-hidden="true">↑</span>
      </div>
      <div className="m-ag__fot">Agenten sier fra når den ikke kan løse det selv.</div>
    </div>
  );
}

function MockKiImpl() {
  /* Timer spart per uke, åtte uker. Kurven tegnes opp ved bytte. */
  const uker = [4, 7, 11, 14, 19, 23, 28, 31];
  const maks = 34, B = 300, H = 78, venstre = 8, hoyre = 292;
  const punkt = (v, i) => [
    venstre + (hoyre - venstre) * (i / (uker.length - 1)),
    H - 8 - (v / maks) * (H - 22),
  ];
  const pkt = uker.map(punkt);
  const linje = pkt.map(([x, y], i) => (i ? "L" : "M") + x.toFixed(1) + " " + y.toFixed(1)).join(" ");
  const flate = linje + ` L${hoyre} ${H - 6} L${venstre} ${H - 6} Z`;

  const prosesser = [
    { n:"Tilbudsdokumenter",    spart:62, st:"I pilot" },
    { n:"Fakturakontroll",      spart:45, st:"I drift" },
    { n:"Innkjøpsforespørsler", spart:4,  st:"Lagt ned", av:true },
  ];

  return (
    <div className="m-kiimpl">
      <div className="m-ki__topp">
        <span className="m-etikett">Timer spart per uke</span>
        <span className="m-ki__naa">31 t</span>
      </div>

      <div className="m-ki__graf">
        <svg viewBox={`0 0 ${B} ${H}`} preserveAspectRatio="none" aria-hidden="true">
          <defs>
            <linearGradient id="ki-fyll" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="var(--d-aksent)" stopOpacity=".26"/>
              <stop offset="100%" stopColor="var(--d-aksent)" stopOpacity="0"/>
            </linearGradient>
          </defs>
          {[0.25, 0.5, 0.75].map(f => (
            <line key={f} x1="0" x2={B} y1={(H - 6) * (1 - f)} y2={(H - 6) * (1 - f)}
                  stroke="var(--d-kant)" strokeWidth="1" strokeDasharray="2 4"/>
          ))}
          <path className="m-ki__flate" d={flate} fill="url(#ki-fyll)"/>
          <path className="m-ki__linje" d={linje} fill="none" stroke="var(--d-aksent)"
                strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
          {pkt.map(([x, y], i) => (
            <circle key={i} className="m-ki__prikk" cx={x} cy={y} r="2.6"
                    fill="var(--d-bak)" stroke="var(--d-aksent)" strokeWidth="1.6"
                    style={{ animationDelay: (0.62 + i * 0.07) + "s" }}/>
          ))}
        </svg>
        <div className="m-ki__akse"><span>uke 23</span><span>uke 30</span></div>
      </div>

      <div className="m-ki__liste">
        {prosesser.map((p, i) => (
          <div key={p.n} className={"m-ki__rad" + (p.av ? " m-ki__rad--av" : "")}>
            <div className="m-ki__navn">
              <b>{p.n}</b>
              <span className="m-ki__spart">−{p.spart} %</span>
              <span className="m-pille">{p.st}</span>
            </div>
            <div className="m-ki__spor">
              <div className="m-ki__fyll" style={{ "--m": p.spart + "%", animationDelay: (0.2 + i * 0.12) + "s" }}></div>
            </div>
          </div>
        ))}
      </div>

      <div className="m-ki__fot">Én av tre ble lagt ned. Den ga ingen målbar gevinst.</div>
      <button className="m-knapp m-knapp--sek">Se full gevinstrapport →</button>
    </div>
  );
}

function MockAutomasjon() {
  const steg = [
    ["01","Faktura mottas på e-post","ok"],
    ["02","Leser beløp, KID og org.nr","ok"],
    ["03","Kontrollerer mot innkjøpsordre","feil"],
    ["04","Bokfører i Fiken","venter"],
  ];
  return (
    <div className="m-auto">
      <div className="m-au__topp"><span className="m-etikett">Fakturaflyt</span><span className="m-pille">Stoppet 09:14</span></div>
      {steg.map(([n, t, st]) => (
        <div key={n} className={"m-au__steg m-au__steg--" + st}>
          <span className="m-au__nr">{n}</span>
          <span className="m-au__tekst">{t}</span>
          <span className="m-au__st">{st === "ok" ? "✓" : st === "feil" ? "!" : "·"}</span>
        </div>
      ))}
      <div className="m-au__feil">Uventet format i felt «ordrenr» fra leverandør. 3 fakturaer venter.</div>
      <button className="m-knapp">Kjør de 3 på nytt</button>
    </div>
  );
}

function MockIntegrasjon() {
  const koblinger = [
    ["HubSpot","Fiken","hvert 5. min","Aktiv"],
    ["Nettbutikk","Lager","sanntid","Aktiv"],
    ["Timeliste","Lønn","daglig 06:00","Pauset"],
  ];
  return (
    <div className="m-integr">
      <span className="m-etikett">Aktive koblinger</span>
      {koblinger.map(([a, b, f, st]) => (
        <div key={a} className="m-in__rad">
          <span className="m-in__sys">{a}</span>
          <span className="m-in__pil" aria-hidden="true">──▶</span>
          <span className="m-in__sys">{b}</span>
          <span className="m-in__frek">{f}</span>
          <span className="m-pille">{st}</span>
        </div>
      ))}
      <div className="m-in__logg">
        <div><span>09:15:04</span> HubSpot → Fiken · 12 kunder oppdatert</div>
        <div><span>09:10:04</span> HubSpot → Fiken · 3 kunder oppdatert</div>
        <div><span>09:05:04</span> HubSpot → Fiken · ingen endringer</div>
      </div>
      <div className="m-in__sum">24 108 meldinger i dag · 0,1 % feilrate · siste avvik for 6 dager siden</div>
      <button className="m-knapp">Sett opp ny kobling</button>
    </div>
  );
}

const MOCKS = {
  nettside: MockNettside, webapp: MockWebapp, nettbutikk: MockNettbutikk, modul: MockModul,
  agent: MockAgent, kiimpl: MockKiImpl, automasjon: MockAutomasjon, integrasjon: MockIntegrasjon,
};

/* Mobil bruker trekkspill i stedet for demo-over-meny: forhandsvisningen
   apnes rett under tjenesten du trykker pa, sa du slipper a scrolle opp. */
function useMobil(brekk) {
  const sporring = "(max-width: " + (brekk || 640) + "px)";
  const [mobil, setMobil] = useState(
    () => typeof window !== "undefined" && window.matchMedia(sporring).matches
  );
  useEffect(() => {
    const mq = window.matchMedia(sporring);
    const ved = (e) => setMobil(e.matches);
    setMobil(mq.matches);
    if (mq.addEventListener) mq.addEventListener("change", ved);
    else mq.addListener(ved);
    return () => {
      if (mq.removeEventListener) mq.removeEventListener("change", ved);
      else mq.removeListener(ved);
    };
  }, [sporring]);
  return mobil;
}

function TekniskDesign() {
  /* Modulsystem er den beste førsteinnvendingen: den viser at systemet kan
     bygges ut bit for bit, og at man ikke må kjøpe alt på én gang. */
  const [valgt, setValgt] = useState(DESIGNPROFILER.find(p => p.id === "modul") || DESIGNPROFILER[0]);
  const [vari, setVari]   = useState(0);
  const [lukket, setLukket] = useState(false);   /* kun mobil: trekkspillet kan lukkes helt */
  const menyRef = useRef(null);
  const mobil = useMobil(640);

  const velgTjeneste = (p) => {
    if (p.id === valgt.id) { setLukket(l => !l); return; }  /* trykk pa apen rad = lukk */
    setValgt(p); setVari(0); setLukket(false);
  };
  const bla = (retning) => {
    const n = valgt.varianter.length;
    setVari(v => (v + retning + n) % n);
  };

  const tastNav = (e, i) => {
    if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
    e.preventDefault();
    const n = (i + (e.key === "ArrowDown" ? 1 : -1) + DESIGNPROFILER.length) % DESIGNPROFILER.length;
    velgTjeneste(DESIGNPROFILER[n]);
    const knapper = menyRef.current.querySelectorAll(".sl-td__valg");
    if (knapper[n]) knapper[n].focus();
  };

  const variant = valgt.varianter[vari] || valgt.varianter[0];
  const t = variant.t;
  const stil = {
    "--d-bak": t.bak, "--d-kort": t.kort, "--d-kant": t.kant, "--d-tekst": t.tekst,
    "--d-svak": t.svak, "--d-aksent": t.aksent, "--d-aksent-tekst": t.aksentTekst,
    "--d-pille": t.pille, "--d-pille-tekst": t.pilleTekst, "--d-radius": t.radius,
    "--d-skygge": t.skygge, "--d-font": t.font, "--d-vekt": t.vekt,
    "--d-sperr": t.sperr, "--d-skala": t.skala, "--d-luft": t.luft,
  };

  /* Selve demovinduet. Defineres en gang og plasseres ulikt pa mobil og desktop. */
  const demoflate = (
    <div className="sl-td__demo" style={stil}>
      <div className="sl-td__vindu">
        <div className="sl-td__topp">
          <span className="sl-td__prikker" aria-hidden="true"><i></i><i></i><i></i></span>
          <span className="sl-td__vtittel">{valgt.navn}</span>
          <div className="sl-td__bla">
            <span className="sl-td__vnavnvar">{variant.navn}</span>
            <button className="sl-td__pil" onClick={() => bla(-1)}
                    aria-label="Forrige designforslag">&#8249;</button>
            <span className="sl-td__teller">
              {String(vari + 1).padStart(2,"0")} / {String(valgt.varianter.length).padStart(2,"0")}
            </span>
            <button className="sl-td__pil" onClick={() => bla(1)}
                    aria-label="Neste designforslag">&#8250;</button>
          </div>
        </div>

        <div className="sl-td__flate"
             onClick={e => {
               const k = e.target.closest(".m-knapp, .m-knapp-flate");
               if (k) { e.preventDefault(); apneDemoSkjema(valgt.navn); }
             }}>
          {React.createElement(MOCKS[valgt.visning], { key: valgt.id + "-" + vari })}
        </div>
      </div>
    </div>
  );

  /* Innholdet i en menyknapp - likt i begge oppsett. */
  const valgInnhold = (p, i) => (
    <React.Fragment>
      <span className="sl-td__vnr">/ {String(i + 1).padStart(2, "0")}</span>
      <span className="sl-td__vnavn">{p.navn}</span>
      <span className="sl-td__vmal">{p.kort}</span>
      <span className="sl-td__vfarger" aria-hidden="true">
        {p.varianter.map((v, k) => (
          <i key={k} style={{ background: v.t.bak, borderColor: v.t.aksent }}></i>
        ))}
      </span>
    </React.Fragment>
  );

  return (
    <section className="sl-section sl-td" id="design">
      <div className="shell">
        <div className="sl-slash" style={{marginBottom:24}}>/ 03 — teknisk design</div>
        <div className="sl-section__head">
          <h2 className="sl-section__title">Samme håndverk. Ulikt uttrykk.</h2>
          <p className="sl-section__intro">
            En nettbutikk skal ikke se ut som et driftspanel. Velg en tjeneste og se hva som
            endrer seg — farger, tetthet, typografi og form.
          </p>
        </div>

        {mobil ? (
          /* --- Mobil: trekkspill. Forhandsvisningen apnes rett under valget. --- */
          <div className="sl-td__meny sl-td__meny--trekkspill" ref={menyRef}
               role="tablist" aria-label="Velg tjeneste">
            {DESIGNPROFILER.map((p, i) => {
              const apen = valgt.id === p.id && !lukket;
              return (
                <div className="sl-td__rad" key={p.id}>
                  <button role="tab" aria-selected={valgt.id === p.id} aria-expanded={apen}
                          aria-controls={"sl-td-panel-" + p.id}
                          className={"sl-td__valg"
                                     + (valgt.id === p.id ? " sl-td__valg--aktiv" : "")
                                     + (apen ? " sl-td__valg--apen" : "")}
                          onClick={() => velgTjeneste(p)} onKeyDown={e => tastNav(e, i)}>
                    {valgInnhold(p, i)}
                    <span className="sl-td__krok" aria-hidden="true">&#8250;</span>
                  </button>
                  {apen && (
                    <div className="sl-td__panel" id={"sl-td-panel-" + p.id} role="tabpanel">
                      {demoflate}
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        ) : (
          <div className="sl-td__grid">
            {demoflate}
            <div className="sl-td__meny" ref={menyRef} role="tablist"
                 aria-orientation="vertical" aria-label="Velg tjeneste">
              {DESIGNPROFILER.map((p, i) => (
                <button key={p.id} role="tab" aria-selected={valgt.id === p.id}
                        className={"sl-td__valg" + (valgt.id === p.id ? " sl-td__valg--aktiv" : "")}
                        onClick={() => velgTjeneste(p)} onKeyDown={e => tastNav(e, i)}>
                  {valgInnhold(p, i)}
                </button>
              ))}
            </div>
          </div>
        )}
      </div>
    </section>
  );
}