// ISO42001.jsx — Verigo Global: dedicated ISO/IEC 42001 (AIMS) framework + support page
const { V: JV, MAXW: JMW, FONT: JFT } = window;

/* ── DATA ─────────────────────────────────────────────────── */
const ANNEX_THEMES = [
  ['briefcase', 'Policy & Organization', '8', 'AI policy, roles, resourcing, and the governance backbone of the AI management system.'],
  ['target', 'Impact Assessment', '3', 'Assessing effects of AI systems on individuals, groups, and society before deployment.'],
  ['layers', 'AI System Life Cycle', '10', 'Requirements, design, verification, deployment, and monitoring across the AI lifecycle.'],
  ['doc', 'Data & Transparency', '9', 'Data quality and provenance, plus disclosure to interested parties and third parties.'],
  ['compass', 'Use & Relationships', '8', 'Responsible use objectives, supplier allocation of responsibility, and customer commitments.'],
];

const SUPPORT_STAGES = [
  {
    step: '01', icon: 'search', overline: 'Assess',
    title: 'ISO 42001 Readiness Assessment',
    lead: 'Know exactly where you stand against ISO/IEC 42001:2023.',
    desc: 'We benchmark your current state against Clauses 4–10 and all 38 Annex A controls, score your gaps by risk and effort, and hand you an independent remediation roadmap — the foundation for everything that follows.',
    deliverables: ['Clause 4–10 gap analysis', 'Annex A control-by-control review', 'Risk-scored remediation roadmap', 'Indicative certification timeline'],
    link: 'services', linkLabel: 'About readiness assessments',
  },
  {
    step: '02', icon: 'layers', overline: 'Implement',
    title: 'AIMS Implementation Toolkit',
    lead: 'We build the AI Management System with you — not for a shelf.',
    desc: 'A practitioner-led program that stands up the full AIMS: AI risk assessment methodology, Statement of Applicability, the complete policy set, impact assessments, and the internal audit and management-review machinery that keeps it alive.',
    deliverables: ['AI risk assessment & treatment methodology', 'Statement of Applicability (SoA)', 'Full AIMS policy & procedure set', 'Internal audit & management review program'],
    link: 'toolkits', linkLabel: 'Explore the toolkits',
  },
  {
    step: '03', icon: 'clipboard', overline: 'Prepare',
    title: 'Stage 1 & Stage 2 Pre-Audit Preparation',
    lead: 'Walk into the certification audit knowing you will pass.',
    desc: 'A mock Stage 1 documentation review and a full Stage 2 mock audit run by a lead auditor independent of your implementation team — surfacing nonconformities while there is still time to close them.',
    deliverables: ['Mock Stage 1 documentation review', 'Full Stage 2 mock audit', 'Nonconformity log & corrective actions', 'Auditor-readiness coaching for your team'],
    link: 'services', linkLabel: 'About pre-audit preparation',
  },
  {
    step: '04', icon: 'award', overline: 'Certify & Sustain',
    title: 'Certification & Surveillance Support',
    lead: 'Get certified — and stay certified across the three-year cycle.',
    desc: 'We support you through the certification body’s Stage 1 and Stage 2 audits, manage findings to closure, then keep the AIMS audit-ready through annual surveillance and three-year recertification.',
    deliverables: ['Certification body coordination', 'Findings management to closure', 'Annual surveillance audit support', 'Year-three recertification'],
    link: 'contact', linkLabel: 'Talk to a practitioner',
  },
];

const JOURNEY = [
  ['search', 'Gap analysis', '2–4 wks', 'Readiness assessment against the 2023 standard.'],
  ['layers', 'Build the AIMS', '3–6 mo', 'Risk method, SoA, policies, impact assessments, evidence.'],
  ['file', 'Stage 1 audit', '~1 wk', 'Certification body reviews AIMS documentation.'],
  ['shield', 'Stage 2 audit', '1–2 wks', 'On-site assessment of operating effectiveness.'],
  ['award', 'Certified', '—', 'Three-year ISO/IEC 42001 certificate issued.'],
  ['refresh', 'Surveillance', 'Yr 1 & 2', 'Annual checks, then recertify in year three.'],
];

