// SOC2.jsx — Verigo Global: dedicated SOC 2 examination + support page
const { V: SV, MAXW: SMW, FONT: SFT } = window;

/* ── DATA ─────────────────────────────────────────────────── */
const TSC = [
  ['lock', 'Security', 'Required', 'The mandatory Common Criteria — logical and physical access, change management, risk mitigation, and monitoring. Every SOC 2 examination includes it.'],
  ['gauge', 'Availability', 'Optional', 'Whether the system meets the uptime and performance commitments made to customers, including capacity, backup, and recovery.'],
  ['check', 'Processing Integrity', 'Optional', 'Whether processing is complete, valid, accurate, timely, and authorized — the data goes in and comes out correctly.'],
  ['shield', 'Confidentiality', 'Optional', 'How information designated as confidential is protected across its lifecycle, from collection through disposal.'],
  ['users', 'Privacy', 'Optional', 'How personal information is collected, used, retained, disclosed, and disposed of in line with your privacy notice.'],
];

const EXAM_TYPES = [
  {
    badge: 'Type I', icon: 'file', tone: 'subtle',
    headline: 'Design, at a point in time.',
    body: 'A Type I examination reports on whether your controls are suitably designed to meet the selected Trust Services Criteria as of a single date — a snapshot of how the system is built.',
    points: [
      ['Point-in-time opinion', 'Assesses control design on one specific date.'],
      ['Faster to issue', 'No multi-month observation window required.'],
      ['A natural first step', 'Often used to enter the market before a Type II.'],
    ],
    best: 'Best when you need a credible report quickly, or are publishing your first SOC 2.',
  },
  {
    badge: 'Type II', icon: 'refresh', tone: 'brand',
    headline: 'Operating effectiveness, over time.',
    body: 'A Type II examination reports on whether those controls were not only designed well but operated effectively across an observation window — typically three to twelve months of evidence.',
    points: [
      ['Period-of-time opinion', 'Tests controls across a 3–12 month window.'],
      ['Evidence of operation', 'Auditor samples real activity, not just policy.'],
      ['The market expectation', 'What most enterprise buyers now require.'],
    ],
    best: 'Best when customers and vendor-risk teams expect proof your controls actually run.',
  },
];

const DELIVERY = [
  {
    step: '01', icon: 'search', overline: 'Assess',
    title: 'Readiness Assessment',
    lead: 'Scope the examination and find the gaps before the auditor does.',
    desc: 'We help you define the right system boundary and Trust Services Criteria, then benchmark your current controls against them — scoring gaps by risk and effort and handing you an independent remediation roadmap.',
    deliverables: ['Scope & criteria selection', 'Control gap analysis against the TSC', 'Risk-scored remediation roadmap', 'Type I vs Type II recommendation'],
    link: 'services', linkLabel: 'About readiness assessments',
  },
  {
    step: '02', icon: 'layers', overline: 'Implement',
    title: 'Implementation Toolkit',
    lead: 'Build the controls and the evidence engine the examination will test.',
    desc: 'A practitioner-led program that stands up the policies, controls, and procedures behind each criterion — and the evidence-collection routines that make a Type II observation window run quietly in the background.',
    deliverables: ['Policy & control implementation', 'Evidence collection procedures', 'Vendor & access review cadence', 'Control owner enablement'],
    link: 'toolkit:soc2', linkLabel: 'Explore the SOC 2 toolkit',
  },
  {
    step: '03', icon: 'clipboard', overline: 'Prepare',
    title: 'Pre-Examination Preparation',
    lead: 'Walk into the examination knowing the opinion will be clean.',
    desc: 'A mock examination run by a lead reviewer independent of your implementation team — testing evidence against the criteria, surfacing exceptions while there is still time to remediate, and coaching your control owners for auditor walkthroughs.',
    deliverables: ['Mock examination & evidence test', 'Exception log & corrective actions', 'Control-owner walkthrough coaching', 'Auditor-request (PBC) readiness'],
    link: 'services', linkLabel: 'About pre-audit preparation',
  },
  {
    step: '04', icon: 'award', overline: 'Examine & Sustain',
    title: 'Examination & Renewal Support',
    lead: 'Get the report issued — and keep earning it every year.',
    desc: 'We coordinate with the licensed CPA firm that performs the independent examination, manage the evidence and exceptions through to a clean opinion, then keep your evidence engine running so each annual renewal is a non-event.',
    deliverables: ['CPA examination coordination', 'Evidence & exception management', 'Report review & remediation', 'Annual renewal support'],
    link: 'contact', linkLabel: 'Talk to a practitioner',
  },
];

