import {
  ArrowPathIcon,
  CloudArrowUpIcon,
  ServerIcon,
  ShieldCheckIcon,
} from '@heroicons/react/24/outline'
import { CP, CT, Eyebrow, H3, P } 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>
        <P className="mx-auto mt-5 max-w-prose">
          Turn your own machines into real, production-grade infrastructure. Mycelium handles the networking,
          orchestration, and security layers, so you can deploy services the same way you would on public cloud without
          giving your data or control to anyone.
        </P>
        <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>
  )
}