// Standards.jsx — Standards index + one detail page per framework
const { V, MAXW, FONT } = window;

const STANDARDS = [
  {
    id: 'iso42001', name: 'ISO 42001', edition: '2023 Edition', color: V.purple, bg: V.purpleSubtle,
    tag: 'AI Management System', icon: 'cpu',
    short: 'The first certifiable standard for governing AI systems responsibly.',
    geography: 'Global — all four markets',
    purpose: 'Certifies a complete AI Management System (AIMS): a risk-based framework governing how AI systems are designed, developed, deployed, and monitored across your organization.',
    context: 'Published in 2023 as the first certifiable international standard purpose-built for AI governance. Adoption is accelerating as AI regulation — including the EU AI Act — raises the bar for demonstrable, auditable AI oversight.',
    stats: [['2023', 'Standard first published'], ['38', 'Annex A controls'], ['9', 'Control objectives']],
    covers: [
      ['AIMS scope & context', 'Defining the AI systems, use cases, and interested parties your AI management system covers.'],
      ['AI risk & impact assessment', 'A repeatable methodology for assessing AI risk and impact on individuals, groups, and society.'],
      ['Annex A controls', '38 controls across nine objectives — policy, life cycle, data, transparency, and third parties.'],
      ['Continual improvement', 'Internal audit, management review, and corrective action that keep the AIMS alive between certifications.'],
    ],
    who: 'Any organization that builds, buys, or operates AI systems and needs to demonstrate responsible governance to regulators, customers, and partners — especially alongside an existing ISO 27001 program.',
  },
  {
    id: 'iso27001', name: 'ISO 27001', edition: '2022 Edition', color: V.purple, bg: V.purpleSubtle,
    tag: 'International ISMS', icon: 'globe',
    short: 'The international gold standard for Information Security Management Systems.',
    geography: 'Global — all four markets',
    purpose: 'Certifies a complete Information Security Management System (ISMS): a risk-based, continuously improving framework covering people, process, and technology across the whole organization.',
    context: 'The international gold standard, increasingly required for government and enterprise contracts globally. The ISO 27001 certification market is valued at USD 18.6 billion in 2025 and is projected to reach USD 74.6 billion by 2035.',
    stats: [['USD 18.6B', 'Certification market (2025)'], ['USD 74.6B', 'Projected market (2035)'], ['81%', 'Planned or current adoption']],
    covers: [
      ['ISMS scope & context', 'Defining boundaries, interested parties, and the risk environment your ISMS operates within.'],
      ['Risk assessment & treatment', 'A repeatable methodology for identifying, evaluating, and treating information security risk.'],
      ['Annex A controls', '93 controls across organizational, people, physical, and technological themes.'],
      ['Continual improvement', 'Internal audit, management review, and corrective action that keep the ISMS alive between certifications.'],
    ],
    who: 'IT contractors and managed service providers competing for government and enterprise work in any of our four markets — the certification that opens the most doors internationally.',
  },
  {
    id: 'soc2', name: 'SOC 2', edition: 'Type I & Type II', color: V.purple, bg: V.purpleSubtle,
    tag: 'AICPA Attestation', icon: 'shield',
    short: 'The baseline trust attestation for US SaaS and IT service providers.',
    geography: 'Primary: United States & India',
    purpose: 'An AICPA Trust Services attestation reporting on controls relevant to security, availability, processing integrity, confidentiality, and privacy — issued as an independent auditor\'s opinion.',
    context: 'Now the baseline commercial expectation for US-based SaaS, IT service, and managed service providers rather than a differentiator. SOC 2 adoption reached 76% among audited organizations in 2025.',
    stats: [['76%', 'Adoption among audited orgs (2025)'], ['5', 'Trust Services Criteria'], ['Type I & II', 'Point-in-time & period reports']],
    covers: [
      ['Security (Common Criteria)', 'The mandatory baseline — logical access, change management, risk mitigation, and monitoring.'],
      ['Availability & integrity', 'Optional criteria covering uptime commitments and complete, accurate processing.'],
      ['Confidentiality & privacy', 'Protection of designated confidential information and personal data lifecycle handling.'],
      ['Evidence over a period', 'Type II reports test operating effectiveness across a 3–12 month observation window.'],
    ],
    who: 'US and India-based SaaS, IT service, and managed service providers that need to satisfy customer due-diligence and vendor-risk reviews to win and keep commercial contracts.',
  },
  {
    id: 'cmmc', name: 'CMMC 2.0', edition: 'Level 1–3', color: V.orange, bg: V.orangeSubtle,
    tag: 'US DoD Mandate', icon: 'lock',
    short: 'Mandatory certification for the US defense supply chain.',
    geography: 'United States — critical growth',
    purpose: 'The Cybersecurity Maturity Model Certification, mandated by the US Department of Defense for its supply chain. Verifies protection of Federal Contract Information and Controlled Unclassified Information.',
    context: 'Phase 1 has been active since November 2025; Level 2 third-party assessments are required from November 2026. Approximately 300,000 US defense contractors are affected — and with only ~600 certified assessors against an estimated need of 2,000–3,000, demand significantly outstrips supply.',
    stats: [['300K+', 'US defense contractors affected'], ['Nov 2026', 'Level 2 assessment deadline'], ['~600', 'Certified assessors available']],
    covers: [
      ['Level 1 — Foundational', '17 basic safeguarding practices for Federal Contract Information; annual self-assessment.'],
      ['Level 2 — Advanced', '110 NIST SP 800-171 controls protecting CUI; third-party (C3PAO) assessment required.'],
      ['Level 3 — Expert', 'Enhanced controls drawn from NIST SP 800-172 for the highest-priority programs.'],
      ['Assessment readiness', 'SSP and POA&M development, evidence packaging, and C3PAO coordination.'],
    ],
    who: 'Defense contractors and subcontractors of every tier that handle Federal Contract Information or Controlled Unclassified Information and must certify to remain eligible for DoD awards.',
    urgent: true,
  },
  {
    id: 'hitrust', name: 'HITRUST', edition: 'CSF r2', color: V.orange, bg: V.orangeSubtle,
    tag: 'Healthcare Trust', icon: 'heart',
    short: 'The certifiable trust framework for healthcare information.',
    geography: 'United States & United Kingdom',
    purpose: 'The HITRUST CSF harmonizes HIPAA, ISO 27001, NIST, and other authorities into a single certifiable framework with prescriptive, scalable control requirements.',
    context: 'Required for health-sector IT contractors and those supporting HIPAA-covered entities. In the UK it is increasingly relevant for NHS supply-chain participants handling sensitive health data.',
    stats: [['1', 'Framework, many authorities'], ['r2', 'Current CSF release'], ['e1 / i1 / r2', 'Assessment tiers']],
    covers: [
      ['HIPAA harmonization', 'Maps the Privacy, Security, and Breach Notification Rules into testable control requirements.'],
      ['Risk-based tailoring', 'Control selection scales with organizational, system, and regulatory risk factors.'],
      ['Inheritance & shared responsibility', 'Cloud and service-provider control inheritance to reduce duplicate effort.'],
      ['Certified assessment', 'Validated assessment performed against the CSF leading to HITRUST certification.'],
    ],
    who: 'Healthcare IT contractors, health-tech vendors, and any organization supporting HIPAA-covered entities — plus UK firms in the NHS supply chain.',
  },
  {
    id: 'cmmi', name: 'CMMI', edition: 'Maturity 1–5', color: V.purpleDark, bg: '#E0E0F8',
    tag: 'Process Maturity', icon: 'trending',
    short: 'Capability maturity for software and IT service delivery.',
    geography: 'US, India & Singapore',
    purpose: 'Capability Maturity Model Integration — a process-improvement framework that appraises and elevates the maturity of software development and IT service-delivery organizations.',
    context: 'Adoption runs deep in software development and IT export firms, particularly across India and Singapore, where it signals delivery rigor to enterprise and government buyers.',
    stats: [['5', 'Maturity levels'], ['Dev & Svc', 'Constellations supported'], ['Global', 'Recognized appraisal']],
    covers: [
      ['Maturity appraisal', 'Benchmarking current process maturity against the CMMI model levels.'],
      ['Process area implementation', 'Establishing the practices that define managed, defined, and optimizing organizations.'],
      ['Measurement & performance', 'Quantitative management of process performance and quality outcomes.'],
      ['Appraisal readiness', 'Preparation and evidence development ahead of a formal benchmark appraisal.'],
    ],
    who: 'Software development houses and IT service delivery organizations — especially Indian IT export firms and Singapore delivery centers — that compete on demonstrable process rigor.',
  },
  {
    id: 'nist', name: 'NIST', edition: '800-171 · 800-53 · CSF', color: V.g600, bg: V.g100,
    tag: 'US Gov Foundation', icon: 'building',
    short: 'The control foundation underpinning US government compliance.',
    geography: 'US government supply chain',
    purpose: 'The NIST family — SP 800-171, SP 800-53, and the Cybersecurity Framework — provides the control catalogs and risk language that underpin CMMC and most US federal contracting requirements.',
    context: 'Widely referenced across US government contracting and the direct foundation of CMMC. Mastery of NIST controls is the prerequisite for nearly every federal supply-chain compliance obligation.',
    stats: [['800-171', '110 controls for CUI'], ['800-53', 'Federal control catalog'], ['CSF', 'Identify · Protect · Detect · Respond · Recover']],
    covers: [
      ['SP 800-171', '110 controls protecting Controlled Unclassified Information in nonfederal systems.'],
      ['SP 800-53', 'The comprehensive control catalog for federal information systems and organizations.'],
      ['Cybersecurity Framework', 'The five-function model for organizing and communicating cyber risk posture.'],
      ['Cross-framework mapping', 'Reusing NIST control evidence to accelerate CMMC, ISO 27001, and SOC 2 efforts.'],
    ],
    who: 'Any organization in the US government supply chain — the NIST control set is the common denominator beneath CMMC and federal contract security requirements.',
  },
];

