/* Capabilities — 5 service lines, layered model */

const CAPS = [
{
  n: '01',
  id: 'strategy',
  title: 'MES/MOM Strategy & Roadmap',
  blurb: 'Current-state diagnostics, maturity assessment, lighthouse-factory selection, wave planning, value-case framing.',
  outputs: ['Maturity Assessment', 'Lighthouse Selection', 'Wave Plan', 'Value Case']
},
{
  n: '02',
  id: 'design',
  title: 'Solution Design & Requirements Engineering',
  blurb: 'Functional and integration requirements, master-data design, KPI definition, template strategy, governance mapping.',
  outputs: ['Functional Spec', 'Master-Data Design', 'KPI Catalogue', 'Template Strategy']
},
{
  n: '03',
  id: 'integration',
  title: 'Platform Implementation & Industrial Integration',
  blurb: 'TrakSYS MES/MOM implementation, PLC connectivity via OPC UA and MQTT, ERP integration, SCADA integration, LIMS/WMS/CMMS integration — system interoperability across the full ISA-95 stack. Commissioning, validation, and hypercare.',
  outputs: ['TrakSYS Build', 'OPC UA / MQTT', 'ERP Integration', 'Commissioning · Hypercare'],
  highlight: true
},
{
  n: '04',
  id: 'opex',
  title: 'Operational Excellence Enablement',
  blurb: 'OEE and loss intelligence, digital quality workflows, traceability, planning-execution synchronization, continuous improvement enablement.',
  outputs: ['OEE & Loss Intel', 'Digital Quality', 'Traceability', 'Plan-Execution Sync']
},
{
  n: '05',
  id: 'ai',
  title: 'Enterprise Digital Transformation & AI Strategy',
  blurb: 'Digital maturity diagnostics, future-state operating model, ROI frameworks, AI-powered operations, predictive maintenance, contextualized analytics.',
  outputs: ['Maturity Diagnostic', 'Future-State Model', 'AI Operations', 'Predictive Maintenance']
}];


function Capabilities() {
  return (
    <section className="kt-section" id="capabilities">
      <div className="kt-container">
        <div className="kt-divider">
          <span className="kt-divider-label">02 · WHAT WE DO</span>
          <span className="kt-divider-line"></span>
        </div>
        <div className="kt-sechead">
          <h2 className="kt-section-title">
            Five service lines.<br />
            One operational backbone.
          </h2>
          <p className="kt-section-lede">We work across the full ISA-95 stack — from PLC connectivity to plant-level MES/MOM execution and ERP integration. Our shop floor digitalization programs cover OT/IT integration, traceability, OEE improvement, and paperless manufacturing — focused toward execution and adoption.

          </p>
        </div>

        <div className="kt-cap-grid">
          {CAPS.map((c) =>
          <a key={c.n} href={`capabilities.html#${c.id}`} className={`kt-cap-card ${c.highlight ? 'is-highlight' : ''}`}>
              <div className="kt-cap-card-head">
                <span className="kt-cap-num kt-mono">{c.n}</span>
                {c.highlight && <span className="kt-tag">CORE PRACTICE</span>}
              </div>
              <h3 className="kt-cap-title">{c.title}</h3>
              <p className="kt-cap-blurb">{c.blurb}</p>
              <div className="kt-cap-outputs">
                {c.outputs.map((o) =>
              <span key={o} className="kt-cap-output">{o}</span>
              )}
              </div>
              <div className="kt-cap-arrow">→</div>
            </a>
          )}
        </div>
      </div>
    </section>);

}

window.Capabilities = Capabilities;