const PROCESS = [
  ['search', 'Readiness', '2–4 wks', 'Gap analysis against the chosen Trust Services Criteria.'],
  ['layers', 'Remediate', '2–4 mo', 'Build controls, policies, and the evidence routine.'],
  ['clipboard', 'Prepare', '2–4 wks', 'Mock examination and auditor-request readiness.'],
  ['refresh', 'Observation', '3–12 mo', 'Type II window — controls operate and evidence accrues.'],
  ['shield', 'Examination', '3–6 wks', 'Independent CPA firm tests controls and evidence.'],
  ['award', 'Report issued', '—', 'SOC 2 opinion delivered; renew on an annual cycle.'],
];

const OUTCOMES = [
  ['doc', 'A shareable independent report', 'The deliverable is a licensed CPA firm\u2019s opinion on your controls — a report you can share under NDA to answer security due diligence in one document instead of a hundred emails.'],
  ['zap', 'Faster, unblocked sales', 'Security review is one of the most common reasons enterprise deals stall. A current SOC 2 report removes that blocker and shortens the path from interest to signature.'],
  ['shield', 'Less vendor-risk friction', 'Procurement and vendor-risk teams accept a SOC 2 report in place of bespoke questionnaires, so your team answers diligence once rather than for every prospect.'],
  ['refresh', 'A repeatable evidence engine', 'Because controls are embedded into how you operate, each annual renewal draws on evidence the business already generates — the second examination is far lighter than the first.'],
  ['network', 'A foundation you can reuse', 'The controls behind your SOC 2 map directly onto ISO 27001, HIPAA, and NIST — so the work you do here accelerates every framework that comes next.'],
  ['gauge', 'A genuinely stronger posture', 'Beyond the report, the discipline of continuous evidence and monitoring leaves your organization measurably more resilient — not just certified on paper.'],
];

const SOC_FAQ = [
  ['What exactly is a SOC 2 examination?', 'SOC 2 is an attestation examination performed by a licensed CPA firm under AICPA standards. The firm examines the controls relevant to your selected Trust Services Criteria and issues an independent report containing its opinion. It is an examination and opinion — not a pass/fail certification or a checklist audit.'],
  ['Should we start with Type I or Type II?', 'It depends on your timeline and what customers are asking for. A Type I examination reports on control design at a point in time and can be issued quickly, which is useful for entering the market. A Type II examination tests operating effectiveness over a 3–12 month window and is what most enterprise buyers ultimately expect. Many clients publish a Type I first, then move into a Type II observation window.'],
  ['Which Trust Services Criteria do we need?', 'Security (the Common Criteria) is mandatory in every SOC 2 examination. Availability, Processing Integrity, Confidentiality, and Privacy are optional — you select the ones that match the commitments you make to customers. We help you scope the right set in the readiness assessment so the examination is neither thin nor needlessly broad.'],
  ['Can Verigo perform the examination itself?', 'No — and that independence is the point. The examination and opinion must be issued by an independent licensed CPA firm. Verigo guides you through readiness, implementation, and preparation, and coordinates the examination, but we keep our pre-examination reviewer independent of your implementation team to protect the integrity of the result.'],
  ['How long is a SOC 2 report valid?', 'A SOC 2 report covers a stated period and customers generally expect one issued within the last twelve months. That is why we build a continuous evidence engine: rather than scrambling each year, your controls keep producing the evidence the next examination needs, making annual renewal routine.'],
];

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