/* ── WHY FRAMEWORKS MATTER (client overview before the grid) ─ */
const FRAMEWORK_VALUE = [
  ['scale', 'A standard the market already trusts',
    'Recognized frameworks give your customers, regulators, and partners a shared benchmark for trust. Certifying to one answers the security questions buyers would otherwise ask — so you spend less time proving you are safe and more time winning the work.'],
  ['refresh', 'Protection that keeps working',
    'A framework is not a one-time fix. It builds monitoring, review, and continual improvement into how you operate every day — so your defenses keep pace with new threats instead of going stale the moment an audit ends.'],
  ['target', 'Risk you can see — and manage',
    'Rather than reacting to threats one at a time, a framework gives you a structured way to find your gaps, rank them by real-world risk, and close the ones that matter most before they become incidents.'],
];

const FrameworkOverview = () => (
  <window.Section bg="#fff" pad="72px 0 8px">
    <window.SectionHeader overline="Why frameworks matter"
      title={<>Frameworks turn security into<br />a discipline you can prove.</>}
      sub="Before choosing a framework, it helps to know what one actually does for you. A security framework is a tested blueprint — it defines the controls to put in place, how to run them, and how to show they work. The result is a repeatable program that protects your business continuously and demonstrates that protection to everyone who needs assurance."
      maxSub={720} />
    <div className="vg-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
      {FRAMEWORK_VALUE.map(([icon, t, d], i) => (
        <div key={i} style={{ border: `1px solid ${V.g200}`, borderRadius: 0, padding: '28px 26px', background: '#fff', display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div style={{ width: 46, height: 46, borderRadius: 0, background: V.purpleSubtle, color: V.purple, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <window.Icon name={icon} size={23} />
          </div>
          <h3 style={{ fontSize: 18, fontWeight: 700, color: V.black, margin: 0, lineHeight: 1.25, letterSpacing: '-0.01em', fontFamily: FONT }}>{t}</h3>
          <p style={{ fontSize: 14.5, color: V.g600, lineHeight: 1.65, margin: 0 }}>{d}</p>
        </div>
      ))}
    </div>
  </window.Section>
);

/* ── INDEX PAGE ──────────────────────────────────────────── */
const StandardsPage = ({ onNav }) => (
  <div>
    <window.PageHero overline="Framework Coverage" variant="hex" wmColor={V.orangeDark} wmOpacity={0.4}
      title={<>Seven frameworks.<br />One compliance partner.</>}
      sub="Verigo Global supports the internationally recognized frameworks that mid-market IT contractors are asked to meet — from a single ISO 27001 certification to a full multi-framework program, including AI governance under ISO 42001." />
    <FrameworkOverview />
    <window.Section bg="#fff" pad="56px 0 0">
      <window.SectionHeader overline="The frameworks we support"
        title="Seven frameworks, end-to-end"
        sub="Each framework below maps to a real market demand. Select any one to see what it covers, who needs it, and how we deliver it." maxSub={620} />
      <div className="vg-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
        {STANDARDS.map(s => (
          <StdCard key={s.id} s={s} onNav={onNav} />
        ))}
      </div>
      <div style={{ marginTop: 56 }}>
        <window.CTABand
          title="Pursuing more than one certification?"
          body="Our cross-framework control mapping lets clients share evidence across ISO 27001, SOC 2, CMMC, and NIST — reducing duplicated effort and total cost of compliance."
          primary="Talk to a Practitioner" onNav={onNav} dest="contact" />
      </div>
    </window.Section>
  </div>
);

const StdCard = ({ s, onNav }) => {
  const [h, setH] = React.useState(false);
  return (
    <div onClick={() => onNav('standard:' + s.id)} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ background: '#fff', border: `1px solid ${h ? V.g300 : V.g200}`, borderRadius: 0, padding: '26px 24px',
        cursor: 'pointer', transition: 'all 180ms ease-out', boxShadow: h ? '0 8px 32px rgba(0,0,0,0.10)' : 'none',
        transform: h ? 'translateY(-2px)' : 'none', display: 'flex', flexDirection: 'column', gap: 14, position: 'relative' }}>
      {s.urgent && <span style={{ position: 'absolute', top: 20, right: 20, fontSize: 10, fontWeight: 700, letterSpacing: '0.06em', color: V.orange, background: V.orangeSubtle, padding: '4px 9px', borderRadius: 9999, textTransform: 'uppercase' }}>Urgent demand</span>}
      <div style={{ width: 48, height: 48, borderRadius: 0, background: s.bg, color: s.color, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <window.Icon name={s.icon} size={24} />
      </div>
      <div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
          <span style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-0.02em', color: V.black, fontFamily: FONT }}>{s.name}</span>
          <span style={{ fontSize: 12, fontWeight: 600, color: s.color }}>{s.edition}</span>
        </div>
      </div>
      <p style={{ fontSize: 14, color: V.g500, lineHeight: 1.6, margin: 0, flex: 1 }}>{s.short}</p>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12.5, color: V.g500 }}>
        <window.Icon name="mapPin" size={15} color={V.g400} />{s.geography}
      </div>
      <div style={{ fontSize: 13, fontWeight: 600, color: s.color, display: 'flex', alignItems: 'center', gap: 6 }}>
        View framework <window.Icon name="arrow" size={15} color={s.color} />
      </div>
    </div>
  );
};

/* ── DETAIL PAGE ─────────────────────────────────────────── */
const SERVICE_FLOW = [
  ['search', 'Readiness Assessment', 'Gap analysis against the framework with a prioritized remediation roadmap.'],
  ['layers', 'Implementation Toolkit', 'Practitioner-led program to close gaps — policies, controls, evidence procedures.'],
  ['clipboard', 'Pre-Audit Preparation', 'Mock audits and auditor-readiness coaching to accelerate certification.'],
  ['shield', 'Formal Audit', 'Independent certification or attestation by credentialed Verigo auditors.'],
];

const STD_WM = { iso27001: 'rings', iso42001: 'nodes', soc2: 'hex', cmmc: 'nodes', hitrust: 'orbit', cmmi: 'stack', nist: 'grid' };

const StandardDetail = ({ id, onNav }) => {
  const s = STANDARDS.find(x => x.id === id) || STANDARDS[0];
  const related = STANDARDS.filter(x => x.id !== s.id).slice(0, 3);
  const wmContrast = (s.color === V.orange) ? V.purpleDark : V.orangeDark;
  return (
    <div>
      {/* Hero */}
      <div style={{ background: V.g50, padding: '64px 0 56px', borderBottom: `1px solid ${V.g200}`, position: 'relative', overflow: 'hidden' }}>
        <window.HeroWatermark variant={STD_WM[s.id] || 'rings'} color={wmContrast} opacity={0.38} style={{ top: -30, right: -20, width: 440, height: 400 }} />
        <div className="vg-container" style={{ maxWidth: MAXW, margin: '0 auto', padding: '0 32px', position: 'relative', zIndex: 1 }}>
          <button onClick={() => onNav('standards')} style={{ background: 'none', border: 'none', cursor: 'pointer', color: V.g500, fontSize: 13, fontWeight: 600, fontFamily: FONT, display: 'flex', alignItems: 'center', gap: 6, padding: 0, marginBottom: 24 }}>
            <span style={{ transform: 'rotate(180deg)', display: 'inline-flex' }}><window.Icon name="arrow" size={15} color={V.g500} /></span> All Standards
          </button>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 20 }}>
            <div style={{ width: 60, height: 60, borderRadius: 0, background: s.bg, color: s.color, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <window.Icon name={s.icon} size={30} />
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <window.Tag color={s.color} bg={s.bg} border={s.bg}>{s.tag}</window.Tag>
              <window.Tag color={V.g600} bg="#fff" border={V.g200}>{s.edition}</window.Tag>
            </div>
          </div>
          <h1 className="vg-hero-title" style={{ fontSize: 60, fontWeight: 800, letterSpacing: '-0.03em', color: V.black, margin: '0 0 16px', lineHeight: 1, fontFamily: FONT }}>{s.name}</h1>
          <p style={{ fontSize: 20, color: V.g600, maxWidth: 680, lineHeight: 1.55, margin: 0 }}>{s.purpose}</p>
        </div>
      </div>

      {/* Stats strip */}
      <div style={{ background: '#fff', borderBottom: `1px solid ${V.g200}` }}>
        <div className="vg-container vg-stats-row" style={{ maxWidth: MAXW, margin: '0 auto', padding: '0 32px', display: 'flex' }}>
          {s.stats.map(([val, lbl], i) => (
            <div key={i} style={{ flex: 1, padding: '32px 24px', borderLeft: i ? `1px solid ${V.g200}` : 'none', display: 'flex', flexDirection: 'column', gap: 6 }}>
              <span style={{ fontSize: 34, fontWeight: 800, color: s.color, letterSpacing: '-0.02em', lineHeight: 1, fontFamily: FONT }}>{val}</span>
              <span style={{ fontSize: 13.5, color: V.g500 }}>{lbl}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Body */}
      <window.Section bg="#fff" pad="72px 0">
        <div className="vg-detail-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 360px', gap: 64, alignItems: 'start' }}>
          <div>
            <window.Overline style={{ marginBottom: 14 }}>What the framework covers</window.Overline>
            <h2 style={{ fontSize: 34, fontWeight: 800, letterSpacing: '-0.02em', color: V.black, margin: '0 0 32px', lineHeight: 1.1, fontFamily: FONT }}>Built into how you operate</h2>
            <div className="vg-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
              {s.covers.map(([t, d], i) => (
                <div key={i} style={{ border: `1px solid ${V.g200}`, borderRadius: 0, padding: '22px 22px', background: '#fff' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
                    <window.Icon name="check" size={20} color={s.color} />
                    <h3 style={{ fontSize: 16, fontWeight: 700, color: V.black, margin: 0, fontFamily: FONT, letterSpacing: '-0.01em' }}>{t}</h3>
                  </div>
                  <p style={{ fontSize: 13.5, color: V.g500, lineHeight: 1.6, margin: 0 }}>{d}</p>
                </div>
              ))}
            </div>

            <div style={{ marginTop: 44 }}>
              <window.Overline style={{ marginBottom: 14 }}>Market context</window.Overline>
              <p style={{ fontSize: 17, color: V.g600, lineHeight: 1.7, margin: 0, maxWidth: 620 }}>{s.context}</p>
            </div>
          </div>

          {/* Sidebar */}
          <aside style={{ display: 'flex', flexDirection: 'column', gap: 16, position: 'sticky', top: 92 }}>
            <div style={{ border: `1px solid ${V.g200}`, borderRadius: 0, padding: '24px', background: V.g50 }}>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: V.g400, marginBottom: 8 }}>Who needs it</div>
              <p style={{ fontSize: 14, color: V.g600, lineHeight: 1.6, margin: 0 }}>{s.who}</p>
            </div>
            <div style={{ border: `1px solid ${V.g200}`, borderRadius: 0, padding: '24px', background: V.g50 }}>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: V.g400, marginBottom: 8 }}>Primary geography</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 15, fontWeight: 600, color: V.black }}>
                <window.Icon name="mapPin" size={18} color={s.color} />{s.geography}
              </div>
            </div>
            <div style={{ border: `1px solid ${V.purple}`, borderRadius: 0, padding: '24px', background: V.purpleSubtle }}>
              <div style={{ fontSize: 15, fontWeight: 700, color: V.black, marginBottom: 8 }}>Ready to certify to {s.name}?</div>
              <p style={{ fontSize: 13.5, color: V.g600, lineHeight: 1.55, margin: '0 0 16px' }}>We guide you from gap analysis through formal audit under one roof.</p>
              <window.Btn kind="primary" onClick={() => onNav('contact')} style={{ width: '100%', justifyContent: 'center', fontSize: 14, padding: '12px 20px' }}>Start a Conversation</window.Btn>
            </div>
          </aside>
        </div>
      </window.Section>

      {/* How Verigo helps — service flow */}
      <window.Section bg={V.g50} pad="72px 0">
        <window.SectionHeader overline="The Verigo path to certification"
          title={`How we deliver ${s.name}`}
          sub="Engage any single stage or move through the full lifecycle — assess, implement, prepare, and audit." />
        <div className="vg-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {SERVICE_FLOW.map(([icon, t, d], i) => (
            <div key={i} style={{ background: '#fff', border: `1px solid ${V.g200}`, borderRadius: 0, padding: '24px', position: 'relative' }}>
              <div style={{ fontSize: 12, fontWeight: 700, color: V.g300, fontFamily: "'JetBrains Mono', monospace", marginBottom: 14 }}>0{i + 1}</div>
              <div style={{ width: 42, height: 42, borderRadius: 0, background: V.purpleSubtle, color: V.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 14 }}>
                <window.Icon name={icon} size={22} />
              </div>
              <h3 style={{ fontSize: 15.5, fontWeight: 700, color: V.black, margin: '0 0 8px', fontFamily: FONT, letterSpacing: '-0.01em' }}>{t}</h3>
              <p style={{ fontSize: 13, color: V.g500, lineHeight: 1.55, margin: 0 }}>{d}</p>
            </div>
          ))}
        </div>
      </window.Section>

      {/* Related */}
      <window.Section bg="#fff" pad="64px 0">
        <h2 style={{ fontSize: 24, fontWeight: 700, letterSpacing: '-0.02em', color: V.black, margin: '0 0 24px', fontFamily: FONT }}>Related frameworks</h2>
        <div className="vg-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {related.map(r => <StdCard key={r.id} s={r} onNav={onNav} />)}
        </div>
      </window.Section>
    </div>
  );
};

Object.assign(window, { STANDARDS, StandardsPage, StandardDetail });
