import {
  ComputerDesktopIcon,
  ArrowsRightLeftIcon,
  CircleStackIcon,
} from '@heroicons/react/24/solid'

const benefits = [
  {
    id: 1,
    title: 'Each agent operates entirely inside your environment',
    icon: ComputerDesktopIcon,
  },
  {
    id: 2,
    title: 'They communicate peer-to-peer across trusted nodes',
    icon: ArrowsRightLeftIcon,
  },
  {
    id: 3,
    title: 'They access data locally without exposing it to external providers',
    icon: CircleStackIcon,
  },
]

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

      {/* ✅ 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 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-3 text-center ">
          {benefits.map((item) => (
            <div
              key={item.id}
              className="flex flex-col items-center bg-white dark:bg-black/40 py-10 px-4 border border-gray-100 dark:border-gray-800 lg:border-t-0 lg:border-b-0"
            >
              <item.icon className="h-10 w-10 text-cyan-500 mb-4" />
              <h3 className="text-base font-medium text-black dark:text-white max-w-xs">
                {item.title}
              </h3>
            </div>
          ))}
        </dl>
      </div>

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