// A1 — Landing page (coremindvault.com) — B2B tone, ingen Horsens-reference, ingen pris-kort
const A1Landing = () => {
  const [faq, setFaq] = React.useState(0);
  const [demoStep, setDemoStep] = React.useState(0);
  React.useEffect(() => {
    if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    const t = setInterval(() => setDemoStep(s => (s + 1) % 4), 2200);
    return () => clearInterval(t);
  }, []);

  const faqs = [
    { q: 'Hvordan sikrer I, at vores data ikke blandes med andre kunders?', a: 'Hver kunde får sit eget afgrænsede data-rum — fysisk separat database, fysisk separat filsystem-namespace. Data krydser aldrig kunde-grænser, hverken ved søgning eller svar. EU Data Boundary er aktiv: ingen transit til ikke-EU-regioner. Al adgang logges i auditsporet.' },
    { q: 'Kan vi køre jeres stack on-premise med vores egen LLM?', a: 'Ja. Vault kan køre som kontrol-plan mod jeres egen LLM-inferens (Ollama, vLLM, dedikeret GPU), jeres egen vektor-DB og jeres eget filsystem. CoreMind Systems projekterer, installerer og drifter stacken — eller lærer jeres team det.' },
    { q: 'Hvad koster det — konkret eksempel?', a: 'For en mellemstor organisation (50 brugere, ~2.000 dokumenter, ~1.500 chats/md) ligger det typisk i Pro-niveau med et inkluderet AI-budget og dedikeret onboarding. Vi skræddersyr tilbud per kunde — kontakt os for et konkret bud.' },
    { q: 'Hvor lang tid tager onboarding?', a: 'Efter aftale kører du en 6-trins wizard: branding, auth, kategorier, invitationer, første dokument. De fleste kunder har første chat-svar på under 10 minutter.' },
    { q: 'Hvilke filformater?', a: 'PDF, Word, Excel, PowerPoint, billeder (OCR), video (transskription). Vi chunker, embedder og ACL’er hvert dokument per uploader-rolle.' },
    { q: 'Kan vi koble Entra ID / Google til?', a: 'Ja. Multi-provider auth pr. tenant. Aktivér Entra SSO, Google, eller magisk link — eller alle tre.' },
  ];

  const pillars = [
    { icon: 'zap', t: 'Egen LLM-inferens', d: 'Llama, Qwen eller Gemma lokalt via Ollama, vLLM eller dedikeret GPU-cluster.' },
    { icon: 'chart', t: 'Egen vektor-DB', d: 'Qdrant, Weaviate eller Milvus på jeres servere. Embeddings bag jeres firewall.' },
    { icon: 'folder', t: 'Egen filsystem', d: 'S3-kompatibel, NAS eller SMB. Dokumenter ligger hos jer.' },
    { icon: 'settings', t: 'CoreMind drifter', d: 'Vi projekterer, installerer og drifter stacken. SLA og opgraderinger — eller overdragelse.' },
  ];

  return (
    <div className="vault" style={{ width: '100%', height: '100%', overflow: 'auto', background: 'var(--bg-0)' }}>
      {/* Top nav */}
      <header style={{ position: 'sticky', top: 0, zIndex: 10, background: 'color-mix(in oklch, var(--bg-0) 88%, transparent)', backdropFilter: 'blur(10px)', borderBottom: '1px solid var(--line-soft)' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', padding: '14px 32px', display: 'flex', alignItems: 'center', gap: 24 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <CMMark />
            <span style={{ fontWeight: 600, color: 'var(--fg-0)', letterSpacing: '-0.01em' }}>CoreMind Vault</span>
          </div>
          <nav style={{ display: 'flex', gap: 24, marginLeft: 32, fontSize: 13, color: 'var(--fg-2)' }}>
            <a>Produkt</a><a>On-prem</a><a>Sikkerhed</a><a>Demo</a><a>Docs</a>
          </nav>
          <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
            <button className="btn btn-ghost btn-sm">Log ind</button>
            <button className="btn btn-primary btn-sm">Tal med os</button>
          </div>
        </div>
      </header>

      {/* Hero */}
      <section style={{ maxWidth: 1200, margin: '0 auto', padding: '72px 32px 64px', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64, alignItems: 'center' }}>
        <div>
          <div className="chip neutral" style={{ marginBottom: 20 }}><I name="shield" className="icon-sm"/> EU Data Boundary · GDPR DPA · EU-hosted</div>
          <h1 style={{ fontSize: 56, lineHeight: 1.02, letterSpacing: '-0.025em', fontWeight: 600, marginBottom: 20 }}>
            Overblik over alt<br/>
            <span style={{ color: 'var(--primary-strong)' }}>det I ved I skal.</span>
          </h1>
          <p style={{ fontSize: 18, color: 'var(--fg-1)', lineHeight: 1.5, maxWidth: 500, marginBottom: 32 }}>
            AI der styrker jeres rådgivning — ikke erstatter den. Hvert svar peger direkte på afsnittet i PDF&rsquo;en, så I kan verificere og stå på mål.
          </p>
          <div style={{ display: 'flex', gap: 12, marginBottom: 40 }}>
            <button className="btn btn-primary btn-lg">Tal med os <I name="chevronRight" className="icon-sm"/></button>
            <button className="btn btn-ghost btn-lg"><I name="play" className="icon-sm"/> Se 2-min demo</button>
          </div>
          <div style={{ display: 'flex', gap: 24, fontSize: 12, color: 'var(--fg-2)' }}>
            <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><I name="check" className="icon-sm" style={{color:'var(--mode-green)'}}/> Kilde på hvert svar</span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><I name="check" className="icon-sm" style={{color:'var(--mode-green)'}}/> Adgangskontrol per rolle</span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><I name="check" className="icon-sm" style={{color:'var(--mode-green)'}}/> Fuld audit-log</span>
          </div>
        </div>

        {/* Demo mock */}
        <div className="card" style={{ padding: 20, boxShadow: 'var(--shadow-3)', position: 'relative' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14, fontSize: 11, color: 'var(--fg-3)' }}>
            <span style={{ display: 'flex', gap: 4 }}>
              <span style={{ width: 8, height: 8, borderRadius: 99, background: 'var(--line-strong)' }}/>
              <span style={{ width: 8, height: 8, borderRadius: 99, background: 'var(--line-strong)' }}/>
              <span style={{ width: 8, height: 8, borderRadius: 99, background: 'var(--line-strong)' }}/>
            </span>
            <span className="mono" style={{ marginLeft: 8 }}>demo.coremindvault.com</span>
            <span className="chip green" style={{ marginLeft: 'auto' }}><I name="dot" className="icon-sm"/>Foreslåede</span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 12 }}>
            <div style={{ background: 'var(--primary)', color: 'var(--primary-fg)', padding: '10px 14px', borderRadius: '12px 12px 4px 12px', fontSize: 13, fontWeight: 500, maxWidth: '75%' }}>
              Hvad gør jeg ved klor-udslip?
            </div>
          </div>
          <div style={{ background: 'var(--bg-2)', padding: '12px 14px', borderRadius: '12px 12px 12px 4px', fontSize: 13, lineHeight: 1.5, marginBottom: 10 }}>
            {demoStep >= 0 && 'Isolér området'}{demoStep >= 1 && ', evakuér 100 m radius vinduespil retning'}{demoStep >= 2 && ', påfør SCBA og klor-kemikaliedragt'}{demoStep >= 3 && '. Kontakt vagthavende ved eskalering.'}
            {demoStep < 3 && <span style={{ display: 'inline-block', width: 6, height: 14, background: 'var(--fg-2)', marginLeft: 2, verticalAlign: 'middle', animation: 'blink 1s infinite' }}/>}
          </div>
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
            <span className="chip blue"><I name="filePdf" className="icon-sm"/>Brandprocedure-2024 § 4.2 · s. 12</span>
            <span className="chip blue"><I name="filePdf" className="icon-sm"/>Kemi-datablad-klor · s. 3</span>
          </div>
          <div style={{ position: 'absolute', top: -10, right: -10, background: 'var(--bg-2)', border: '1px solid var(--line)', padding: '6px 10px', borderRadius: 20, fontSize: 11, color: 'var(--fg-2)', display: 'flex', alignItems: 'center', gap: 6, boxShadow: 'var(--shadow-2)' }}>
            <I name="zap" className="icon-sm" style={{color:'var(--mode-amber)'}}/> 2,1 s svartid
          </div>
        </div>
      </section>

      {/* How it works — 3 trin */}
      <section style={{ maxWidth: 1200, margin: '0 auto', padding: '80px 32px' }}>
        <div style={{ marginBottom: 48, textAlign: 'center', maxWidth: 720, marginLeft: 'auto', marginRight: 'auto' }}>
          <span className="label" style={{ color: 'var(--primary-strong)' }}>Sådan arbejder I med Vault</span>
          <h2 style={{ fontSize: 44, letterSpacing: '-0.025em', marginTop: 12, lineHeight: 1.05 }}>Jeres viden.<br/><span style={{ color: 'var(--primary-strong)' }}>Fundet frem. Uden omveje.</span></h2>
          <p style={{ color: 'var(--fg-2)', marginTop: 16, fontSize: 16 }}>Tre trin. Hver gang. Uden overraskelser.</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {[
            { n: '01', mark: '↑', t: 'I lægger ind', d: 'Jeres politikker, procedurer, datablade. ACL per rolle.', icon: 'upload' },
            { n: '02', mark: '✦', t: 'I spørger', d: 'Som I ville spørge en erfaren kollega. Vi finder de præcise afsnit, der gælder — med sidehenvisning.', icon: 'sparkle' },
            { n: '03', mark: '✓', t: 'I beslutter', d: 'Hvert svar har kilde. I verificerer, tilpasser og står på mål.', icon: 'check' },
          ].map(s => (
            <div key={s.n} className="card" style={{ padding: 32 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
                <span className="mono" style={{ fontSize: 11, color: 'var(--fg-3)' }}>{s.n}</span>
                <span style={{ fontSize: 16, color: 'var(--primary-strong)', fontWeight: 600 }}>{s.mark}</span>
                <div style={{ flex: 1, height: 1, background: 'var(--line-soft)' }}/>
                <div style={{ width: 36, height: 36, borderRadius: 8, background: 'var(--primary-soft)', color: 'var(--primary-strong)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <I name={s.icon} className="icon-lg"/>
                </div>
              </div>
              <h3 style={{ fontSize: 22, marginBottom: 10, letterSpacing: '-0.01em' }}>{s.t}</h3>
              <p style={{ fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.55 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* On-prem */}
      <section style={{ background: 'var(--bg-1)', borderTop: '1px solid var(--line-soft)', borderBottom: '1px solid var(--line-soft)' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', padding: '72px 32px', display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 56, alignItems: 'start' }}>
          <div>
            <span className="label" style={{ color: 'var(--primary-strong)' }}>On-premise option</span>
            <h2 style={{ fontSize: 32, letterSpacing: '-0.02em', marginTop: 8, marginBottom: 16 }}>Jeres data, jeres infrastruktur</h2>
            <p style={{ color: 'var(--fg-2)', marginBottom: 20, lineHeight: 1.6 }}>Vault kan køre som kontrol-plan mod jeres egen LLM, vektor-database og filsystem. Ingen dokumenter eller prompts forlader jeres netværk.</p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <button className="btn btn-primary"><I name="mail" className="icon-sm"/> Book teknisk samtale</button>
              <button className="btn btn-ghost"><I name="file" className="icon-sm"/> Arkitektur-doc</button>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            {pillars.map(p => (
              <div key={p.t} className="card" style={{ padding: 24 }}>
                <div style={{ width: 40, height: 40, borderRadius: 8, background: 'var(--primary-soft)', color: 'var(--primary-strong)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
                  <I name={p.icon} className="icon-lg"/>
                </div>
                <h3 style={{ fontSize: 16, marginBottom: 8 }}>{p.t}</h3>
                <p style={{ fontSize: 13, color: 'var(--fg-2)', lineHeight: 1.55 }}>{p.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Kontakt */}
      <section style={{ maxWidth: 1200, margin: '0 auto', padding: '24px 32px 96px' }}>
        <div className="card" style={{ padding: 48, background: 'linear-gradient(135deg, color-mix(in oklch, var(--primary) 8%, var(--bg-1)), var(--bg-1))', borderColor: 'var(--primary)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48, alignItems: 'center' }}>
            <div>
              <span className="label" style={{ color: 'var(--primary-strong)' }}>Kom i gang</span>
              <h2 style={{ fontSize: 36, letterSpacing: '-0.02em', marginTop: 8, marginBottom: 16, lineHeight: 1.1 }}>Vi laver et tilbud der passer</h2>
              <p style={{ color: 'var(--fg-1)', lineHeight: 1.6, marginBottom: 24, fontSize: 15 }}>Vi skræddersyr setup + pris til jeres størrelse, brancher og compliance-krav. Ingen licens-surprise. Alle planer har EU-hosting, audit log og ubegrænset adgangskontrol.</p>
              <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                <button className="btn btn-primary btn-lg"><I name="mail" className="icon-sm"/> Skriv til os</button>
                <button className="btn btn-ghost btn-lg"><I name="clock" className="icon-sm"/> Book 20-min samtale</button>
              </div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {['Startup-pilot (op til 10 brugere)', 'SMB (50-200 brugere)', 'Beredskab / kommunal-sektor', 'Enterprise (dedikeret shard)', 'On-prem med CoreMind-drift'].map(t => (
                <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px', background: 'var(--bg-2)', border: '1px solid var(--line-soft)', borderRadius: 8 }}>
                  <span style={{ width: 6, height: 6, borderRadius: 99, background: 'var(--primary-strong)', flexShrink: 0 }}/>
                  <span style={{ fontSize: 13, color: 'var(--fg-1)' }}>{t}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Security */}
      <section style={{ background: 'var(--bg-1)', borderTop: '1px solid var(--line-soft)', borderBottom: '1px solid var(--line-soft)' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', padding: '72px 32px', display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 64 }}>
          <div>
            <span className="label" style={{ color: 'var(--primary-strong)' }}>Sikkerhed</span>
            <h2 style={{ fontSize: 32, letterSpacing: '-0.02em', marginTop: 8, marginBottom: 16 }}>Bygget for kommuner og kritisk infrastruktur</h2>
            <p style={{ color: 'var(--fg-2)', marginBottom: 24 }}>Vi arbejder ud fra zero-trust. Hver request valideres på tenant-id, hver chunk har ACL, hver handling logges.</p>
            <div style={{ display: 'flex', gap: 12 }}>
              <span className="chip neutral">ISO 27001 (igangværende)</span>
              <span className="chip neutral">GDPR DPA</span>
              <span className="chip neutral">EU Data Boundary</span>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            {[
              { i: 'shield', t: 'EU Data Boundary', d: 'Al data, inference og backup ligger i EU. Verificér i audit log.' },
              { i: 'lock', t: 'ACL per dokument', d: 'Kontroller hvem der må se hvad. Ned til enkelt-chunk niveau.' },
              { i: 'eye', t: 'Fuld audit log', d: 'Hver læsning, hver chat, hver godkendelse. Eksportér til CSV / PDF.' },
              { i: 'key', t: 'Multi-provider auth', d: 'Entra SSO, Google Workspace eller magiske link — du vælger.' },
            ].map(c => (
              <div key={c.t} style={{ background: 'var(--bg-0)', border: '1px solid var(--line-soft)', borderRadius: 10, padding: 18 }}>
                <div style={{ width: 32, height: 32, borderRadius: 7, background: 'var(--primary-soft)', color: 'var(--primary-strong)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 12 }}>
                  <I name={c.i} className="icon"/>
                </div>
                <h3 style={{ fontSize: 14, marginBottom: 4 }}>{c.t}</h3>
                <p style={{ fontSize: 12, color: 'var(--fg-2)' }}>{c.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section style={{ maxWidth: 900, margin: '0 auto', padding: '80px 32px' }}>
        <div style={{ marginBottom: 40 }}>
          <span className="label" style={{ color: 'var(--primary-strong)' }}>FAQ</span>
          <h2 style={{ fontSize: 32, letterSpacing: '-0.02em', marginTop: 8 }}>Ofte stillede spørgsmål</h2>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {faqs.map((f, i) => (
            <div key={i} className="card" style={{ padding: 0, overflow: 'hidden' }}>
              <button onClick={() => setFaq(faq === i ? -1 : i)} style={{ width: '100%', padding: '18px 20px', display: 'flex', alignItems: 'center', textAlign: 'left', fontSize: 15, fontWeight: 500, color: 'var(--fg-0)' }}>
                {f.q}
                <I name="chevronDown" style={{ marginLeft: 'auto', transition: 'transform 0.2s', transform: faq === i ? 'rotate(180deg)' : 'none' }}/>
              </button>
              {faq === i && (
                <div style={{ padding: '0 20px 20px', color: 'var(--fg-2)', fontSize: 14, lineHeight: 1.6, borderTop: '1px solid var(--line-soft)', paddingTop: 16 }}>
                  {f.a}
                </div>
              )}
            </div>
          ))}
        </div>
      </section>

      {/* Footer */}
      <footer style={{ borderTop: '1px solid var(--line-soft)', background: 'var(--bg-1)' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', padding: '48px 32px 32px', display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: 48 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
              <CMMark/>
              <span style={{ fontWeight: 600, color: 'var(--fg-0)' }}>CoreMind Vault</span>
            </div>
            <p style={{ fontSize: 12, color: 'var(--fg-2)', maxWidth: 280, lineHeight: 1.6 }}>AI-assistent til jeres virksomheds dokumenter. Bygget af CoreMind Systems ApS · Horsens, DK.</p>
          </div>
          {[
            { t: 'Produkt', l: ['Features', 'On-prem', 'Sikkerhed', 'Priser', 'Produkt-demo'] },
            { t: 'Virksomhed', l: ['Om CoreMind', 'Kontakt', 'Helix', 'Book samtale'] },
            { t: 'Juridisk', l: ['Privatlivspolitik', 'DPA', 'Vilkår', 'Cookies', 'EU AI Act'] },
          ].map(c => (
            <div key={c.t}>
              <h4 style={{ fontSize: 12, color: 'var(--fg-2)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 12 }}>{c.t}</h4>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
                {c.l.map(x => <li key={x} style={{ fontSize: 13, color: 'var(--fg-1)' }}>{x}</li>)}
              </ul>
            </div>
          ))}
        </div>
        <div style={{ maxWidth: 1200, margin: '0 auto', padding: '20px 32px', borderTop: '1px solid var(--line-soft)', display: 'flex', fontSize: 12, color: 'var(--fg-3)' }}>
          <span>© 2026 CoreMind Systems ApS · CVR 45753255 · Juvelvej 80, 8700 Horsens</span>
          <span style={{ marginLeft: 'auto' }} className="mono">v0.1.0</span>
        </div>
      </footer>
      <style>{`@keyframes blink { 0%,50%{opacity:1} 51%,100%{opacity:0} }`}</style>
    </div>
  );
};
window.A1Landing = A1Landing;