/* ── HERO ─────────────────────────────────────────────────── */
const SHero = ({ onNav }) => (
  <section style={{ background: SV.g50, padding: '56px 0 64px', borderBottom: `1px solid ${SV.g200}`, position: 'relative', overflow: 'hidden' }}>
    <window.HeroWatermark variant="grid" color={SV.orangeDark} opacity={0.4} style={{ top: -20, right: -20, width: 480, height: 440 }} />
    <div style={{ maxWidth: SMW, margin: '0 auto', padding: '0 32px', position: 'relative', zIndex: 1 }}>
      <SCrumb 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: SV.purpleSubtle, color: SV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <window.Icon name="shield" size={30} />
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <window.Tag color={SV.purple} bg={SV.purpleSubtle} border={SV.purpleSubtle}>AICPA Attestation</window.Tag>
              <window.Tag color={SV.g600} bg="#fff" border={SV.g200}>SOC 2 Type I &amp; Type II</window.Tag>
            </div>
          </div>
          <h1 className="vg-hero-title" style={{ fontSize: 62, fontWeight: 800, letterSpacing: '-0.035em', color: SV.black, margin: '0 0 18px', lineHeight: 1, fontFamily: SFT }}>
            SOC 2 examinations, <span style={{ color: SV.purple }}>delivered end to end.</span>
          </h1>
          <p style={{ fontSize: 19, color: SV.g600, lineHeight: 1.6, margin: '0 0 30px', maxWidth: 600 }}>
            The baseline trust attestation for US and India-based SaaS and IT service providers. Verigo takes you from first gap analysis to a clean SOC 2 opinion — and keeps the evidence engine running so every annual examination is a non-event.
          </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('delivery')?.scrollIntoView({ behavior: 'smooth', block: 'start' })}>See how we help</window.Btn>
          </div>
        </div>
        <div style={{ background: '#fff', border: `1px solid ${SV.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: SV.g400, marginBottom: 16 }}>At a glance</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {[
              ['globe', 'Scope', 'United States & India'],
              ['layers', 'Criteria', '5 Trust Services Criteria'],
              ['file', 'Report types', 'Type I & Type II examinations'],
              ['gauge', 'Type II window', '3–12 month observation'],
            ].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: SV.purpleSubtle, color: SV.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: SV.g400, letterSpacing: '0.04em', textTransform: 'uppercase' }}>{k}</div>
                  <div style={{ fontSize: 14.5, fontWeight: 600, color: SV.black, lineHeight: 1.35 }}>{val}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* ── STATS STRIP ──────────────────────────────────────────── */
const SStats = () => (
  <div style={{ background: '#fff', borderBottom: `1px solid ${SV.g200}` }}>
    <div className="vg-container vg-stats-row" style={{ maxWidth: SMW, margin: '0 auto', padding: '0 32px', display: 'flex' }}>
      {[
        ['76%', 'Adoption among audited orgs (2025)'],
        ['5', 'Trust Services Criteria'],
        ['Type I & II', 'Point-in-time & period reports'],
        ['12 mo', 'Typical report validity window'],
      ].map(([v, l], i) => (
        <div key={i} style={{ flex: 1, padding: '34px 24px', borderLeft: i ? `1px solid ${SV.g200}` : 'none', display: 'flex', flexDirection: 'column', gap: 6 }}>
          <span style={{ fontSize: 34, fontWeight: 800, color: SV.purple, letterSpacing: '-0.02em', lineHeight: 1, fontFamily: SFT }}>{v}</span>
          <span style={{ fontSize: 13.5, color: SV.g500 }}>{l}</span>
        </div>
      ))}
    </div>
  </div>
);

/* ── WHAT IT IS / TRUST SERVICES CRITERIA ─────────────────── */
const SOverview = () => (
  <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 a SOC 2 examination is</window.Overline>
        <h2 className="vg-section-title" style={{ fontSize: 36, fontWeight: 800, letterSpacing: '-0.025em', color: SV.black, margin: '0 0 20px', lineHeight: 1.1, fontFamily: SFT }}>An independent opinion, not a checklist.</h2>
        <p style={{ fontSize: 16.5, color: SV.g600, lineHeight: 1.7, margin: '0 0 18px' }}>
          SOC 2 is an <strong style={{ color: SV.black }}>attestation examination</strong> performed by a licensed CPA firm under AICPA standards. The firm examines the controls relevant to your selected criteria and issues an independent report stating its opinion on them.
        </p>
        <p style={{ fontSize: 16.5, color: SV.g600, lineHeight: 1.7, margin: 0 }}>
          The examination is built on the five <strong style={{ color: SV.black }}>Trust Services Criteria</strong>. Verigo&rsquo;s <strong style={{ color: SV.black }}>Compliance by Design</strong> approach embeds those controls into how you already operate — so the evidence the examination needs is generated by the process, not assembled in a panic before each window.
        </p>
        <div style={{ marginTop: 28, display: 'flex', flexDirection: 'column', gap: 12 }}>
          {[
            'Security is mandatory; the other four criteria are selected to fit your commitments',
            'Type I examines design; Type II examines design and operating effectiveness',
            'The natural hub for ISO 27001, HIPAA, and NIST evidence reuse',
          ].map((t, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 15, color: SV.g700 }}>
              <window.Icon name="check" size={20} color={SV.purple} />{t}
            </div>
          ))}
        </div>
      </div>
      <div>
        <window.Overline style={{ marginBottom: 14 }}>The five Trust Services Criteria</window.Overline>
        <h2 className="vg-section-title" style={{ fontSize: 36, fontWeight: 800, letterSpacing: '-0.025em', color: SV.black, margin: '0 0 24px', lineHeight: 1.1, fontFamily: SFT }}>One required. Four by choice.</h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {TSC.map(([ic, name, req, desc], i) => (
            <div key={i} style={{ border: `1px solid ${SV.g200}`, borderRadius: 0, padding: '18px 20px', background: '#fff', display: 'flex', gap: 16, alignItems: 'flex-start' }}>
              <div style={{ width: 40, height: 40, borderRadius: 0, background: SV.purpleSubtle, color: SV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <window.Icon name={ic} size={21} />
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, marginBottom: 4 }}>
                  <h3 style={{ fontSize: 15.5, fontWeight: 700, color: SV.black, margin: 0, fontFamily: SFT, letterSpacing: '-0.01em' }}>{name}</h3>
                  <span style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: req === 'Required' ? SV.orange : SV.g500, background: req === 'Required' ? SV.orangeSubtle : SV.g100, padding: '3px 9px', whiteSpace: 'nowrap' }}>{req}</span>
                </div>
                <p style={{ fontSize: 12.5, color: SV.g500, lineHeight: 1.5, margin: 0 }}>{desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </window.Section>
);

/* ── TYPE I vs TYPE II ────────────────────────────────────── */
const ExamTypes = () => (
  <window.Section bg={SV.g50} pad="84px 0">
    <window.SectionHeader align="center" overline="Type I &amp; Type II examinations"
      title="Two examinations. Two questions."
      sub="A SOC 2 report comes in two forms. The difference is not the controls you build — it is what the examination is asked to prove about them." maxSub={640} />
    <div className="vg-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
      {EXAM_TYPES.map((t) => {
        const brand = t.tone === 'brand';
        return (
          <div key={t.badge} style={{ background: '#fff', border: `1px solid ${brand ? SV.purple : SV.g200}`, borderRadius: 0, padding: '34px 34px', display: 'flex', flexDirection: 'column', gap: 18, boxShadow: brand ? '0 8px 32px rgba(91,46,145,0.10)' : 'none' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
              <div style={{ width: 52, height: 52, borderRadius: 0, background: brand ? SV.purple : SV.purpleSubtle, color: brand ? '#fff' : SV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <window.Icon name={t.icon} size={26} color={brand ? '#fff' : SV.purple} />
              </div>
              <div>
                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: SV.orange }}>SOC 2</div>
                <div style={{ fontSize: 26, fontWeight: 800, letterSpacing: '-0.02em', color: SV.black, fontFamily: SFT }}>{t.badge}</div>
              </div>
            </div>
            <h3 style={{ fontSize: 21, fontWeight: 800, letterSpacing: '-0.015em', color: SV.black, margin: 0, lineHeight: 1.2, fontFamily: SFT }}>{t.headline}</h3>
            <p style={{ fontSize: 15, color: SV.g600, lineHeight: 1.65, margin: 0 }}>{t.body}</p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, borderTop: `1px solid ${SV.g100}`, paddingTop: 18 }}>
              {t.points.map(([h, d], j) => (
                <div key={j} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                  <span style={{ flexShrink: 0, marginTop: 1 }}><window.Icon name="check" size={18} color={SV.purple} /></span>
                  <div>
                    <div style={{ fontSize: 14, fontWeight: 700, color: SV.black, letterSpacing: '-0.01em' }}>{h}</div>
                    <div style={{ fontSize: 13, color: SV.g500, lineHeight: 1.5 }}>{d}</div>
                  </div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 'auto', background: SV.g50, borderLeft: `3px solid ${SV.orange}`, padding: '12px 16px', fontSize: 13.5, color: SV.g700, lineHeight: 1.55 }}>{t.best}</div>
          </div>
        );
      })}
    </div>
  </window.Section>
);

/* ── DELIVERY MODEL (CORE) ────────────────────────────────── */
const SDelivery = ({ onNav }) => (
  <window.Section bg="#fff" pad="84px 0">
    <div id="delivery" style={{ scrollMarginTop: 24 }}>
      <window.SectionHeader align="center" overline="How Verigo delivers SOC 2"
        title={<>Four service lines, mapped<br />to the SOC 2 examination lifecycle.</>}
        sub="Engage any single stage or move through the whole journey with one accountable, senior-led team — coordinating the independent examination, with a peer-review quality gate on every deliverable." maxSub={660} />
    </div>
    <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
      {DELIVERY.map((s) => (
        <div key={s.step} style={{ background: '#fff', border: `1px solid ${SV.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: SV.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: SV.g300, fontFamily: "'JetBrains Mono', monospace" }}>{s.step}</span>
          </div>
          <div>
            <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: SV.orange, marginBottom: 6 }}>{s.overline}</div>
            <h3 style={{ fontSize: 24, fontWeight: 800, letterSpacing: '-0.02em', color: SV.black, margin: '0 0 12px', lineHeight: 1.15, fontFamily: SFT }}>{s.title}</h3>
            <p style={{ fontSize: 17, fontWeight: 600, color: SV.black, lineHeight: 1.5, margin: '0 0 10px' }}>{s.lead}</p>
            <p style={{ fontSize: 15, color: SV.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: SV.purple, fontSize: 14, fontWeight: 700, fontFamily: SFT, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              {s.linkLabel} <window.Icon name="arrow" size={15} color={SV.purple} />
            </button>
          </div>
          <div style={{ background: SV.g50, border: `1px solid ${SV.g200}`, borderRadius: 0, padding: '20px 22px' }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: SV.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: SV.g700, lineHeight: 1.4 }}>
                  <span style={{ flexShrink: 0, marginTop: 1 }}><window.Icon name="check" size={17} color={SV.purple} /></span>{d}
                </div>
              ))}
            </div>
          </div>
        </div>
      ))}
    </div>
  </window.Section>
);

