import { CP, CT } from '@/components/Texts'
import {
  ArrowPathIcon,
  GlobeAltIcon,
  ShieldCheckIcon,
} from '@heroicons/react/24/solid'

const stats = [
  {
    id: 1,
    name: 'Cryptographically verified deployments',
    value: 'Signed & Checksummed',
    icon: ShieldCheckIcon,
  },
  {
    id: 2,
    name: 'Stateless execution that scales anywhere',
    value: 'Global Scaling',
    icon: GlobeAltIcon,
  },
  {
    id: 3,
    name: 'Automatic healing and recovery',
    value: 'Self-Repairing',
    icon: ArrowPathIcon,
  },
]

export function ComputeDesign() {
  return (
    <div className="">

      {/* ✅ 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-100"></div>
      <div className="w-full border-t border-l border-r border-gray-100" />

       {/* ✅ Top horizontal line with spacing */}
      <div className="mx-auto max-w-7xl border-gray-100">
          <dl className="grid grid-cols-1 gap-4 lg:gap-14  overflow-hidden  text-center  lg:grid-cols-3">
            {stats.map((stat) => (
              <div key={stat.id} className="flex flex-col items-center bg-gray-400/5 py-8 px-12 border border-gray-100 lg:border-t-0 lg:border-b-0">
                <stat.icon className="h-8 w-8 fill-cyan-500 mb-4" aria-hidden="true" />
                <CT className="">{stat.value}</CT>
                <CP className="mt-1">{stat.name}</CP>
              </div>
            ))}
          </dl>
      </div>
      {/* ✅ Bottom horizontal line + spacing */}
      <div className="w-full border-b border-gray-100" />
      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
    </div>
  )
}