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

const features = [
  {
    name: 'Kubernetes Clusters',
    description: 'Deploy and scale containerized apps across your own hardware.',
    icon: ServerIcon,
  },
  {
    name: 'AI Agents & LLM Runtimes',
    description: 'Run open-source models locally, securely, and offline.',
    icon: ArrowPathIcon,
  },
  {
    name: 'S3-Compatible Storage',
    description: 'Your own personal over-the-network drive, encrypted end-to-end.',
    icon: CloudArrowUpIcon,
  },
  {
    name: 'Mesh VPN & Zero-Trust Networking',
    description: 'Securely connect all your devices and remote locations.',
    icon: ShieldCheckIcon,
  },
]

export function HomeHosting() {
  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>DEPLOY</Eyebrow>
        <H3 className="mt-2">Run Real Infrastructure on Your Own Hardware</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-indigo-500 p-3 shadow-lg">
                    <feature.icon aria-hidden="true" className="size-8 text-white" />
                  </span>
                  <CT as="h3" className="mt-4">
                    {feature.name}
                  </CT>
                  <CP color="secondary" className="mt-4">
                    {feature.description}
                  </CP>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}
