import { GlobeAltIcon, ServerStackIcon, CpuChipIcon } from '@heroicons/react/24/solid'
import { H2, P } from '@/components/Texts'

const features = [
  {
    name: 'Mycelium Network',
    description:
      "A global, end-to-end encrypted overlay that simply doesn't break.",
    href: '/network',
    icon: GlobeAltIcon,
  },
  {
    name: 'Mycelium Cloud',
    description:
      'An autonomous, stateless OS that enforces pre-deterministic deployments you define.',
    href: '/cloud',
    icon: ServerStackIcon,
  },
  {
    name: 'Mycelium Agents',
    description:
      'Your sovereign agent with private memory and permissioned data access—always under your control.',
    href: '/agents',
    icon: CpuChipIcon,
  },
]

export function HomeFeaturesDark() {

  return (
    <div className="">
            <div className="relative bg-black py-24 overflow-hidden">
      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        <div className="mx-auto max-w-2xl lg:mx-0">
                    <H2 className="text-white">
            The Building Blocks of Decentralized Future
          </H2>
                    <P className="mt-6 text-gray-300">
            From compute and networking to intelligent automation, these components work together to empower users, developers, and organizations to build freely, without intermediaries.
          </P>
        </div>
        <div className="mx-auto mt-16 max-w-2xl lg:max-w-7xl">
          <div className="grid grid-cols-1 gap-x-12 gap-y-12 lg:grid-cols-3">
            {features.map((feature) => (
                                          <div key={feature.name} className="relative flex flex-col p-8 rounded-3xl border border-gray-700 bg-gray-900/50 backdrop-blur-lg overflow-hidden shadow-2xl hover:shadow-cyan-500/40 hover:border-cyan-500 hover:scale-105 transform transition-all duration-300">
                                                <div className="w-20 h-20 bg-gray-800/80 rounded-full flex items-center justify-center">
                  <feature.icon className="h-12 w-12 text-cyan-500" />
                </div>
                                <h3 className="mt-6 text-xl font-semibold text-white">{feature.name}</h3>
                                <p className="mt-4 text-base text-gray-300">{feature.description}</p>
                                <a href={feature.href} className="mt-6 text-base font-semibold text-white">Learn more <span aria-hidden="true"> &rarr;</span></a>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
    </div>
  )
}