"use client";

import { Container } from "@/components/Container";

// Heroicons
import {
  ShieldCheckIcon,
  BoltIcon,
  GlobeAltIcon,
  ServerStackIcon,
  CheckBadgeIcon,
  CpuChipIcon,
} from "@heroicons/react/24/solid";

const nodeSpecs = [
  {
    title: "Autonomous Operation",
    description: "Runs autonomously with no central control.",
    icon: ServerStackIcon,
  },
  {
    title: "Encrypted by Default",
    description: "Fully encrypted and identity-based.",
    icon: ShieldCheckIcon,
  },
  {
    title: "Energy Efficient",
    description: "Energy-efficient and quiet, designed for 24/7 uptime.",
    icon: BoltIcon,
  },
  {
    title: "Measured Uptime",
    description: "Automatically measures uptime and contribution.",
    icon: CheckBadgeIcon,
  },
  {
    title: "Full Mycelium Stack Support",
    description: "Supports Mycelium Network, Cloud, Pods, and Agents.",
    icon: GlobeAltIcon,
  },

  // ✅ NEW 6th card (to complete the grid)
  {
    title: "Edge & Home Ready",
    description:
      "Runs seamlessly on compact hardware for edge, home, or micro-datacenter deployments.",
    icon: CpuChipIcon,
  },
];

export function NodeSpecs() {
  return (
    <section className="w-full max-w-8xl mx-auto bg-transparent">
      {/* Top horizontal spacing */}
      <div className="max-w-7xl 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" />

      <Container className="py-12 border border-t-0 border-b-0 border-gray-100">
        {/* Header */}
        <div className="mx-auto max-w-4xl sm:text-center">
          <h2 className="text-base/7 font-semibold text-cyan-500">
            NODE SPECIFICATIONS
          </h2>

          <p className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
            Built for Reliability and Control
          </p>

          <p className="mt-6 text-lg text-gray-600">
            Each node strengthens the network and helps build a more open,
            sovereign and distributed internet.
          </p>
        </div>

        {/* Cards */}
        <ul
          role="list"
          className="mx-auto mt-12 grid max-w-2xl grid-cols-1 gap-6
                     sm:grid-cols-2 lg:max-w-none lg:grid-cols-3 md:gap-y-10"
        >
          {nodeSpecs.map((item) => {
            const Icon = item.icon;

            return (
              <li
                key={item.title}
                className="rounded-md border border-gray-100 bg-white p-6 transition-all duration-300
                           hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 flex flex-col"
              >
                {/* Title + label */}
                <div className="flex items-center justify-between">
                  <h3 className="font-semibold text-gray-900">
                    {item.title}
                  </h3>

                  <Icon className="h-6 w-6 text-cyan-500" />
                </div>

                {/* Short description */}
                <p className="mt-4 text-gray-700 leading-snug">
                  {item.description}
                </p>
              </li>
            );
          })}
        </ul>
      </Container>

      {/* Bottom spacing */}
      <div className="w-full border-b border-gray-100" />
      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
    </section>
  );
}