"use client";

import {
  ShieldCheckIcon,
  KeyIcon,
  CodeBracketIcon,
  BoltIcon,
} from "@heroicons/react/24/outline";

export function HomeWhy() {
  const items = [
    { label: "Unbreakable by Design", icon: ShieldCheckIcon },
    { label: "Sovereign by Default", icon: KeyIcon },
    { label: "Hackable & Open", icon: CodeBracketIcon },
    { label: "Cost & Energy Efficient", icon: BoltIcon },
  ];

  return (
    <section className="mx-4 lg:mx-auto max-w-5xl border border-t-0 border-gray-100 py-12 px-6 text-center">
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 place-items-center">
        {items.map(({ label, icon: Icon }) => (
          <span
            key={label}
            className="inline-flex items-center gap-2 bg-white border border-gray-300 rounded-full px-6 py-2 text-sm  font-medium text-gray-900 shadow-sm"
          >
            <Icon className="h-5 w-5 text-gray-900" />
            {label}
          </span>
        ))}
      </div>
    </section>
  );
}