// Capabilities — IT Operations & Platform Engineering
// Eight disciplines, filterable by phase / audience / sector.

const CAPS_DATA = [
  {
    code: 'clo', no: '01', title: 'Cloud landing zones',
    kicker: 'A first deploy on day one, not a ticket queue.',
    tags: ['Cloud', 'Network', 'IAM'],
    phases: ['Foundation'],
    audiences: ['CIO', 'VP Infrastructure', 'Chief Architect'],
    sectors: ['Financial', 'Healthcare', 'Public Sector', 'Industrial'],
    body: 'Multi-account foundations for AWS, Azure, and GCP. Account topology, zero-trust network, identity federation, tagging and FinOps guardrails, configured as code so the next account is minutes, not quarters.',
    deliverables: [
      'Account / subscription / project topology',
      'Zero-trust network baseline with transit & egress controls',
      'SSO federation, break-glass, and IAM guardrails',
      'Tag policy, budgets, and cost alert pipelines',
    ],
  },
  {
    code: 'kub', no: '03', title: 'Container modernization',
    kicker: 'A runtime your platform team can actually own.',
    tags: ['Kubernetes', 'Runtime', 'Mesh'],
    phases: ['Platform'],
    audiences: ['Platform Lead', 'Chief Architect', 'SRE Lead'],
    sectors: ['Financial', 'Healthcare', 'Technology', 'Industrial'],
    body: 'Production-grade EKS, AKS, or GKE. Cluster lifecycle as IaC, Cilium or Istio for traffic and policy, KEDA and cluster autoscaling for load, and namespace tenancy with policy guardrails so one team cannot break another.',
    deliverables: [
      'Cluster lifecycle via Terraform / Crossplane',
      'Service mesh with mTLS and L7 policy',
      'Autoscaling (KEDA, cluster, node) tuned to workload',
      'Multi-tenant namespace and policy model',
    ],
  },
  {
    code: 'dev', no: '08', title: 'Internal developer platforms',
    kicker: 'Shipping a new service becomes a template, not a ticket.',
    tags: ['Backstage', 'DevEx', 'Self-service'],
    phases: ['Platform', 'Delivery'],
    audiences: ['Platform Lead', 'VP Engineering'],
    sectors: ['Financial', 'Healthcare', 'Technology'],
    body: 'Backstage portals, golden-path templates, and self-service environments. We treat the platform as a product — with a catalog, scorecards, and a customer success motion for your own engineers.',
    deliverables: [
      'Backstage service catalog and scorecards',
      'Golden-path templates for 6–10 runtimes',
      'Self-service environment provisioning',
      'Platform product ops (roadmap, adoption, SLAs)',
    ],
  },
  {
    code: 'cid', no: '06', title: 'CI/CD & SDLC modernization',
    kicker: 'Pipelines fast enough to ship. Signed enough to audit.',
    tags: ['CI/CD', 'Supply chain', 'Delivery'],
    phases: ['Delivery'],
    audiences: ['VP Engineering', 'Platform Lead', 'CISO'],
    sectors: ['Financial', 'Healthcare', 'Technology', 'Industrial'],
    body: 'GitHub Actions, GitLab, or Argo. SLSA-3 supply chain, signed artifacts, progressive delivery with canaries and feature flags, and preview environments per PR. Audit evidence falls out of the pipeline.',
    deliverables: [
      'Pipelines standardized across repos',
      'SLSA-3 compliant artifact supply chain',
      'Argo Rollouts / Flagger progressive delivery',
      'Preview and ephemeral environments per PR',
    ],
  },
  {
    code: 'obs', no: '07', title: 'Observability & SRE',
    kicker: 'SLOs that mean something. On-call that learns.',
    tags: ['SRE', 'OpenTelemetry', 'Incident'],
    phases: ['Operate'],
    audiences: ['SRE Lead', 'Platform Lead', 'VP Engineering'],
    sectors: ['Financial', 'Healthcare', 'Technology', 'Industrial'],
    body: 'OpenTelemetry end to end. SLO and error-budget policy wired into deployment gates. Incident response with blameless postmortems, runbook automation, and a weekly review cadence that actually moves the needle on MTTR.',
    deliverables: [
      'OTel instrumentation and collectors',
      'SLO definitions and error-budget policy',
      'Incident response program + runbooks',
      'Runbook automation via event-driven workflows',
    ],
  },
  {
    code: 'fin', no: '04', title: 'Cloud cost & FinOps',
    kicker: 'Unit economics for infrastructure.',
    tags: ['FinOps', 'Cost', 'Planning'],
    phases: ['Operate', 'Foundation'],
    audiences: ['CIO', 'VP Infrastructure', 'CFO'],
    sectors: ['Financial', 'Healthcare', 'Technology', 'Industrial'],
    body: 'Tagging and allocation that match the org chart. Unit-cost modeling against business drivers. Commitment portfolio optimization, rightsizing automation, and cost gates in CI so tomorrow\'s spend surprise never lands.',
    deliverables: [
      'Cost allocation model and showback',
      'Unit-cost per business metric',
      'Commitment & savings-plan portfolio',
      'Rightsizing automation + CI cost gates',
    ],
  },
  {
    code: 'sec', no: '05', title: 'Security & compliance automation',
    kicker: 'Audit is the byproduct, not the project.',
    tags: ['Compliance', 'Policy-as-code', 'CSPM'],
    phases: ['Foundation', 'Govern'],
    audiences: ['CISO', 'Chief Risk Officer', 'General Counsel'],
    sectors: ['Financial', 'Healthcare', 'Public Sector'],
    body: 'Policy as code with OPA/Rego. Continuous posture management with drift detection. Evidence pipelines that feed SOC 2, ISO 27001, PCI, HIPAA, and FedRAMP controls — so the auditor reviews what the system produced, not what a team reconstructed.',
    deliverables: [
      'OPA/Rego policy library',
      'CSPM + drift detection + remediation',
      'Evidence pipelines and control mapping',
      'SOC 2 / ISO 27001 / PCI / FedRAMP readiness',
    ],
  },
  {
    code: 'ext', no: '02', title: 'Data center exit & legacy modernization',
    kicker: 'A structured path out. No big-bang cutovers.',
    tags: ['Migration', 'Mainframe', 'Legacy'],
    phases: ['Foundation', 'Delivery'],
    audiences: ['CIO', 'VP Infrastructure', 'Chief Architect'],
    sectors: ['Financial', 'Industrial', 'Public Sector'],
    body: 'Workload discovery, wave planning, and strangler patterns for mainframe and three-tier monoliths. Each wave has a rollback rehearsal. Examiners and auditors get a written and auditable plan. Engineers get a schedule they can hit.',
    deliverables: [
      'Workload discovery and wave plan',
      'Replatform / refactor / retire decisions per app',
      'Strangler-pattern adapters for mainframe & COBOL',
      'Cutover + rollback rehearsal playbooks',
    ],
  },
];

