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",
    models: [
      {
        model: "Ryzen 9 5900X",
        specs: [
          "12 Cores / 24 Threads",
          "Base Clock: 3.7 GHz",
          "Max Boost Clock: up to 4.8 GHz",
        ],
      },
      {
        model: "Ryzen 7 8700G",
        specs: [
          "8 Cores / 16 Threads",
          "Base Clock: 4.2 GHz",
          "Max Boost Clock: up to 5.1 GHz",
          "Integrated GPU: Radeon 780M",
        ],
      },
    ],
  },
  memory: {
    name: "DDR4 ECC RAM",
    specs: [
      "4800MHz Base Clock",
      "ECC Protection",
      "Multi-Channel",
      "Low Latency",
    ],
  },
  storage: {
    name: "Enterprise NVMe",
    specs: [
      "RAID Configuration",
      "Hot-Swappable",
    ],
  },
  network: {
    name: "Network Infrastructure",
    specs: [
      "100Gbps Backbone",
      "Redundant Links",
      "BGP Optimization",
      "Low Latency Routes",
    ],
  },
};

const datacenters = [
  {
    city: "Phoenix, AZ",
    country: "United States",
    features: [
      "Tier III Facility",
      "N+1 Redundancy",
      "24/7 Security",
      "Direct Peering",
    ],
    latency: {
      "US West": "25ms",
      "US East": "80ms",
      Europe: "140ms",
      Asia: "310ms",
    },
  },
  // {
  //   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 | Skylink Hosting</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>

          {/* Render basic specs if available */}
          {value.specs && (
            <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>
          )}

          {/* Render model list (like CPUs) if available */}
          {value.models && (
            <div className="space-y-6">
              {value.models.map((model, index) => (
                <div key={index}>
                  <h4 className="text-white font-medium mb-2">{model.model}</h4>
                  <ul className="space-y-2 ml-4">
                    {model.specs.map((spec, i) => (
                      <li key={i} 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>
      ))}
    </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-3 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;
