import {
  ArrowPathIcon,
  CloudArrowUpIcon,
  ServerIcon,
  ShieldCheckIcon,
} from '@heroicons/react/24/outline'
import { CP, CT, Eyebrow, H3 } from '@/components/Texts'

const features = [
  {
    Eyebrow: 'DevOps / Cloud teams',
    name: 'Kubernetes Clusters',
    description: 'Deterministic K3s workloads across sovereign hardware.',
    icon: ServerIcon,
  },
  {
    Eyebrow: 'Security & infrastructure',
    name: 'Encrypted Mesh Networking',
    description: 'No public ingress, no exposed attack surface, zero-trust routing.',
    icon: ShieldCheckIcon,
  },
  {
    Eyebrow: 'Data-driven teams',
    name: 'S3-Compatible Storage',
    description: 'Distributed storage with erasure coding and residency control.',
    icon: CloudArrowUpIcon,
  },
  {
    Eyebrow: 'AI / ML workloads',
    name: 'GPU-Ready',
    description: 'Scale inference & training on demand.',
    icon: ArrowPathIcon,
  },
]

export function CloudHosting() {
  return (
    <div className="relative bg-white py-24 lg:py-32">
      <div className="mx-auto max-w-md px-6 text-center sm:max-w-3xl lg:max-w-7xl lg:px-8">
        <Eyebrow>CAPABILITIES</Eyebrow>
        <H3 className="mt-2">What You Can Run on Mycelium Cloud</H3>
        <div className="mt-16">
          <div className="grid grid-cols-1 gap-12 lg:grid-cols-4">
            {features.map((feature) => (
              <div key={feature.name} className="relative">
                <div className="flex h-full flex-col rounded-3xl border border-slate-200 bg-gray-50/25 p-8 pt-16 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg">
                  <span className="absolute -top-6 left-1/2 -translate-x-1/2 transform rounded-xl bg-cyan-500 hover:bg-cyan-400 p-3 shadow-lg">
                    <feature.icon aria-hidden="true" className="size-8 text-white" />
                  </span>
                  <Eyebrow>{feature.Eyebrow}</Eyebrow>
                  <CT as="h3" className="mt-4">
                    {feature.name}
                  </CT>
                  <CP color="secondary" className="mt-4">
                    {feature.description}
                  </CP>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}