CAPS_DATA.sort((a, b) => a.no.localeCompare(b.no));

const FILTERS = {
  phase: { label: 'Phase', values: ['All', 'Foundation', 'Platform', 'Delivery', 'Operate', 'Govern'] },
  audience: { label: 'Audience', values: ['All', 'CIO', 'VP Infrastructure', 'VP Engineering', 'Platform Lead', 'SRE Lead', 'Chief Architect', 'CISO', 'CFO'] },
  sector: { label: 'Sector', values: ['All', 'Financial', 'Healthcare', 'Public Sector', 'Industrial', 'Technology'] },
};

function CapabilitiesIntro() {
  return (
    <section className="cap-intro">
      <div className="page">
        <div className="section-head">
          <span className="eyebrow eyebrow-accent">Capabilities / Index</span>
          <h2>Eight disciplines. Filter to <span className="tilt">your situation.</span></h2>
          <p>Use the filters below to narrow by delivery phase, audience, or sector. Click any row to inspect what we deliver, and the numbers behind it.</p>
        </div>
      </div>
    </section>
  );
}

function CapabilityMatrix() {
  const [filters, setFilters] = React.useState({ phase: 'All', audience: 'All', sector: 'All' });
  const [active, setActive] = React.useState(CAPS_DATA[0].code);

  const matches = (cap) =>
    (filters.phase === 'All' || cap.phases.includes(filters.phase) || cap.phases.includes('All')) &&
    (filters.audience === 'All' || cap.audiences.includes(filters.audience)) &&
    (filters.sector === 'All' || cap.sectors.includes(filters.sector));

  const filtered = CAPS_DATA.filter(matches);
  const activeCap = CAPS_DATA.find(c => c.code === active) || filtered[0];

  return (
    <section className="cap-matrix-section">
      <div className="page">
      <div className="filter-bar">
        {Object.entries(FILTERS).map(([key, f]) => (
          <div className="filter-group" key={key}>
            <span className="filter-label">{f.label}</span>
            <div className="filter-chips">
              {f.values.map(v => (
                <button
                  key={v}
                  className={`filter-chip ${filters[key] === v ? 'active' : ''}`}
                  onClick={() => setFilters(s => ({ ...s, [key]: v }))}
                >{v}</button>
              ))}
            </div>
          </div>
        ))}
      </div>

      <div className="matrix-layout">
        <aside className="matrix-list">
          {CAPS_DATA.map(cap => {
            const shown = matches(cap);
            return (
              <button
                key={cap.code}
                className={`matrix-row ${active === cap.code ? 'active' : ''} ${shown ? '' : 'dim'}`}
                onClick={() => setActive(cap.code)}
              >
                <span className="matrix-no">{cap.no}</span>
                <span className="matrix-title">{cap.title}</span>
                <span className="matrix-arrow">{active === cap.code ? '●' : '○'}</span>
              </button>
            );
          })}
        </aside>

        <article className="matrix-panel" id={activeCap.code}>
          <header className="matrix-panel-head">
            <span className="matrix-panel-code">{activeCap.code.toUpperCase()} · {activeCap.no} / 08</span>
            <h3 className="matrix-panel-title">{activeCap.title}</h3>
            <p className="matrix-panel-kicker">{activeCap.kicker}</p>
          </header>

          <div className="matrix-panel-body">
            <p>{activeCap.body}</p>
          </div>

          <div className="matrix-deliverables">
            <span className="matrix-deliverables-label">Deliverables</span>
            <ul>
              {activeCap.deliverables.map(d => (
                <li key={d}><span className="tick">→</span>{d}</li>
              ))}
            </ul>
          </div>
        </article>
      </div>
      </div>
    </section>
  );
}

function CapabilitiesPage() {
  return (
    <>
      <CapabilitiesIntro/>
      <CapabilityMatrix/>
    </>
  );
}

Object.assign(window, { CapabilitiesPage });