const Capabilities = () => {
  const caps = [
    { icon: 'Stack',  title: 'Scalable architecture',
      desc: 'Event-driven, horizontally scalable. Designed for spikes, audits, and the long tail of edge cases.' },
    { icon: 'Plug',   title: 'API-first systems',
      desc: 'Every capability is an API. Compose with your existing stack — Salesforce, NetSuite, Workday, custom.' },
    { icon: 'Building', title: 'Multi-tenant',
      desc: 'Isolated data planes, shared control plane. Per-tenant policies, models, and audit trails out of the box.' },
    { icon: 'Shield', title: 'Secure & compliant',
      desc: 'SOC2-aligned, GDPR-ready. PII redaction, role-based access, immutable logs, model-input auditing.' },
    { icon: 'Cloud',  title: 'Cloud-native deployment',
      desc: 'Run on AWS, Azure, GCP — or your own VPC. Kubernetes-native. BYOK for keys and models.' },
    { icon: 'Lock',   title: 'Private model layer',
      desc: 'Bring your own model, host ours, or run hybrid. No customer data leaves the boundary you choose.' },
  ];
  return (
    <Section
      id="capabilities"
      eyebrow="Enterprise platform"
      title="Boring where it counts. Sharp where it matters."
      sub="The platform underneath every Webever solution — engineered to clear procurement, security review, and the next decade of scale."
      className="border-t border-token"
    >
      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-[var(--border)] rounded-2xl overflow-hidden border border-token">
        {caps.map((c, i) => {
          const IconCmp = I[c.icon];
          return (
            <div key={i} className="reveal p-8 surface" style={{transitionDelay: `${i*50}ms`}}>
              <div className="w-10 h-10 rounded-lg flex items-center justify-center text-muted border border-token mb-6">
                <IconCmp size={20}/>
              </div>
              <h3 className="text-[18px] font-medium">{c.title}</h3>
              <p className="mt-2 text-[14px] text-muted leading-relaxed">{c.desc}</p>
            </div>
          );
        })}
      </div>
    </Section>
  );
};

window.Capabilities = Capabilities;