// Services.jsx — Verigo Global service portfolio (styled to match the Home page)
const { V: VS, MAXW: MWS, FONT: FTS } = window;

const SERVICE_DETAIL = [
  {
    id: 'readiness', icon: 'search', step: '01', overline: 'Assess',
    title: 'Readiness Assessments',
    tagline: 'Know exactly where you stand.',
    lead: 'The entry point for new clients — and the foundation for everything that follows.',
    desc: 'A gap analysis against your chosen framework: current-state documentation review, risk scoring, and a prioritized remediation roadmap, delivered as an independent report.',
    role: 'Entry point for new clients; often precedes an Implementation Toolkit engagement.',
    delivery: 'Lead Assessor (Senior) + Associate Reviewer · 2–4 weeks',
    includes: ['Current-state documentation review', 'Framework gap analysis', 'Risk scoring and prioritization', 'Independent remediation roadmap'],
    situation: "I'm just getting started and don't know my gaps yet",
  },
  {
    id: 'toolkit', icon: 'layers', step: '02', overline: 'Implement',
    title: 'Implementation Toolkits',
    tagline: 'Close the gaps — by design.',
    lead: 'Our core revenue line — and where Compliance by Design actually happens.',
    desc: 'A structured, practitioner-led program to close the gaps identified in your readiness assessment: policy development, control implementation, staff awareness programs, and evidence management procedures.',
    role: 'Core revenue line; typically a 3–9 month engagement depending on framework and organization size.',
    delivery: 'Lead Consultant + Subject Matter Experts per control domain · 3–9 months',
    includes: ['Policy and procedure development', 'Control implementation support', 'Staff security awareness programs', 'Evidence management procedures'],
    situation: 'I know my gaps and need to fix them',
    link: 'toolkits',
  },
  {
    id: 'preaudit', icon: 'clipboard', step: '03', overline: 'Prepare',
    title: 'Pre-Audit Preparation',
    tagline: 'Walk into the audit ready to pass.',
    lead: 'A high-value add-on that significantly improves first-time pass rates.',
    desc: 'Mock internal audits, evidence collection support, management review facilitation, and auditor-readiness coaching — reducing audit findings and accelerating your certification timeline.',
    role: 'High-value add-on; significantly improves first-time pass rates for formal certification.',
    delivery: 'Lead Auditor, independent of the implementation team · 4–8 weeks',
    includes: ['Mock internal audit', 'Evidence collection support', 'Management review facilitation', 'Auditor-readiness coaching'],
    situation: 'I have an audit booked and need to be ready',
  },
  {
    id: 'audit', icon: 'shield', step: '04', overline: 'Certify',
    title: 'Formal Audits',
    tagline: 'Get certified. Stay certified.',
    lead: 'The revenue anchor — recurring on annual or triennial cycles.',
    desc: 'Independent certification and attestation audits conducted by Verigo Global credentialed auditors, including report issuance, certification recommendations, and findings management.',
    role: 'Revenue anchor; recurring on annual or triennial cycles depending on the framework.',
    delivery: 'Credentialed Lead Auditor + Audit Team · duration per framework',
    includes: ['Independent certification audit', 'Report issuance', 'Certification recommendations', 'Findings management'],
    situation: 'I need to certify or recertify against a framework',
  },
];

const scrollToId = (id) => document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' });

/* ── HERO (Home-style: white, arch watermark, badge pill) ─── */
const ArchBackdrop = () => (
  <svg viewBox="0 0 600 460" fill="none" stroke={VS.orange} strokeWidth="1.4" preserveAspectRatio="xMidYMid slice" aria-hidden="true" className="vg-watermark"
    style={{ position: 'absolute', top: 0, right: '-4%', width: '52%', height: '100%', opacity: 0.18, pointerEvents: 'none', zIndex: 0 }}>
    {[0, 1, 2, 3, 4, 5, 6].map((i) => <line key={'v' + i} x1={i * 100} y1="0" x2={i * 100} y2="460" opacity="0.18" />)}
    {[0, 1, 2, 3, 4].map((i) => <line key={'h' + i} x1="0" y1={i * 100} x2="600" y2={i * 100} opacity="0.18" />)}
    <g transform="translate(360 230)">{[170, 122, 74].map((s, i) => <rect key={i} x={-s / 2} y={-s / 2} width={s} height={s} transform="rotate(45)" opacity={0.85 - i * 0.18} />)}</g>
    <circle cx="360" cy="230" r="148" opacity="0.5" />
    <path d="M120 70 L250 150 L120 250 Z" strokeWidth="1.6" opacity="0.7" />
    <path d="M250 150 L380 70 L380 200 Z" opacity="0.45" />
    <path d="M480 300 L600 230 L600 400 Z" opacity="0.55" />
    <line x1="40" y1="420" x2="360" y2="230" opacity="0.4" /><line x1="600" y1="60" x2="360" y2="230" opacity="0.4" />
    <circle cx="360" cy="230" r="5" fill={VS.purple} stroke="none" />
  </svg>
);

