const Technologies = () => {
  const partners = [
    {
      name: "Cloudflare",
      description: "CDN & Transfer",
      image:
        "https://upload.wikimedia.org/wikipedia/commons/9/94/Cloudflare_Logo.png",
    },
    {
      name: "AMD",
      description: "Server Processors",
      image:
        "https://cdn.freebiesupply.com/logos/large/2x/amd-4-logo-png-transparent.png",
    },
    // {
    //   name: "Intel",
    //   description: "Network Infrastructure",
    //   image:
    //     "https://logos-world.net/wp-content/uploads/2021/09/Intel-Logo-2006-2020-700x394.png",
    // },
    {
      name: "Path.net",
      description: "DDoS Protection",
      image: "/images/pathnet.png",
    },
    {
      name: "Cisco",
      description: "Network Hardware",
      image:
        "https://images.seeklogo.com/logo-png/3/2/cisco-logo-png_seeklogo-30674.png?v=1958567672452173352",
    },
  ];

  return (
    <section className="bg-slate-900 py-24">
      <div className="container mx-auto max-w-screen-xl px-4">
        {/* Header */}
        <div className="text-center mb-16">
          <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
            Trusted Technologies
          </h2>
          <p className="text-xl text-gray-300 max-w-2xl mx-auto">
            We work with industry leaders to deliver the best gaming experience
          </p>
        </div>

        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-2 md:gap-8">
          {partners.map((partner) => (
            <div key={partner.name} className="w-full">
              <div className="bg-slate-950 rounded-md p-5 border border-gray-900">
                <div className="flex flex-col items-center">
                  <div className="w-24 h-24 flex items-center justify-center mb-4">
                    <img
                      src={partner.image}
                      alt={`${partner.name} logo`}
                      className="max-w-full h-auto"
                    />
                  </div>
                  <div className="text-center">
                    <h3 className="text-white font-medium mb-1">
                      {partner.name}
                    </h3>
                    <p className="text-gray-400 text-sm">
                      {partner.description}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default Technologies;
