// HITRUST.jsx — Verigo Global: dedicated HITRUST CSF certification + support page
const { V: HV, MAXW: HMW, FONT: HFT } = window;

/* ── DATA ─────────────────────────────────────────────────── */
const TIERS = [
  {
    code: 'e1', name: 'Essentials, 1-year', icon: 'shield', controls: '44 requirements', protects: 'Foundational hygiene',
    cadence: 'Validated assessment, annual',
    focus: 'A foundational cybersecurity baseline covering the most critical, high-impact controls. The fastest route to a validated HITRUST credential and a natural entry point before stepping up to i1 or r2.',
  },
  {
    code: 'i1', name: 'Implemented, 1-year', icon: 'gauge', controls: '182 requirements', protects: 'Leading practices',
    cadence: 'Validated assessment, annual',
    focus: 'A threat-adaptive assessment built around leading security practices and the controls that counter prevalent threats. Substantial assurance with a moderate, predictable lift — the most common starting point for health-tech vendors.',
  },
  {
    code: 'r2', name: 'Risk-based, 2-year', icon: 'award', controls: '300+ tailored', protects: 'Comprehensive assurance',
    cadence: 'Validated assessment every 2 years, interim at year 1',
    focus: 'The most rigorous, expandable assessment — control selection scales to your organizational, system, and regulatory risk. The gold-standard credential most healthcare buyers and partners expect.',
    highlight: true,
  },
];

const AUTHORITIES = ['HIPAA', 'ISO 27001', 'NIST SP 800-53', 'NIST CSF', 'PCI DSS', 'GDPR', 'SOC 2 (TSC)', 'FedRAMP', 'CIS Controls', 'COBIT'];

const DOMAINS = [
  ['clipboard', 'Information Protection Program'],
  ['lock', 'Access Control'],
  ['server', 'Endpoint Protection'],
  ['file', 'Portable Media Security'],
  ['cpu', 'Mobile Device Security'],
  ['network', 'Wireless Security'],
  ['layers', 'Configuration Management'],
  ['target', 'Vulnerability Management'],
  ['shield', 'Network Protection'],
  ['globe', 'Transmission Protection'],
  ['lock', 'Password Management'],
  ['activity', 'Audit Logging & Monitoring'],
  ['users', 'Education, Training & Awareness'],
  ['handshake', 'Third Party Assurance'],
  ['zap', 'Incident Management'],
  ['refresh', 'Business Continuity & DR'],
  ['gauge', 'Risk Management'],
  ['building', 'Physical & Environmental Security'],
  ['heart', 'Data Protection & Privacy'],
];

const ROADMAP = [
  ['search', 'Scope & select', '2–3 wks', 'Define the system boundary and choose the right assessment type — e1, i1, or r2.'],
  ['target', 'Readiness assessment', '3–5 wks', 'Benchmark your environment against every required CSF control and score the gaps.'],
  ['layers', 'Remediate', '3–9 mo', 'Implement controls, write policies, and stand up evidence inside MyCSF.'],
  ['gauge', 'Maturity scoring', '2–4 wks', 'Score each requirement across the five PRISMA maturity levels and close shortfalls.'],
  ['clipboard', 'Validated assessment', '4–8 wks', 'An authorized External Assessor tests and validates your control evidence.'],
  ['award', 'HITRUST QA & certify', '4–8 wks', 'HITRUST performs quality assurance, issues the report, and grants certification.'],
];

const SEEKING = [
  ['gauge', 'Pick the right assessment type', 'e1, i1, and r2 differ sharply in scope, effort, and the assurance they convey. Choosing the tier your customers and risk actually require is the single biggest decision — over-reach and you burn months; under-reach and the credential won\u2019t satisfy your buyers.'],
  ['layers', 'Scope the boundary and inherit', 'A tightly defined system boundary keeps the assessment focused on what matters. We help you map where PHI lives and leverage control inheritance from your cloud and service providers so you don\u2019t re-prove controls someone else already owns.'],
  ['target', 'Score maturity honestly, then remediate', 'HITRUST scores every requirement across five PRISMA maturity levels — policy, procedure, implemented, measured, managed. An honest self-score before validation is worth far more than an optimistic one. We score, prioritize by risk, and close gaps before an assessor arrives.'],
];