const CROSS = [
  ['globe', 'iso27001', 'ISO 27001', 'Reuse ISMS governance, risk, and supplier controls as the backbone of your AI management system.'],
  ['shield', 'soc2', 'SOC 2', 'Align AI system controls with the Trust Services Criteria your customers already expect.'],
  ['lock', 'cmmc', 'CMMC 2.0', 'AI-specific access and data controls complement the NIST 800-171 practices behind CMMC Level 2.'],
  ['building', 'nist', 'NIST', 'AI risk categories map onto the NIST Cybersecurity Framework functions your program already tracks.'],
];

const ISO_FAQ = [
  ['What is ISO/IEC 42001?', 'ISO/IEC 42001:2023 is the first certifiable international standard for an Artificial Intelligence Management System (AIMS) — a structured framework for governing, developing, and deploying AI responsibly across its lifecycle, covering fairness, transparency, human oversight, and accountability.'],
  ['How does it relate to ISO 27001?', 'Both standards share the same management-system clauses (context, leadership, planning, support, operation, evaluation, improvement), so organizations already certified to ISO 27001 typically find ISO 42001 faster to implement. Annex A adds AI-specific controls — bias, explainability, impact assessment — that ISO 27001 was never written to cover.'],
  ['How long does certification take?', 'For a mid-market organization, expect roughly 4–8 months end to end: a 2–4 week readiness assessment, 3–6 months to build and operate the AIMS, then the certification body’s Stage 1 and Stage 2 audits. We give you a firm timeline in the scoping proposal.'],
  ['Do we need to implement all 38 Annex A controls?', 'No. You select applicable controls based on your AI risk assessment and document your reasoning — including exclusions — in the Statement of Applicability, the same approach used in ISO 27001.'],
  ['Can Verigo both build and audit our AIMS?', 'We support you through the full lifecycle, but the certification audit itself must be performed by an independent, accredited certification body — never the firm that implemented your controls. Our pre-audit lead auditor is kept separate from your implementation team to preserve that independence.'],
  ['Does ISO 42001 help with the EU AI Act and similar regulation?', 'Yes. While ISO 42001 is not itself a legal requirement, its risk-based, documented approach to AI governance gives you much of the evidence and process rigor that emerging AI regulation expects — reducing the incremental work of demonstrating regulatory compliance.'],
];

/* ── BREADCRUMB ───────────────────────────────────────────── */
const Crumb = ({ onNav }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, fontWeight: 600, color: JV.g500, marginBottom: 24, fontFamily: JFT }}>
    <button onClick={() => onNav('home')} style={crumbBtn}>Home</button>
    <span style={{ color: JV.g300 }}>/</span>
    <button onClick={() => onNav('standards')} style={crumbBtn}>Standards</button>
    <span style={{ color: JV.g300 }}>/</span>
    <span style={{ color: JV.purple }}>ISO 42001</span>
  </div>
);
const crumbBtn = { background: 'none', border: 'none', cursor: 'pointer', color: '#7A7A8A', fontSize: 13, fontWeight: 600, padding: 0, fontFamily: "'DM Sans', system-ui, sans-serif" };

