function SiteCapabilityGrid() {
  const caps = [
    { icon: 'assets/icon-software-engineering.jpg', title: 'Software Engineering & Application Development', body: 'Full-stack development and cloud architecture that scales with your business.', items: ['C# and Python full-stack development', 'System & cloud architecture design and deployment', 'Cloud operational management and cost control'] },
    { icon: 'assets/icon-data-science.jpg', title: 'Data Science & Analytics', body: 'End-to-end data engineering, from pipelines to insight.', items: ['End-to-end data engineering', 'Data management, including data lake, database and warehouse design', 'Data visualization for accessible insights', 'Model application and unstructured data analysis'] },
    { icon: 'assets/icon-ai-ml.jpg', title: 'AI & Machine Learning', body: 'Model selection, training, and deployment with guardrails that hold.', items: ['Strategic model selection and implementation', 'Model training using major frameworks', 'Model deployment with performance metrics monitoring and bias drift detection', 'Model augmentation to optimize output'] },
    { icon: 'assets/icon-devops.jpg', title: 'DevOps & Delivery', body: 'Pipelines that move code and data safely from commit to production.', items: ['DevSecOps CI/CD pipeline architecture', 'DataOps implementation', 'Agile leadership'] },
    { icon: 'assets/icon-performance.jpg', title: 'Performance Optimization', body: 'Tune the application, the database, and the cloud bill in one engagement.', items: ['Application and database performance tuning', 'Cloud performance and best-practice analysis'] },
    { icon: 'assets/icon-cloud-architecture.png', title: 'Cloud Architecture', body: 'Designing and governing multi-account cloud environments — landing zones, network topology, identity and access boundaries, and workload placement — so systems scale elastically while staying secure, resilient, and cost-predictable.', items: [] },
  ];
  return (
    <section id="capabilities" className="ez-section ez-caps-section">
      <div className="ez-container">
        <div className="ez-section-head">
          <div className="eyebrow">What we do</div>
          <h2>Capabilities that bridge code and data.</h2>
          <p>Six core competencies, delivered by the same team — so the seams between engineering, data, and ML disappear.</p>
        </div>
        <div className="ez-caps">
          {caps.map(c => (
            <article key={c.title} className="ez-cap-flip">
              <div className="ez-cap-inner">
                <div className="ez-cap-face ez-cap-front">
                  <img src={c.icon} alt=""/>
                  <h3>{c.title}</h3>
                </div>
                <div className="ez-cap-face ez-cap-back">
                  <h3>{c.title}</h3>
                  <p>{c.body}</p>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
window.SiteCapabilityGrid = SiteCapabilityGrid;