// Capability stack — interactive five-layer visual for the home page hero.
// Replaces the static FIG. 01 schematic. Hover any layer to swap the right-side
// content panel.

const CAPABILITY_LAYERS = [
  {
    tier: '01',
    name: 'AI Infrastructure Services',
    bg: 'var(--slab)',
    bottom: '#020714',
    text: 'var(--ink-5)',
    border: '#020714',
    eyebrow: '01 / 05 — Infrastructure',
    title: 'AI Infrastructure Services',
    desc: 'One-stop AI infrastructure delivery: design, global sourcing, customs clearance, deployment, and 24/7 support with worldwide spare parts. As a certified partner of Commscope, XFUSION, H3C, and ZTE, with regional teams and proven experience delivering large-scale clusters for NeoCloud, CSP, and NCP across APAC, Southeast Asia, and the Middle East.',
    items: [
      'IT Planning: AI infrastructure design & planning (compute/storage networks, BOM, topology)',
      'Procurement & Customs: Global sourcing + cross-border logistics (90+ countries, door-to-door delivery)',
      'Deployment: End-to-end cluster deployment (installation, testing, verification, acceptance)',
      'Support & Parts Storage: 24/7 global support with 3-tier spare parts network',
    ],
  },
  {
    tier: '02',
    name: 'Cloud Management Platform',
    bg: 'var(--slab-2)',
    bottom: 'var(--slab)',
    text: '#FFFFFF',
    border: 'var(--slab)',
    eyebrow: '02 / 05 — Platform',
    title: 'Cloud Management Platform',
    desc: 'AI-native Kubernetes cluster engineering from provisioning to production. End-to-end platform reliability for inference and training workloads at enterprise scale.',
    items: [
      'AI-native application cluster engineering',
      'End-to-end platform reliability',
      'Inference observability and alerting',
      'Auto-scaling for GPU workloads',
    ],
  },
  {
    tier: '03',
    name: 'Security and Compliance',
    bg: 'var(--slab-3)',
    bottom: 'var(--slab-2)',
    text: '#FFFFFF',
    border: 'var(--slab-2)',
    eyebrow: '03 / 05 — Security',
    title: 'Security and Compliance',
    desc: 'Zero-trust security architecture purpose-built for AI workload. OWASP Web and LLM Top 10 coverage and enterprise compliance from day one of the engagement.',
    items: [
      'Zero-trust Architecture',
      'OWASP LLM Top 10 risk mitigation',
      'Data loss prevention',
      'Compliance and audit readiness',
    ],
  },
  {
    tier: '04',
    name: 'Data Foundation and LLM Operation',
    bg: 'var(--brand)',
    bottom: 'var(--brand-2)',
    text: '#FFFFFF',
    border: 'var(--brand-2)',
    eyebrow: '04 / 05 — Data Foundation',
    title: 'Data Foundation and LLM Operation',
    desc: 'Turn enterprise data into intelligence agents can act on. Governance frameworks, pipeline engineering, and high-quality datasets engineered specifically for LLM workloads.',
    items: [
      'Data governance framework design',
      'AI-ready pipeline architecture',
      'Dataset curation for LLM training',
      'Quality monitoring and lineage tracking',
    ],
  },
  {
    tier: '05',
    name: 'Managed Operations',
    bg: 'var(--bg-tint-2)',
    bottom: 'var(--bg-tint-3)',
    text: 'var(--ink)',
    border: 'var(--line-2)',
    eyebrow: '05 / 05 — Managed Operations',
    title: 'Managed Operations',
    desc: "Embed AI teammates directly into business workflows. Agents and managed services designed around measurable KPIs, with a single team accountable across the full operating model.",
    items: [
      'Business workflow integration',
      'AI agent design and orchestration',
      'KPI instrumentation and tuning',
      'Human-in-the-loop escalation paths',
    ],
  },
];

const LAYER_TOP_OFFSETS = [0, 62, 124, 186, 248];

const StackLayer = ({ layer, index, isActive, onHover }) => (
  <div
    className="cap-layer-wrap"
    style={{ top: LAYER_TOP_OFFSETS[index] + 'px', transform: isActive ? 'translateX(-10px)' : 'translateX(0)' }}
    onMouseEnter={() => onHover(index)}
    onFocus={() => onHover(index)}
    onClick={() => onHover(index)}
    tabIndex={0}
    role="button"
    aria-pressed={isActive}
  >
    <div
      className="cap-layer"
      style={{
        background: layer.bg,
        color: layer.text,
        borderColor: layer.border,
        filter: isActive ? 'brightness(1.05)' : 'brightness(0.92)',
        boxShadow: isActive
          ? '0 6px 20px -8px rgba(10,19,48,.35), -2px 0 0 var(--brand)'
          : 'none',
      }}
    >
      <span className="cap-layer-tier">{layer.tier}</span>
      <span className="cap-layer-name">{layer.name}</span>
      <div
        className="cap-layer-bottom"
        style={{ background: layer.bottom, borderColor: layer.border }}
      />
    </div>
  </div>
);

const ContentPanel = ({ layer }) => (
  <div className="cap-content-col">
    <div className="cap-content-eyebrow">
      <span className="cap-content-eyebrow-dot" />
      <span>{layer.eyebrow}</span>
    </div>
    <div className="cap-content-body">
      <div className="cap-content-left">
        <div className="cap-content-title">{layer.title}</div>
        <div className="cap-content-desc">{layer.desc}</div>
      </div>
      <div className="cap-deliverables">
        <div className="cap-deliverables-label">Scope of work</div>
        {layer.items.map((it, i) => (
          <div className="cap-deliverable" key={it}>
            <span className="cap-deliverable-num">{String(i + 1).padStart(2, '0')}</span>
            <span>{it}</span>
          </div>
        ))}
      </div>
    </div>
    <div className="cap-actions">
    </div>
  </div>
);

const CapabilityStack = () => {
  const [activeIndex, setActiveIndex] = React.useState(0);
  const active = CAPABILITY_LAYERS[activeIndex];

  return (
    <figure className="cap-shell" aria-label="Capability stack — hover a layer to see scope and deliverables">
      <div className="cap-header">
        <div className="eyebrow">Capability stack</div>
        <h3 className="cap-header-title">Five engineering roles, one accountable delivery model.</h3>
        <p className="cap-header-sub">Each layer of the stack maps to a dedicated specialist team. Hover a layer to see scope and deliverables.</p>
      </div>
      <div className="cap-main">
        <div className="cap-stack-col">
          <div className="cap-stack">
            {CAPABILITY_LAYERS.map((layer, i) => (
              <StackLayer
                key={layer.tier}
                layer={layer}
                index={i}
                isActive={i === activeIndex}
                onHover={setActiveIndex}
              />
            ))}
          </div>
        </div>
        <ContentPanel layer={active} />
      </div>
    </figure>
  );
};

Object.assign(window, { CapabilityStack, CAPABILITY_LAYERS });