"use client";

const benefits = [
  {
    id: 1,
    title: "For Integrators & Builders",
    description:
      "Deploy sovereign infrastructure for organizations, governments, and large-scale systems.",
    image: "/images/dev.png",
  },
  {
    id: 2,
    title: "For Enterprises & Institutions",
    description:
      "Protect data, meet local compliance, and unlock new AI capabilities across distributed environments.",
    image: "/images/cons.png",
  },
  {
    id: 3,
    title: "For Sovereignty Seekers",
    description:
      "Run nodes, build applications, and connect directly without relying on centralized platforms.",
    image: "/images/seekers.png",
  },
];

export function HomeDesign() {
  return (
    <section className="w-full max-w-8xl mx-auto bg-white">

      {/* Top spacing line */}
      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-200" />
      <div className="w-full border border-l border-r border-gray-200" />

      {/* Content */}
      <div className="mx-auto max-w-7xl border-gray-200">
        <dl className="grid grid-cols-1 lg:grid-cols-3 gap-4 lg:gap-0">
          {benefits.map((item) => (
            <div
              key={item.id}
              className="group flex items-start gap-2 bg-white px-8 py-12 border border-gray-200 0 lg:border-t-0 lg:border-b-0"
            >
              {/* Image on the LEFT */}
              <img
                src={item.image}
                alt={item.title}
                className="h-30 w-30 object-contain opacity-90"
              />

              {/* Text on the RIGHT */}
              <div className="text-left">
                <h3 className="text-base  font-semibold tracking-wide text-gray-900 mb-2">
                  {item.title}
                </h3>
                <p className="text-sm text-gray-600 leading-relaxed max-w-xs">
                  {item.description}
                </p>
              </div>
            </div>
          ))}
        </dl>
      </div>

      {/* ✅ Bottom horizontal line with spacing */}
      <div className="w-full border-b border-t 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>
    </section>
  );
}