// ToolkitISO27001.jsx — Verigo Global: ISO 27001:2022 implementation toolkit page
const { V: TV, MAXW: TMW, FONT: TFT } = window;

/* ── BREADCRUMB ──────────────────────────────────────────── */
const TCrumb = ({ onNav }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, fontWeight: 600, color: TV.g500, marginBottom: 24, fontFamily: TFT }}>
    <button onClick={() => onNav('home')} style={tcrumbBtn}>Home</button>
    <span style={{ color: TV.g300 }}>/</span>
    <button onClick={() => onNav('toolkits')} style={tcrumbBtn}>Toolkits</button>
    <span style={{ color: TV.g300 }}>/</span>
    <span style={{ color: TV.purple }}>ISO 27001 Toolkit</span>
  </div>
);
const tcrumbBtn = { background: 'none', border: 'none', cursor: 'pointer', color: '#7A7A8A', fontSize: 13, fontWeight: 600, padding: 0, fontFamily: "'DM Sans', system-ui, sans-serif" };

/* ── HERO ────────────────────────────────────────────────── */
const THero = ({ onNav }) => (
  <section style={{ background: TV.g50, padding: '56px 0 64px', borderBottom: `1px solid ${TV.g200}`, position: 'relative', overflow: 'hidden' }}>
    <window.HeroWatermark variant="stack" color={TV.purpleDark} opacity={0.16} style={{ top: -20, right: -20, width: 480, height: 440 }} />
    <div style={{ maxWidth: TMW, margin: '0 auto', padding: '0 32px', position: 'relative', zIndex: 1 }}>
      <TCrumb 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, background: TV.purpleSubtle, color: TV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <window.Icon name="layers" size={30} />
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <window.Tag color={TV.purple} bg={TV.purpleSubtle} border={TV.purpleSubtle}>Implementation Toolkit</window.Tag>
              <window.Tag color={TV.g600} bg="#fff" border={TV.g200}>ISO/IEC 27001:2022</window.Tag>
            </div>
          </div>
          <h1 className="vg-hero-title" style={{ fontSize: 60, fontWeight: 800, letterSpacing: '-0.035em', color: TV.black, margin: '0 0 18px', lineHeight: 1.02, fontFamily: TFT }}>
            The ISO 27001 toolkit, <span style={{ color: TV.purple }}>ready to deploy.</span>
          </h1>
          <p style={{ fontSize: 19, color: TV.g600, lineHeight: 1.6, margin: '0 0 30px', maxWidth: 600 }}>
            A complete, practitioner-maintained document set — 24 policies, 20 procedures, and all 93 Annex A control templates — tailored to your organization so you build a certifiable ISMS without starting from a blank page.
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <window.Btn kind="primary" onClick={() => onNav('evaluation')}>Start the readiness evaluation <window.Icon name="arrow" size={17} color="#fff" /></window.Btn>
            <window.Btn kind="ghost" onClick={() => document.getElementById('downloads')?.scrollIntoView({ behavior: 'smooth', block: 'start' })}>See what's inside</window.Btn>
          </div>
        </div>
        <div style={{ background: '#fff', border: `1px solid ${TV.g200}`, padding: '26px', boxShadow: '0 8px 32px rgba(91,46,145,0.08)' }}>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: TV.g400, marginBottom: 16 }}>Inside the toolkit</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {[['doc', '24', 'Approval-ready policies'], ['file', '20', 'Operational procedures'], ['layers', '93', 'Annex A control templates'], ['clipboard', '120+', 'Documents, checklists & samples']].map(([ic, n, l], i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ width: 34, height: 34, background: TV.purpleSubtle, color: TV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <window.Icon name={ic} size={18} />
                </div>
                <div style={{ fontSize: 22, fontWeight: 800, color: TV.black, fontFamily: TFT, letterSpacing: '-0.02em', minWidth: 46 }}>{n}</div>
                <div style={{ fontSize: 13.5, color: TV.g600, fontWeight: 500 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* ── OVERVIEW ────────────────────────────────────────────── */
const TOverview = () => (
  <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 }}>Overview</window.Overline>
        <h2 className="vg-section-title" style={{ fontSize: 36, fontWeight: 800, letterSpacing: '-0.025em', color: TV.black, margin: '0 0 20px', lineHeight: 1.12, fontFamily: TFT }}>Everything the standard asks for — pre-built and tailored.</h2>
        <p style={{ fontSize: 16.5, color: TV.g600, lineHeight: 1.7, margin: '0 0 18px' }}>
          The Verigo ISO 27001 toolkit is the document backbone of a certifiable <strong style={{ color: TV.black }}>Information Security Management System</strong>. It pairs the management-system documentation required by Clauses 4–10 with implementation templates for every one of the 93 Annex A:2022 controls.
        </p>
        <p style={{ fontSize: 16.5, color: TV.g600, lineHeight: 1.7, margin: 0 }}>
          Each artefact is maintained by senior practitioners and tailored to your organization, industry, and risk appetite — then embedded into how you operate, the <strong style={{ color: TV.black }}>Compliance by Design</strong> way, so evidence is produced by the process itself.
        </p>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        {[
          ['compass', 'Tailored, not generic', 'Every policy and procedure is shaped to your scope, structure, and existing tooling — not a one-size-fits-all template dump.'],
          ['network', 'Cross-framework ready', 'Controls are mapped so the same evidence supports SOC 2, CMMC, NIST, and HITRUST without duplication.'],
          ['refresh', 'Maintained for the 2022 edition', 'Aligned to ISO/IEC 27001:2022, including the 11 new controls and the four-theme Annex A structure.'],
        ].map(([ic, t, d], i) => (
          <div key={i} style={{ display: 'flex', gap: 16, border: `1px solid ${TV.g200}`, padding: '22px 24px', background: '#fff' }}>
            <div style={{ width: 44, height: 44, background: TV.purpleSubtle, color: TV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <window.Icon name={ic} size={22} />
            </div>
            <div>
              <h3 style={{ fontSize: 16.5, fontWeight: 700, color: TV.black, margin: '0 0 5px', fontFamily: TFT, letterSpacing: '-0.01em' }}>{t}</h3>
              <p style={{ fontSize: 14, color: TV.g600, lineHeight: 1.6, margin: 0 }}>{d}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  </window.Section>
);

/* ── COVERAGE ────────────────────────────────────────────── */
const CLAUSES = [['4', 'Context'], ['5', 'Leadership'], ['6', 'Planning'], ['7', 'Support'], ['8', 'Operation'], ['9', 'Performance'], ['10', 'Improvement']];
const TCoverage = () => (
  <window.Section bg={TV.g50} pad="80px 0">
    <window.SectionHeader overline="Coverage" align="center"
      title="Wall-to-wall across the standard"
      sub="The toolkit covers both halves of ISO 27001 — the management-system clauses and the full Annex A control set." />
    <div style={{ marginBottom: 16, fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: TV.g400 }}>Management system · Clauses 4–10</div>
    <div className="vg-grid-7" style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 12, marginBottom: 40 }}>
      {CLAUSES.map(([n, t], i) => (
        <div key={i} style={{ background: '#fff', border: `1px solid ${TV.g200}`, padding: '20px 16px', textAlign: 'center' }}>
          <div style={{ fontSize: 30, fontWeight: 800, color: TV.purple, fontFamily: TFT, letterSpacing: '-0.02em', lineHeight: 1 }}>{n}</div>
          <div style={{ fontSize: 13, fontWeight: 600, color: TV.g700, marginTop: 8 }}>{t}</div>
        </div>
      ))}
    </div>
    <div style={{ marginBottom: 16, fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: TV.g400 }}>Annex A:2022 · 93 controls, four themes</div>
    <div className="vg-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
      {window.TK_ISO.ANNEX.map((g, i) => (
        <div key={i} style={{ background: '#fff', border: `1px solid ${TV.g200}`, padding: '24px' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
            <div style={{ width: 44, height: 44, background: TV.purpleSubtle, color: TV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <window.Icon name={g.icon} size={22} />
            </div>
            <span style={{ fontSize: 28, fontWeight: 800, color: TV.purple, letterSpacing: '-0.02em', fontFamily: TFT }}>{g.items.length}</span>
          </div>
          <h3 style={{ fontSize: 16, fontWeight: 700, color: TV.black, margin: 0, fontFamily: TFT, letterSpacing: '-0.01em' }}>{g.theme}</h3>
        </div>
      ))}
    </div>
  </window.Section>
);

/* ── CONTENTS EXPLORER + GATED DOWNLOADS ─────────────────── */
const TContents = ({ onDownload, unlocked }) => {
  const [tab, setTab] = React.useState('policies');
  const A = window.TK_ISO.ASSETS;
  const tabs = [['policies', 'Policies', A.policies.count], ['procedures', 'Procedures', A.procedures.count], ['controls', 'Annex A Controls', A.controls.count]];
  const meta = A[tab];

  const renderList = () => {
    if (tab === 'controls') {
      return (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
          {window.TK_ISO.ANNEX.map((g, gi) => (
            <div key={gi}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
                <window.Icon name={g.icon} size={18} color={TV.purple} />
                <span style={{ fontSize: 14, fontWeight: 800, color: TV.black, fontFamily: TFT, letterSpacing: '-0.01em' }}>{g.theme}</span>
                <span style={{ fontSize: 12, fontWeight: 600, color: TV.g400 }}>{g.items.length} controls</span>
              </div>
              <div className="vg-grid-2" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '8px 24px' }}>
                {g.items.map(([code, title], i) => (
                  <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'baseline', fontSize: 13.5, lineHeight: 1.4, paddingBottom: 6, borderBottom: `1px solid ${TV.g100}` }}>
                    <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11.5, fontWeight: 700, color: TV.orange, flexShrink: 0, minWidth: 42 }}>{code}</span>
                    <span style={{ color: TV.g700 }}>{title}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      );
    }
    const list = tab === 'policies' ? window.TK_ISO.POLICIES : window.TK_ISO.PROCEDURES;
    return (
      <div className="vg-grid-2" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '14px 24px' }}>
        {list.map(([t, d], i) => (
          <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', paddingBottom: 14, borderBottom: `1px solid ${TV.g100}` }}>
            <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, fontWeight: 700, color: TV.purple, flexShrink: 0, marginTop: 1 }}>{String(i + 1).padStart(2, '0')}</span>
            <div>
              <div style={{ fontSize: 14.5, fontWeight: 700, color: TV.black, lineHeight: 1.3, fontFamily: TFT }}>{t}</div>
              <div style={{ fontSize: 13, color: TV.g500, lineHeight: 1.5, marginTop: 2 }}>{d}</div>
            </div>
          </div>
        ))}
      </div>
    );
  };

  return (
    <section id="downloads" style={{ background: '#fff', padding: '84px 0', scrollMarginTop: 80 }}>
      <div style={{ maxWidth: TMW, margin: '0 auto', padding: '0 32px' }}>
        <window.SectionHeader overline="Toolkit contents"
          title="Browse the full set — and take it with you"
          sub="Explore every policy, procedure, and control in the toolkit. Download any list as a branded PDF; we'll ask for a few details so a practitioner can tailor it to you." maxSub={680} />

        {/* tabs */}
        <div style={{ display: 'flex', gap: 8, borderBottom: `1px solid ${TV.g200}`, marginBottom: 0 }}>
          {tabs.map(([id, label, count]) => (
            <button key={id} onClick={() => setTab(id)}
              style={{ fontFamily: TFT, fontSize: 14.5, fontWeight: 700, padding: '14px 20px', cursor: 'pointer', background: 'none', border: 'none', borderBottom: tab === id ? `3px solid ${TV.purple}` : '3px solid transparent', color: tab === id ? TV.purple : TV.g500, marginBottom: -1, display: 'flex', alignItems: 'center', gap: 8 }}>
              {label}<span style={{ fontSize: 11, fontWeight: 700, padding: '2px 8px', borderRadius: 9999, background: tab === id ? TV.purpleSubtle : TV.g100, color: tab === id ? TV.purple : TV.g500 }}>{count}</span>
            </button>
          ))}
        </div>

        {/* download bar */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap', background: TV.g50, border: `1px solid ${TV.g200}`, borderTop: 'none', padding: '20px 24px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{ width: 46, height: 46, background: TV.purple, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <window.Icon name={meta.icon} size={23} color="#fff" />
            </div>
            <div>
              <div style={{ fontSize: 16, fontWeight: 800, color: TV.black, fontFamily: TFT, letterSpacing: '-0.01em' }}>{meta.label}</div>
              <div style={{ fontSize: 13, color: TV.g500, maxWidth: 520, lineHeight: 1.4 }}>{meta.blurb}</div>
            </div>
          </div>
          <window.Btn kind="primary" onClick={() => onDownload(tab)} style={{ flexShrink: 0 }}>
            <window.Icon name={unlocked ? 'arrow' : 'lock'} size={16} color="#fff" />
            {unlocked ? `Download PDF · ${meta.count} ${meta.unit}` : `Download PDF (${meta.count} ${meta.unit})`}
          </window.Btn>
        </div>

        {/* list */}
        <div style={{ border: `1px solid ${TV.g200}`, borderTop: 'none', padding: '32px 28px' }}>
          {renderList()}
        </div>
      </div>
    </section>
  );
};

/* ── SAMPLE DOCUMENTS VIEWER ─────────────────────────────── */
const TSamples = ({ onDownloadSample }) => {
  const [s, setS] = React.useState('policy');
  const tabs = [['policy', 'Policy', 'doc'], ['procedure', 'Procedure', 'file'], ['control', 'Control template', 'layers'], ['checklist', 'Checklist', 'clipboard']];
  return (
    <window.Section bg={TV.g50} pad="84px 0">
      <window.SectionHeader overline="Samples" align="center"
        title="See exactly what you'll receive"
        sub="Representative pages from the toolkit — a policy, a procedure, a control template, and an audit-readiness checklist." />
      <div className="vg-detail-grid" style={{ display: 'grid', gridTemplateColumns: '240px 1fr', gap: 32, alignItems: 'start' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, position: 'sticky', top: 92 }}>
          {tabs.map(([id, label, icon]) => (
            <button key={id} onClick={() => setS(id)}
              style={{ display: 'flex', alignItems: 'center', gap: 12, textAlign: 'left', fontFamily: TFT, fontSize: 14.5, fontWeight: 700, padding: '14px 18px', cursor: 'pointer', background: s === id ? '#fff' : 'transparent', border: `1px solid ${s === id ? TV.purple : TV.g200}`, color: s === id ? TV.purple : TV.g600, transition: 'all 150ms' }}>
              <window.Icon name={icon} size={19} color={s === id ? TV.purple : TV.g400} />{label}
            </button>
          ))}
          <div style={{ background: '#fff', border: `1px solid ${TV.g200}`, padding: '18px', marginTop: 8 }}>
            <div style={{ fontSize: 13.5, fontWeight: 700, color: TV.black, fontFamily: TFT, marginBottom: 4 }}>Want the full sample?</div>
            <p style={{ fontSize: 12.5, color: TV.g500, lineHeight: 1.55, margin: '0 0 14px' }}>Preview the complete package index as a branded PDF — we'll ask for a few details first.</p>
            <window.Btn kind="ghostBrand" onClick={onDownloadSample} style={{ width: '100%', justifyContent: 'center', fontSize: 13.5, padding: '11px 16px' }}>
              <window.Icon name="doc" size={16} color={TV.purple} /> Preview / download sample PDF
            </window.Btn>
          </div>
          <p style={{ fontSize: 12.5, color: TV.g400, lineHeight: 1.55, marginTop: 4, padding: '0 4px' }}>Samples are illustrative. Delivered documents are tailored to your organization and branding.</p>
        </div>
        <div style={{ background: '#fff', border: `1px solid ${TV.g200}`, boxShadow: '0 8px 32px rgba(0,0,0,0.06)', padding: '0', overflow: 'hidden' }}>
          <SamplePaper kind={s} />
        </div>
      </div>
    </window.Section>
  );
};

const DocHeader = ({ docId, title, ver = '2.1', owner }) => (
  <div style={{ borderBottom: `2px solid ${TV.purple}`, padding: '26px 36px 18px', background: TV.g50 }}>
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
      <window.BrandMark size={30} />
      <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, fontWeight: 700, color: TV.g500 }}>{docId}</span>
    </div>
    <h3 style={{ fontSize: 22, fontWeight: 800, color: TV.black, margin: '0 0 12px', fontFamily: TFT, letterSpacing: '-0.02em' }}>{title}</h3>
    <div style={{ display: 'flex', gap: 28, flexWrap: 'wrap' }}>
      {[['Classification', 'Internal'], ['Version', ver], ['Owner', owner], ['Framework', 'ISO/IEC 27001:2022']].map(([k, v], i) => (
        <div key={i}>
          <div style={{ fontSize: 9.5, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: TV.g400 }}>{k}</div>
          <div style={{ fontSize: 12.5, fontWeight: 600, color: TV.g700, marginTop: 2 }}>{v}</div>
        </div>
      ))}
    </div>
  </div>
);
const DocSection = ({ n, h, children }) => (
  <div style={{ marginBottom: 20 }}>
    <div style={{ fontSize: 13.5, fontWeight: 800, color: TV.black, fontFamily: TFT, marginBottom: 7, letterSpacing: '-0.01em' }}>
      <span style={{ color: TV.orange, fontFamily: "'JetBrains Mono', monospace", fontSize: 12, marginRight: 8 }}>{n}</span>{h}
    </div>
    <div style={{ fontSize: 13, color: TV.g600, lineHeight: 1.65 }}>{children}</div>
  </div>
);

const SamplePaper = ({ kind }) => {
  if (kind === 'policy') return (
    <div>
      <DocHeader docId="POL-15 · Access Control Policy" title="Access Control Policy" owner="CISO" />
      <div style={{ padding: '28px 36px 36px' }}>
        <DocSection n="1.0" h="Purpose">This policy establishes the requirements for controlling access to information and information processing facilities, ensuring access is granted on a least-privilege, need-to-know basis in support of Annex A controls A.5.15–A.5.18.</DocSection>
        <DocSection n="2.0" h="Scope">Applies to all employees, contractors, and third parties who access organizational systems, applications, and data, across all four operating regions.</DocSection>
        <DocSection n="3.0" h="Policy statements">
          <ul style={{ margin: '4px 0 0', paddingLeft: 18, display: 'flex', flexDirection: 'column', gap: 6 }}>
            <li>Access is provisioned through a formal request and approval workflow tied to documented roles.</li>
            <li>Privileged access is restricted, logged, and reviewed at least quarterly.</li>
            <li>Multi-factor authentication is enforced for remote and administrative access.</li>
            <li>Access rights are recertified every 90 days and revoked within 24 hours of a leaver event.</li>
          </ul>
        </DocSection>
        <DocSection n="4.0" h="Roles & responsibilities">System owners approve access; IT operations provisions it; the CISO owns this policy and its annual review.</DocSection>
        <DocSection n="5.0" h="Review">Reviewed annually or upon significant change. Next review: 12 months from approval.</DocSection>
      </div>
    </div>
  );
  if (kind === 'procedure') return (
    <div>
      <DocHeader docId="PRC-07 · Access Provisioning Procedure" title="User Access Provisioning & Deprovisioning" owner="IT Operations" />
      <div style={{ padding: '28px 36px 36px' }}>
        <DocSection n="1.0" h="Objective">Define the repeatable steps for granting, modifying, and removing user access across the joiner–mover–leaver lifecycle.</DocSection>
        <div style={{ fontSize: 13.5, fontWeight: 800, color: TV.black, fontFamily: TFT, marginBottom: 10 }}><span style={{ color: TV.orange, fontFamily: "'JetBrains Mono', monospace", fontSize: 12, marginRight: 8 }}>2.0</span>Process steps</div>
        <div style={{ border: `1px solid ${TV.g200}` }}>
          {[['1', 'Request raised', 'Manager submits an access request specifying role and systems.'], ['2', 'Approval', 'System owner validates least-privilege and approves or rejects.'], ['3', 'Provision', 'IT Operations creates accounts and assigns role-based entitlements.'], ['4', 'Verify', 'Requester confirms access; evidence logged to the ticket.'], ['5', 'Deprovision', 'On a leaver event, access is revoked within 24 hours and recorded.']].map(([n, t, d], i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '40px 1fr', borderTop: i ? `1px solid ${TV.g200}` : 'none' }}>
              <div style={{ background: TV.purpleSubtle, color: TV.purple, fontWeight: 800, fontFamily: "'JetBrains Mono', monospace", fontSize: 13, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{n}</div>
              <div style={{ padding: '12px 16px' }}>
                <div style={{ fontSize: 13.5, fontWeight: 700, color: TV.black }}>{t}</div>
                <div style={{ fontSize: 12.5, color: TV.g500, marginTop: 2, lineHeight: 1.5 }}>{d}</div>
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 18 }}><DocSection n="3.0" h="Records">Access request tickets, approval logs, and quarterly access-review reports are retained for the certification cycle.</DocSection></div>
      </div>
    </div>
  );
  if (kind === 'control') return (
    <div>
      <DocHeader docId="A.8.5 · Control Template" title="Secure Authentication" ver="1.0" owner="Head of IT Security" />
      <div style={{ padding: '28px 36px 36px' }}>
        <DocSection n="—" h="Control objective">Ensure secure authentication technologies and procedures are implemented based on access restrictions and the access control policy.</DocSection>
        <div className="vg-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 20 }}>
          {[['Applicability', 'Applicable — all production systems'], ['Implementation status', 'Implemented'], ['Control owner', 'Head of IT Security'], ['Test frequency', 'Quarterly']].map(([k, v], i) => (
            <div key={i} style={{ border: `1px solid ${TV.g200}`, padding: '12px 14px' }}>
              <div style={{ fontSize: 9.5, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: TV.g400 }}>{k}</div>
              <div style={{ fontSize: 13, fontWeight: 600, color: TV.g700, marginTop: 3 }}>{v}</div>
            </div>
          ))}
        </div>
        <DocSection n="—" h="Implementation guidance">MFA is enforced for all remote and privileged access; password policy meets length and complexity baselines; failed-attempt lockout and anomalous-login alerting are enabled.</DocSection>
        <DocSection n="—" h="Evidence expected">IdP configuration export, MFA enrolment report, authentication policy, and a sample of access logs demonstrating lockout behaviour.</DocSection>
      </div>
    </div>
  );
  // checklist
  return (
    <div>
      <DocHeader docId="CHK-02 · Stage 2 Audit-Readiness" title="Stage 2 Audit-Readiness Checklist" ver="3.0" owner="ISMS Manager" />
      <div style={{ padding: '20px 36px 36px' }}>
        {[['done', 'Statement of Applicability complete and signed off', 'A.5 / Clause 6'], ['done', 'Risk assessment & treatment plan current', 'Clause 6.1'], ['done', 'All 93 Annex A controls assessed for applicability', 'Annex A'], ['progress', 'Internal audit completed; findings logged', 'Clause 9.2'], ['progress', 'Management review minutes for the period', 'Clause 9.3'], ['todo', 'Corrective actions closed or with target dates', 'Clause 10.1'], ['todo', 'Awareness training records for all staff', 'A.6.3']].map(([st, t, ref], i) => {
          const map = { done: [TV.purple, 'check', 'Complete'], progress: [TV.orange, 'refresh', 'In progress'], todo: [TV.g300, 'clipboard', 'Outstanding'] };
          const [c, ic, lab] = map[st];
          return (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px 0', borderBottom: `1px solid ${TV.g100}` }}>
              <div style={{ width: 26, height: 26, borderRadius: '50%', background: st === 'todo' ? '#fff' : c, border: `1.5px solid ${c}`, color: st === 'todo' ? TV.g300 : '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <window.Icon name={ic} size={15} color={st === 'todo' ? TV.g300 : '#fff'} />
              </div>
              <div style={{ flex: 1, fontSize: 14, fontWeight: 600, color: TV.g800, lineHeight: 1.4 }}>{t}</div>
              <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, fontWeight: 700, color: TV.g400, flexShrink: 0 }}>{ref}</span>
              <span style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase', color: c, minWidth: 84, textAlign: 'right' }}>{lab}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
};

/* ── PAGE ────────────────────────────────────────────────── */
const ToolkitISO27001Page = ({ onNav }) => {
  const [modalAsset, setModalAsset] = React.useState(null);
  const [unlocked, setUnlocked] = React.useState(false);
  const sessionOk = () => { try { return !!sessionStorage.getItem('verigo_dl_ok'); } catch (e) { return false; } };
  React.useEffect(() => { if (sessionOk()) setUnlocked(true); }, []);

  const onDownload = (asset) => {
    if (sessionOk()) { window.TK_ISO.generatePDF(asset, window.TK_ISO.getUser() || {}); }
    else { setModalAsset(asset); }
  };
  const onModalSubmit = (form) => {
    window.TK_ISO.storeLead(form);
    try { sessionStorage.setItem('verigo_dl_ok', '1'); } catch (e) {}
    setUnlocked(true);
    const asset = modalAsset;
    setModalAsset(null);
    setTimeout(() => window.TK_ISO.generatePDF(asset, form), 60);
  };

  const A = modalAsset ? window.TK_ISO.ASSETS[modalAsset] : null;
  return (
    <div>
      <THero onNav={onNav} />
      <TOverview />
      <TCoverage />
      <TContents onDownload={onDownload} unlocked={unlocked} />
      <TSamples onDownloadSample={() => onDownload('standard')} />
      <window.TPricing onNav={onNav} />
      <window.TActionBand onDownloadStandard={() => onDownload('standard')} onNav={onNav} />
      <window.TEvaluation onNav={onNav} />
      {A && (
        <window.LeadCaptureModal
          icon={A.icon}
          eyebrow={`Download · ${A.count} ${A.unit}`}
          heading={A.label}
          intro="Tell us where to send it and a senior practitioner can tailor the toolkit to your scope. Your PDF downloads immediately."
          cta="Download PDF"
          note="We'll only use your details to share the toolkit and follow up. No spam."
          onClose={() => setModalAsset(null)}
          onSubmit={onModalSubmit} />
      )}
    </div>
  );
};

Object.assign(window, { ToolkitISO27001Page });