const PREPARE = [
  'A defined assessment scope and system boundary',
  'The selected assessment type — e1, i1, or r2',
  'A populated MyCSF assessment object',
  'Policies and procedures mapped to each requirement',
  'Evidence across all five PRISMA maturity levels',
  'Named control owners ready for validation interviews',
];

const OUTPUTS = [
  ['search', 'Readiness & gap report', 'An independent benchmark of your environment against the CSF requirements for your chosen tier — gaps scored by risk and effort, with a prioritized remediation roadmap.'],
  ['layers', 'Validated MyCSF object', 'A complete assessment object in the MyCSF platform — every requirement scored across the five PRISMA maturity levels, with evidence mapped requirement by requirement.'],
  ['award', 'HITRUST CSF certification', 'The validated certification report and letter for your assessment type — the recognized, shareable credential your customers, partners, and regulators expect.'],
  ['clipboard', 'Corrective Action Plans', 'Tracked, dated CAPs for any requirement not yet fully met, with named owners and target dates — the structured path to closing gaps after validation.'],
  ['network', 'Inheritance & evidence package', 'Policies, procedures, and configurations organized for reuse — plus the inheritance relationships that cut duplicate effort across cloud and service-provider controls.'],
  ['handshake', 'HITRUST QA coordination', 'End-to-end coordination with your External Assessor and the HITRUST quality-assurance review, managing exceptions through to a clean, issued certification.'],
];

const TESTIMONIALS = [
  {
    quote: 'Verigo took our r2 from a daunting 300-control wall to a sequenced plan we could actually execute. They scoped the boundary tightly, set up inheritance with our cloud provider, and we cleared HITRUST QA on the first pass.',
    name: 'Dana Reyes', role: 'CISO', org: 'Regional health-tech platform', initials: 'DR',
  },
  {
    quote: 'We needed a credible credential fast to unblock an enterprise health system deal. Verigo guided us through i1 in under five months and coached our control owners so the validation interviews were a non-event.',
    name: 'Marcus Vale', role: 'VP Engineering', org: 'Clinical data SaaS vendor', initials: 'MV',
  },
  {
    quote: 'What set them apart was the honesty of the maturity scoring. They told us where we really stood across the PRISMA levels before the assessor ever saw it — no surprises, no scramble at the end.',
    name: 'Priya Nair', role: 'Director of Compliance', org: 'Healthcare BPO provider', initials: 'PN',
  },
];

const HITRUST_FAQ = [
  ['What is the HITRUST CSF?', 'The HITRUST CSF is a certifiable control framework that harmonizes more than forty authoritative sources — including HIPAA, ISO 27001, NIST SP 800-53, NIST CSF, PCI DSS, and GDPR — into a single, prescriptive, and scalable set of control requirements. Rather than reconciling overlapping mandates yourself, you implement one framework and demonstrate alignment to all of them at once.'],
  ['Which assessment do we need — e1, i1, or r2?', 'It depends on the assurance your customers require and the sensitivity of the data you handle. The e1 (Essentials) covers a 44-requirement foundational baseline. The i1 (Implemented) tests 182 requirements built around leading, threat-adaptive practices and is the common starting point for health-tech vendors. The r2 (Risk-based) is the most rigorous — 300+ tailored requirements scaled to your risk — and is the credential most large healthcare buyers ultimately expect. We confirm the right tier during scoping.'],
  ['Does HITRUST replace HIPAA?', 'No. HIPAA is the law; HITRUST is a framework for demonstrating that you meet it — and much more. The CSF maps the HIPAA Privacy, Security, and Breach Notification Rules into testable control requirements, so a HITRUST certification gives you objective, third-party-validated evidence of HIPAA alignment alongside the other authorities the CSF harmonizes.'],
  ['Who actually performs the assessment?', 'A validated assessment is performed by an authorized HITRUST External Assessor, and then HITRUST itself conducts an independent quality-assurance review before issuing certification. Verigo prepares you for and coordinates that assessment, but to protect its integrity we keep our readiness reviewer independent of the team that implemented your controls.'],
  ['How long is a HITRUST certification valid?', 'The e1 and i1 certifications are valid for one year. The r2 certification is valid for two years, with an interim assessment at the one-year mark to confirm controls remain in place. Because we embed evidence collection into how you operate, each renewal draws on evidence the business already generates rather than a year-end scramble.'],
  ['Why HITRUST instead of a plain HIPAA attestation?', 'A self-attestation says you believe you comply; a HITRUST certification proves it through independent validation against a prescriptive control set. For healthcare buyers and partners running vendor-risk reviews, that distinction is decisive — a HITRUST credential answers diligence in one recognized report instead of bespoke questionnaires, and it covers far more ground than HIPAA alone.'],
];

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