/* ── HERO ─────────────────────────────────────────────────── */
const Hero = ({ onNav }) => (
  <section style={{ background: JV.g50, padding: '56px 0 64px', borderBottom: `1px solid ${JV.g200}`, position: 'relative', overflow: 'hidden' }}>
    <window.HeroWatermark variant="nodes" color={JV.orangeDark} opacity={0.38} style={{ top: -20, right: -20, width: 480, height: 440 }} />
    <div style={{ maxWidth: JMW, margin: '0 auto', padding: '0 32px', position: 'relative', zIndex: 1 }}>
      <Crumb onNav={onNav} />
      <div className="vg-detail-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 360px', gap: 64, alignItems: 'end' }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 22 }}>
            <div style={{ width: 60, height: 60, borderRadius: 0, background: JV.purpleSubtle, color: JV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <window.Icon name="cpu" size={30} />
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <window.Tag color={JV.purple} bg={JV.purpleSubtle} border={JV.purpleSubtle}>AI Management System</window.Tag>
              <window.Tag color={JV.g600} bg="#fff" border={JV.g200}>ISO/IEC 42001:2023</window.Tag>
            </div>
          </div>
          <h1 className="vg-hero-title" style={{ fontSize: 62, fontWeight: 800, letterSpacing: '-0.035em', color: JV.black, margin: '0 0 18px', lineHeight: 1, fontFamily: JFT }}>
            ISO 42001, <span style={{ color: JV.purple }}>delivered end to end.</span>
          </h1>
          <p style={{ fontSize: 19, color: JV.g600, lineHeight: 1.6, margin: '0 0 30px', maxWidth: 600 }}>
            The first certifiable standard for responsible AI governance. Verigo takes you from first gap analysis to a certified AI Management System — and keeps you certified across the full three-year cycle, with senior practitioners on every engagement.
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <window.Btn kind="primary" onClick={() => onNav('contact')}>Start a Conversation <window.Icon name="arrow" size={17} color="#fff" /></window.Btn>
            <window.Btn kind="ghost" onClick={() => document.getElementById('support')?.scrollIntoView({ behavior: 'smooth', block: 'start' })}>See how we help</window.Btn>
          </div>
        </div>
        <div style={{ background: '#fff', border: `1px solid ${JV.g200}`, borderRadius: 0, padding: '26px 26px', boxShadow: '0 8px 32px rgba(91,46,145,0.08)' }}>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: JV.g400, marginBottom: 16 }}>At a glance</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {[
              ['cpu', 'Scope', 'Any AI system you build, buy, or operate'],
              ['layers', 'Standard', '38 Annex A controls, 9 objectives'],
              ['refresh', 'Cycle', '3-year certificate + surveillance'],
              ['gauge', 'Typical timeline', '4–8 months to certified'],
            ].map(([ic, k, val], i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                <div style={{ width: 34, height: 34, borderRadius: 0, background: JV.purpleSubtle, color: JV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <window.Icon name={ic} size={18} />
                </div>
                <div>
                  <div style={{ fontSize: 11.5, fontWeight: 700, color: JV.g400, letterSpacing: '0.04em', textTransform: 'uppercase' }}>{k}</div>
                  <div style={{ fontSize: 14.5, fontWeight: 600, color: JV.black, lineHeight: 1.35 }}>{val}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* ── STATS STRIP ──────────────────────────────────────────── */
const Stats = () => (
  <div style={{ background: '#fff', borderBottom: `1px solid ${JV.g200}` }}>
    <div className="vg-container vg-stats-row" style={{ maxWidth: JMW, margin: '0 auto', padding: '0 32px', display: 'flex' }}>
      {[
        ['2023', 'Standard first published'],
        ['38', 'Annex A controls'],
        ['9', 'Control objectives (A.2–A.10)'],
        ['3-yr', 'Certification cycle'],
      ].map(([v, l], i) => (
        <div key={i} style={{ flex: 1, padding: '34px 24px', borderLeft: i ? `1px solid ${JV.g200}` : 'none', display: 'flex', flexDirection: 'column', gap: 6 }}>
          <span style={{ fontSize: 34, fontWeight: 800, color: JV.purple, letterSpacing: '-0.02em', lineHeight: 1, fontFamily: JFT }}>{v}</span>
          <span style={{ fontSize: 13.5, color: JV.g500 }}>{l}</span>
        </div>
      ))}
    </div>
  </div>
);

/* ── WHAT IT IS / ANNEX A ─────────────────────────────────── */
const Overview = () => (
  <window.Section bg="#fff" pad="80px 0">
    <div className="vg-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'start' }}>
      <div>
        <window.Overline style={{ marginBottom: 14 }}>What ISO 42001 certifies</window.Overline>
        <h2 className="vg-section-title" style={{ fontSize: 36, fontWeight: 800, letterSpacing: '-0.025em', color: JV.black, margin: '0 0 20px', lineHeight: 1.1, fontFamily: JFT }}>A living system, not a model card.</h2>
        <p style={{ fontSize: 16.5, color: JV.g600, lineHeight: 1.7, margin: '0 0 18px' }}>
          ISO/IEC 42001 certifies a complete <strong style={{ color: JV.black }}>AI Management System</strong> — a risk-based, continuously improving framework that governs how AI systems are designed, developed, deployed, and monitored across your whole organization.
        </p>
        <p style={{ fontSize: 16.5, color: JV.g600, lineHeight: 1.7, margin: 0 }}>
          The standard pairs management-system requirements (Clauses 4–10) with a catalog of 38 Annex A controls. Verigo’s <strong style={{ color: JV.black }}>Compliance by Design</strong> approach embeds those controls into how you already build and operate AI — so evidence is generated by the process, not assembled in a panic before each audit.
        </p>
        <div style={{ marginTop: 28, display: 'flex', flexDirection: 'column', gap: 12 }}>
          {[
            'Risk-based — controls follow your actual AI use cases, not a checklist',
            'The first certifiable standard purpose-built for responsible AI',
            'A natural extension for organizations already certified to ISO 27001',
          ].map((t, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 15, color: JV.g700 }}>
              <window.Icon name="check" size={20} color={JV.purple} />{t}
            </div>
          ))}
        </div>
      </div>
      <div>
        <window.Overline style={{ marginBottom: 14 }}>Annex A — 2023 structure</window.Overline>
        <h2 className="vg-section-title" style={{ fontSize: 36, fontWeight: 800, letterSpacing: '-0.025em', color: JV.black, margin: '0 0 24px', lineHeight: 1.1, fontFamily: JFT }}>38 controls, nine objectives.</h2>
        <div className="vg-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
          {ANNEX_THEMES.map(([ic, name, count, desc], i) => (
            <div key={i} style={{ border: `1px solid ${JV.g200}`, borderRadius: 0, padding: '20px 20px', background: '#fff' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
                <div style={{ width: 40, height: 40, borderRadius: 0, background: JV.purpleSubtle, color: JV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <window.Icon name={ic} size={21} />
                </div>
                <span style={{ fontSize: 26, fontWeight: 800, color: JV.purple, letterSpacing: '-0.02em', fontFamily: JFT }}>{count}</span>
              </div>
              <h3 style={{ fontSize: 15.5, fontWeight: 700, color: JV.black, margin: '0 0 6px', fontFamily: JFT, letterSpacing: '-0.01em' }}>{name}</h3>
              <p style={{ fontSize: 12.5, color: JV.g500, lineHeight: 1.5, margin: 0 }}>{desc}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  </window.Section>
);

/* ── THE SUPPORT MODEL (CORE) ─────────────────────────────── */
const Support = ({ onNav }) => (
  <window.Section bg={JV.g50} pad="84px 0" style={{ scrollMarginTop: 0 }}>
    <div id="support" style={{ scrollMarginTop: 24 }}>
      <window.SectionHeader align="center" overline="How Verigo supports you"
        title={<>Four service lines, mapped<br />to the ISO 42001 lifecycle.</>}
        sub="Engage any single stage or move through the whole journey with one accountable, senior-led team — and a peer-review quality gate on every deliverable." maxSub={640} />
    </div>
    <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
      {SUPPORT_STAGES.map((s) => (
        <div key={s.step} style={{ background: '#fff', border: `1px solid ${JV.g200}`, borderRadius: 0, padding: '34px 38px', display: 'grid', gridTemplateColumns: '64px 1fr 300px', gap: 32, alignItems: 'start' }}>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
            <div style={{ width: 56, height: 56, borderRadius: 0, background: JV.purple, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <window.Icon name={s.icon} size={28} color="#fff" />
            </div>
            <span style={{ fontSize: 12, fontWeight: 800, color: JV.g300, fontFamily: "'JetBrains Mono', monospace" }}>{s.step}</span>
          </div>
          <div>
            <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: JV.orange, marginBottom: 6 }}>{s.overline}</div>
            <h3 style={{ fontSize: 24, fontWeight: 800, letterSpacing: '-0.02em', color: JV.black, margin: '0 0 12px', lineHeight: 1.15, fontFamily: JFT }}>{s.title}</h3>
            <p style={{ fontSize: 17, fontWeight: 600, color: JV.black, lineHeight: 1.5, margin: '0 0 10px' }}>{s.lead}</p>
            <p style={{ fontSize: 15, color: JV.g600, lineHeight: 1.65, margin: '0 0 18px', maxWidth: 560 }}>{s.desc}</p>
            <button onClick={() => onNav(s.link)} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, color: JV.purple, fontSize: 14, fontWeight: 700, fontFamily: JFT, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              {s.linkLabel} <window.Icon name="arrow" size={15} color={JV.purple} />
            </button>
          </div>
          <div style={{ background: JV.g50, border: `1px solid ${JV.g200}`, borderRadius: 0, padding: '20px 22px' }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: JV.g400, marginBottom: 14 }}>What you receive</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
              {s.deliverables.map((d, j) => (
                <div key={j} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 13.5, color: JV.g700, lineHeight: 1.4 }}>
                  <span style={{ flexShrink: 0, marginTop: 1 }}><window.Icon name="check" size={17} color={JV.purple} /></span>{d}
                </div>
              ))}
            </div>
          </div>
        </div>
      ))}
    </div>
  </window.Section>
);

/* ── CERTIFICATION JOURNEY ────────────────────────────────── */
const Journey = () => (
  <window.Section bg="#fff" pad="84px 0">
    <window.SectionHeader align="center" overline="The path to certification"
      title="From gap analysis to certified — and beyond."
      sub="Most clients reach certification in four to eight months. Here is the route, with indicative durations." maxSub={600} />
    <div style={{ position: 'relative' }}>
      <div style={{ position: 'absolute', top: 33, left: '8.33%', right: '8.33%', height: 2, background: JV.g200, zIndex: 0 }} />
      <div className="vg-grid-6" style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', position: 'relative', zIndex: 1 }}>
        {JOURNEY.map(([ic, t, dur, d], i) => (
          <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '0 10px', textAlign: 'center' }}>
            <div style={{ width: 66, height: 66, borderRadius: '50%', background: '#fff', border: `2px solid ${JV.purpleLight}`, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
              <div style={{ width: 46, height: 46, borderRadius: '50%', background: JV.purpleSubtle, color: JV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <window.Icon name={ic} size={23} />
              </div>
            </div>
            <div style={{ fontSize: 11, fontWeight: 700, color: JV.orange, fontFamily: "'JetBrains Mono', monospace", marginBottom: 6 }}>{dur}</div>
            <div style={{ fontSize: 15, fontWeight: 700, color: JV.black, marginBottom: 6, fontFamily: JFT, letterSpacing: '-0.01em' }}>{t}</div>
            <div style={{ fontSize: 12.5, color: JV.g500, lineHeight: 1.45, maxWidth: 160 }}>{d}</div>
          </div>
        ))}
      </div>
    </div>
  </window.Section>
);

/* ── WHY VERIGO + CROSS-FRAMEWORK ─────────────────────────── */
const WhyAndCross = ({ onNav }) => (
  <window.Section bg={JV.g50} pad="84px 0">
    <div className="vg-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'start' }}>
      <div>
        <window.Overline style={{ marginBottom: 14 }}>Why certify with Verigo</window.Overline>
        <h2 style={{ fontSize: 34, fontWeight: 800, letterSpacing: '-0.025em', color: JV.black, margin: '0 0 24px', lineHeight: 1.12, fontFamily: JFT }}>Implementation and audit, under one roof.</h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
          {[
            ['users', 'Senior-led, always', 'Every engagement is run by practitioners with deep AI governance and ISO Lead Auditor credentials — never junior consultants with templates.'],
            ['gauge', 'Audit-ready by design', 'Controls are embedded into how you build and operate AI, so evidence accumulates continuously instead of being reconstructed before each audit.'],
            ['scale', 'Independence preserved', 'Our pre-audit lead auditor is kept separate from your implementation team, protecting the integrity of the certification.'],
          ].map(([ic, t, d], i) => (
            <div key={i} style={{ display: 'flex', gap: 16 }}>
              <div style={{ width: 44, height: 44, borderRadius: 0, background: JV.purpleSubtle, color: JV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <window.Icon name={ic} size={22} />
              </div>
              <div>
                <h3 style={{ fontSize: 16.5, fontWeight: 700, color: JV.black, margin: '0 0 5px', fontFamily: JFT, letterSpacing: '-0.01em' }}>{t}</h3>
                <p style={{ fontSize: 14, color: JV.g600, lineHeight: 1.6, margin: 0 }}>{d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
      <div>
        <window.Overline style={{ marginBottom: 14 }}>One certification, many doors</window.Overline>
        <h2 style={{ fontSize: 34, fontWeight: 800, letterSpacing: '-0.025em', color: JV.black, margin: '0 0 12px', lineHeight: 1.12, fontFamily: JFT }}>ISO 42001 builds on what you already have.</h2>
        <p style={{ fontSize: 15.5, color: JV.g600, lineHeight: 1.65, margin: '0 0 24px' }}>
          Our cross-framework control mapping lets your existing certifications accelerate ISO 42001 — and lets ISO 42001 evidence support the frameworks you already hold. Build it once, reuse it across:
        </p>
        <div className="vg-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
          {CROSS.map(([ic, id, name, desc]) => (
            <button key={id} onClick={() => onNav('standard:' + id)}
              style={{ textAlign: 'left', cursor: 'pointer', background: '#fff', border: `1px solid ${JV.g200}`, borderRadius: 0, padding: '20px 20px', fontFamily: JFT, transition: 'all 160ms ease-out' }}
              onMouseEnter={(e) => { e.currentTarget.style.borderColor = JV.purple; e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 8px 24px rgba(91,46,145,0.12)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.borderColor = JV.g200; e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = 'none'; }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
                <div style={{ width: 38, height: 38, borderRadius: 0, background: JV.purpleSubtle, color: JV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <window.Icon name={ic} size={20} />
                </div>
                <window.Icon name="arrow" size={16} color={JV.g300} />
              </div>
              <h3 style={{ fontSize: 16, fontWeight: 800, color: JV.black, margin: '0 0 6px', fontFamily: JFT, letterSpacing: '-0.01em' }}>{name}</h3>
              <p style={{ fontSize: 12.5, color: JV.g500, lineHeight: 1.5, margin: 0 }}>{desc}</p>
            </button>
          ))}
        </div>
        <button onClick={() => onNav('standards')} style={{ marginTop: 18, background: 'none', border: 'none', cursor: 'pointer', padding: 0, color: JV.purple, fontSize: 14, fontWeight: 700, fontFamily: JFT, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          View all seven frameworks <window.Icon name="arrow" size={15} color={JV.purple} />
        </button>
      </div>
    </div>
  </window.Section>
);

/* ── FAQ ──────────────────────────────────────────────────── */
const FAQ = ({ onNav }) => {
  const [open, setOpen] = React.useState(0);
  return (
    <window.Section bg="#fff" pad="84px 0">
      <div className="vg-detail-grid" style={{ display: 'grid', gridTemplateColumns: '360px 1fr', gap: 64, alignItems: 'start' }}>
        <div style={{ position: 'sticky', top: 92 }}>
          <window.Overline style={{ marginBottom: 14 }}>ISO 42001 questions</window.Overline>
          <h2 className="vg-section-title" style={{ fontSize: 36, fontWeight: 800, letterSpacing: '-0.03em', color: JV.black, margin: '0 0 18px', lineHeight: 1.1, fontFamily: JFT }}>Good to know before we start.</h2>
          <p style={{ fontSize: 15.5, color: JV.g600, lineHeight: 1.65, margin: '0 0 24px' }}>Questions on scope, timeline, or how this relates to ISO 27001? A senior practitioner will walk you through it.</p>
          <window.Btn kind="primary" onClick={() => onNav('contact')}>Start a Conversation <window.Icon name="arrow" size={16} color="#fff" /></window.Btn>
        </div>
        <div style={{ border: `1px solid ${JV.g200}`, borderRadius: 0, overflow: 'hidden', background: '#fff' }}>
          {ISO_FAQ.map(([q, a], i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ borderTop: i ? `1px solid ${JV.g200}` : 'none' }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)}
                  style={{ width: '100%', textAlign: 'left', background: 'none', border: 'none', cursor: 'pointer', padding: '22px 26px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20, fontFamily: JFT }}>
                  <span style={{ fontSize: 16, fontWeight: 700, color: JV.black, letterSpacing: '-0.01em' }}>{q}</span>
                  <span style={{ flexShrink: 0, width: 28, height: 28, borderRadius: '50%', background: isOpen ? JV.purple : JV.purpleSubtle, color: isOpen ? '#fff' : JV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18, fontWeight: 700 }}>{isOpen ? '–' : '+'}</span>
                </button>
                {isOpen && (
                  <div style={{ padding: '0 26px 24px' }}>
                    <p style={{ fontSize: 14.5, color: JV.g600, lineHeight: 1.7, margin: 0, maxWidth: 680 }}>{a}</p>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </window.Section>
  );
};

/* ── PAGE ─────────────────────────────────────────────────── */
const ISO42001Page = ({ onNav }) => (
  <div>
    <Hero onNav={onNav} />
    <Stats />
    <Overview />
    <Support onNav={onNav} />
    <Journey />
    <WhyAndCross onNav={onNav} />
    <FAQ onNav={onNav} />
    <window.Section bg={JV.g50} pad="0">
      <window.CTABand
        title="Ready to certify to ISO 42001?"
        body="Tell us where you are — standing up your first AI governance program, or extending an existing ISO 27001 ISMS to cover AI. We'll come back with a scoped plan, fixed pricing, and the fastest path to a certified AIMS."
        primary="Start a Conversation" onNav={onNav} dest="contact" />
    </window.Section>
  </div>
);

Object.assign(window, { ISO42001Page });
