import {
  CpuChipIcon,
  CubeIcon,
  ServerIcon,
} from '@heroicons/react/24/solid'
import { Eyebrow, H3, P, CT, CP } from '../../components/Texts'
import { Container } from '../../components/Container'

const capabilities = [
  {
    name: 'Containers',
    description: 'Services, web apps, APIs. Fully compatible with Kubernetes.',
    icon: CubeIcon,
  },
  {
    name: 'Virtual Machines',
    description:
      'Legacy apps and specialized runtime stacks. Secure boot + attestation included.',
    icon: ServerIcon,
  },
  {
    name: 'Native Linux Workloads',
    description:
      'Agents, batch jobs, tooling. Runs statelessly anywhere.',
    icon: CpuChipIcon,
  },
]

export function ComputeCapabilities() {
  return (
    <section className="bg-white py-24 sm:py-32">
      <Container>
        <div className="mx-auto max-w-3xl text-center">
          <Eyebrow>CAPABILITIES</Eyebrow>
          <H3 className="mt-4 text-gray-900">What You Can Run</H3>
          <P className="mt-6 text-gray-600">
            Mycelium Compute supports multiple workload types on a single
            execution fabric.
          </P>
        </div>

        <div className="mx-auto mt-16 max-w-5xl">
          <dl className="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3">
            {capabilities.map((feature) => (
              <div key={feature.name} className="flex flex-col text-center">
                <div className="mx-auto flex size-12 items-center justify-center rounded-xl bg-cyan-50">
                  <feature.icon aria-hidden="true" className="size-6 text-cyan-600" />
                </div>
                <CT className="mt-6 text-gray-900">{feature.name}</CT>
                <CP className="mt-2 text-gray-600">{feature.description}</CP>
              </div>
            ))}
          </dl>
        </div>
      </Container>
    </section>
  )
}