import { Cpu, Shield, Zap, Globe, HardDrive, Network } from "lucide-react";

const featureCards = [
  {
    icon: Cpu,
    title: "AMD Ryzen Processors",
    description:
      "Latest generation AMD Ryzen processors delivering exceptional performance for your gaming needs.",
  },
  {
    icon: Shield,
    title: "DDoS Protection",
    description:
      "Enterprise-grade protection against DDoS attacks, keeping your server safe 24/7.",
  },
  {
    icon: Zap,
    title: "Low Latency Network",
    description:
      "Optimized network infrastructure ensuring minimal latency for smooth gameplay.",
  },
  {
    icon: HardDrive,
    title: "NVMe Storage",
    description:
      "Lightning-fast NVMe SSDs for rapid game loading and data access times.",
  },
  // {
  //   icon: Network,
  //   title: "Multi-Location",
  //   description:
  //     "Strategic server locations worldwide for optimal ping and performance",
  // },
  // {
  //   icon: Globe,
  //   title: "Global CDN",
  //   description:
  //     "Content delivery network ensuring fast downloads and updates worldwide",
  // },
];

const FeatureCard = ({ icon: Icon, title, description }) => {
  return (
    <div className="bg-slate-900 p-6 rounded-md border border-gray-900">
      <div className="relative">
        <div className="relative flex flex-col items-center text-center">
          <div className="bg-slate-950 p-4 rounded-md border border-gray-900 mb-4">
            <Icon size={32} className="text-blue-400" />
          </div>
          <h3 className="text-xl font-semibold text-white mb-3">{title}</h3>
          <p className="text-gray-400 leading-relaxed">{description}</p>
        </div>
      </div>
    </div>
  );
};

export const FeatureSection = () => {
  return (
    <section className="bg-slate-950 py-20 md:py-32">
      <div className="container max-w-screen-xl mx-auto px-4">
        {/* Header */}
        <div className="text-center mb-16">
          <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">
            Powered by Premium Hardware
          </h2>
          <p className="text-xl text-gray-300 max-w-2xl mx-auto">
            Experience top-tier performance with our enterprise-grade
            infrastructure, designed specifically for gaming excellence.
          </p>
        </div>

        {/* Feature Cards Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 md:gap-8">
          {featureCards.map((card, index) => (
            <FeatureCard
              key={index}
              icon={card.icon}
              title={card.title}
              description={card.description}
            />
          ))}
        </div>
        <div className="text-center mt-16">
          <a
            href="/specs"
            className="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md font-medium transition-all duration-300 border border-transparent group relative"
          >
            <span className="relative">View Full Specifications</span>
          </a>
        </div>
      </div>
    </section>
  );
};

export default FeatureSection;