/* ── HERO ─────────────────────────────────────────────────── */
const HHero = ({ onNav }) => (
  <section style={{ background: HV.g50, padding: '56px 0 64px', borderBottom: `1px solid ${HV.g200}`, position: 'relative', overflow: 'hidden' }}>
    <window.HeroWatermark variant="orbit" color={HV.purpleDark} opacity={0.4} style={{ top: -20, right: -20, width: 480, height: 440 }} />
    <div style={{ maxWidth: HMW, margin: '0 auto', padding: '0 32px', position: 'relative', zIndex: 1 }}>
      <HCrumb 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: HV.orangeSubtle, color: HV.orange, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <window.Icon name="heart" size={30} />
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <window.Tag color={HV.orange} bg={HV.orangeSubtle} border={HV.orangeSubtle}>Healthcare Trust</window.Tag>
              <window.Tag color={HV.g600} bg="#fff" border={HV.g200}>e1 · i1 · r2</window.Tag>
            </div>
          </div>
          <h1 className="vg-hero-title" style={{ fontSize: 60, fontWeight: 800, letterSpacing: '-0.035em', color: HV.black, margin: '0 0 18px', lineHeight: 1.02, fontFamily: HFT }}>
            HITRUST CSF, <span style={{ color: HV.purple }}>certified with confidence.</span>
          </h1>
          <p style={{ fontSize: 19, color: HV.g600, lineHeight: 1.6, margin: '0 0 30px', maxWidth: 600 }}>
            The certifiable trust framework for healthcare information — one control set that harmonizes HIPAA, ISO 27001, NIST, and more. Verigo takes you from scoping and readiness to a validated assessment, and through HITRUST quality assurance to certification itself.
          </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={() => onNav('toolkit:hitrust')}>Explore the HITRUST toolkit</window.Btn>
            <window.Btn kind="ghost" onClick={() => document.getElementById('roadmap')?.scrollIntoView({ behavior: 'smooth', block: 'start' })}>See the roadmap</window.Btn>
          </div>
        </div>
        <div style={{ background: '#fff', border: `1px solid ${HV.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: HV.g400, marginBottom: 16 }}>At a glance</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {[
              ['building', 'Authority', 'HITRUST Alliance'],
              ['heart', 'Protects', 'PHI & sensitive data'],
              ['layers', 'Assessments', 'e1 · i1 · r2'],
              ['gauge', 'Typical timeline', '6–12 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: HV.purpleSubtle, color: HV.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: HV.g400, letterSpacing: '0.04em', textTransform: 'uppercase' }}>{k}</div>
                  <div style={{ fontSize: 14.5, fontWeight: 600, color: HV.black, lineHeight: 1.35 }}>{val}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* ── STATS STRIP ──────────────────────────────────────────── */
const HStats = () => (
  <div style={{ background: '#fff', borderBottom: `1px solid ${HV.g200}` }}>
    <div className="vg-container vg-stats-row" style={{ maxWidth: HMW, margin: '0 auto', padding: '0 32px', display: 'flex' }}>
      {[
        ['40+', 'Authoritative sources harmonized'],
        ['19', 'CSF control domains'],
        ['e1 · i1 · r2', 'Three assessment types'],
        ['2 yr', 'r2 certification validity'],
      ].map(([v, l], i) => (
        <div key={i} style={{ flex: 1, padding: '34px 24px', borderLeft: i ? `1px solid ${HV.g200}` : 'none', display: 'flex', flexDirection: 'column', gap: 6 }}>
          <span style={{ fontSize: 34, fontWeight: 800, color: HV.orange, letterSpacing: '-0.02em', lineHeight: 1, fontFamily: HFT }}>{v}</span>
          <span style={{ fontSize: 13.5, color: HV.g500 }}>{l}</span>
        </div>
      ))}
    </div>
  </div>
);

/* ── WHY HITRUST ──────────────────────────────────────────── */
const WhyHitrust = () => (
  <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 }}>Why HITRUST exists</window.Overline>
        <h2 className="vg-section-title" style={{ fontSize: 36, fontWeight: 800, letterSpacing: '-0.025em', color: HV.black, margin: '0 0 20px', lineHeight: 1.1, fontFamily: HFT }}>One framework instead of a dozen overlapping mandates.</h2>
        <p style={{ fontSize: 16.5, color: HV.g600, lineHeight: 1.7, margin: '0 0 18px' }}>
          Healthcare organizations face a tangle of overlapping obligations — HIPAA, ISO 27001, NIST, PCI DSS, and more — each with its own language and evidence. <strong style={{ color: HV.black }}>The HITRUST CSF harmonizes all of them into a single certifiable control set</strong>, so you implement once and demonstrate alignment to many.
        </p>
        <p style={{ fontSize: 16.5, color: HV.g600, lineHeight: 1.7, margin: '0 0 18px' }}>
          Crucially, HITRUST is <strong style={{ color: HV.black }}>certifiable and independently validated</strong> — not a self-attestation. An authorized External Assessor tests your evidence and HITRUST itself performs quality assurance before certification, giving buyers objective proof rather than a promise.
        </p>
        <p style={{ fontSize: 16.5, color: HV.g600, lineHeight: 1.7, margin: 0 }}>
          For health-tech vendors, IT contractors, and anyone supporting HIPAA-covered entities, a HITRUST credential has become the credential vendor-risk teams ask for by name.
        </p>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        <div style={{ background: HV.charcoal, borderRadius: 0, padding: '30px 32px', position: 'relative', overflow: 'hidden' }}>
          <window.HeroWatermark variant="orbit" color="#ffffff" opacity={0.08} style={{ bottom: -40, right: -30, width: 240, height: 220 }} />
          <div style={{ position: 'relative', zIndex: 1 }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'rgba(232,98,42,0.2)', color: HV.orangeLight, fontSize: 11.5, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', padding: '6px 12px', marginBottom: 16 }}>
              <span style={{ width: 7, height: 7, borderRadius: '50%', background: HV.orange }}></span> Why it carries weight
            </div>
            <h3 style={{ fontSize: 22, fontWeight: 800, color: '#fff', margin: '0 0 12px', letterSpacing: '-0.02em', lineHeight: 1.25, fontFamily: HFT }}>Validated, not self-declared.</h3>
            <p style={{ fontSize: 14.5, color: 'rgba(255,255,255,0.7)', lineHeight: 1.65, margin: 0 }}>
              A validated HITRUST assessment is tested by an authorized External Assessor and quality-assured by HITRUST before any certification is granted. That two-stage independence is exactly why a HITRUST report answers vendor-risk diligence where a self-attestation cannot.
            </p>
          </div>
        </div>
        <div className="vg-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          {[
            ['heart', 'PHI', 'Protected Health Information — the patient data HIPAA-covered entities and their partners are bound to safeguard.'],
            ['layers', 'CSF', 'Common Security Framework — the harmonized, certifiable control set that maps to 40+ authoritative sources.'],
          ].map(([ic, t, d], i) => (
            <div key={i} style={{ border: `1px solid ${HV.g200}`, borderRadius: 0, padding: '20px 20px', background: '#fff' }}>
              <div style={{ width: 40, height: 40, borderRadius: 0, background: HV.orangeSubtle, color: HV.orange, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 12 }}>
                <window.Icon name={ic} size={21} />
              </div>
              <h4 style={{ fontSize: 15, fontWeight: 800, color: HV.black, margin: '0 0 6px', fontFamily: HFT }}>{t}</h4>
              <p style={{ fontSize: 12.5, color: HV.g500, lineHeight: 1.5, margin: 0 }}>{d}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  </window.Section>
);

/* ── ASSESSMENT TIERS ─────────────────────────────────────── */
const Tiers = () => (
  <window.Section bg={HV.g50} pad="84px 0">
    <window.SectionHeader align="center" overline="The three assessment types"
      title="Three credentials. Rising assurance."
      sub="HITRUST scales the depth of assessment to the assurance you need. Your customers, data sensitivity, and risk profile decide which credential is right." maxSub={640} />
    <div className="vg-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, alignItems: 'stretch' }}>
      {TIERS.map((t) => (
        <div key={t.code} style={{ background: '#fff', border: `1px solid ${t.highlight ? HV.orange : HV.g200}`, borderRadius: 0, padding: '30px 28px', display: 'flex', flexDirection: 'column', gap: 16, boxShadow: t.highlight ? '0 8px 32px rgba(232,98,42,0.12)' : 'none', position: 'relative' }}>
          {t.highlight && <span style={{ position: 'absolute', top: 22, right: 24, fontSize: 10, fontWeight: 700, letterSpacing: '0.06em', color: HV.orange, background: HV.orangeSubtle, padding: '4px 10px', textTransform: 'uppercase' }}>Most recognized</span>}
          <div style={{ width: 52, height: 52, borderRadius: 0, background: t.highlight ? HV.orange : HV.purpleSubtle, color: t.highlight ? '#fff' : HV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <window.Icon name={t.icon} size={26} color={t.highlight ? '#fff' : HV.purple} />
          </div>
          <div>
            <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: HV.g400, fontFamily: "'JetBrains Mono', monospace" }}>{t.code}</div>
            <h3 style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-0.02em', color: HV.black, margin: '2px 0 0', fontFamily: HFT }}>{t.name}</h3>
          </div>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            <span style={{ fontSize: 12, fontWeight: 700, color: HV.purple, background: HV.purpleSubtle, padding: '5px 11px' }}>{t.controls}</span>
            <span style={{ fontSize: 12, fontWeight: 700, color: HV.g600, background: HV.g100, padding: '5px 11px' }}>{t.protects}</span>
          </div>
          <p style={{ fontSize: 14, color: HV.g600, lineHeight: 1.65, margin: 0, flex: 1 }}>{t.focus}</p>
          <div style={{ borderTop: `1px solid ${HV.g100}`, paddingTop: 14, display: 'flex', gap: 10, alignItems: 'flex-start' }}>
            <span style={{ flexShrink: 0, marginTop: 1 }}><window.Icon name="clipboard" size={17} color={HV.g400} /></span>
            <div>
              <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: HV.g400, marginBottom: 2 }}>How it&rsquo;s assessed</div>
              <div style={{ fontSize: 13, color: HV.g700, lineHeight: 1.45, fontWeight: 600 }}>{t.cadence}</div>
            </div>
          </div>
        </div>
      ))}
    </div>
  </window.Section>
);

/* ── COVERAGE ─────────────────────────────────────────────── */
const Coverage = () => (
  <window.Section bg="#fff" pad="84px 0">
    <window.SectionHeader overline="Coverage"
      title="One control set, mapped to many authorities."
      sub="The HITRUST CSF harmonizes 40+ authoritative sources into 19 control domains. Implement the framework once and demonstrate alignment across every authority it maps to." maxSub={700} />
    <div style={{ marginBottom: 34 }}>
      <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: HV.g400, marginBottom: 14 }}>Authorities harmonized</div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
        {AUTHORITIES.map((a, i) => (
          <span key={i} style={{ fontSize: 13.5, fontWeight: 700, color: HV.purple, background: HV.purpleSubtle, padding: '8px 16px', fontFamily: "'JetBrains Mono', monospace", letterSpacing: '-0.01em' }}>{a}</span>
        ))}
        <span style={{ fontSize: 13.5, fontWeight: 700, color: HV.g500, background: HV.g100, padding: '8px 16px' }}>+ 30 more</span>
      </div>
    </div>
    <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: HV.g400, marginBottom: 14 }}>The 19 CSF control domains</div>
    <div className="vg-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
      {DOMAINS.map(([ic, name], i) => (
        <div key={i} style={{ border: `1px solid ${HV.g200}`, borderRadius: 0, padding: '18px 18px', background: '#fff', display: 'flex', alignItems: 'center', gap: 13 }}>
          <div style={{ width: 38, height: 38, borderRadius: 0, background: HV.purpleSubtle, color: HV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <window.Icon name={ic} size={19} />
          </div>
          <span style={{ fontSize: 13.5, fontWeight: 600, color: HV.black, lineHeight: 1.3 }}>{name}</span>
        </div>
      ))}
    </div>
  </window.Section>
);

/* ── ROADMAP ──────────────────────────────────────────────── */
const Roadmap = () => (
  <window.Section bg={HV.g50} pad="84px 0">
    <div id="roadmap" style={{ scrollMarginTop: 24 }}>
      <window.SectionHeader align="center" overline="The roadmap to certification"
        title="From scoping to certified."
        sub="A clear, sequenced path to a validated HITRUST certification — with the remediation and maturity-scoring phases that carry the weight. Durations are indicative for a mid-market environment." maxSub={680} />
    </div>
    <div style={{ position: 'relative' }}>
      <div style={{ position: 'absolute', top: 33, left: '8.33%', right: '8.33%', height: 2, background: HV.g200, zIndex: 0 }} />
      <div className="vg-grid-6" style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', position: 'relative', zIndex: 1 }}>
        {ROADMAP.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 ${HV.purpleLight}`, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
              <div style={{ width: 46, height: 46, borderRadius: '50%', background: HV.purpleSubtle, color: HV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <window.Icon name={ic} size={23} />
              </div>
            </div>
            <div style={{ fontSize: 11, fontWeight: 700, color: HV.orange, fontFamily: "'JetBrains Mono', monospace", marginBottom: 6 }}>{dur}</div>
            <div style={{ fontSize: 15, fontWeight: 700, color: HV.black, marginBottom: 6, fontFamily: HFT, letterSpacing: '-0.01em' }}>{t}</div>
            <div style={{ fontSize: 12.5, color: HV.g500, lineHeight: 1.45, maxWidth: 160 }}>{d}</div>
          </div>
        ))}
      </div>
    </div>
  </window.Section>
);

/* ── SEEKING CERTIFICATION ────────────────────────────────── */
const Seeking = ({ onNav }) => (
  <window.Section bg="#fff" pad="84px 0">
    <div className="vg-detail-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 360px', gap: 56, alignItems: 'start' }}>
      <div>
        <window.Overline style={{ marginBottom: 14 }}>Seeking certification</window.Overline>
        <h2 style={{ fontSize: 34, fontWeight: 800, letterSpacing: '-0.025em', color: HV.black, margin: '0 0 18px', lineHeight: 1.12, fontFamily: HFT }}>If you&rsquo;re pursuing HITRUST, start here.</h2>
        <p style={{ fontSize: 16, color: HV.g600, lineHeight: 1.7, margin: '0 0 30px', maxWidth: 620 }}>
          A HITRUST credential is won or lost in the decisions you make before remediation begins. Choose the right assessment type and scope, and the path is direct. Get them wrong, and cost and timeline balloon. These are the three things to get right first.
        </p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {SEEKING.map(([ic, t, d], i) => (
            <div key={i} style={{ display: 'flex', gap: 18, border: `1px solid ${HV.g200}`, borderRadius: 0, padding: '22px 24px', background: '#fff' }}>
              <div style={{ width: 44, height: 44, borderRadius: 0, background: HV.orangeSubtle, color: HV.orange, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <window.Icon name={ic} size={22} />
              </div>
              <div>
                <h3 style={{ fontSize: 17, fontWeight: 700, color: HV.black, margin: '0 0 5px', fontFamily: HFT, letterSpacing: '-0.01em' }}>{t}</h3>
                <p style={{ fontSize: 14, color: HV.g600, lineHeight: 1.6, margin: 0 }}>{d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
      <aside style={{ position: 'sticky', top: 92, display: 'flex', flexDirection: 'column', gap: 16 }}>
        <div style={{ border: `1px solid ${HV.g200}`, borderRadius: 0, padding: '26px 26px', background: HV.g50 }}>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: HV.g400, marginBottom: 16 }}>What you&rsquo;ll need in hand</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {PREPARE.map((t, i) => (
              <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 14, color: HV.g700, lineHeight: 1.45 }}>
                <span style={{ flexShrink: 0, marginTop: 1 }}><window.Icon name="check" size={18} color={HV.purple} /></span>{t}
              </div>
            ))}
          </div>
        </div>
        <div style={{ border: `1px solid ${HV.purple}`, borderRadius: 0, padding: '24px 26px', background: HV.purpleSubtle }}>
          <div style={{ fontSize: 15, fontWeight: 700, color: HV.black, marginBottom: 8 }}>Not sure which assessment you need?</div>
          <p style={{ fontSize: 13.5, color: HV.g600, lineHeight: 1.55, margin: '0 0 16px' }}>The fastest way to clarity is a scoping conversation. We&rsquo;ll help you confirm your boundary and the right e1, i1, or r2 path.</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>
);

/* ── OUTPUTS ──────────────────────────────────────────────── */
const Outputs = () => (
  <window.Section bg={HV.g50} pad="84px 0">
    <window.SectionHeader overline="Outputs"
      title="What you walk away with."
      sub="Every HITRUST engagement produces the concrete artifacts an assessor and HITRUST QA expect — and a program that keeps generating them long after certification." maxSub={680} />
    <div className="vg-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
      {OUTPUTS.map(([ic, t, d], i) => (
        <div key={i} style={{ border: `1px solid ${HV.g200}`, borderRadius: 0, padding: '28px 26px', background: '#fff', display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div style={{ width: 46, height: 46, borderRadius: 0, background: HV.purpleSubtle, color: HV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <window.Icon name={ic} size={23} />
          </div>
          <h3 style={{ fontSize: 17.5, fontWeight: 700, color: HV.black, margin: 0, lineHeight: 1.25, letterSpacing: '-0.01em', fontFamily: HFT }}>{t}</h3>
          <p style={{ fontSize: 14, color: HV.g600, lineHeight: 1.65, margin: 0 }}>{d}</p>
        </div>
      ))}
    </div>
  </window.Section>
);

/* ── TESTIMONIALS ─────────────────────────────────────────── */
const Testimonials = () => (
  <window.Section bg="#fff" pad="84px 0">
    <window.SectionHeader align="center" overline="Client voices"
      title="Trusted on the HITRUST journey."
      sub="A few words from the security and compliance leaders we&rsquo;ve guided to a validated HITRUST certification. Illustrative of typical engagements." maxSub={640} />
    <div className="vg-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
      {TESTIMONIALS.map((t, i) => (
        <div key={i} style={{ border: `1px solid ${HV.g200}`, borderRadius: 0, padding: '30px 28px', background: '#fff', display: 'flex', flexDirection: 'column', gap: 18 }}>
          <div style={{ fontSize: 52, lineHeight: 0.6, fontWeight: 800, color: HV.orange, fontFamily: 'Georgia, serif', height: 26 }}>&ldquo;</div>
          <p style={{ fontSize: 15, color: HV.g700, lineHeight: 1.65, margin: 0, flex: 1, fontWeight: 500 }}>{t.quote}</p>
          <div style={{ display: 'flex', alignItems: 'center', gap: 13, borderTop: `1px solid ${HV.g100}`, paddingTop: 18 }}>
            <div style={{ width: 44, height: 44, borderRadius: '50%', background: HV.purpleSubtle, color: HV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontSize: 14, fontFamily: HFT, flexShrink: 0 }}>{t.initials}</div>
            <div>
              <div style={{ fontSize: 14.5, fontWeight: 700, color: HV.black, fontFamily: HFT }}>{t.name}</div>
              <div style={{ fontSize: 12.5, color: HV.g500, lineHeight: 1.35 }}>{t.role} · {t.org}</div>
            </div>
          </div>
        </div>
      ))}
    </div>
  </window.Section>
);

/* ── FAQ ──────────────────────────────────────────────────── */
const HFAQ = ({ onNav }) => {
  const [open, setOpen] = React.useState(0);
  return (
    <window.Section bg={HV.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 }}>HITRUST questions</window.Overline>
          <h2 className="vg-section-title" style={{ fontSize: 36, fontWeight: 800, letterSpacing: '-0.03em', color: HV.black, margin: '0 0 18px', lineHeight: 1.1, fontFamily: HFT }}>Good to know before we start.</h2>
          <p style={{ fontSize: 15.5, color: HV.g600, lineHeight: 1.65, margin: '0 0 24px' }}>Questions on scope, assessment types, or the validated-assessment process? 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 ${HV.g200}`, borderRadius: 0, overflow: 'hidden', background: '#fff' }}>
          {HITRUST_FAQ.map(([q, a], i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ borderTop: i ? `1px solid ${HV.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: HFT }}>
                  <span style={{ fontSize: 16, fontWeight: 700, color: HV.black, letterSpacing: '-0.01em' }}>{q}</span>
                  <span style={{ flexShrink: 0, width: 28, height: 28, borderRadius: '50%', background: isOpen ? HV.purple : HV.purpleSubtle, color: isOpen ? '#fff' : HV.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: HV.g600, lineHeight: 1.7, margin: 0, maxWidth: 680 }}>{a}</p>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </window.Section>
  );
};

/* ── FLOATING SCROLL-TO-TOP ───────────────────────────────── */
const ScrollTop = () => {
  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setShow(window.scrollY > 600);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <button
      onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
      aria-label="Back to top"
      title="Back to top"
      style={{
        position: 'fixed', right: 28, bottom: 28, zIndex: 200,
        width: 52, height: 52, borderRadius: 0, border: 'none', cursor: 'pointer',
        background: HV.purple, color: '#fff',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: '0 8px 28px rgba(91,46,145,0.32)',
        opacity: show ? 1 : 0,
        transform: show ? 'translateY(0)' : 'translateY(16px)',
        pointerEvents: show ? 'auto' : 'none',
        transition: 'opacity 200ms ease-out, transform 200ms ease-out, background 150ms ease-out',
      }}
      onMouseEnter={(e) => { e.currentTarget.style.background = HV.purpleDark; }}
      onMouseLeave={(e) => { e.currentTarget.style.background = HV.purple; }}
    >
      <span style={{ display: 'flex', transform: 'rotate(-90deg)' }}>
        <window.Icon name="arrow" size={22} color="#fff" />
      </span>
    </button>
  );
};

/* ── PAGE ─────────────────────────────────────────────────── */
const HITRUSTPage = ({ onNav }) => (
  <div>
    <HHero onNav={onNav} />
    <HStats />
    <WhyHitrust />
    <Tiers />
    <Coverage />
    <Roadmap />
    <Seeking onNav={onNav} />
    <Outputs />
    <Testimonials />
    <HFAQ onNav={onNav} />
    <window.Section bg="#fff" pad="0">
      <window.CTABand
        overline="Trust is the deliverable"
        title="Ready to earn your HITRUST certification?"
        body="Tell us who you serve and what data you handle. We'll confirm the right assessment type, scope your boundary, and lay out a fixed-price path to a validated HITRUST certification — and through HITRUST QA itself."
        primary="Start a Conversation" onNav={onNav} dest="contact" />
    </window.Section>
    <ScrollTop />
  </div>
);

Object.assign(window, { HITRUSTPage });
