/* =============================================================
   Verktøykassa — norsk utgave av toolkit fra solidlab.ai
   ============================================================= */
const GRUPPER = [
  { n:"01", t:"Frontend og rammeverk",
    intro:"Moderne grensesnitt som skalerer fra landingsside til fullt produkt. Typesikkerhet, komponentdrevet, ingen rammeverk-for-måneden.",
    verktoy:[
      {navn:"Next.js", note:"Vårt standardvalg for fullstack React. App Router og server-komponenter."},
      {navn:"React", note:"Komponentmodellen bak alt vi leverer. Går hånd i hånd med TypeScript og Tailwind."},
      {navn:"React Native (Expo)", note:"Native iOS og Android fra én kodebase."},
      {navn:"Vue.js", note:"Når prosjektet tilsier det."},
      {navn:"Astro", note:"Raske statiske sider med interaktive øyer der det trengs."},
      {navn:"TypeScript", note:"Typesikkerhet fra dag én, uten unntak."},
      {navn:"Tailwind CSS", note:"Utility-først styling med designsystemet håndhevet i koden."},
    ], mer:"og 15+ til — spør oss hva vi ellers jobber med." },

  { n:"02", t:"Publisering og CMS",
    intro:"Fra designervennlige byggere til hodeløse innholdsplattformer. Vi velger verktøyet ut fra hvordan teamet ditt faktisk jobber.",
    verktoy:[
      {navn:"Webflow", note:"Designervennlig, fra no-code til low-code."},
      {navn:"WordPress", note:"Fortsatt markedsleder for innholdstunge nettsteder. Kombineres med WooCommerce og WP Engine."},
      {navn:"Sanity", note:"Hodeløst CMS for moderne stack, med sanntidssamarbeid."},
      {navn:"Contentful", note:"Hodeløst på bedriftsnivå med sterke arbeidsflyter."},
      {navn:"Strapi", note:"Selvhostet når dere trenger full kontroll på data."},
      {navn:"Ghost", note:"Publisering og nyhetsbrev, Markdown-basert."},
    ], mer:"og 10+ til — spør oss hva vi ellers jobber med." },

  { n:"03", t:"Netthandel",
    intro:"Butikker bygget for vekst, ikke bare tilstedeværelse. Full stack eller hodeløst — det som passer forretningsmodellen.",
    verktoy:[
      {navn:"Shopify", note:"Standardvalget for B2C. Kombineres med Klaviyo, Stripe og Google Analytics."},
      {navn:"WooCommerce", note:"Netthandel integrert i WordPress."},
      {navn:"Medusa", note:"Åpen kildekode, hodeløs netthandel."},
      {navn:"BigCommerce", note:"Netthandelsplattform på bedriftsnivå."},
      {navn:"Klaviyo", note:"Markedsføringsautomasjon for netthandel. Integreres med alle butikkene over."},
      {navn:"Voyado", note:"Kundelojalitet og personalisering, sterk i Norden."},
    ], mer:"og flere plattformer på forespørsel." },

  { n:"04", t:"Backend og data",
    intro:"Postgres først. Sanntid, autentisering og tilgangsstyring på radnivå ut av boksen. Skalerbart uten innlåsing.",
    verktoy:[
      {navn:"Supabase", note:"Vårt standardvalg. Postgres, autentisering, lagring, sanntid og edge-funksjoner."},
      {navn:"PostgreSQL", note:"Databasen. Gjennomtestet og funksjonsrik — ingen grunn til alternativer uten god grunn."},
      {navn:"Firebase", note:"Googles alternativ, fungerer godt for mobil-først-apper."},
      {navn:"MongoDB", note:"Når dokumentmodellen faktisk passer dataene."},
      {navn:"Redis", note:"Hurtigbuffer og køer, raske nøkkel-verdi-operasjoner."},
      {navn:"Node.js", note:"JavaScript på server for egen logikk."},
      {navn:"Python", note:"Datatunge arbeidsflyter, skripting og KI-pipelines."},
      {navn:"Prisma", note:"Typesikker ORM for TypeScript-prosjekter."},
    ], mer:"og flere databaser og kjøretidsmiljøer på forespørsel." },

  { n:"05", t:"Sky og infrastruktur",
    intro:"Driftsplattformer valgt for friksjonsfri skalering. Innsyn i driften uten å bli låst til én leverandør.",
    verktoy:[
      {navn:"Vercel", note:"Vårt standardvalg for moderne webapper. CI/CD innebygget."},
      {navn:"AWS", note:"Full skystack — EC2, S3, Lambda, RDS og CloudFront."},
      {navn:"Google Cloud Platform", note:"Alternativ sky, sterk på data og KI."},
      {navn:"Cloudflare", note:"CDN, DNS, edge workers og R2-lagring."},
      {navn:"WP Engine", note:"Driftet WordPress-hosting for større virksomheter."},
      {navn:"DigitalOcean", note:"Enkel VPS når driftede plattformer blir overkill."},
      {navn:"Docker", note:"Containere for gjenskapbare miljøer."},
      {navn:"GitHub Actions", note:"Automatisert testing, utrulling og arbeidsflyt."},
    ], mer:"og flere infrastrukturverktøy på forespørsel." },

  { n:"06", t:"Betaling",
    intro:"Fra globale kort til norske mobilbetalinger. Vi kobler på riktig betalingsvei for markedet ditt.",
    verktoy:[
      {navn:"Nets", note:"Nordisk betalingsinfrastruktur — korttransaksjoner, AvtaleGiro, eFaktura og direkte debet. Ryggraden i mye av det norske betalingsbildet."},
      {navn:"Stripe", note:"Globalt standardvalg. Kort, abonnement og webhooks."},
      {navn:"Vipps / MobilePay", note:"Mobilbetaling i Norden — avgjørende i Norge og Danmark."},
      {navn:"Swish", note:"Den dominerende mobilbetalingen i Sverige."},
      {navn:"Klarna", note:"Del opp betalingen eller faktura. Sterk posisjon i Norden."},
      {navn:"PayPal", note:"Fortsatt forventet av mange kunder internasjonalt."},
      {navn:"Adyen", note:"Samlet betalingsplattform på bedriftsnivå."},
    ], mer:"og lokale leverandører på forespørsel." },

  { n:"07", t:"Selvbetjening og kundeflyt",
    intro:"Der kunden møter virksomheten fysisk. Betalingsterminaler, innsjekk og køhåndtering som tar unna det manuelle i resepsjonen — og som snakker med fagsystemet bak.",
    verktoy:[
      {navn:"Convene", note:"Norsk leverandør av selvbetjente terminaler for betaling, ankomstregistrering, køsystem og nøkkelhåndtering. Vi har jobbet mye med integrasjoner mot disse."},
      {navn:"Ankomstregistrering", note:"Innsjekk uten resepsjon — kunden registrerer seg selv og fagsystemet oppdateres direkte."},
      {navn:"Køsystem", note:"Digital kølapp og kalling, koblet mot timebok og skjermer i lokalet."},
      {navn:"Mobilbetaling på terminal", note:"Vipps og kort i samme flyt, med kvittering rett til kunden."},
    ], mer:"og integrasjoner mot fagsystemet dere allerede bruker." },

  { n:"08", t:"Identitet og signering",
    intro:"BankID er ryggraden i norsk digital tillit. Vi bruker det til tre ting: bekrefte at en person er den de utgir seg for, logge dem inn, og få signaturer som holder juridisk.",
    verktoy:[
      {navn:"BankID", note:"Identifikasjon, innlogging og signering i samme løsning. Den mest brukte og mest aksepterte i Norge."},
      {navn:"BankID på mobil", note:"Innlogging og signering uten kodebrikke — det de fleste norske brukere forventer."},
      {navn:"Vipps Logg inn", note:"Lavterskel innlogging med bekreftet identitet, bygget på BankID."},
      {navn:"Nets eID Broker", note:"Tilgang til BankID og nordiske eID-er gjennom én integrasjon."},
      {navn:"Signicat", note:"Identitetsbroker som samler BankID og nordiske eID-er bak ett grensesnitt."},
      {navn:"Criipto", note:"Utviklervennlig BankID-tilgang via OpenID Connect."},
      {navn:"SignNow", note:"Signeringsflyt for dokumenter og avtaler."},
      {navn:"ID-porten", note:"Nasjonal innlogging med offentlig eID. Vi har satt det opp i drift, blant annet i helsesektoren."},
      {navn:"Altinn", note:"Datadeling og skjemaflyt mot det offentlige."},
    ], mer:"og flere eID-leverandører i Norden på forespørsel." },

  { n:"09", t:"Kommunikasjon og CRM",
    intro:"Verktøyene virksomheten allerede kjører på — CRM, e-post og meldinger. Vi kobler dem sammen på en ryddig måte.",
    verktoy:[
      {navn:"HubSpot", note:"CRM og markedsføringsautomasjon. Vårt førstevalg for B2B-team i vekst."},
      {navn:"Pipedrive", note:"Enklere CRM for salgsdrevne team."},
      {navn:"Intercom", note:"Kundeservice og direktechat."},
      {navn:"Mailchimp", note:"E-postmarkedsføring for små og mellomstore."},
      {navn:"Resend", note:"Moderne transaksjons-e-post med EU-region."},
      {navn:"SendGrid", note:"Transaksjons-e-post på bedriftsnivå."},
      {navn:"46elks", note:"SMS og talerespons med nordisk operatør."},
      {navn:"Twilio", note:"Global kommunikasjonsplattform — SMS, tale og WhatsApp."},
      {navn:"Slack", note:"Teamkommunikasjon med webhooks, boter og egne apper."},
    ], mer:"og 10+ til — spør oss hva vi ellers jobber med." },

  { n:"10", t:"Automatisering og integrasjoner",
    intro:"Vi fjerner det manuelle arbeidet som stjeler tid, og kobler systemene slik at data havner der de skal.",
    verktoy:[
      {navn:"Zapier", note:"No-code-automasjon for standardflyter."},
      {navn:"Make (Integromat)", note:"Visuell automasjon med mer fleksibilitet enn Zapier."},
      {navn:"n8n", note:"Selvhostet automasjon når dataene må bli i eget hus."},
      {navn:"Google Workspace", note:"Regneark, Disk og Kalender — styrt via API."},
      {navn:"Apps Script", note:"Lettvekts automasjon inne i Google Workspace."},
      {navn:"Webhooks", note:"Standarden for integrasjon mellom systemer."},
    ], mer:"og egne integrasjoner mot et hvilket som helst API." },

  { n:"11", t:"KI og språkmodeller",
    intro:"Vi tar i bruk KI der det gir målbar gevinst — ikke som funksjonsdemo. Er du usikker på om det lønner seg, sier vi fra.",
    verktoy:[
      {navn:"Claude (Anthropic)", note:"Vår primære assistent. Resonnering, kode og verktøybruk via MCP."},
      {navn:"OpenAI GPT", note:"Bred trening, sterk på klassifisering og standardoppgaver."},
      {navn:"Google Gemini", note:"Multimodal — bildeforståelse, video og OCR."},
      {navn:"Imagen 4", note:"Bildegenerering i produksjon."},
      {navn:"Ollama", note:"Lokale modeller for personvernsensitive arbeidsflyter."},
      {navn:"ElevenLabs", note:"Talesyntese for telefoni og samtaleagenter."},
    ], mer:"og hele MCP-økosystemet." },

  { n:"12", t:"Analyse og overvåking",
    intro:"Mål det som betyr noe, respekter personvernet, og fang opp feil før brukerne gjør det.",
    verktoy:[
      {navn:"Google Analytics 4", note:"Fortsatt markedsstandarden."},
      {navn:"Plausible", note:"Personvern først, uten informasjonskapsler."},
      {navn:"Mixpanel", note:"Produktanalyse — trakter, kohorter og gjenkjøp."},
      {navn:"PostHog", note:"Alt-i-ett produktanalyse med sesjonsopptak."},
      {navn:"Sentry", note:"Feilsporing og ytelsesovervåking."},
      {navn:"Cloudflare Web Analytics", note:"Lettvekts og personvernvennlig."},
    ], mer:"og flere på forespørsel." },

  { n:"13", t:"IoT, sensorikk og konnektivitet",
    intro:"Fysiske systemer som skal rapportere hjem. Vi jobber med hele kjeden — sensoren i felt, mobilnettet den sender over, og databasen som tar imot.",
    verktoy:[
      {navn:"GPS-mottakere og -sendere", note:"Posisjon og bevegelse i sanntid fra utstyr i felt, på sjøen eller i bevegelse."},
      {navn:"Vibrasjonssensorer", note:"Overvåking av bevegelse og belastning — varsler før noe ryker, ikke etter."},
      {navn:"eSIM", note:"Innebygd SIM som kan omprogrammeres uten fysisk kort. Nødvendig når utstyret sitter utilgjengelig til."},
      {navn:"IoT-SIM", note:"Datatilkobling laget for utstyr, ikke telefoner — lavt forbruk, flere operatører, drift over hele landet."},
      {navn:"LTE-M / NB-IoT", note:"Mobilnett for enheter som skal sende lite data på lite strøm, og nå fram der dekningen er svak."},
      {navn:"Victron Energy", note:"Energiovervåking og automatiseringer utenfor strømnettet gjennom API."},
      {navn:"Modbus TCP", note:"Integrasjon mot industriprotokoll — vi henter data ut av anlegg som ikke ble bygget for sky."},
      {navn:"MQTT", note:"Lettvekts meldingsprotokoll — bindeleddet mellom sensor i felt og system i sky."},
      {navn:"Raspberry Pi", note:"Fysiske styringsenheter og databehandling ute på stedet."},
      {navn:"Arduino", note:"Mikrokontrollere for egen maskinvare."},
    ], mer:"og flere sensortyper og protokoller på forespørsel." },

  { n:"14", t:"Smarthus",
    intro:"Automasjon i bygg — lys, varme, adgang og energi styrt av regler i stedet for brytere.",
    verktoy:[
      {navn:"Homey Pro", note:"Smarthusnav med åpent Flow-API. Vi bygger egne flyter og integrasjoner på det."},
      {navn:"Home Assistant", note:"Åpen kildekode og full kontroll — når løsningen skal kjøre lokalt uten skyavhengighet."},
      {navn:"Zigbee / Z-Wave / Matter", note:"Trådløse protokoller for smarthus, og bindeleddet mellom utstyr fra ulike leverandører."},
    ], mer:"og flere plattformer på forespørsel." },

];

