import React from "react";
import {
  Shield,
  Globe,
  Zap,
  Network,
  Lock,
  Activity,
  Wifi,
  Building,
} from "lucide-react";
import { Helmet } from "react-helmet";

// const hardware = {
//   processor: {
//     name: "AMD Ryzen™ Series",
//     specs: [
//       "Up to 5.0GHz Clock Speed",
//       "128MB L1 Cache",
//       "280W TDP",
//     ],
//   },
//   memory: {
//     name: "DDR4 ECC RAM",
//     specs: [
//       "4800MHz Base Clock",
//       "ECC Protection",
//       "Multi-Channel",
//       "Low Latency",
//     ],
//   },
//   storage: {
//     name: "Enterprise NVMe",
//     specs: [
//       "7000MB/s Read",
//       "6000MB/s Write",
//       "RAID Configuration",
//       "Hot-Swappable",
//     ],
//   },
//   network: {
//     name: "Network Infrastructure",
//     specs: [
//       "100Gbps Backbone",
//       "Redundant Links",
//       "BGP Optimization",
//       "Low Latency Routes",
//     ],
//   },
// };

const datacenters = [
  {
    city: "Los Angeles",
    country: "United States",
    features: [
      "Tier IV Facility",
      "N+2 Redundancy",
      "24/7 Security",
      "Direct Peering",
    ],
    latency: {
      "US West": "5ms",
      "US East": "45ms",
      Europe: "140ms",
      Asia: "110ms",
    },
  },
  {
    city: "Frankfurt",
    country: "Germany",
    features: [
      "Tier IV Facility",
      "Green Energy",
      "CCTV Monitoring",
      "ISO 27001",
    ],
    latency: {
      "US West": "140ms",
      "US East": "90ms",
      Europe: "5ms",
      Asia: "80ms",
    },
  },
  {
    city: "Singapore",
    country: "Singapore",
    features: [
      "Tier III+ Facility",
      "Biometric Access",
      "Fire Suppression",
      "Redundant Cooling",
    ],
    latency: {
      "US West": "110ms",
      "US East": "180ms",
      Europe: "80ms",
      Asia: "5ms",
    },
  },
];

const security = [
  {
    icon: Shield,
    title: "DDoS Protection",
    description:
      "Enterprise-grade protection up to 1Tbps with automatic mitigation",
  },
  {
    icon: Lock,
    title: "SSL Security",
    description:
      "Free SSL certificates and end-to-end encryption for all services",
  },
  {
    icon: Activity,
    title: "24/7 Monitoring",
    description: "Real-time monitoring and automated threat detection systems",
  },
  {
    icon: Building,
    title: "Physical Security",
    description:
      "Biometric access, CCTV surveillance, and on-site security personnel",
  },
];