/* ── PROCESS TIMELINE ─────────────────────────────────────── */
const SProcess = () => (
  <window.Section bg={SV.g50} pad="84px 0">
    <window.SectionHeader align="center" overline="The SOC 2 process, in alignment"
      title="From readiness to a clean opinion."
      sub="Here is how a SOC 2 engagement runs in practice — with the observation window that sets a Type II examination apart, and indicative durations." maxSub={640} />
    <div style={{ position: 'relative' }}>
      <div style={{ position: 'absolute', top: 33, left: '8.33%', right: '8.33%', height: 2, background: SV.g200, zIndex: 0 }} />
      <div className="vg-grid-6" style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', position: 'relative', zIndex: 1 }}>
        {PROCESS.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 ${SV.purpleLight}`, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
              <div style={{ width: 46, height: 46, borderRadius: '50%', background: SV.purpleSubtle, color: SV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <window.Icon name={ic} size={23} />
              </div>
            </div>
            <div style={{ fontSize: 11, fontWeight: 700, color: SV.orange, fontFamily: "'JetBrains Mono', monospace", marginBottom: 6 }}>{dur}</div>
            <div style={{ fontSize: 15, fontWeight: 700, color: SV.black, marginBottom: 6, fontFamily: SFT, letterSpacing: '-0.01em' }}>{t}</div>
            <div style={{ fontSize: 12.5, color: SV.g500, lineHeight: 1.45, maxWidth: 160 }}>{d}</div>
          </div>
        ))}
      </div>
    </div>
  </window.Section>
);

/* ── OUTCOMES ─────────────────────────────────────────────── */
const SOutcomes = () => (
  <window.Section bg="#fff" pad="84px 0">
    <window.SectionHeader overline="What a SOC 2 examination delivers"
      title="The outcomes, in detail."
      sub="A SOC 2 report is the visible artifact — but the value compounds well beyond the PDF. Here is what the examination actually returns to your business." maxSub={680} />
    <div className="vg-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
      {OUTCOMES.map(([ic, t, d], i) => (
        <div key={i} style={{ border: `1px solid ${SV.g200}`, borderRadius: 0, padding: '28px 26px', background: '#fff', display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div style={{ width: 46, height: 46, borderRadius: 0, background: SV.purpleSubtle, color: SV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <window.Icon name={ic} size={23} />
          </div>
          <h3 style={{ fontSize: 18, fontWeight: 700, color: SV.black, margin: 0, lineHeight: 1.25, letterSpacing: '-0.01em', fontFamily: SFT }}>{t}</h3>
          <p style={{ fontSize: 14.5, color: SV.g600, lineHeight: 1.65, margin: 0 }}>{d}</p>
        </div>
      ))}
    </div>
  </window.Section>
);

/* ── FAQ ──────────────────────────────────────────────────── */
const SFAQ = ({ onNav }) => {
  const [open, setOpen] = React.useState(0);
  return (
    <window.Section bg={SV.g50} 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 }}>SOC 2 questions</window.Overline>
          <h2 className="vg-section-title" style={{ fontSize: 36, fontWeight: 800, letterSpacing: '-0.03em', color: SV.black, margin: '0 0 18px', lineHeight: 1.1, fontFamily: SFT }}>Good to know before we start.</h2>
          <p style={{ fontSize: 15.5, color: SV.g600, lineHeight: 1.65, margin: '0 0 24px' }}>Questions on scope, criteria, or the difference between a Type I and Type II examination? 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 ${SV.g200}`, borderRadius: 0, overflow: 'hidden', background: '#fff' }}>
          {SOC_FAQ.map(([q, a], i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ borderTop: i ? `1px solid ${SV.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: SFT }}>
                  <span style={{ fontSize: 16, fontWeight: 700, color: SV.black, letterSpacing: '-0.01em' }}>{q}</span>
                  <span style={{ flexShrink: 0, width: 28, height: 28, borderRadius: '50%', background: isOpen ? SV.purple : SV.purpleSubtle, color: isOpen ? '#fff' : SV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18, fontWeight: 700 }}>{isOpen ? '\u2013' : '+'}</span>
                </button>
                {isOpen && (
                  <div style={{ padding: '0 26px 24px' }}>
                    <p style={{ fontSize: 14.5, color: SV.g600, lineHeight: 1.7, margin: 0, maxWidth: 680 }}>{a}</p>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </window.Section>
  );
};

/* ── PAGE ─────────────────────────────────────────────────── */
const SOC2Page = ({ onNav }) => (
  <div>
    <SHero onNav={onNav} />
    <SStats />
    <SOverview />
    <ExamTypes />
    <SDelivery onNav={onNav} />
    <SProcess />
    <SOutcomes />
    <SFAQ onNav={onNav} />
    <window.Section bg="#fff" pad="0">
      <window.CTABand
        title="Ready for your SOC 2 examination?"
        body="Tell us where you are — scoping your first Type I, moving into a Type II window, or renewing an existing report. We'll come back with a scoped plan, fixed pricing, and the fastest path to a clean opinion."
        primary="Start a Conversation" onNav={onNav} dest="contact" />
    </window.Section>
  </div>
);

Object.assign(window, { SOC2Page });