const ServicesHero = ({ onNav }) => (
  <section style={{ background: '#fff', borderBottom: `1px solid ${VS.g100}`, padding: '88px 0 80px', position: 'relative', overflow: 'hidden' }}>
    <ArchBackdrop />
    <div style={{ maxWidth: MWS, margin: '0 auto', padding: '0 32px', position: 'relative', zIndex: 1 }}>
      <div style={{ maxWidth: 680 }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: VS.purpleSubtle, color: VS.purpleDark, fontSize: 12.5, fontWeight: 600, padding: '6px 14px', marginBottom: 24 }}>
          <span style={{ width: 7, height: 7, background: VS.orange }}></span>
          Service Portfolio
        </div>
        <h1 className="vg-hero-title" style={{ fontSize: 72, fontWeight: 800, lineHeight: 1.02, letterSpacing: '-0.035em', color: VS.black, margin: '0 0 24px', fontFamily: FTS }}>
          End-to-end compliance,<br /><span style={{ color: VS.purple }}>under one roof.</span>
        </h1>
        <p style={{ fontSize: 19, color: VS.g600, lineHeight: 1.6, margin: '0 0 32px', maxWidth: 560 }}>
          Four interconnected service lines that map to every stage of certification. Engage any single service — or move through the whole journey with one accountable team.
        </p>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 36 }}>
          <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={() => scrollToId('journey')}>See the journey</window.Btn>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
          <span style={{ fontSize: 12, fontWeight: 600, color: VS.g400, letterSpacing: '0.04em' }}>THE LIFECYCLE</span>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            {SERVICE_DETAIL.map((s) => (
              <span key={s.id} style={{ fontSize: 12, fontWeight: 600, padding: '5px 12px', borderRadius: 9999, background: VS.g50, color: VS.g600, border: `1px solid ${VS.g200}` }}>{s.overline}</span>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* ── STATS BAND (Home-style grey) ─────────────────────────── */
const ServicesStats = () => (
  <section style={{ background: VS.g50, borderBottom: `1px solid ${VS.g100}` }}>
    <div className="vg-container vg-stats-row" style={{ maxWidth: MWS, margin: '0 auto', padding: '0 32px', display: 'flex' }}>
      {[
        ['4', 'Interconnected services', 'Assess → certify'],
        ['7', 'Frameworks supported', 'ISO 27001 to ISO 42001'],
        ['3–9 mo', 'Typical implementation', 'Scoped to your size'],
        ['100%', 'Senior-led delivery', 'Peer-reviewed QA'],
      ].map(([v, l, s], i) => (
        <div key={i} style={{ flex: 1, padding: '40px 28px', borderLeft: i ? `1px solid ${VS.g200}` : 'none', display: 'flex', flexDirection: 'column', gap: 6 }}>
          <span style={{ fontSize: 42, fontWeight: 800, color: VS.black, letterSpacing: '-0.03em', lineHeight: 1, fontFamily: FTS }}>{v}</span>
          <span style={{ fontSize: 14, fontWeight: 600, color: VS.black }}>{l}</span>
          <span style={{ fontSize: 13, color: VS.g500 }}>{s}</span>
        </div>
      ))}
    </div>
  </section>
);

/* ── CONNECTED JOURNEY FLOW DIAGRAM ───────────────────────── */
const JourneyFlow = () => (
  <window.Section bg="#fff" pad="88px 0">
    <div id="journey" style={{ scrollMarginTop: 24 }}>
      <window.SectionHeader align="center" overline="The compliance journey"
        title={<>A clear path from<br />gap to certified.</>}
        sub="Each stage builds on the last. Most clients begin with an assessment and expand through the lifecycle — but you can join at whichever point fits where you are today." />
    </div>
    <div style={{ position: 'relative', marginTop: 8 }}>
      <div style={{ position: 'absolute', top: 47, left: '12.5%', right: '12.5%', height: 3, background: `linear-gradient(90deg, ${VS.purpleLight}, ${VS.purple})`, zIndex: 0 }} />
      {[25, 50, 75].map(p => (
        <div key={p} style={{ position: 'absolute', top: 38, left: `${p}%`, transform: 'translateX(-50%)', zIndex: 1 }}>
          <window.Icon name="arrow" size={20} color={VS.purpleLight} />
        </div>
      ))}
      <div className="vg-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', position: 'relative', zIndex: 2 }}>
        {SERVICE_DETAIL.map((s) => <JourneyNode key={s.id} s={s} />)}
      </div>
    </div>
  </window.Section>
);

const JourneyNode = ({ s }) => {
  const [h, setH] = React.useState(false);
  return (
    <button onClick={() => scrollToId(s.id)} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ background: 'none', border: 'none', cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, padding: '0 12px', fontFamily: FTS }}>
      <div style={{ position: 'relative' }}>
        <div style={{ width: 94, height: 94, borderRadius: '50%', background: '#fff', border: `3px solid ${h ? VS.purple : VS.purpleLight}`, display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'all 180ms ease-out', transform: h ? 'translateY(-3px)' : 'none', boxShadow: h ? '0 10px 28px rgba(91,46,145,0.25)' : '0 2px 8px rgba(0,0,0,0.06)' }}>
          <div style={{ width: 66, height: 66, borderRadius: '50%', background: VS.purple, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <window.Icon name={s.icon} size={30} color="#fff" />
          </div>
        </div>
        <span style={{ position: 'absolute', top: -4, right: -4, width: 26, height: 26, borderRadius: '50%', background: VS.orange, color: '#fff', fontSize: 12, fontWeight: 800, display: 'flex', alignItems: 'center', justifyContent: 'center', border: '2px solid #fff', fontFamily: "'JetBrains Mono', monospace" }}>{s.step}</span>
      </div>
      <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: VS.orange, marginTop: 8 }}>{s.overline}</div>
      <div style={{ fontSize: 17, fontWeight: 700, color: VS.black, letterSpacing: '-0.01em' }}>{s.title}</div>
      <div style={{ fontSize: 13, color: VS.g500, lineHeight: 1.45, maxWidth: 190 }}>{s.tagline}</div>
    </button>
  );
};

/* ── "WHICH SERVICE IS RIGHT FOR ME" SELECTOR ─────────────── */
const ServiceSelector = ({ onNav }) => {
  const [sel, setSel] = React.useState(null);
  const rec = sel != null ? SERVICE_DETAIL[sel] : null;
  return (
    <window.Section bg={VS.g50} pad="88px 0">
      <window.SectionHeader align="center" overline="Find your starting point"
        title="Which service is right for you?"
        sub="Tell us where you are today and we'll point you to the right place to begin." />
      <div className="vg-grid-2" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16, maxWidth: 880, margin: '0 auto' }}>
        {SERVICE_DETAIL.map((s, i) => {
          const on = sel === i;
          return (
            <button key={s.id} onClick={() => setSel(i)}
              style={{ textAlign: 'left', cursor: 'pointer', fontFamily: FTS, background: on ? VS.purple : '#fff', border: `1px solid ${on ? VS.purple : VS.g200}`, borderRadius: 0, padding: '22px 24px', display: 'flex', alignItems: 'center', gap: 16, transition: 'all 150ms ease-out' }}>
              <div style={{ width: 24, height: 24, borderRadius: '50%', flexShrink: 0, border: `2px solid ${on ? '#fff' : VS.g300}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                {on && <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#fff' }} />}
              </div>
              <span style={{ fontSize: 15.5, fontWeight: 600, color: on ? '#fff' : VS.g700, lineHeight: 1.4 }}>{s.situation}</span>
            </button>
          );
        })}
      </div>
      {rec && (
        <div style={{ maxWidth: 880, margin: '20px auto 0', background: '#fff', border: `1px solid ${VS.g200}`, borderRadius: 0, padding: '28px 32px', display: 'flex', alignItems: 'center', gap: 24, boxShadow: '0 8px 32px rgba(91,46,145,0.12)' }}>
          <div style={{ width: 56, height: 56, borderRadius: 0, background: VS.purpleSubtle, color: VS.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <window.Icon name={rec.icon} size={28} />
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: VS.orange, marginBottom: 4 }}>We recommend starting with</div>
            <div style={{ fontSize: 21, fontWeight: 800, color: VS.black, letterSpacing: '-0.01em', fontFamily: FTS }}>{rec.title}</div>
            <div style={{ fontSize: 14, color: VS.g500, marginTop: 2 }}>{rec.tagline}</div>
          </div>
          <div style={{ display: 'flex', gap: 10, flexShrink: 0 }}>
            <window.Btn kind="ghostBrand" onClick={() => scrollToId(rec.id)} style={{ fontSize: 14, padding: '11px 20px' }}>Learn more</window.Btn>
            <window.Btn kind="primary" onClick={() => onNav('contact')} style={{ fontSize: 14, padding: '12px 20px' }}>Talk to us</window.Btn>
          </div>
        </div>
      )}
    </window.Section>
  );
};

/* ── RICH SERVICE DETAIL ROWS (Home-style rounded cards) ──── */
const ServiceRows = ({ onNav }) => (
  <window.Section bg="#fff" pad="88px 0">
    <window.SectionHeader overline="Every service, in detail"
      title="What each engagement delivers"
      sub="Rich, fixed-scope engagements led by senior practitioners — with a peer-review quality gate on every deliverable." maxSub={620} />
    <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
      {SERVICE_DETAIL.map((s) => (
        <div key={s.id} id={s.id} style={{ background: '#fff', border: `1px solid ${VS.g200}`, borderRadius: 0, padding: '40px 44px', scrollMarginTop: 24, display: 'grid', gridTemplateColumns: '1fr 340px', gap: 48 }}>
          <div style={{ display: 'flex', gap: 18 }}>
            <div style={{ width: 54, height: 54, borderRadius: 0, background: VS.purpleSubtle, color: VS.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <window.Icon name={s.icon} size={27} />
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: VS.orange }}>Step {s.step} · {s.overline}</div>
              <h3 style={{ fontSize: 28, fontWeight: 800, letterSpacing: '-0.02em', color: VS.black, margin: '4px 0 16px', lineHeight: 1.12, fontFamily: FTS }}>{s.title}</h3>
              <p style={{ fontSize: 18, fontWeight: 600, color: VS.black, lineHeight: 1.5, margin: '0 0 12px' }}>{s.lead}</p>
              <p style={{ fontSize: 15.5, color: VS.g600, lineHeight: 1.7, margin: '0 0 24px' }}>{s.desc}</p>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: VS.g400, marginBottom: 14 }}>What's included</div>
              <div className="vg-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                {s.includes.map((inc, j) => (
                  <div key={j} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14.5, color: VS.g700 }}>
                    <window.Icon name="check" size={19} color={VS.purple} />{inc}
                  </div>
                ))}
              </div>
              {s.link && (
                <div style={{ marginTop: 26 }}>
                  <window.Btn kind="ghostBrand" onClick={() => onNav(s.link)} style={{ fontSize: 14, padding: '11px 22px' }}>Explore the toolkits <window.Icon name="arrow" size={16} color={VS.purple} /></window.Btn>
                </div>
              )}
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <InfoBox label="Strategic role" body={s.role} icon="compass" />
            <InfoBox label="Delivery structure" body={s.delivery} icon="users" />
          </div>
        </div>
      ))}
    </div>
  </window.Section>
);

const InfoBox = ({ label, body, icon }) => (
  <div style={{ background: VS.g50, border: `1px solid ${VS.g200}`, borderRadius: 0, padding: '20px 22px' }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
      {icon && <window.Icon name={icon} size={16} color={VS.g400} />}
      <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: VS.g400 }}>{label}</div>
    </div>
    <p style={{ fontSize: 14, color: VS.g600, lineHeight: 1.55, margin: 0 }}>{body}</p>
  </div>
);

/* ── OUTCOMES BAND (Home-style full-bleed purple) ─────────── */
const OutcomesBand = () => (
  <section style={{ background: VS.purple, padding: '88px 0', position: 'relative', overflow: 'hidden' }}>
    <window.GeoWatermark color="#ffffff" style={{ top: -40, left: -30, width: 380, height: 360, opacity: 0.1 }} />
    <window.GeoWatermark color="#ffffff" style={{ bottom: -40, right: -30, width: 360, height: 340, opacity: 0.1, transform: 'scaleX(-1)' }} />
    <div style={{ maxWidth: MWS, margin: '0 auto', padding: '0 32px', position: 'relative', zIndex: 1 }}>
      <div style={{ textAlign: 'center', marginBottom: 48 }}>
        <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#D9CCEC', marginBottom: 14 }}>What partnering with Verigo delivers</div>
        <h2 className="vg-section-title" style={{ fontSize: 42, fontWeight: 800, letterSpacing: '-0.03em', color: '#fff', margin: '0 auto', lineHeight: 1.1, maxWidth: 720, fontFamily: FTS }}>Outcomes that compound over the relationship.</h2>
      </div>
      <div className="vg-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
        {[
          ['gauge', 'Audit-ready, always', 'Compliance by Design means evidence is generated by the process — not assembled in a panic before each review.'],
          ['award', 'Higher first-time pass rates', 'Independent pre-audit preparation reduces findings and accelerates certification timelines.'],
          ['network', 'One partner, every framework', 'Cross-framework control mapping lets a single control and its evidence serve ISO 27001, SOC 2, CMMC, and NIST.'],
          ['handshake', 'A relationship, not a transaction', 'Senior practitioners stay with you across surveillance audits, recertification, and expansion to new frameworks.'],
        ].map(([icon, t, d], i) => (
          <div key={i} style={{ background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.14)', borderRadius: 0, padding: '28px 26px' }}>
            <div style={{ width: 46, height: 46, borderRadius: 0, background: 'rgba(255,255,255,0.12)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18 }}>
              <window.Icon name={icon} size={23} color="#fff" />
            </div>
            <h3 style={{ fontSize: 17, fontWeight: 700, color: '#fff', margin: '0 0 8px', fontFamily: FTS, letterSpacing: '-0.01em' }}>{t}</h3>
            <p style={{ fontSize: 13.5, color: 'rgba(255,255,255,0.65)', lineHeight: 1.6, margin: 0 }}>{d}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ── DELIVERY MODEL ───────────────────────────────────────── */
const DeliveryModel = () => (
  <window.Section bg={VS.g50} pad="88px 0">
    <window.SectionHeader overline="Delivery model"
      title="Senior practitioners on every engagement"
      sub="All Verigo engagements are delivered by senior practitioners — never junior consultants with templates — with a peer-review quality gate on every deliverable." maxSub={640} />
    <div style={{ border: `1px solid ${VS.g200}`, borderRadius: 0, overflow: 'hidden', background: '#fff' }}>
      {[
        ['Readiness Assessment', 'Lead Assessor (Senior) + Associate Reviewer', '2–4 weeks'],
        ['Implementation Toolkit', 'Lead Consultant + Subject Matter Experts per control domain', '3–9 months'],
        ['Pre-Audit Preparation', 'Lead Auditor, independent of the implementation team', '4–8 weeks'],
        ['Formal Audit', 'Credentialed Lead Auditor + Audit Team', 'Per framework'],
        ['Quality Assurance', 'Peer review and technical quality gate on all deliverables', 'Every engagement'],
      ].map(([line, structure, dur], i) => (
        <div key={i} className="vg-detail-grid" style={{ display: 'grid', gridTemplateColumns: '280px 1fr 160px', gap: 24, padding: '22px 28px', borderTop: i ? `1px solid ${VS.g200}` : 'none', background: i % 2 ? VS.g50 : '#fff', alignItems: 'center' }}>
          <div style={{ fontSize: 15.5, fontWeight: 700, color: VS.black, fontFamily: FTS, letterSpacing: '-0.01em' }}>{line}</div>
          <div style={{ fontSize: 14, color: VS.g600 }}>{structure}</div>
          <div style={{ fontSize: 13, fontWeight: 600, color: VS.purple, textAlign: 'right' }}>{dur}</div>
        </div>
      ))}
    </div>
  </window.Section>
);

/* ── FAQ ──────────────────────────────────────────────────── */
const FAQS = [
  ['Do I have to commit to the full lifecycle?', 'No. Each service stands on its own — engage a single readiness assessment, a formal audit, or anything in between. Most clients start with one service and expand as their needs evolve, but you choose where to begin.'],
  ['Who actually does the work?', 'Every engagement is delivered by senior practitioners with an average of 20+ years of experience, certified as CISSP, CISM, ISO 27001 Lead Auditor, CMMC CCA, and more. There is a peer-review quality gate on every deliverable.'],
  ['How is pricing structured?', 'Readiness assessments and pre-audit preparation are fixed-fee. Implementation toolkits are fixed-fee or time-and-materials depending on scope. Formal audits follow regulated pricing for CMMC and negotiated pricing for other frameworks. We share clear, fixed pricing in your scoping proposal.'],
  ['Can you both implement and audit our program?', 'Yes — full lifecycle under one roof. To preserve independence, the lead auditor for pre-audit preparation and formal audits is always independent of the team that implemented your controls.'],
  ['How long until we are certified?', 'It depends on framework and organization size. Implementation toolkits typically run 3–9 months; readiness assessments take 2–4 weeks and pre-audit preparation 4–8 weeks. We give you a clear timeline in the scoping proposal.'],
  ['Which frameworks do you support?', 'ISO 27001, SOC 2, CMMC 2.0, HITRUST, CMMI, and the NIST family (SP 800-171, SP 800-53, CSF). Cross-framework control mapping lets you pursue several certifications while reusing evidence.'],
];

const FAQ = ({ onNav }) => {
  const [open, setOpen] = React.useState(0);
  return (
    <window.Section bg="#fff" pad="88px 0">
      <div className="vg-detail-grid" style={{ display: 'grid', gridTemplateColumns: '380px 1fr', gap: 64, alignItems: 'start' }}>
        <div style={{ position: 'sticky', top: 24 }}>
          <window.Overline style={{ marginBottom: 14 }}>Common questions</window.Overline>
          <h2 className="vg-section-title" style={{ fontSize: 40, fontWeight: 800, letterSpacing: '-0.03em', color: VS.black, margin: '0 0 18px', lineHeight: 1.08, fontFamily: FTS }}>Good to know before we start.</h2>
          <p style={{ fontSize: 16, color: VS.g600, lineHeight: 1.65, margin: '0 0 24px' }}>Still have questions about scope, pricing, or timelines? 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 ${VS.g200}`, borderRadius: 0, overflow: 'hidden', background: '#fff' }}>
          {FAQS.map(([q, a], i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ borderTop: i ? `1px solid ${VS.g200}` : 'none' }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)}
                  style={{ width: '100%', textAlign: 'left', background: 'none', border: 'none', cursor: 'pointer', padding: '24px 28px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20, fontFamily: FTS }}>
                  <span style={{ fontSize: 16.5, fontWeight: 700, color: VS.black, letterSpacing: '-0.01em' }}>{q}</span>
                  <span style={{ flexShrink: 0, width: 28, height: 28, borderRadius: '50%', background: isOpen ? VS.purple : VS.purpleSubtle, color: isOpen ? '#fff' : VS.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18, fontWeight: 700, transition: 'all 150ms' }}>{isOpen ? '–' : '+'}</span>
                </button>
                {isOpen && (
                  <div style={{ padding: '0 28px 26px', maxWidth: 680 }}>
                    <p style={{ fontSize: 15, color: VS.g600, lineHeight: 1.7, margin: 0 }}>{a}</p>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </window.Section>
  );
};

/* ── PAGE ─────────────────────────────────────────────────── */
const ServicesPage = ({ onNav }) => (
  <div>
    <ServicesHero onNav={onNav} />
    <ServicesStats />
    <JourneyFlow />
    <ServiceSelector onNav={onNav} />
    <ServiceRows onNav={onNav} />
    <OutcomesBand />
    <DeliveryModel />
    <FAQ onNav={onNav} />
    <window.Section bg="#fff" pad="0">
      <window.CTABand
        title="Start with an assessment. Or go end-to-end."
        body="Tell us where you are — a target framework, a contract deadline, or just a goal. We'll come back with a scoped plan, fixed pricing, and the fastest path to certification."
        onNav={onNav} />
    </window.Section>
  </div>
);

Object.assign(window, { ServicesPage });
