// Toolkits.jsx — Implementation Toolkits detail
const { V: VT, MAXW: MWT, FONT: FTT } = window;

const TOOLKIT_PARTS = [
  ['doc', 'Policy libraries', 'Pre-built, framework-aligned policy and procedure sets, tailored to your organization, industry, and risk appetite.'],
  ['cpu', 'Control templates', 'Ready-to-deploy control templates mapped directly to certification requirements — no starting from a blank page.'],
  ['file', 'Evidence management procedures', 'Repeatable procedures so evidence is generated by the process itself, not collected in a scramble before the audit.'],
  ['users', 'Staff awareness programs', 'Role-based training and security awareness material to build a compliance-ready culture across the organization.'],
  ['clipboard', 'Audit-readiness checklists', 'Framework-specific checklists that keep you continuously prepared for surveillance and recertification.'],
  ['network', 'Cross-framework control mapping', 'Shared evidence across ISO 27001, SOC 2, CMMC, and NIST — pursue multiple certifications without duplicating effort.'],
];

const ToolkitsPage = ({ onNav }) => (
  <div>
    <window.PageHero overline="Implementation Toolkits" variant="stack"
      title={<>The toolkit that turns<br />gaps into certification.</>}
      sub="Our core service line and the engine of Compliance by Design. A structured, practitioner-led program that closes the gaps from your readiness assessment — and embeds controls into how you actually operate." >
      <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
        <window.Btn kind="primary" onClick={() => onNav('contact')}>Scope a Toolkit <window.Icon name="arrow" size={17} color="#fff" /></window.Btn>
        <window.Btn kind="ghost" onClick={() => onNav('services')}>See the full lifecycle</window.Btn>
      </div>
    </window.PageHero>

    {/* Engagement facts */}
    <window.Section bg="#fff" pad="0">
      <div className="vg-stats-row" style={{ display: 'flex', borderBottom: `1px solid ${VT.g200}`, margin: '0 -32px', padding: '0 32px' }}>
        {[['3–9 months', 'Typical engagement'], ['Lead Consultant + SMEs', 'Per control domain'], ['USD 20K–120K', 'Indicative fee'], ['Core revenue line', 'Most clients engage here']].map(([v, l], i) => (
          <div key={i} style={{ flex: 1, padding: '36px 24px', borderLeft: i ? `1px solid ${VT.g200}` : 'none', display: 'flex', flexDirection: 'column', gap: 6 }}>
            <span style={{ fontSize: 26, fontWeight: 800, color: VT.black, letterSpacing: '-0.02em', lineHeight: 1.1, fontFamily: FTT }}>{v}</span>
            <span style={{ fontSize: 13.5, color: VT.g500 }}>{l}</span>
          </div>
        ))}
      </div>
    </window.Section>

    {/* What's inside */}
    <window.Section bg="#fff" pad="80px 0">
      <window.SectionHeader overline="What's inside a toolkit"
        title="Six components, built to your framework"
        sub="Every toolkit is assembled from proven, practitioner-maintained building blocks — then tailored to your organization." maxSub={600} />
      <div className="vg-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
        {TOOLKIT_PARTS.map(([icon, t, d], i) => (
          <div key={i} style={{ border: `1px solid ${VT.g200}`, borderRadius: 12, padding: '28px 26px', background: '#fff' }}>
            <div style={{ width: 48, height: 48, borderRadius: 10, background: VT.purpleSubtle, color: VT.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18 }}>
              <window.Icon name={icon} size={24} />
            </div>
            <h3 style={{ fontSize: 18, fontWeight: 700, color: VT.black, margin: '0 0 8px', fontFamily: FTT, letterSpacing: '-0.01em' }}>{t}</h3>
            <p style={{ fontSize: 14, color: VT.g500, lineHeight: 1.6, margin: 0 }}>{d}</p>
          </div>
        ))}
      </div>
    </window.Section>

    {/* Framework-specific toolkits */}
    <window.Section bg={VT.g50} pad="80px 0">
      <window.SectionHeader overline="Framework-specific toolkits"
        title="A toolkit tuned to your target standard"
        sub="Each toolkit ships with the policy libraries, control templates, and evidence procedures specific to the framework you're certifying against." maxSub={620} />
      <div className="vg-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {window.STANDARDS.map(s => {
          const hasToolkit = s.id === 'iso27001' || s.id === 'iso42001' || s.id === 'soc2' || s.id === 'cmmc' || s.id === 'hitrust' || s.id === 'cmmi' || s.id === 'nist';
          return (
          <div key={s.id} onClick={() => onNav(hasToolkit ? 'toolkit:' + s.id : 'standard:' + s.id)}
            style={{ background: '#fff', border: `1px solid ${VT.g200}`, borderRadius: 12, padding: '24px', cursor: 'pointer', transition: 'all 150ms' }}
            onMouseEnter={e => { e.currentTarget.style.borderColor = s.color; e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 8px 28px rgba(0,0,0,0.08)'; }}
            onMouseLeave={e => { e.currentTarget.style.borderColor = VT.g200; e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = 'none'; }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
              <div style={{ width: 44, height: 44, borderRadius: 10, background: s.bg, color: s.color, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <window.Icon name={s.icon} size={22} />
              </div>
              {hasToolkit
                ? <span style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: VT.orange, background: VT.orangeSubtle, padding: '4px 10px', borderRadius: 9999 }}>Toolkit ready</span>
                : <window.Icon name="arrow" size={18} color={VT.g300} />}
            </div>
            <div style={{ fontSize: 18, fontWeight: 800, color: VT.black, letterSpacing: '-0.01em', marginBottom: 4, fontFamily: FTT }}>{s.name} Toolkit</div>
            <p style={{ fontSize: 13.5, color: VT.g500, lineHeight: 1.55, margin: 0 }}>{s.short}</p>
            {hasToolkit && <div style={{ marginTop: 14, display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 13, fontWeight: 700, color: VT.purple }}>Explore the toolkit <window.Icon name="arrow" size={15} color={VT.purple} /></div>}
          </div>
          );
        })}
      </div>
    </window.Section>

    {/* Cross-framework mapping highlight */}
    <window.Section bg="#fff" pad="88px 0">
      <div className="vg-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
        <div>
          <window.Overline style={{ marginBottom: 16 }}>Cross-framework control mapping</window.Overline>
          <h2 className="vg-section-title" style={{ fontSize: 40, fontWeight: 800, letterSpacing: '-0.03em', color: VT.black, margin: '0 0 18px', lineHeight: 1.1, fontFamily: FTT }}>Certify once. Reuse everywhere.</h2>
          <p style={{ fontSize: 17, color: VT.g600, lineHeight: 1.7, margin: '0 0 24px' }}>
            Most frameworks share underlying controls. Our cross-framework mapping lets clients pursuing multiple certifications share evidence and reduce duplication of effort — so a NIST 800-171 control can do double duty for CMMC, and an ISO 27001 control supports your SOC 2 report.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {['Pursue ISO 27001 and CMMC and NIST with one partner', 'Map a single control to several frameworks at once', 'Lower total cost of compliance across your roadmap'].map((t, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 15, color: VT.g700, fontWeight: 500 }}>
                <window.Icon name="check" size={20} color={VT.purple} />{t}
              </div>
            ))}
          </div>
        </div>
        <div style={{ background: VT.charcoal, borderRadius: 16, padding: '40px', position: 'relative', overflow: 'hidden' }}>
          <window.GeoWatermark color="#ffffff" style={{ bottom: -30, right: -20, width: 280, height: 260, opacity: 0.06 }} />
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.4)', marginBottom: 20, position: 'relative', zIndex: 1 }}>One control, many frameworks</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, position: 'relative', zIndex: 1 }}>
            <div style={{ background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 10, padding: '16px 18px' }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: '#fff', fontFamily: "'JetBrains Mono', monospace", marginBottom: 4 }}>Access Control · MFA</div>
              <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.5)' }}>One implemented control, mapped to:</div>
            </div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {[['NIST 800-171', VT.g500], ['CMMC 2.0', VT.orange], ['ISO 27001', VT.purpleLight], ['SOC 2', VT.purpleLight], ['HITRUST', VT.orangeLight]].map(([n, c], i) => (
                <span key={i} style={{ fontSize: 12, fontWeight: 700, padding: '7px 13px', borderRadius: 9999, background: 'rgba(255,255,255,0.1)', color: '#fff', border: `1px solid ${c}` }}>{n}</span>
              ))}
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 8, fontSize: 13, color: '#C9CBFF' }}>
              <window.Icon name="zap" size={16} color="#C9CBFF" /> Evidence collected once, accepted across all five.
            </div>
          </div>
        </div>
      </div>
    </window.Section>

    {/* Methodology / Compliance by Design */}
    <window.Section bg={VT.g50} pad="80px 0 0">
      <window.SectionHeader align="center" overline="Compliance by Design methodology"
        title="Built into operations, not bolted on"
        sub="Our proprietary methodology embeds framework controls into operational workflows — so the toolkit doesn't just pass an audit, it changes how the organization runs." />
      <div className="vg-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
        {[
          ['compass', 'Design', 'We redesign processes so framework requirements are met as a natural outcome of daily work.'],
          ['layers', 'Embed', 'Controls are implemented inside operational workflows, not layered on top as paperwork.'],
          ['activity', 'Generate', 'Evidence exists because the process produces it — continuously, not for the auditor.'],
          ['refresh', 'Sustain', 'A lighter maintenance burden keeps you audit-ready between certifications, year after year.'],
        ].map(([icon, t, d], i) => (
          <div key={i} style={{ background: '#fff', border: `1px solid ${VT.g200}`, borderRadius: 12, padding: '26px 24px', position: 'relative' }}>
            <div style={{ fontSize: 12, fontWeight: 700, color: VT.g300, fontFamily: "'JetBrains Mono', monospace", marginBottom: 14 }}>0{i + 1}</div>
            <div style={{ width: 44, height: 44, borderRadius: 9, background: VT.purpleSubtle, color: VT.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
              <window.Icon name={icon} size={22} />
            </div>
            <h3 style={{ fontSize: 17, fontWeight: 700, color: VT.black, margin: '0 0 8px', fontFamily: FTT, letterSpacing: '-0.01em' }}>{t}</h3>
            <p style={{ fontSize: 13.5, color: VT.g500, lineHeight: 1.6, margin: 0 }}>{d}</p>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 56 }}>
        <window.CTABand
          title="Ready to build your compliance program?"
          body="We'll scope a toolkit to your target framework and organization size — then build it alongside your team, embedding controls into how you operate."
          primary="Scope a Toolkit" onNav={onNav} />
      </div>
    </window.Section>
  </div>
);

Object.assign(window, { ToolkitsPage });