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

const benefits = [
  {
    id: 1,
    title: "Unbreakable by Design",
    desc: "No central cloud to censor or fail. The network heals itself.",
    icon: ShieldCheckIcon,
  },
  {
    id: 2,
    title: "Sovereign by Default",
    desc: "Identity, compute, and data belong to you – cryptographically.",
    icon: GlobeAltIcon,
  },
  {
    id: 3,
    title: "Hackable & Open",
    desc: "Learn, build, and experiment without permission.",
    icon: BoltIcon,
  },
  {
    id: 4,
    title: "Cost & Energy Efficient",
    desc: "Distributed hardware eliminates hyperscale overhead.",
    icon: BanknotesIcon,
  },
];

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

      {/* ✅ Top horizontal line with spacing */}
      <div className="max-w-7xl bg-transparent mx-auto  border border-t-0 border-b-0 border-gray-100" />
      <div className="w-full border-t border-l border-r border-gray-100" />

      {/* ✅ Main content */}
      <div className="mx-auto max-w-7xl border-gray-100">
        <dl className="grid grid-cols-1 gap-4 lg:gap-6 lg:grid-cols-4 text-center">
          {benefits.map((item) => (
            <div
              key={item.id}
              className="flex flex-col items-center bg-white/40 dark:bg-black/40 py-10 px-4 border border-gray-100 lg:border-t-0 lg:border-b-0"
            >
              <item.icon className="h-10 w-10 text-cyan-500 mb-4" />
              <h3 className="text-lg font-semibold text-black dark:text-white">
                {item.title}
              </h3>
              <CP className="mt-2 max-w-xs text-gray-600 dark:text-gray-300">
                {item.desc}
              </CP>
            </div>
          ))}
        </dl>
      </div>

      {/* ✅ Bottom 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>
  );
}