import {
  CpuChipIcon,
  CubeIcon,
  CircleStackIcon,
  LockClosedIcon,
} from '@heroicons/react/24/outline'
import { CP, CT, Eyebrow, H3, P } from '../../components/Texts'
import { DarkCard } from '../../components/ui/cards'

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

export function HomeHostingDark() {
  return (
    <div className="relative py-24 bg-[#111111] 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 text-gray-200">Run Real Infrastructure on Your Own Hardware</H3>
        <P className="mx-auto mt-5 max-w-prose text-gray-400">
          Build and run production-grade workloads on hardware you control, whether it’s your own node or capacity from the decentralized grid. Mycelium handles the networking, orchestration, and security layers, so you can deploy services the same way you would on a 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">
                <DarkCard className="flex h-full flex-col pt-16">
                  <span className="absolute -top-6 left-1/2 -translate-x-1/2 transform rounded-xl bg-cyan-600 hover:bg-cyan-500 p-3 shadow-lg">
                    <feature.icon aria-hidden="true" className="size-8 text-white" />
                  </span>
                  <CT as="h3" className="mt-4 text-gray-200">
                    {feature.name}
                  </CT>
                  <CP color="secondary" className="mt-4 text-gray-400">
                    {feature.description}
                  </CP>
                </DarkCard>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}