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.',
    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">
          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">
                <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>
  )
}