import {
  LockClosedIcon,
  CpuChipIcon,
  AdjustmentsHorizontalIcon,
} from '@heroicons/react/24/solid'
import { Container } from '@/components/Container'
import { Eyebrow, H3, CT, CP } from '@/components/Texts'

const architecture = [
  {
    name: 'Mesh Networking',
    description: 'Secure connectivity across all nodes.',
    icon: LockClosedIcon,
  },
  {
    name: 'Sovereign Compute',
    description: 'Execution only on hardware you control.',
    icon: CpuChipIcon,
  },
  {
    name: 'Deterministic Orchestration',
    description: 'Workloads deploy and update predictably.',
    icon: AdjustmentsHorizontalIcon,
  },
]

export function ComputeArchitecture() {
  return (
    <section className="bg-white py-24 sm:py-32">
      <Container>
        <div className="mx-auto max-w-3xl text-center">
          <Eyebrow>ARCHITECTURE</Eyebrow>
          <H3 className="mt-4 text-gray-900">HOW IT WORKS</H3>
        </div>

        <div className="mx-auto mt-16 max-w-5xl">
          <dl className="grid grid-cols-1 gap-12 text-gray-600 sm:grid-cols-2 lg:grid-cols-3">
            {architecture.map((item) => (
              <div key={item.name} className="relative pl-12">
                <item.icon
                  aria-hidden="true"
                  className="absolute left-0 top-1 size-6 text-cyan-600"
                />
                <CT className="font-semibold text-gray-900">{item.name}</CT>
                <CP className="mt-1 text-gray-600">{item.description}</CP>
              </div>
            ))}
          </dl>
        </div>
      </Container>
    </section>
  )
}