const SpecsPage = () => {
  return (
    <div className="min-h-screen bg-gray-900">
      <Helmet>
        <title>Our Specs | GameZone</title>
      </Helmet>
      {/* Hero */}
      <section className="py-12 md:py-24">
        <div className="container mx-auto px-4 max-w-screen-xl">
          <div className="text-center max-w-3xl mx-auto">
            <h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
              Enterprise-Grade
              <br />
              <span className="text-blue-500">Infrastructure</span>
            </h1>
            <p className="text-xl text-gray-300">
              Powered by the latest AMD Ryzen processors and enterprise NVMe
              storage, our infrastructure is built for performance and
              reliability.
            </p>
          </div>
        </div>
      </section>

      {/* Hardware Specs */}
      <section className="py-12 md:py-24 bg-slate-950">
        <div className="container mx-auto px-4 max-w-screen-xl">
          <h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
            Hardware Specifications
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 md:gap-8">
            {Object.entries(hardware).map(([key, value]) => (
              <div key={key} className="bg-gray-900 p-5 rounded-md">
                <h3 className="text-xl font-semibold text-white mb-4">
                  {value.name}
                </h3>
                <ul className="space-y-3">
                  {value.specs.map((spec, index) => (
                    <li key={index} className="flex items-center text-gray-300">
                      <Zap className="w-4 h-4 text-blue-500 mr-2 flex-shrink-0" />
                      {spec}
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Data Centers */}
      <section className="py-12 md:py-24 bg-gray-900">
        <div className="container mx-auto px-4 max-w-screen-xl">
          <h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
            Global Data Centers
          </h2>
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-2 md:gap-8">
            {datacenters.map((dc, index) => (
              <div
                key={index}
                className="bg-slate-950 p-5 rounded-md border border-gray-900 transition-all duration-200"
              >
                <div className="flex items-start justify-between mb-6">
                  <div>
                    <h3 className="text-xl font-semibold text-white">
                      {dc.city}
                    </h3>
                    <p className="text-gray-400">{dc.country}</p>
                  </div>
                  <Globe className="w-6 h-6 text-blue-500" />
                </div>

                <div className="space-y-6">
                  {/* Features */}
                  <div>
                    <h4 className="text-sm font-semibold text-gray-400 uppercase mb-3">
                      Features
                    </h4>
                    <ul className="space-y-2">
                      {dc.features.map((feature, fIndex) => (
                        <li
                          key={fIndex}
                          className="flex items-center text-gray-300"
                        >
                          <Shield className="w-4 h-4 text-blue-500 mr-2 flex-shrink-0" />
                          {feature}
                        </li>
                      ))}
                    </ul>
                  </div>

                  {/* Latency */}
                  <div>
                    <h4 className="text-sm font-semibold text-gray-400 uppercase mb-3">
                      Average Latency
                    </h4>
                    <div className="grid grid-cols-2 gap-4">
                      {Object.entries(dc.latency).map(([region, latency]) => (
                        <div key={region} className="text-gray-300">
                          <span className="text-gray-400">{region}:</span>{" "}
                          {latency}
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Network Infrastructure */}
      <section className="py-12 md:py-24 bg-slate-950">
        <div className="container mx-auto px-4 max-w-screen-xl">
          <h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
            Network Infrastructure
          </h2>
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-2 md:gap-8">
            <div className="bg-gray-900 p-5 rounded-md">
              <h3 className="text-xl font-semibold text-white mb-4">
                Network Features
              </h3>
              <ul className="space-y-4">
                <li className="flex items-start gap-4">
                  <Network className="w-6 h-6 text-blue-500 flex-shrink-0 mt-1" />
                  <div>
                    <h4 className="text-white font-medium">
                      Multi-Homed Network
                    </h4>
                    <p className="text-gray-400">
                      Redundant Tier-1 carriers ensure optimal routing and
                      uptime
                    </p>
                  </div>
                </li>
                <li className="flex items-start gap-4">
                  <Wifi className="w-6 h-6 text-blue-500 flex-shrink-0 mt-1" />
                  <div>
                    <h4 className="text-white font-medium">
                      Low Latency Routes
                    </h4>
                    <p className="text-gray-400">
                      Optimized BGP routing for minimal latency
                    </p>
                  </div>
                </li>
                <li className="flex items-start gap-4">
                  <Activity className="w-6 h-6 text-blue-500 flex-shrink-0 mt-1" />
                  <div>
                    <h4 className="text-white font-medium">DDoS Protected</h4>
                    <p className="text-gray-400">
                      Enterprise-grade protection at every location
                    </p>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Security */}
      <section className="py-12 md:py-24 bg-gray-900">
        <div className="container mx-auto px-4 max-w-screen-xl">
          <h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
            Security Measures
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-8">
            {security.map((item, index) => (
              <div key={index} className="bg-slate-950 p-5 rounded-md">
                <div className="flex items-start gap-4">
                  <div className="bg-gray-900 p-3 rounded-md">
                    <item.icon className="w-6 h-6 text-blue-500" />
                  </div>
                  <div>
                    <h3 className="text-xl font-semibold text-white mb-2">
                      {item.title}
                    </h3>
                    <p className="text-gray-400">{item.description}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-12 md:py-24 bg-slate-950">
        <div className="container mx-auto px-4 max-w-screen-xl text-center">
          <div className="bg-gray-900 p-8 rounded-md border border-gray-900 transition-all duration-200">
            <div className="max-w-2xl mx-auto">
              <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
                Ready to Experience
                <br />
                <span className="text-blue-500">Enterprise Performance</span>?
              </h2>
              <p className="text-xl text-gray-300 mb-8">
                Deploy your server in minutes with our high-performance
                infrastructure
              </p>
              <div className="flex flex-wrap justify-center gap-4">
                <a
                  href="/games"
                  className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md font-medium transition-all duration-200"
                >
                  View Games
                </a>
                <a
                  href="/support"
                  className="bg-slate-950 text-white px-8 py-3 rounded-md font-medium transition-all duration-200"
                >
                  Contact Sales
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

export default SpecsPage;
