/* global React, Icon, Btn, Tag, Wordmark, LangToggle, useLang, T, tt */
const { useState: useStateSec } = React;

const SectionHeader = ({ eyebrowNo, eyebrowEn, titleNo, titleEn, descNo, descEn }) => (
  <div style={{ maxWidth: 880, marginBottom: 64 }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
      <span style={{ width: 24, height: 1, background: 'var(--blue-40)' }} />
      <span className="code-01" style={{
        color: 'var(--text-helper)', letterSpacing: '0.32px', textTransform: 'uppercase',
      }}>
        <T no={eyebrowNo} en={eyebrowEn} />
      </span>
    </div>
    <h2 style={{
      font: '300 clamp(36px, 4.8vw, 56px)/1.05 var(--font-sans)',
      letterSpacing: '-0.8px', color: 'var(--text-primary)', margin: 0,
    }}>
      <T no={titleNo} en={titleEn} />
    </h2>
    {(descNo || descEn) && (
      <p style={{
        font: '300 clamp(16px, 1.4vw, 19px)/1.55 var(--font-sans)',
        color: 'var(--text-secondary)', maxWidth: 720, marginTop: 28, letterSpacing: '0.16px',
      }}>
        <T no={descNo} en={descEn} />
      </p>
    )}
  </div>
);

const SERVICES = [
  {
    key: 'journalai',
    icon: 'document',
    accent: 'var(--blue-40)',
    titleNo: 'JournalAI',
    titleEn: 'JournalAI',
    leadNo: 'Automatisk journalføring fra konsultasjon til DIPS, klar til signering.',
    leadEn: 'Automatic journal notes from consultation to DIPS, ready to sign.',
    bullets: [
      ['Talegjenkjenning på bokmål og nynorsk',           'Speech recognition for Bokmål and Nynorsk'],
      ['Strukturert SOAP-notat med ICD-10-koder',         'Structured SOAP notes with ICD-10 codes'],
      ['Integrasjon med EPJ via FHIR / HL7',              'EHR integration via FHIR / HL7'],
      ['Verbatim original — ingen omskriving',            'Verbatim original — no paraphrasing'],
    ],
  },
  {
    key: 'pasientsamtale',
    icon: 'microphone',
    accent: 'var(--blue-40)',
    titleNo: 'Pasientsamtale',
    titleEn: 'Patient consultation',
    leadNo: 'Stille opptak med diarisering — legen snakker fritt, modellen lytter.',
    leadEn: 'Quiet capture with diarization — the physician speaks freely, the model listens.',
    bullets: [
      ['Pyannote 4 community-1 talerseparasjon',          'Pyannote 4 community-1 speaker separation'],
      ['Sanntid eller etter konsultasjon',                'Real-time or post-consultation'],
      ['Inbox-basert arbeidsflyt — drop og glem',         'Inbox-based workflow — drop and forget'],
      ['Lyden forlater aldri klinikken',                  'Audio never leaves the clinic'],
    ],
  },
  {
    key: 'copilot',
    icon: 'AI',
    accent: 'var(--purple-40)',
    isAI: true,
    titleNo: 'Copilot for lege',
    titleEn: 'Copilot for physicians',
    leadNo: 'Live beslutningsstøtte under konsultasjonen — under to sekunders responstid.',
    leadEn: 'Live decision support during the consultation — under two-second response time.',
    bullets: [
      ['Foreslår oppfølgingsspørsmål basert på symptomer','Suggests follow-up questions from symptoms'],
      ['Flagger glemte differensialdiagnoser',           'Flags missed differential diagnoses'],
      ['Henter relevant litteratur og protokoll',        'Retrieves relevant literature and protocols'],
      ['Lokal LLM — ingen pasientdata til skyen',        'Local LLM — no patient data to the cloud'],
    ],
  },
  {
    key: 'diagnostikk',
    icon: 'machine-learning-model',
    accent: 'var(--blue-40)',
    titleNo: 'Diagnostikk',
    titleEn: 'Diagnostics',
    leadNo: 'Multimodal diagnostisk støtte med leger i loopen — bygd på norsk klinisk praksis.',
    leadEn: 'Multimodal diagnostic support with physicians in the loop — built on Norwegian clinical practice.',
    bullets: [
      ['Differensialdiagnose etter norske retningslinjer','Differential diagnosis per Norwegian guidelines'],
      ['Lab-, bilde- og anamnese-fusjon',                'Lab, imaging, and history fusion'],
      ['Forklarbar score med kildehenvisning',           'Explainable scoring with citations'],
      ['Bygget med spesialister i fagfeltet',            'Built with specialists in the field'],
    ],
  },
  {
    key: 'legemidler',
    icon: 'data--base',
    accent: 'var(--blue-40)',
    titleNo: 'Legemidler',
    titleEn: 'Medications',
    leadNo: 'Interaksjonskontroll og dosering tilpasset norske preparater og Felleskatalogen.',
    leadEn: 'Interaction checking and dosing aligned with Norwegian formulary and Felleskatalogen.',
    bullets: [
      ['Sanntids interaksjonsvarsling',                  'Real-time interaction alerts'],
      ['Dosejustering ved nyresvikt og alder',           'Dose adjustment for renal function and age'],
      ['Norske handelsnavn og generika',                 'Norwegian brand names and generics'],
      ['Reseptutkast med dose, antall og refill',        'Prescription drafts with dose, count, refills'],
    ],
  },
  {
    key: 'juridisk',
    icon: 'information',
    accent: 'var(--purple-40)',
    isAI: true,
    titleNo: 'Juridisk Copilot for leger',
    titleEn: 'Legal Copilot for physicians',
    leadNo: 'Helserettslig veiledning når journalføringen møter pasientrettighetsloven.',
    leadEn: 'Health law guidance where documentation meets patient rights legislation.',
    bullets: [
      ['Pasientjournalforskriften og helsepersonelloven','Patient records regulation and Health Personnel Act'],
      ['Klagesaks- og tilsynsstøtte',                    'Complaint and supervisory case support'],
      ['Dokumentasjonsmaler for spesialisthelsetjenesten','Documentation templates for specialist care'],
      ['Gjennomgang av norsk Helsetilsyn-praksis',       'Review of Norwegian Helsetilsyn precedent'],
    ],
  },
];

const ServiceCard = ({ s, isOpen, onToggle }) => {
  const { lang } = useLang();
  return (
    <div
      className={`np-card${isOpen ? ' is-open' : ''}`}
      style={{
        display: 'flex', flexDirection: 'column',
        position: 'relative',
      }}
    >
      {s.isAI && (
        <div style={{
          position: 'absolute', top: 0, left: 0, right: 0, height: 2,
          background: 'linear-gradient(90deg, var(--purple-40), var(--blue-40))',
          opacity: isOpen ? 1 : 0.4,
          transition: 'opacity 150ms var(--easing-standard-productive)',
        }} />
      )}
      <button
        type="button"
        onClick={onToggle}
        style={{
          padding: 28, background: 'transparent', border: 'none', cursor: 'pointer',
          textAlign: 'left', color: 'var(--text-primary)', width: '100%',
        }}
        aria-expanded={isOpen}
      >
        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 16 }}>
          <div style={{
            width: 48, height: 48, flexShrink: 0,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            background: s.isAI ? 'rgba(190,149,255,0.10)' : 'rgba(120,169,255,0.10)',
            border: `1px solid ${s.isAI ? 'rgba(190,149,255,0.35)' : 'rgba(120,169,255,0.30)'}`,
          }}>
            <Icon name={s.icon} size={24} color={s.accent} />
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{
              font: '400 22px/1.2 var(--font-sans)', color: 'var(--text-primary)',
              letterSpacing: '-0.2px',
            }}>
              {tt(lang, s.titleNo, s.titleEn)}
            </div>
            <div className="code-01" style={{
              color: 'var(--text-helper)', marginTop: 4, letterSpacing: '0.32px',
            }}>
              {tt(lang, s.titleEn, s.titleNo)}
            </div>
            <p style={{
              font: '400 14px/1.5 var(--font-sans)', color: 'var(--text-secondary)',
              marginTop: 14, letterSpacing: '0.16px',
            }}>
              {tt(lang, s.leadNo, s.leadEn)}
            </p>
          </div>
          <Icon
            name="chevron--down"
            size={16}
            color="var(--text-secondary)"
            style={{
              marginTop: 4,
              transform: isOpen ? 'rotate(0deg)' : 'rotate(-90deg)',
              transition: 'transform 240ms var(--easing-standard-expressive)',
            }}
          />
        </div>
      </button>

      <div className={`np-expand${isOpen ? ' np-expand-open' : ''}`}>
        <div className="np-expand-inner">
          <div style={{
            padding: '0 28px 28px 28px',
            borderTop: '1px solid var(--border-subtle-01)',
            paddingTop: 24,
          }}>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
              {s.bullets.map(([no, en]) => (
                <li key={no} style={{
                  display: 'flex', alignItems: 'flex-start', gap: 10,
                  padding: '8px 0',
                  font: '400 13px/1.55 var(--font-sans)', color: 'var(--text-secondary)',
                  letterSpacing: '0.16px',
                  borderBottom: '1px solid var(--border-subtle-00)',
                }}>
                  <Icon name="checkmark" size={12} color={s.accent} style={{ marginTop: 5 }} />
                  <span style={{ flex: 1 }}>{tt(lang, no, en)}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
};

const TjenesterSection = () => {
  const [openKey, setOpenKey] = useStateSec(null);
  const toggle = (k) => setOpenKey(curr => (curr === k ? null : k));
  return (
    <section id="tjenester" className="np-section np-pad-section" style={{
      padding: '120px 32px', borderBottom: '1px solid var(--border-subtle-01)',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <SectionHeader
          eyebrowNo="Tjenester" eyebrowEn="Services"
          titleNo="Et komplett verktøysett for klinisk hverdag."
          titleEn="A complete toolkit for clinical practice."
          descNo="Seks moduler bygd sammen for å støtte konsultasjon, dokumentasjon, diagnose og beslutning — på norsk, med norske retningslinjer som fundament."
          descEn="Six modules built together to support consultation, documentation, diagnosis, and decision-making — in Norwegian, anchored in Norwegian guidelines."
        />
        <div className="np-grid-services" style={{
          background: 'var(--border-subtle-01)', border: '1px solid var(--border-subtle-01)',
        }}>
          {SERVICES.map(s => (
            <ServiceCard
              key={s.key}
              s={s}
              isOpen={openKey === s.key}
              onToggle={() => toggle(s.key)}
            />
          ))}
        </div>
      </div>
    </section>
  );
};

const OmOssSection = () => (
  <section id="om-oss" className="np-section np-pad-section" style={{
    padding: '140px 32px',
    borderBottom: '1px solid var(--border-subtle-01)',
    position: 'relative', overflow: 'hidden',
  }}>
    <div style={{
      position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)',
      width: 800, height: 800,
      background: 'radial-gradient(closest-side, var(--ai-aura-start), transparent 70%)',
      filter: 'blur(20px)', pointerEvents: 'none',
    }} />

    <div style={{ position: 'relative', maxWidth: 1080, margin: '0 auto' }}>
      <SectionHeader
        eyebrowNo="Om oss" eyebrowEn="About us"
        titleNo="Pasientens beste."
        titleEn="The patient's best interest."
      />

      <div style={{
        display: 'grid', gridTemplateColumns: '1fr', gap: 56, maxWidth: 920,
      }}>
        <blockquote style={{
          margin: 0, padding: '32px 40px',
          borderLeft: '2px solid var(--blue-40)',
          background: 'var(--layer-01)',
        }}>
          <p style={{
            font: '300 clamp(22px, 2.4vw, 32px)/1.4 var(--font-sans)',
            color: 'var(--text-primary)', letterSpacing: '-0.4px',
          }}>
            <T
              no={<>Pasientens beste er et resultat av kompetanse og kunnskap i samspill. <span style={{ color: 'var(--text-secondary)' }}>Normedisin har lang fartstid innen diagnostikk, kirurgi, psykiatri og allmennmedisin, med ledende kunnskap og erfaring fra medisinfaget.</span></>}
              en={<>The patient's best interest is the result of competence and knowledge working in concert. <span style={{ color: 'var(--text-secondary)' }}>Normedisin brings deep tenure across diagnostics, surgery, psychiatry, and general practice — leading knowledge and experience from the medical field.</span></>}
            />
          </p>
        </blockquote>

        <blockquote style={{
          margin: 0, padding: '32px 40px',
          borderLeft: '2px solid var(--purple-40)',
          background: 'var(--layer-01)',
        }}>
          <p style={{
            font: '300 clamp(22px, 2.4vw, 32px)/1.4 var(--font-sans)',
            color: 'var(--text-primary)', letterSpacing: '-0.4px',
          }}>
            <T
              no={<>MedOps er et verktøy laget av leger <span style={{ color: 'var(--purple-40)' }}>for neste generasjons leger.</span></>}
              en={<>MedOps is a toolkit built by physicians <span style={{ color: 'var(--purple-40)' }}>for the next generation of physicians.</span></>}
            />
          </p>
        </blockquote>
      </div>

      <div className="np-grid-stats" style={{
        background: 'var(--border-subtle-01)',
        border: '1px solid var(--border-subtle-01)', marginTop: 72,
      }}>
        {[
          { label_no: 'Fagfelt',           label_en: 'Disciplines',         value: '4+' },
          { label_no: 'Spesialister',      label_en: 'Specialists',         value: '10+' },
          { label_no: 'Norsk-først',       label_en: 'Norwegian-first',     value: 'ja / yes' },
          { label_no: 'Lukket arkitektur', label_en: 'Closed architecture', value: 'on-prem' },
        ].map(stat => (
          <div key={stat.label_no} style={{ background: 'var(--background)', padding: 24 }}>
            <div className="code-01" style={{
              color: 'var(--text-helper)', textTransform: 'uppercase', letterSpacing: '0.32px',
            }}>
              <T no={stat.label_no} en={stat.label_en} />
            </div>
            <div style={{
              font: '300 32px/1.16 var(--font-sans)', color: 'var(--text-primary)',
              marginTop: 12, letterSpacing: '-0.4px',
            }}>{stat.value}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const JuridiskSection = () => (
  <section id="juridisk" className="np-section np-pad-section" style={{
    padding: '120px 32px', borderBottom: '1px solid var(--border-subtle-01)',
  }}>
    <div style={{ maxWidth: 1280, margin: '0 auto' }}>
      <SectionHeader
        eyebrowNo="Juridisk" eyebrowEn="Legal"
        titleNo="Samsvar, ikke kompromiss."
        titleEn="Compliance without compromise."
        descNo="Våre tjenester er HIPAA-godkjente og samsvarer med GDPR. Vi tilbyr lukkede løsninger og hybride løsninger for en dynamisk produksjon."
        descEn="Our services are HIPAA approved and GDPR compliant. We offer closed and hybrid deployments for dynamic production environments."
      />

      <div className="np-grid-cards-3" style={{ marginBottom: 56 }}>
        {[
          {
            badge: 'HIPAA',
            color: 'var(--blue-40)',
            titleNo: 'HIPAA-godkjent',
            titleEn: 'HIPAA approved',
            bodyNo: 'Sikkerhetstiltak, tilgangskontroll, revisjonsspor og krypterte data i hvile og transitt.',
            bodyEn: 'Security controls, access management, audit trails, and encrypted data at rest and in transit.',
          },
          {
            badge: 'GDPR',
            color: 'var(--green-40)',
            titleNo: 'GDPR-samsvar',
            titleEn: 'GDPR compliant',
            bodyNo: 'Databehandleravtaler, sletteretten, dataminimering og EU-basert prosessering som standard.',
            bodyEn: 'Data processor agreements, right to erasure, data minimization, and EU-based processing by default.',
          },
          {
            badge: 'NHN',
            color: 'var(--purple-40)',
            titleNo: 'Norsk helsenett',
            titleEn: 'Norwegian Health Network',
            bodyNo: 'Klar for tilkobling til Norsk helsenett. Lokal drift, sertifikater og logger på dine vilkår.',
            bodyEn: 'Ready for connection to Norsk helsenett. Local operations, certificates, and logs on your terms.',
          },
        ].map(c => (
          <div key={c.badge} style={{
            background: 'var(--layer-01)', border: '1px solid var(--border-subtle-01)',
            padding: 28, display: 'flex', flexDirection: 'column', gap: 16,
          }}>
            <div style={{
              display: 'inline-flex', alignSelf: 'flex-start',
              padding: '6px 10px', border: `1px solid ${c.color}`,
              font: '600 12px/1 var(--font-mono)', letterSpacing: '0.32px',
              color: c.color,
            }}>{c.badge}</div>
            <div style={{
              font: '400 22px/1.2 var(--font-sans)', color: 'var(--text-primary)',
              letterSpacing: '-0.2px',
            }}>
              {<T no={c.titleNo} en={c.titleEn} />}
            </div>
            <p style={{
              font: '400 14px/1.55 var(--font-sans)', color: 'var(--text-secondary)',
              letterSpacing: '0.16px',
            }}>
              {<T no={c.bodyNo} en={c.bodyEn} />}
            </p>
          </div>
        ))}
      </div>

      <div className="np-grid-cards-2" style={{
        background: 'var(--border-subtle-01)', border: '1px solid var(--border-subtle-01)',
      }}>
        {[
          {
            icon: 'cloud',
            titleNo: 'Lukket løsning',
            titleEn: 'Closed deployment',
            bodyNo: 'Hele pipelinen kjører lokalt på klinikkens infrastruktur. Lyd, transkripsjon og analyse forlater aldri bygningen.',
            bodyEn: 'The full pipeline runs locally on the clinic\'s infrastructure. Audio, transcripts, and analyses never leave the premises.',
            features: [
              ['Lokal GPU eller serverpark', 'Local GPU or server cluster'],
              ['Lokal autentisering og logger', 'Local authentication and audit logs'],
              ['Air-gap-kompatibel', 'Air-gap compatible'],
            ],
          },
          {
            icon: 'flow',
            titleNo: 'Hybrid løsning',
            titleEn: 'Hybrid deployment',
            bodyNo: 'Lyd og pasientdata forblir lokalt. Beregningstung resonnement kan rutes til godkjent EU-region for kapasitet og hastighet.',
            bodyEn: 'Audio and patient data remain local. Compute-heavy reasoning can be routed to an approved EU region for capacity and speed.',
            features: [
              ['On-prem hot path, sky for tunge job', 'On-prem hot path, cloud for heavy work'],
              ['EU-basert datasenter', 'EU-based data center'],
              ['Skalerbar for travle dager', 'Scalable for high-volume days'],
            ],
          },
        ].map(d => (
          <div key={d.titleNo} style={{ background: 'var(--background)', padding: 32 }}>
            <Icon name={d.icon} size={22} color="var(--blue-40)" />
            <div style={{
              font: '400 22px/1.2 var(--font-sans)', color: 'var(--text-primary)',
              marginTop: 18, letterSpacing: '-0.2px',
            }}>
              <T no={d.titleNo} en={d.titleEn} />
            </div>
            <p style={{
              font: '400 14px/1.55 var(--font-sans)', color: 'var(--text-secondary)',
              marginTop: 12, letterSpacing: '0.16px', maxWidth: 540,
            }}>
              <T no={d.bodyNo} en={d.bodyEn} />
            </p>
            <ul style={{ listStyle: 'none', padding: 0, margin: '20px 0 0 0' }}>
              {d.features.map(([no, en]) => (
                <li key={no} style={{
                  display: 'flex', alignItems: 'center', gap: 10,
                  font: '400 13px/2 var(--font-sans)', color: 'var(--text-secondary)',
                  letterSpacing: '0.16px',
                }}>
                  <Icon name="checkmark" size={12} color="var(--blue-40)" />
                  <T no={no} en={en} />
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const FinalCTA = () => {
  const { lang } = useLang();
  return (
    <section className="np-pad-section" style={{
      padding: '140px 32px', borderBottom: '1px solid var(--border-subtle-01)',
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', top: -120, left: '50%', transform: 'translateX(-50%)',
        width: 720, height: 720,
        background: 'radial-gradient(closest-side, var(--ai-aura-start), transparent 70%)',
        filter: 'blur(20px)', pointerEvents: 'none',
      }} />
      <div style={{ position: 'relative', maxWidth: 880, margin: '0 auto', textAlign: 'center' }}>
        <h2 style={{
          font: '300 clamp(36px, 5.6vw, 64px)/1.05 var(--font-sans)',
          letterSpacing: '-1px', color: 'var(--text-primary)', margin: 0,
        }}>
          <T
            no={<>Norsk medisin,<br />trofast gjengitt.</>}
            en={<>Norwegian medicine,<br />faithfully transcribed.</>}
          />
        </h2>
        <p style={{
          font: '300 19px/1.55 var(--font-sans)',
          color: 'var(--text-secondary)', marginTop: 28,
          maxWidth: 640, marginLeft: 'auto', marginRight: 'auto',
        }}>
          <T
            no="Bygd for klinikker som vil eie både dataene og opplevelsen. Selv-driftet, edge-autentisert, og av leger som forstår yrket."
            en="Built for clinics that want to own both the data and the experience. Self-hosted, edge-authenticated, and by physicians who know the craft."
          />
        </p>
        <div style={{ display: 'flex', gap: 12, marginTop: 48, justifyContent: 'center', flexWrap: 'wrap' }}>
          <Btn icon="arrow--right" onClick={() => { window.location.href = '../console/index.html'; }}>
            {tt(lang, 'Åpne konsollen', 'Open the console')}
          </Btn>
          <Btn kind="tertiary" icon="terminal" onClick={() => { document.getElementById('tjenester')?.scrollIntoView({ behavior: 'smooth' }); }}>
            {tt(lang, 'Se tjenester', 'See services')}
          </Btn>
        </div>
      </div>
    </section>
  );
};

const FooterThemeToggle = ({ theme, onToggle }) => {
  const { lang } = useLang();
  const isDark = theme === 'g100';
  return (
    <button
      onClick={onToggle}
      className="np-icon-btn"
      aria-pressed={!isDark}
      title={tt(lang, isDark ? 'Bytt til lyst tema' : 'Bytt til mørkt tema', isDark ? 'Switch to light theme' : 'Switch to dark theme')}
    >
      <Icon name={isDark ? 'sun' : 'moon'} size={14} color="currentColor" />
    </button>
  );
};

const Footer = ({ theme, onThemeToggle }) => {
  const { lang } = useLang();
  const cols = [
    {
      labelNo: 'Tjenester', labelEn: 'Services',
      items: [
        ['JournalAI', 'JournalAI', '#tjenester'],
        ['Pasientsamtale', 'Patient consultation', '#tjenester'],
        ['Copilot for lege', 'Copilot for physicians', '#tjenester'],
        ['Diagnostikk', 'Diagnostics', '#tjenester'],
        ['Legemidler', 'Medications', '#tjenester'],
        ['Juridisk Copilot', 'Legal Copilot', '#tjenester'],
      ],
    },
    {
      labelNo: 'Selskap', labelEn: 'Company',
      items: [
        ['Om oss', 'About us', '#om-oss'],
        ['Juridisk', 'Legal', '#juridisk'],
        ['Sikkerhet', 'Security', '#juridisk'],
        ['Kontakt', 'Contact', '#'],
      ],
    },
    {
      labelNo: 'Plattform', labelEn: 'Platform',
      items: [
        ['Status', 'Status', '#'],
        ['Dokumentasjon', 'Documentation', '#'],
        ['Endringslogg', 'Changelog', '#'],
        ['Repo', 'Repo', 'https://gitlab.com/rcas-group/dfend/voice-parser'],
      ],
    },
  ];
  return (
    <footer className="np-pad-section" style={{ padding: '80px 32px 40px', background: 'var(--background)' }}>
      <div className="np-grid-footer" style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div>
          <Wordmark size={22} />
          <p style={{
            font: '400 13px/1.55 var(--font-sans)', color: 'var(--text-secondary)',
            marginTop: 18, maxWidth: 300, letterSpacing: '0.16px',
          }}>
            <T
              no="MedOps av leger. Norsk klinisk presisjon, lukket arkitektur, samsvar med HIPAA og GDPR."
              en="MedOps by MDs. Norwegian clinical precision, closed architecture, HIPAA and GDPR compliant."
            />
          </p>
          <div style={{ marginTop: 24, display: 'flex', alignItems: 'center', gap: 10 }}>
            <LangToggle />
            <FooterThemeToggle theme={theme} onToggle={onThemeToggle} />
          </div>
        </div>
        {cols.map(col => (
          <div key={col.labelNo}>
            <div style={{
              font: '600 11px/1 var(--font-mono)', color: 'var(--text-helper)',
              letterSpacing: '0.32px', textTransform: 'uppercase', marginBottom: 18,
            }}>
              <T no={col.labelNo} en={col.labelEn} />
            </div>
            {col.items.map(([no, en, href]) => (
              <a key={no} href={href} className="np-link" style={{
                display: 'block', font: '400 13px/2 var(--font-sans)', letterSpacing: '0.16px',
              }}>
                {tt(lang, no, en)}
              </a>
            ))}
          </div>
        ))}
      </div>
      <div style={{
        maxWidth: 1280, margin: '64px auto 0',
        display: 'flex', alignItems: 'center', gap: 16,
        paddingTop: 24, borderTop: '1px solid var(--border-subtle-01)',
        flexWrap: 'wrap',
      }}>
        <span className="code-01" style={{ color: 'var(--text-helper)' }}>© 2026 normedisin</span>
        <span className="code-01" style={{ color: 'var(--text-helper)' }}>·</span>
        <span className="code-01" style={{ color: 'var(--text-helper)' }}>
          <T no="Lyd forlater aldri klinikken." en="Audio never leaves the clinic." />
        </span>
        <div style={{ flex: 1 }} />
        <span className="code-01" style={{ color: 'var(--text-helper)' }}>
          <T no="MedOps av leger · v0.4" en="MedOps by MDs · v0.4" />
        </span>
      </div>
    </footer>
  );
};

window.TjenesterSection = TjenesterSection;
window.OmOssSection = OmOssSection;
window.JuridiskSection = JuridiskSection;
window.FinalCTA = FinalCTA;
window.Footer = Footer;
window.SectionHeader = SectionHeader;
