// Landing — technical brief abstract (not SaaS marketing).
// Positions the platform honestly as a v1 pilot preview built on the dev brief
// anchors (HIPAA / NIST CSF 2.0 / NIST 800-61 / OWASP ASVS / WCAG 2.2).
function LandingPage({ onEnter }) {
  const openBrief = () => window.open('/medical_cyber_training_platform_dev_brief.pdf', '_blank', 'noopener');

  const scopeItems = [
    { icon: I.Lock,        area: 'Identity',    must: 'Secure login with sessions. RBAC. MFA-ready from the start.',     why: 'Nothing else works if we can\'t trust who\'s on the other end.' },
    { icon: I.BookOpen,    area: 'Learning',    must: 'Assignments, content, progress, due dates, completion records.',  why: 'The main job of the platform.' },
    { icon: I.CheckCircle, area: 'Assessment',  must: 'Quizzes with pass thresholds, retakes, and score history.',       why: 'Shows they actually understood the lesson.' },
    { icon: I.Target,      area: 'Simulation',  must: 'Phishing simulations plus branching clinical-security scenarios.', why: 'This is where habits actually change.' },
    { icon: I.Flag,        area: 'Reporting',   must: 'One-click reporting and a triage queue for the SOC.',             why: 'Noticing a bad email is useless if nobody reports it.' },
    { icon: I.FileText,    area: 'Evidence',    must: 'Dashboards, audit logs, and exports for compliance.',             why: 'Auditors need numbers they can reproduce.' },
  ];

  const outOfScope = [
    'Generative AI in the critical path',
    'Native mobile app',
    'Multi-tenant architecture',
    'Full HR or SIEM integration',
    'Heavy gamification',
    'Replacing the enterprise LMS',
  ];

  const anchors = [
    { code: '01', name: 'HIPAA Security Rule',   lines: ['Workforce awareness', 'ePHI safeguards', 'Sanctions and admin controls'] },
    { code: '02', name: 'NIST CSF 2.0',          lines: ['Govern, Identify, Protect', 'Detect, Respond, Recover', 'Used as the overall scaffold'] },
    { code: '03', name: 'NIST SP 800-61 Rev. 3', lines: ['Incident response guidance', 'Pairs with CSF 2.0', 'Triage and escalation'] },
    { code: '04', name: 'OWASP ASVS',            lines: ['Web app verification checklist', 'Reviewed during testing', 'Top 10 covered by default'] },
    { code: '05', name: 'WCAG 2.2 AA',           lines: ['Keyboard navigation', 'Visible focus, solid contrast', 'Error messages that make sense'] },
  ];

  const pilotCriteria = [
    'Staff can sign in, find their assigned items, finish the training, and file a report without getting stuck.',
    'Admins can write and publish content on their own. No code changes.',
    'Managers can see completion and weak spots broken down by role or ward.',
    'Every simulation action and incident report is stored and can be exported.',
    'Sensitive admin actions land in the audit log.',
    'Security and accessibility checks pass before the pilot opens.',
  ];

  const pilotMetrics = [
    ['Completion rate',     'For required modules'],
    ['Phishing click rate', 'On simulated campaigns'],
    ['Reporting rate',      'How many flag it when they see it'],
    ['Time to report',      'From landing in the inbox to the SOC ticket'],
    ['Quiz pass rate',      'Against the 80% bar'],
    ['User friction',       'Where people drop off'],
  ];

  return (
    <div style={{minHeight: '100vh', background: 'white', display: 'flex', flexDirection: 'column', color: 'var(--ink)'}}>

      {/* Header */}
      <header className="landing-header" style={{borderBottom: '1px solid var(--border)', background: 'white', position: 'sticky', top: 0, zIndex: 40, padding: '0 40px', height: 64, display: 'flex', alignItems: 'center', gap: 40}}>
        <button onClick={onEnter} style={{display: 'flex', alignItems: 'center', gap: 10, background: 'transparent', border: 0, padding: 0, cursor: 'pointer'}}>
          <span style={{width: 28, height: 28, background: 'var(--navy)', display: 'grid', placeItems: 'center', border: '1px solid var(--navy)'}}>
            <I.Shield size={14} color="white"/>
          </span>
          <span style={{fontFamily: 'var(--serif)', fontWeight: 600, color: 'var(--navy)', fontSize: 16, letterSpacing: '-0.005em'}}>MediShield</span>
        </button>
        <nav className="landing-nav" style={{display: 'flex', gap: 26}}>
          {[
            ['Brief',            '#brief'],
            ['Scope',            '#scope'],
            ['Architecture',     '#architecture'],
            ['Anchors',          '#anchors'],
            ['Pilot criteria',   '#pilot'],
          ].map(([l, h]) => (
            <a key={l} href={h} style={{fontSize: 12.5, color: 'var(--ink-2)', fontWeight: 500, textDecoration: 'none', padding: '6px 0', borderBottom: '1px solid transparent', transition: 'border-color 0.15s'}}
               onMouseEnter={e => e.currentTarget.style.borderBottomColor = 'var(--navy)'}
               onMouseLeave={e => e.currentTarget.style.borderBottomColor = 'transparent'}>{l}</a>
          ))}
        </nav>
        <div style={{marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 8}}>
          <button className="btn btn-outline btn-sm" onClick={openBrief} style={{fontSize: 12}}>
            <I.FileText size={12}/> Read the brief
          </button>
          <button className="btn btn-navy btn-sm" onClick={onEnter} style={{fontSize: 12}}>Enter the demo <I.ChevronRight size={11}/></button>
        </div>
      </header>

      {/* HERO — technical-brief abstract */}
      <section id="brief" style={{borderBottom: '1px solid var(--border)'}}>
        <div style={{maxWidth: 1240, margin: '0 auto', padding: '72px 40px 56px', display: 'grid', gridTemplateColumns: '1.25fr 1fr', gap: 64, alignItems: 'start'}}>
          <div>
            <div style={{display: 'flex', alignItems: 'center', gap: 12, marginBottom: 28, paddingBottom: 16, borderBottom: '1px solid var(--border-2)'}}>
              <span style={{fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: 'var(--coral-700)', letterSpacing: '0.12em', fontWeight: 700}}>DEVELOPER BRIEF / 2026.04</span>
              <span style={{width: 1, height: 10, background: 'var(--border)'}}/>
              <span style={{fontSize: 11, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600}}>For web development handoff</span>
            </div>
            <h1 className="landing-hero" style={{fontFamily: 'var(--serif)', fontSize: 48, lineHeight: 1.1, letterSpacing: '-0.02em', color: 'var(--navy)', marginBottom: 22, fontWeight: 600, maxWidth: 680}}>
              Cybersecurity training built for the people who actually run a hospital.
            </h1>
            <p style={{fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.7, marginBottom: 24, maxWidth: 620}}>
              Nurses get short lessons they can finish between shifts. Managers get the numbers the auditors want. IT gets a platform that doesn't bake AI into anything that has to be defensible later. That's the whole thing.
            </p>
            <div className="callout callout-gray" style={{marginBottom: 32, maxWidth: 620}}>
              <I.ShieldCheck size={16} style={{flexShrink: 0, marginTop: 1}}/>
              <div style={{fontSize: 12.5, lineHeight: 1.6}}>
                <div className="callout-title">Blunt implementation rule</div>
                <em>"The first release must be stable, secure, measurable, and medically relevant. If the team chases clever features too early, the platform will become slower to build and harder to validate."</em>
              </div>
            </div>
            <div style={{display: 'flex', gap: 10, marginBottom: 12}}>
              <button className="btn btn-navy btn-lg" onClick={onEnter} style={{height: 44, fontSize: 13.5, padding: '0 22px'}}>
                Enter the live demo <I.ChevronRight size={13}/>
              </button>
              <button className="btn btn-outline btn-lg" onClick={openBrief} style={{height: 44, fontSize: 13.5, padding: '0 22px'}}>
                <I.FileText size={13}/> Read technical brief (PDF, 8 pp.)
              </button>
            </div>
          </div>

          {/* Right — audience & stance table (from brief) */}
          <aside style={{border: '1px solid var(--border)', background: '#FCFCFD'}}>
            <div style={{padding: '12px 18px', borderBottom: '1px solid var(--border-2)', background: 'var(--navy)', color: 'white', display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
              <span style={{fontFamily: 'JetBrains Mono, monospace', fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.1em'}}>TAB. 01 — PROJECT STANCE</span>
              <span style={{fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: '#7DA0C9'}}>excerpt · dev brief</span>
            </div>
            <div style={{padding: 22}}>
              {[
                ['Who this doc is for', 'Web developers, technical lead, product owner'],
                ['Where it runs',       'Hospitals, clinics, staff training'],
                ['What v1 is',          'A small, disciplined MVP. Not trying to replace the LMS.'],
                ['Where AI sits',       'Plumbing is ready. Nothing live calls a model in v1.'],
              ].map(([l, v], i, a) => (
                <div key={i} style={{paddingBottom: 14, marginBottom: 14, borderBottom: i < a.length - 1 ? '1px solid var(--border-2)' : 'none'}}>
                  <div style={{fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600, marginBottom: 6}}>{l}</div>
                  <div style={{fontSize: 13, color: 'var(--navy)', fontWeight: 600, lineHeight: 1.45}}>{v}</div>
                </div>
              ))}
            </div>
          </aside>
        </div>
      </section>

      {/* § 01 — v1 IN SCOPE */}
      <section id="scope" style={{padding: '80px 40px', borderBottom: '1px solid var(--border)', background: 'white'}}>
        <div style={{maxWidth: 1240, margin: '0 auto'}}>
          <div style={{display: 'grid', gridTemplateColumns: '1fr 3fr', gap: 56, marginBottom: 40}}>
            <div>
              <div style={{fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: 'var(--coral-700)', letterSpacing: '0.12em', fontWeight: 700, marginBottom: 18}}>§ 01 — IN SCOPE</div>
              <div style={{fontSize: 11, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 600}}>Six modules. One workflow.</div>
            </div>
            <div>
              <h2 style={{fontFamily: 'var(--serif)', fontSize: 32, lineHeight: 1.2, letterSpacing: '-0.015em', color: 'var(--navy)', fontWeight: 600, marginBottom: 14, maxWidth: 780}}>
                It has to change habits on the ward. Not just produce a completion certificate.
              </h2>
              <p style={{fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.7, maxWidth: 740}}>
                Every module depends on the one before it. Content, permissions, simulations, and dashboards all key off the user's role and ward. Get those right once and the rest becomes much easier.
              </p>
            </div>
          </div>

          <div style={{display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: '1px solid var(--border)', borderTop: '2px solid var(--navy)'}}>
            {scopeItems.map((s, i) => {
              const Icon = s.icon;
              const col = i % 3;
              const row = Math.floor(i / 3);
              return (
                <div key={s.area} style={{padding: 24, borderRight: col < 2 ? '1px solid var(--border-2)' : 'none', borderBottom: row < 1 ? '1px solid var(--border-2)' : 'none'}}>
                  <div style={{display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12}}>
                    <span style={{width: 30, height: 30, background: 'var(--teal-100)', color: 'var(--teal)', display: 'grid', placeItems: 'center', border: '1px solid #BFE3DF'}}>
                      <Icon size={15}/>
                    </span>
                    <span style={{fontFamily: 'var(--serif)', fontSize: 18, fontWeight: 600, color: 'var(--navy)', letterSpacing: '-0.005em'}}>{s.area}</span>
                  </div>
                  <div style={{fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.6, marginBottom: 10}}>{s.must}</div>
                  <div style={{fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600, marginBottom: 4}}>Why</div>
                  <div style={{fontSize: 12, color: 'var(--ink-3)', lineHeight: 1.55}}>{s.why}</div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* § 02 — v1 OUT OF SCOPE */}
      <section style={{padding: '80px 40px', borderBottom: '1px solid var(--border)', background: 'var(--bg)'}}>
        <div style={{maxWidth: 1240, margin: '0 auto'}}>
          <div style={{display: 'grid', gridTemplateColumns: '1fr 3fr', gap: 56, marginBottom: 32}}>
            <div>
              <div style={{fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: 'var(--coral-700)', letterSpacing: '0.12em', fontWeight: 700, marginBottom: 18}}>§ 02 — OUT OF SCOPE</div>
              <div style={{fontSize: 11, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 600}}>What this release is not.</div>
            </div>
            <div>
              <h2 style={{fontFamily: 'var(--serif)', fontSize: 28, lineHeight: 1.25, letterSpacing: '-0.015em', color: 'var(--navy)', fontWeight: 600, marginBottom: 14, maxWidth: 780}}>
                What we're not doing in this release.
              </h2>
              <p style={{fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.7, maxWidth: 740}}>
                Some of this lands in phase 2 or 3. Doing it all now would drag the release out for months and make it hard to tell what actually works.
              </p>
            </div>
          </div>

          <div style={{display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginBottom: 28}}>
            {outOfScope.map(item => (
              <div key={item} style={{padding: '14px 16px', border: '1px dashed var(--border)', background: '#FCFCFD', display: 'flex', alignItems: 'center', gap: 10}}>
                <I.XCircle size={15} color="var(--ink-4)"/>
                <span style={{fontSize: 13, color: 'var(--ink-3)', textDecoration: 'line-through', textDecorationColor: 'var(--ink-4)', fontWeight: 500}}>{item}</span>
              </div>
            ))}
          </div>

          <div className="callout callout-gray" style={{maxWidth: 920}}>
            <I.AlertTriangle size={16} style={{flexShrink: 0, marginTop: 1}}/>
            <div style={{fontSize: 12.5, lineHeight: 1.6}}>
              <div className="callout-title">The rule we keep reminding ourselves of</div>
              Don't chase clever features early. The first release has to be <strong>stable, secure, measurable, and clinically useful</strong>. The rest can wait.
            </div>
          </div>
        </div>
      </section>

      {/* § 03 — ARCHITECTURE */}
      <section id="architecture" style={{padding: '80px 40px', borderBottom: '1px solid var(--border)', background: 'white'}}>
        <div style={{maxWidth: 1240, margin: '0 auto'}}>
          <div style={{display: 'grid', gridTemplateColumns: '1fr 3fr', gap: 56, marginBottom: 40}}>
            <div>
              <div style={{fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: 'var(--coral-700)', letterSpacing: '0.12em', fontWeight: 700, marginBottom: 18}}>§ 03 — ARCHITECTURE</div>
              <div style={{fontSize: 11, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 600}}>Service boundaries.</div>
            </div>
            <div>
              <h2 style={{fontFamily: 'var(--serif)', fontSize: 28, lineHeight: 1.25, letterSpacing: '-0.015em', color: 'var(--navy)', fontWeight: 600, marginBottom: 14, maxWidth: 780}}>
                The important stuff runs on plain backend code. The AI slot exists, but nothing's plugged into it yet.
              </h2>
              <p style={{fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.7, maxWidth: 740}}>
                The frontend never calls a model. Login, permissions, scoring, audit records, compliance exports. All of it runs on normal backend code. That way the evidence we hand an auditor doesn't suddenly change because someone swapped a prompt.
              </p>
            </div>
          </div>

          {/* Architecture SVG — 3 rows, AI boundary offset to the right so no arrow
             ever crosses a box. Core Backend fans out: solid arrows down to
             v1 services, dashed arrow right-down to the AI boundary. */}
          <div style={{border: '1px solid var(--border)', background: '#FCFCFD', padding: '36px 32px'}}>
            <svg viewBox="0 0 1040 340" style={{width: '100%', height: 'auto', maxHeight: 380}} role="img" aria-label="System architecture diagram">
              <defs>
                <marker id="arrowNavy" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto" markerUnits="strokeWidth">
                  <path d="M0,0 L0,6 L8,3 z" fill="var(--navy)"/>
                </marker>
                <marker id="arrowAmber" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto" markerUnits="strokeWidth">
                  <path d="M0,0 L0,6 L8,3 z" fill="var(--amber)"/>
                </marker>
              </defs>

              {/* Solid nodes — v1 core */}
              {[
                { x: 40,  y: 20,  w: 160, h: 56, label: 'Web Frontend',        sub: 'Learner & admin UI' },
                { x: 280, y: 20,  w: 180, h: 56, label: 'Core Backend API',    sub: 'Auth · RBAC · scoring' },
                { x: 520, y: 20,  w: 160, h: 56, label: 'Data Services',       sub: 'Relational · assets · jobs' },
                { x: 40,  y: 260, w: 180, h: 56, label: 'Admin Compliance',    sub: 'Roles · content lifecycle' },
                { x: 280, y: 260, w: 180, h: 56, label: 'Analytics Dashboards', sub: 'Managers · reports' },
                { x: 520, y: 260, w: 180, h: 56, label: 'Audit Evidence',      sub: 'Logs · exports · retention' },
              ].map((n, i) => (
                <g key={i}>
                  <rect x={n.x} y={n.y} width={n.w} height={n.h} fill="white" stroke="var(--navy)" strokeWidth="1.5"/>
                  <text x={n.x + n.w/2} y={n.y + 24} textAnchor="middle" fontFamily="IBM Plex Serif, serif" fontSize="14" fontWeight="600" fill="var(--navy)">{n.label}</text>
                  <text x={n.x + n.w/2} y={n.y + 42} textAnchor="middle" fontFamily="Inter, sans-serif" fontSize="11" fill="var(--ink-3)">{n.sub}</text>
                </g>
              ))}

              {/* Dashed nodes — Phase 2 reserved, offset to the right, middle band */}
              {[
                { x: 700, y: 140, w: 160, h: 56, label: 'AI Orchestration',   sub: 'Reserved · Phase 2' },
                { x: 880, y: 140, w: 160, h: 56, label: 'Future LLM Service', sub: 'Provider-agnostic' },
              ].map((n, i) => (
                <g key={i}>
                  <rect x={n.x} y={n.y} width={n.w} height={n.h} fill="#FEF3E2" stroke="var(--amber)" strokeWidth="1.5" strokeDasharray="5 4"/>
                  <text x={n.x + n.w/2} y={n.y + 24} textAnchor="middle" fontFamily="IBM Plex Serif, serif" fontSize="13" fontWeight="600" fill="#7C4A06">{n.label}</text>
                  <text x={n.x + n.w/2} y={n.y + 42} textAnchor="middle" fontFamily="Inter, sans-serif" fontSize="10.5" fill="#7C4A06">{n.sub}</text>
                </g>
              ))}

              {/* Row 1 — horizontal v1 flow */}
              <line x1="200" y1="48" x2="275" y2="48" stroke="var(--navy)" strokeWidth="1.5" markerEnd="url(#arrowNavy)"/>
              <line x1="460" y1="48" x2="515" y2="48" stroke="var(--navy)" strokeWidth="1.5" markerEnd="url(#arrowNavy)"/>

              {/* Core Backend → v1 operational row (solid, fan-out, all clear of AI column) */}
              <line x1="300" y1="76" x2="130" y2="256" stroke="var(--navy)" strokeWidth="1.5" markerEnd="url(#arrowNavy)"/>
              <line x1="370" y1="76" x2="370" y2="256" stroke="var(--navy)" strokeWidth="1.5" markerEnd="url(#arrowNavy)"/>
              <line x1="440" y1="76" x2="610" y2="256" stroke="var(--navy)" strokeWidth="1.5" markerEnd="url(#arrowNavy)"/>

              {/* Core Backend → AI Orchestration (dashed, reserved — goes down-right, clears Data Services) */}
              <line x1="460" y1="76" x2="695" y2="158" stroke="var(--amber)" strokeWidth="1.5" strokeDasharray="5 4" markerEnd="url(#arrowAmber)"/>
              {/* AI Orchestration → Future LLM (dashed, same-row horizontal) */}
              <line x1="860" y1="168" x2="875" y2="168" stroke="var(--amber)" strokeWidth="1.5" strokeDasharray="5 4" markerEnd="url(#arrowAmber)"/>
            </svg>

            {/* Legend */}
            <div style={{display: 'flex', gap: 24, marginTop: 24, paddingTop: 20, borderTop: '1px solid var(--border-2)', fontSize: 11.5, color: 'var(--ink-3)'}}>
              <span style={{display: 'flex', alignItems: 'center', gap: 8}}>
                <span style={{width: 16, height: 10, border: '1.5px solid var(--navy)', background: 'white'}}/>
                Shipping in v1
              </span>
              <span style={{display: 'flex', alignItems: 'center', gap: 8}}>
                <span style={{width: 16, height: 10, border: '1.5px dashed var(--amber)', background: '#FEF3E2'}}/>
                Slot for phase 2, empty for now
              </span>
            </div>
          </div>

          <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, marginTop: 24}}>
            <div className="callout callout-gray">
              <I.ShieldCheck size={16} style={{flexShrink: 0, marginTop: 1}}/>
              <div style={{fontSize: 12.5, lineHeight: 1.6}}>
                <div className="callout-title">What never becomes AI</div>
                Login, permissions, scoring, audit records, compliance exports. All of it is plain backend code. The browser doesn't talk to a model at any point.
              </div>
            </div>
            <div className="callout callout-gray">
              <I.Compass size={16} style={{flexShrink: 0, marginTop: 1}}/>
              <div style={{fontSize: 12.5, lineHeight: 1.6}}>
                <div className="callout-title">What AI does when it shows up</div>
                Drafts content. Suggests remediation text. Writes a summary for a manager. A human signs it off before anyone sees it. Never the last word on anything that matters.
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* § 04 — DESIGN ANCHORS */}
      <section id="anchors" style={{padding: '80px 40px', background: 'var(--navy)', color: 'white', borderBottom: '1px solid var(--navy-700)'}}>
        <div style={{maxWidth: 1240, margin: '0 auto'}}>
          <div style={{display: 'grid', gridTemplateColumns: '1fr 3fr', gap: 56, marginBottom: 40}}>
            <div>
              <div style={{fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: '#E8736A', letterSpacing: '0.12em', fontWeight: 700, marginBottom: 18}}>§ 04 — DESIGN ANCHORS</div>
              <div style={{fontSize: 11, color: '#7DA0C9', textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 600}}>Standards we check against.</div>
            </div>
            <div>
              <h2 style={{fontFamily: 'var(--serif)', fontSize: 28, lineHeight: 1.25, letterSpacing: '-0.015em', color: 'white', fontWeight: 600, marginBottom: 14, maxWidth: 780}}>
                Real standards, not badges for the homepage.
              </h2>
              <p style={{fontSize: 14, color: '#CDD8E6', lineHeight: 1.7, maxWidth: 740}}>
                The five below are what we actually check against while building. OWASP ASVS for app security. WCAG 2.2 for keyboard and screen reader users. NIST 800-61 for how incidents get triaged. HIPAA for anything touching staff or ePHI. NIST CSF 2.0 sits on top as the overall scaffold.
              </p>
            </div>
          </div>

          <div style={{display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 1, background: '#2C4A73', border: '1px solid #2C4A73'}}>
            {anchors.map(a => (
              <div key={a.code} style={{background: 'var(--navy)', padding: '22px 18px'}}>
                <div style={{display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 10, paddingBottom: 8, borderBottom: '1px solid #2C4A73'}}>
                  <span style={{fontFamily: 'var(--serif)', fontSize: 15, fontWeight: 600, color: 'white', letterSpacing: '-0.005em'}}>{a.name}</span>
                  <span style={{fontFamily: 'JetBrains Mono, monospace', fontSize: 9.5, color: '#7DA0C9', fontWeight: 600, letterSpacing: '0.05em'}}>{a.code}</span>
                </div>
                {a.lines.map((line, j) => (
                  <div key={j} style={{fontSize: 11.5, color: '#CDD8E6', lineHeight: 1.6, paddingLeft: 10, position: 'relative', marginBottom: 2}}>
                    <span style={{position: 'absolute', left: 0, color: '#0F9D9B'}}>—</span>
                    {line}
                  </div>
                ))}
              </div>
            ))}
          </div>

          <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, marginTop: 32, paddingTop: 28, borderTop: '1px solid #2C4A73'}}>
            <div style={{padding: '14px 16px', border: '1px solid #2C4A73', background: '#0A1C36'}}>
              <div style={{fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: '#7DA0C9', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600, marginBottom: 6}}>
                A hard line on AI
              </div>
              <p style={{fontSize: 12.5, color: '#CDD8E6', lineHeight: 1.6, margin: 0}}>
                A model does not decide who logs in, what you can access, what score you got, how serious an incident is, what counts as compliance evidence, or what goes in the audit log. That work stays with humans and deterministic code.
              </p>
            </div>
            <div style={{padding: '14px 16px', border: '1px solid #2C4A73', background: '#0A1C36'}}>
              <div style={{fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: '#7DA0C9', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600, marginBottom: 6}}>
                What data we use
              </div>
              <p style={{fontSize: 12.5, color: '#CDD8E6', lineHeight: 1.6, margin: 0}}>
                Development, demos, and training content use synthetic data. Real patient data goes nowhere near any of this without the proper internal approval.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* § 05 — PILOT ACCEPTANCE CRITERIA */}
      <section id="pilot" style={{padding: '80px 40px', borderBottom: '1px solid var(--border)', background: 'white'}}>
        <div style={{maxWidth: 1240, margin: '0 auto'}}>
          <div style={{display: 'grid', gridTemplateColumns: '1fr 3fr', gap: 56, marginBottom: 40}}>
            <div>
              <div style={{fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: 'var(--coral-700)', letterSpacing: '0.12em', fontWeight: 700, marginBottom: 18}}>§ 05 — PILOT CRITERIA</div>
              <div style={{fontSize: 11, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 600}}>What has to be true before it ships wider.</div>
            </div>
            <div>
              <h2 style={{fontFamily: 'var(--serif)', fontSize: 28, lineHeight: 1.25, letterSpacing: '-0.015em', color: 'var(--navy)', fontWeight: 600, marginBottom: 14, maxWidth: 780}}>
                One group first. Find the broken bits there, before everyone else sees them.
              </h2>
              <p style={{fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.7, maxWidth: 740}}>
                The checklist below has to pass before the pilot goes beyond the first ward. Numbers get captured from day one so we can look at behavior change, not guess at it.
              </p>
            </div>
          </div>

          {/* Acceptance criteria list */}
          <div style={{border: '1px solid var(--border)', marginBottom: 32}}>
            <div style={{padding: '12px 18px', background: '#FCFCFD', borderBottom: '1px solid var(--border-2)', fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: 'var(--navy)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 700}}>
              Must pass before wider rollout
            </div>
            {pilotCriteria.map((c, i, a) => (
              <div key={i} style={{padding: '14px 18px', borderBottom: i < a.length - 1 ? '1px solid var(--border-2)' : 'none', display: 'grid', gridTemplateColumns: '28px 1fr', gap: 12, alignItems: 'start'}}>
                <span style={{fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: 'var(--ink-3)', fontWeight: 700, paddingTop: 2}}>{String(i + 1).padStart(2, '0')}</span>
                <span style={{fontSize: 13.5, color: 'var(--ink-2)', lineHeight: 1.6}}>{c}</span>
              </div>
            ))}
          </div>

          {/* Metrics that will be measured */}
          <div style={{fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: 'var(--navy)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 700, marginBottom: 14}}>
            Numbers we track
          </div>
          <div style={{display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: '1px solid var(--border)'}}>
            {pilotMetrics.map(([l, s], i) => {
              const col = i % 3;
              const row = Math.floor(i / 3);
              return (
                <div key={l} style={{padding: '18px 20px', borderRight: col < 2 ? '1px solid var(--border-2)' : 'none', borderBottom: row < 1 ? '1px solid var(--border-2)' : 'none'}}>
                  <div style={{fontFamily: 'var(--serif)', fontSize: 16, fontWeight: 600, color: 'var(--navy)', letterSpacing: '-0.005em', marginBottom: 4}}>{l}</div>
                  <div style={{fontSize: 12, color: 'var(--ink-3)', lineHeight: 1.5}}>{s}</div>
                  <div style={{fontSize: 11, color: 'var(--ink-4)', marginTop: 6, fontStyle: 'italic'}}>Measured at kick-off. Checked again 90 days in.</div>
                </div>
              );
            })}
          </div>

          {/* CTA strip */}
          <div style={{marginTop: 40, paddingTop: 32, borderTop: '2px solid var(--navy)', display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap'}}>
            <button className="btn btn-navy btn-lg" onClick={onEnter} style={{height: 46, fontSize: 14, padding: '0 24px'}}>
              Enter the live demo <I.ChevronRight size={13}/>
            </button>
            <button className="btn btn-outline btn-lg" onClick={openBrief} style={{height: 46, fontSize: 14, padding: '0 24px'}}>
              <I.FileText size={13}/> Read technical brief (PDF)
            </button>
            <span style={{marginLeft: 'auto', fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.05em'}}>
              Demo build. Fake data. Runs from a laptop.
            </span>
          </div>
        </div>
      </section>

      {/* Footer — minimal */}
      <footer style={{background: 'white', padding: '28px 40px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 20, flexWrap: 'wrap', fontSize: 11.5, color: 'var(--ink-3)'}}>
        <div>
          <strong style={{color: 'var(--navy)'}}>MediShield Demo</strong>
          <span style={{margin: '0 10px', color: 'var(--border)'}}>·</span>
          Synthetic healthcare data only
          <span style={{margin: '0 10px', color: 'var(--border)'}}>·</span>
          HIPAA · NIST CSF 2.0 · OWASP ASVS · WCAG 2.2 AA
          <span style={{margin: '0 10px', color: 'var(--border)'}}>·</span>
          Tbilisi Medical Conference 2026
        </div>
        <div style={{display: 'flex', gap: 16, fontFamily: 'JetBrains Mono, monospace', fontSize: 10.5, letterSpacing: '0.06em', textTransform: 'uppercase'}}>
          <a href="#" onClick={e => {e.preventDefault(); openBrief();}} style={{color: 'var(--ink-3)', textDecoration: 'none'}}>BRIEF.PDF</a>
          <a href="#" onClick={e => {e.preventDefault(); onEnter();}} style={{color: 'var(--navy)', textDecoration: 'none', fontWeight: 700}}>LIVE DEMO →</a>
        </div>
      </footer>
    </div>
  );
}

window.LandingPage = LandingPage;