function VerktoykassaSide() {
  const antall = GRUPPER.reduce((s, g) => s + g.verktoy.length, 0);
  return (
    <>
      <Header/>

      <section className="sl-vk-hero">
        <div className="shell">
          <div className="sl-slash" style={{marginBottom:24}}>/ verktøykassa</div>
          <h1 className="sl-vk-hero__title">
            Verktøykassa vår — <em>valgt for å vare, ikke for å imponere.</em>
          </h1>
          <p className="sl-vk-hero__intro">
            Vi er pragmatiske med teknologi. Moderne der det tjener arbeidet, kjedelig der det holder
            driften stabil. Hvert verktøy under har fortjent plassen sin ved å løse et reelt problem.
          </p>
          <div className="sl-vk-tall">
            <div><strong>{GRUPPER.length}</strong><span>kategorier</span></div>
            <div><strong>{antall}+</strong><span>verktøy i aktiv bruk</span></div>
            <div><strong>EU</strong><span>datalagring der det kreves</span></div>
          </div>
        </div>
      </section>

      <nav className="sl-vk-innhold" aria-label="Innhold">
        <div className="shell sl-vk-innhold__inner">
          {GRUPPER.map(g => (
            <a key={g.n} href={"#g" + g.n} onClick={(e)=>{e.preventDefault(); scrollToId("g"+g.n);}}>
              <span className="sl-vk-innhold__num">{g.n}</span>{g.t}
            </a>
          ))}
        </div>
      </nav>

      {GRUPPER.map(g => (
        <section key={g.n} className="sl-vk-gruppe" id={"g" + g.n}>
          <div className="shell sl-vk-gruppe__grid">
            <div className="sl-vk-gruppe__head">
              <div className="sl-slash sl-vk-gruppe__num">/ {g.n}</div>
              <h2 className="sl-vk-gruppe__title">{g.t}</h2>
              <p className="sl-vk-gruppe__intro">{g.intro}</p>
            </div>
            <div className="sl-vk-liste">
              {g.verktoy.map(v => (
                <div key={v.navn} className="sl-vk-item">
                  <h3 className="sl-vk-item__navn">{v.navn}</h3>
                  <p className="sl-vk-item__note">{v.note}</p>
                </div>
              ))}
              {g.mer && (
                <div className="sl-vk-item sl-vk-item--mer">
                  <h3 className="sl-vk-item__navn sl-vk-item__navn--dempet">+ mer</h3>
                  <p className="sl-vk-item__note">{g.mer}</p>
                </div>
              )}
            </div>
          </div>
        </section>
      ))}

      <section className="sl-vk-avslutning">
        <div className="shell">
          <h2 className="sl-vk-avslutning__title">Teknologi er et middel, ikke et mål.</h2>
          <p className="sl-vk-avslutning__intro">
            Finner du ikke verktøyet ditt over? Spør oss — sjansen er stor for at det ligger i kassa,
            eller at vi vet nøyaktig hvilket alternativ som løser problemet ditt.
          </p>
          <a className="sl-btn sl-btn--primary" href="/#kontakt">Ta en prat med oss →</a>
        </div>
      </section>

      <Footer/>
    </>
  );
}