// ISO27001.jsx — Verigo Global: dedicated ISO/IEC 27001 framework + support page
const { V: IV, MAXW: IMW, FONT: IFT } = window;

/* ── DATA ─────────────────────────────────────────────────── */
const ANNEX_THEMES = [
  ['briefcase', 'Organizational', '37', 'Policies, roles, supplier relationships, threat intelligence, and the governance backbone of the ISMS.'],
  ['users', 'People', '8', 'Screening, awareness, responsibilities, and the human controls that turn policy into practice.'],
  ['building', 'Physical', '14', 'Secure areas, equipment, clear-desk and clear-screen, and protection of physical assets.'],
  ['cpu', 'Technological', '34', 'Access control, cryptography, logging, secure development, and configuration management.'],
];

const SUPPORT_STAGES = [
  {
    step: '01', icon: 'search', overline: 'Assess',
    title: 'ISO 27001 Readiness Assessment',
    lead: 'Know exactly where you stand against ISO/IEC 27001:2022.',
    desc: 'We benchmark your current state against Clauses 4–10 and all 93 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: 'ISMS Implementation Toolkit',
    lead: 'We build the Information Security Management System with you — not for a shelf.',
    desc: 'A practitioner-led program that stands up the full ISMS: risk assessment methodology, Statement of Applicability, the complete policy set, control implementation, and the internal audit and management-review machinery that keeps it alive.',
    deliverables: ['Risk assessment & treatment methodology', 'Statement of Applicability (SoA)', 'Full ISMS 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 ISMS 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 2022 standard.'],
  ['layers', 'Build the ISMS', '3–6 mo', 'Risk method, SoA, policies, controls, evidence.'],
  ['file', 'Stage 1 audit', '~1 wk', 'Certification body reviews ISMS documentation.'],
  ['shield', 'Stage 2 audit', '1–2 wks', 'On-site assessment of operating effectiveness.'],
  ['award', 'Certified', '—', 'Three-year ISO/IEC 27001 certificate issued.'],
  ['refresh', 'Surveillance', 'Yr 1 & 2', 'Annual checks, then recertify in year three.'],
];

const CROSS = [
  ['cpu', 'iso42001', 'ISO 42001', 'Extend your ISMS governance and risk methodology to cover AI systems under a certifiable AI management system.'],
  ['shield', 'soc2', 'SOC 2', 'Reuse your ISMS controls and evidence to satisfy the AICPA Trust Services Criteria.'],
  ['lock', 'cmmc', 'CMMC 2.0', 'ISO 27001 controls map directly onto the NIST 800-171 practices behind CMMC Level 2.'],
  ['building', 'nist', 'NIST', 'Annex A aligns with the NIST control families that underpin US federal compliance.'],
  ['heart', 'hitrust', 'HITRUST', 'HITRUST CSF harmonizes ISO 27001 with HIPAA into a single certifiable framework.'],
];

const ISO_FAQ = [
  ['What changed in the 2022 edition?', 'ISO/IEC 27001:2022 restructured Annex A from 114 controls into 93, organized under four themes — Organizational, People, Physical, and Technological — and introduced 11 new controls covering areas like threat intelligence, cloud security, and secure coding. Organizations certified to the 2013 edition transitioned by the October 2025 deadline.'],
  ['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 ISMS, then the certification body’s Stage 1 and Stage 2 audits. We give you a firm timeline in the scoping proposal.'],
  ['What is the difference between Stage 1 and Stage 2?', 'Stage 1 is a documentation review where the certification body confirms your ISMS is designed and ready. Stage 2 is the full on-site (or remote) audit of whether your controls are actually operating. Our pre-audit preparation runs mock versions of both.'],
  ['Can Verigo both build and audit our ISMS?', '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. To preserve that independence, our pre-audit lead auditor is also kept separate from your implementation team.'],
  ['Do we have to recertify every year?', 'No. The ISO 27001 certificate is valid for three years. In years one and two the certification body performs lighter surveillance audits; in year three you complete a full recertification. We keep your ISMS audit-ready throughout so each one is a non-event.'],
];

/* ── BREADCRUMB ───────────────────────────────────────────── */
const Crumb = ({ onNav }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, fontWeight: 600, color: IV.g500, marginBottom: 24, fontFamily: IFT }}>
    <button onClick={() => onNav('home')} style={crumbBtn}>Home</button>
    <span style={{ color: IV.g300 }}>/</span>
    <button onClick={() => onNav('standards')} style={crumbBtn}>Standards</button>
    <span style={{ color: IV.g300 }}>/</span>
    <span style={{ color: IV.purple }}>ISO 27001</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: IV.g50, padding: '56px 0 64px', borderBottom: `1px solid ${IV.g200}`, position: 'relative', overflow: 'hidden' }}>
    <window.HeroWatermark variant="hex" color={IV.orangeDark} opacity={0.38} style={{ top: -20, right: -20, width: 480, height: 440 }} />
    <div style={{ maxWidth: IMW, 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: IV.purpleSubtle, color: IV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <window.Icon name="globe" size={30} />
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <window.Tag color={IV.purple} bg={IV.purpleSubtle} border={IV.purpleSubtle}>International ISMS</window.Tag>
              <window.Tag color={IV.g600} bg="#fff" border={IV.g200}>ISO/IEC 27001:2022</window.Tag>
            </div>
          </div>
          <h1 className="vg-hero-title" style={{ fontSize: 62, fontWeight: 800, letterSpacing: '-0.035em', color: IV.black, margin: '0 0 18px', lineHeight: 1, fontFamily: IFT }}>
            ISO 27001, <span style={{ color: IV.purple }}>delivered end to end.</span>
          </h1>
          <p style={{ fontSize: 19, color: IV.g600, lineHeight: 1.6, margin: '0 0 30px', maxWidth: 600 }}>
            The international gold standard for information security management. Verigo takes you from first gap analysis to a certified ISMS — 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 ${IV.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: IV.g400, marginBottom: 16 }}>At a glance</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {[
              ['globe', 'Scope', 'Global — all four markets'],
              ['layers', 'Standard', '93 Annex A controls, 4 themes'],
              ['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: IV.purpleSubtle, color: IV.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: IV.g400, letterSpacing: '0.04em', textTransform: 'uppercase' }}>{k}</div>
                  <div style={{ fontSize: 14.5, fontWeight: 600, color: IV.black, lineHeight: 1.35 }}>{val}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* ── STATS STRIP ──────────────────────────────────────────── */
const Stats = () => (
  <div style={{ background: '#fff', borderBottom: `1px solid ${IV.g200}` }}>
    <div className="vg-container vg-stats-row" style={{ maxWidth: IMW, margin: '0 auto', padding: '0 32px', display: 'flex' }}>
      {[
        ['USD 18.6B', 'Certification market (2025)'],
        ['USD 74.6B', 'Projected market (2035)'],
        ['81%', 'Planned or current adoption'],
        ['93', 'Annex A controls (2022)'],
      ].map(([v, l], i) => (
        <div key={i} style={{ flex: 1, padding: '34px 24px', borderLeft: i ? `1px solid ${IV.g200}` : 'none', display: 'flex', flexDirection: 'column', gap: 6 }}>
          <span style={{ fontSize: 34, fontWeight: 800, color: IV.purple, letterSpacing: '-0.02em', lineHeight: 1, fontFamily: IFT }}>{v}</span>
          <span style={{ fontSize: 13.5, color: IV.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 27001 certifies</window.Overline>
        <h2 className="vg-section-title" style={{ fontSize: 36, fontWeight: 800, letterSpacing: '-0.025em', color: IV.black, margin: '0 0 20px', lineHeight: 1.1, fontFamily: IFT }}>A living system, not a binder of policies.</h2>
        <p style={{ fontSize: 16.5, color: IV.g600, lineHeight: 1.7, margin: '0 0 18px' }}>
          ISO/IEC 27001 certifies a complete <strong style={{ color: IV.black }}>Information Security Management System</strong> — a risk-based, continuously improving framework that spans people, process, and technology across your whole organization.
        </p>
        <p style={{ fontSize: 16.5, color: IV.g600, lineHeight: 1.7, margin: 0 }}>
          The standard pairs management-system requirements (Clauses 4–10) with a catalog of 93 Annex A controls. Verigo’s <strong style={{ color: IV.black }}>Compliance by Design</strong> approach embeds those controls into how you already operate — 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 threats, not a checklist',
            'Internationally recognized across all four Verigo markets',
            'The natural hub for SOC 2, CMMC, NIST, and HITRUST evidence',
          ].map((t, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 15, color: IV.g700 }}>
              <window.Icon name="check" size={20} color={IV.purple} />{t}
            </div>
          ))}
        </div>
      </div>
      <div>
        <window.Overline style={{ marginBottom: 14 }}>Annex A — 2022 structure</window.Overline>
        <h2 className="vg-section-title" style={{ fontSize: 36, fontWeight: 800, letterSpacing: '-0.025em', color: IV.black, margin: '0 0 24px', lineHeight: 1.1, fontFamily: IFT }}>93 controls, four themes.</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 ${IV.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: IV.purpleSubtle, color: IV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <window.Icon name={ic} size={21} />
                </div>
                <span style={{ fontSize: 26, fontWeight: 800, color: IV.purple, letterSpacing: '-0.02em', fontFamily: IFT }}>{count}</span>
              </div>
              <h3 style={{ fontSize: 15.5, fontWeight: 700, color: IV.black, margin: '0 0 6px', fontFamily: IFT, letterSpacing: '-0.01em' }}>{name}</h3>
              <p style={{ fontSize: 12.5, color: IV.g500, lineHeight: 1.5, margin: 0 }}>{desc}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  </window.Section>
);

/* ── THE SUPPORT MODEL (CORE) ─────────────────────────────── */
const Support = ({ onNav }) => (
  <window.Section bg={IV.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 27001 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 ${IV.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: IV.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: IV.g300, fontFamily: "'JetBrains Mono', monospace" }}>{s.step}</span>
          </div>
          <div>
            <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: IV.orange, marginBottom: 6 }}>{s.overline}</div>
            <h3 style={{ fontSize: 24, fontWeight: 800, letterSpacing: '-0.02em', color: IV.black, margin: '0 0 12px', lineHeight: 1.15, fontFamily: IFT }}>{s.title}</h3>
            <p style={{ fontSize: 17, fontWeight: 600, color: IV.black, lineHeight: 1.5, margin: '0 0 10px' }}>{s.lead}</p>
            <p style={{ fontSize: 15, color: IV.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: IV.purple, fontSize: 14, fontWeight: 700, fontFamily: IFT, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              {s.linkLabel} <window.Icon name="arrow" size={15} color={IV.purple} />
            </button>
          </div>
          <div style={{ background: IV.g50, border: `1px solid ${IV.g200}`, borderRadius: 0, padding: '20px 22px' }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: IV.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: IV.g700, lineHeight: 1.4 }}>
                  <span style={{ flexShrink: 0, marginTop: 1 }}><window.Icon name="check" size={17} color={IV.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: IV.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 ${IV.purpleLight}`, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
              <div style={{ width: 46, height: 46, borderRadius: '50%', background: IV.purpleSubtle, color: IV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <window.Icon name={ic} size={23} />
              </div>
            </div>
            <div style={{ fontSize: 11, fontWeight: 700, color: IV.orange, fontFamily: "'JetBrains Mono', monospace", marginBottom: 6 }}>{dur}</div>
            <div style={{ fontSize: 15, fontWeight: 700, color: IV.black, marginBottom: 6, fontFamily: IFT, letterSpacing: '-0.01em' }}>{t}</div>
            <div style={{ fontSize: 12.5, color: IV.g500, lineHeight: 1.45, maxWidth: 160 }}>{d}</div>
          </div>
        ))}
      </div>
    </div>
  </window.Section>
);

/* ── WHY VERIGO + CROSS-FRAMEWORK ─────────────────────────── */
const WhyAndCross = ({ onNav }) => (
  <window.Section bg={IV.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: IV.black, margin: '0 0 24px', lineHeight: 1.12, fontFamily: IFT }}>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 20+ years and credentials including CISSP, CISM, and ISO 27001 Lead Auditor — never junior consultants with templates.'],
            ['gauge', 'Audit-ready by design', 'Controls are embedded into how you operate, 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: IV.purpleSubtle, color: IV.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: IV.black, margin: '0 0 5px', fontFamily: IFT, letterSpacing: '-0.01em' }}>{t}</h3>
                <p style={{ fontSize: 14, color: IV.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: IV.black, margin: '0 0 12px', lineHeight: 1.12, fontFamily: IFT }}>ISO 27001 is your evidence hub.</h2>
        <p style={{ fontSize: 15.5, color: IV.g600, lineHeight: 1.65, margin: '0 0 24px' }}>
          Our cross-framework control mapping lets a single ISO 27001 control — and its evidence — serve multiple certifications. 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 ${IV.g200}`, borderRadius: 0, padding: '20px 20px', fontFamily: IFT, transition: 'all 160ms ease-out' }}
              onMouseEnter={(e) => { e.currentTarget.style.borderColor = IV.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 = IV.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: IV.purpleSubtle, color: IV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <window.Icon name={ic} size={20} />
                </div>
                <window.Icon name="arrow" size={16} color={IV.g300} />
              </div>
              <h3 style={{ fontSize: 16, fontWeight: 800, color: IV.black, margin: '0 0 6px', fontFamily: IFT, letterSpacing: '-0.01em' }}>{name}</h3>
              <p style={{ fontSize: 12.5, color: IV.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: IV.purple, fontSize: 14, fontWeight: 700, fontFamily: IFT, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          View all six frameworks <window.Icon name="arrow" size={15} color={IV.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 27001 questions</window.Overline>
          <h2 className="vg-section-title" style={{ fontSize: 36, fontWeight: 800, letterSpacing: '-0.03em', color: IV.black, margin: '0 0 18px', lineHeight: 1.1, fontFamily: IFT }}>Good to know before we start.</h2>
          <p style={{ fontSize: 15.5, color: IV.g600, lineHeight: 1.65, margin: '0 0 24px' }}>Questions on scope, timeline, or the 2022 transition? 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 ${IV.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 ${IV.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: IFT }}>
                  <span style={{ fontSize: 16, fontWeight: 700, color: IV.black, letterSpacing: '-0.01em' }}>{q}</span>
                  <span style={{ flexShrink: 0, width: 28, height: 28, borderRadius: '50%', background: isOpen ? IV.purple : IV.purpleSubtle, color: isOpen ? '#fff' : IV.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: IV.g600, lineHeight: 1.7, margin: 0, maxWidth: 680 }}>{a}</p>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </window.Section>
  );
};

/* ── PAGE ─────────────────────────────────────────────────── */
const ISO27001Page = ({ onNav }) => (
  <div>
    <Hero onNav={onNav} />
    <Stats />
    <Overview />
    <Support onNav={onNav} />
    <Journey />
    <WhyAndCross onNav={onNav} />
    <FAQ onNav={onNav} />
    <window.Section bg={IV.g50} pad="0">
      <window.CTABand
        title="Ready to certify to ISO 27001?"
        body="Tell us where you are — building from scratch, transitioning to the 2022 edition, or preparing for a Stage 2 audit. We'll come back with a scoped plan, fixed pricing, and the fastest path to a certified ISMS."
        primary="Start a Conversation" onNav={onNav} dest="contact" />
    </window.Section>
  </div>
);

Object.assign(window, { ISO27001Page });
