import {
  GlobeAltIcon,
  KeyIcon,
  ServerStackIcon,
  ShieldCheckIcon,
} from '@heroicons/react/24/outline'
import { CP, CT, Eyebrow, H3, P } from '@/components/Texts'
import { DarkCard } from '@/components/ui/cards'

const features = [
  {
    name: 'No central servers.',
    description: 'Your devices form a distributed network, eliminating reliance on centralized data centers.',
    icon: GlobeAltIcon,
  },
  {
    name: 'No data extraction.',
    description: 'You own your data. Run services and AI models on your own devices, ensuring privacy and control.',
    icon: KeyIcon,
  },
  {
    name: 'No single point of control.',
    description: 'A decentralized architecture means no single entity can dictate or censor your online experience.',
    icon: ServerStackIcon,
  },
  {
    name: 'Mesh VPN & Zero-Trust Networking',
    description: 'Create a secure, private network between your devices, accessible from anywhere.',
    icon: ShieldCheckIcon,
  },
]

export function HomeWhy() {
  return (
    <div className="relative bg-[#121212]">
       {/* ✅ Top horizontal line with spacing */}
      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
      <div className="w-full border-t border-l border-r border-gray-800" />

      <div className=" py-12  mx-auto bg-[#111111] max-w-md px-6 text-center sm:max-w-3xl lg:max-w-7xl lg:px-8 border border-t-0 border-b-0 border-gray-800">
        <Eyebrow>Why It Matters</Eyebrow>
        <H3 className="mt-2 text-gray-200">Why Mycelium?</H3>
        <P className="mx-auto mt-5 max-w-prose text-gray-400">
          The current internet is a rent-seeking one. Mycelium builds one that belongs to everyone — where infrastructure, data, and intelligence stay with the people and organizations who create them.

        </P>
        <div className="mt-16">
          <div className="grid grid-cols-1 gap-6 lg:grid-cols-4">
            {features.map((feature) => (
              <div key={feature.name} className="relative">
                <DarkCard className="flex h-full flex-col pt-8">
                  <span className="absolute -top-6 left-1/2 -translate-x-1/2 transform rounded-md bg-cyan-600 hover:bg-cyan-500 p-2 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-2 text-gray-400">
                    {feature.description}
                  </CP>
                </DarkCard>
              </div>
            ))}
          </div>
        </div>
      </div>
        {/* ✅ Bottom horizontal line with spacing */}
      <div className="w-full border-b border-gray-800" />
      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
    </div>
  )
}