import React from "react";
import {
  Cpu,
  Shield,
  Server,
  Zap,
  Check,
  Globe,
  HardDrive,
  Network,
  ExternalLink,
  Clock,
  Award,
  Settings,
  Heart,
  Users,
} from "lucide-react";
import CTA from "../components/home/CTA";
import { Helmet } from "react-helmet";

const plans = [
  {
    name: "Build Your Own",
    price: "3.75",
    link: "https://billing.skylinkhosting.com/index.php?rp=/store/premium-vps-hosting/vps-build-your-own",
    specs: {
      cpu: "?? vCPU",
      ram: "?? GB RAM",
      storage: "?? GB NVMe",
      bandwidth: "?? TB",
    },
    features: [
      "DDoS Protection",
      "Full Root Access",
      "10 Gbps Network",
      "24/7 Priority Support",
      "Daily Backups",
      "99.95% Uptime SLA",
      "Dedicated IP",
    ],
  },
  {
    name: "2GB",
    price: "8.25",
    link: "https://billing.skylinkhosting.com/index.php?rp=/store/premium-vps-hosting/2gb",
    specs: {
      cpu: "1 vCPU",
      ram: "2 GB RAM",
      storage: "25 GB NVMe",
      bandwidth: "1 TB",
    },
    features: [
      "DDoS Protection",
      "Full Root Access",
      "10 Gbps Network",
      "24/7 Priority Support",
      "Daily Backups",
      "99.95% Uptime SLA",
      "Dedicated IP",
    ],
  },
  {
    name: "4GB",
    price: "11.25",
    link: "https://billing.skylinkhosting.com/index.php?rp=/store/premium-vps-hosting/4gb",
    specs: {
      cpu: "1 vCPU",
      ram: "4 GB RAM",
      storage: "50 GB NVMe",
      bandwidth: "1 TB",
    },
    features: [
      "DDoS Protection",
      "Full Root Access",
      "10 Gbps Network",
      "24/7 Priority Support",
      "Daily Backups",
      "99.95% Uptime SLA",
      "Dedicated IP",
    ],
    recommended: true,
  },
  {
    name: "8GB",
    price: "11.25",
    link: "https://billing.skylinkhosting.com/index.php?rp=/store/premium-vps-hosting/8gb",
    specs: {
      cpu: "2 vCPU",
      ram: "8 GB RAM",
      storage: "100 GB NVMe",
      bandwidth: "2 TB",
    },
    features: [
      "DDoS Protection",
      "Full Root Access",
      "10 Gbps Network",
      "24/7 Priority Support",
      "Daily Backups",
      "99.95% Uptime SLA",
      "Dedicated IP",
    ],
  },
  {
    name: "12GB",
    price: "17.25",
    link: "https://billing.skylinkhosting.com/index.php?rp=/store/premium-vps-hosting/12gb",
    specs: {
      cpu: "3 vCPU",
      ram: "12 GB RAM",
      storage: "150 GB NVMe",
      bandwidth: "3 TB",
    },
    features: [
      "DDoS Protection",
      "Full Root Access",
      "10 Gbps Network",
      "24/7 Priority Support",
      "Daily Backups",
      "99.95% Uptime SLA",
      "Dedicated IP",
    ],
  },
  {
    name: "16GB",
    price: "25.25",
    link: "https://billing.skylinkhosting.com/index.php?rp=/store/premium-vps-hosting/16gb",
    specs: {
      cpu: "3 vCPU",
      ram: "16 GB RAM",
      storage: "200 GB NVMe",
      bandwidth: "3 TB",
    },
    features: [
      "DDoS Protection",
      "Full Root Access",
      "10 Gbps Network",
      "24/7 Priority Support",
      "Daily Backups",
      "99.95% Uptime SLA",
      "Dedicated IP",
    ],
  },
];

const features = [
  {
    icon: Cpu,
    title: "AMD Processors",
    description: "Latest generation AMD CPUs for maximum performance",
  },
  {
    icon: Shield,
    title: "DDoS Protection",
    description: "Enterprise-grade protection against attacks up to 17Tbps",
  },
  {
    icon: Globe,
    title: "Global Network",
    description: "1 location worldwide with ultra-low latency connections",
  },
  {
    icon: Clock,
    title: "Instant Deployment",
    description: "Get your VPS up and running in under 60 seconds",
  },
];

const StatCard = ({ value, label, icon: Icon }) => (
  <div className="bg-slate-950 p-5 rounded-md">
    <div className="relative mb-1">
      <Icon className="relative w-8 h-8 text-blue-500 mx-auto" />
    </div>
    <div className="text-2xl font-bold text-white text-center">{value}</div>
    <div className="text-gray-400 text-sm text-center">{label}</div>
  </div>
);

const FeatureCard = ({ icon: Icon, title, description }) => (
  <div className="bg-slate-900 p-5 rounded-md">
    <div className="relative mb-2">
      <Icon className="relative w-12 h-12 text-blue-500" />
    </div>
    <h3 className="text-xl font-semibold text-white mb-2">{title}</h3>
    <p className="text-gray-400">{description}</p>
  </div>
);

const PlanCard = ({ name, price, specs, features, recommended, link }) => (
  <div className="bg-gray-900 p-6 rounded-lg border border-gray-900 group cursor-pointer relative transition-all duration-200">
    {/* Main container */}
    <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
      {/* Plan name and price section */}
      <div className="flex-shrink-0 lg:w-64">
        {recommended && (
          <div className="text-blue-400 text-sm font-medium mb-2">
            RECOMMENDED
          </div>
        )}
        <h3 className="text-2xl font-bold text-white mb-2">{name}</h3>
        <div className="text-3xl font-bold text-blue-400">
          ${price}
          <span className="text-lg text-gray-400">/mo</span>
        </div>
      </div>

      {/* Specs section */}
      <div className="flex-shrink-0 lg:w-72">
        <div className="grid grid-cols-2 gap-3">
          <div className="flex items-center text-gray-300">
            <Cpu className="w-5 h-5 mr-2 text-blue-400" />
            {specs.cpu}
          </div>
          <div className="flex items-center text-gray-300">
            <Server className="w-5 h-5 mr-2 text-blue-400" />
            {specs.ram}
          </div>
          <div className="flex items-center text-gray-300">
            <HardDrive className="w-5 h-5 mr-2 text-blue-400" />
            {specs.storage}
          </div>
          <div className="flex items-center text-gray-300">
            <Network className="w-5 h-5 mr-2 text-blue-400" />
            {specs.bandwidth}
          </div>
        </div>
      </div>

      {/* Features section */}
      <div className="flex-grow">
        <div className="grid grid-cols-2 gap-2">
          {features.map((feature, index) => (
            <div key={index} className="flex items-center text-gray-300">
              <Check className="w-4 h-4 text-blue-400 mr-2 flex-shrink-0" />
              {feature}
            </div>
          ))}
        </div>
      </div>

      {/* Action button */}
      <div className="flex-shrink-0 lg:w-40">
        <a
          href={link}
          target="_blank"
          rel="noopener noreferrer"
          className={`inline-flex items-center justify-center w-full py-3 px-4 rounded-md font-medium transition-all duration-200 
          ${
            recommended
              ? "bg-blue-600 hover:bg-blue-700 text-white"
              : "bg-gray-700 hover:bg-gray-600 text-white"
          }`}
        >
          <span>Deploy Now</span>
          <ExternalLink className="w-4 h-4 ml-2" />
        </a>
      </div>
    </div>
  </div>
);
const ServerTypeCard = ({ name, image }) => (
  <div className="bg-slate-950 p-5 rounded-md border border-gray-900 transition-all duration-200">
    <div className="relative mb-4 aspect-square">
      <img
        src={image}
        alt={`${name} Server`}
        className="rounded-md w-full h-full object-cover"
      />
    </div>
    <h3 className="text-lg font-semibold text-white text-center">{name}</h3>
  </div>
);
export const VPSPage = () => {
  return (
    <div className="bg-slate-900 min-h-screen">
      <Helmet>
        <title>VPS | Skylink Hosting</title>
      </Helmet>
      {/* Hero Section */}
      <section className="md:min-h-screen min-h-44 py-12 md:py-24 relative overflow-hidden">
        <div className="container mx-auto px-4 max-w-screen-xl relative">
          <div className="flex flex-col md:flex-row items-center gap-12">
            <div className="flex-1">
              <div className="inline-flex items-center px-4 py-2 rounded-md bg-slate-950 border border-gray-900 text-blue-400 mb-6">
                <Award className="w-5 h-5 mr-2" />
                <span className="text-sm font-semibold">#1 VPS Provider</span>
              </div>
              <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight">
                High-Performance
                <br />
                <span className="text-blue-500">Virtual Servers</span>
              </h1>
              <p className="text-xl text-gray-300 mb-8 leading-relaxed">
                Powered by AMD processors and NVMe storage, our VPS
                solutions deliver exceptional performance for your applications.
              </p>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-2 mb-8">
                <StatCard value="25ms" label="Average Latency" icon={Zap} />
                <StatCard value="99.95%" label="Uptime" icon={Heart} />
                <StatCard value="60s" label="Deployment" icon={Clock} />
                <StatCard value="24/7" label="Support" icon={Users} />
              </div>
            </div>
            {/* <div className="flex-1 hidden md:block">
              <div className="bg-slate-950 rounded-xl">
                <img
                  src="https://placehold.co/800x600"
                  alt="VPS Dashboard"
                  className="rounded-lg w-full"
                />
              </div>
            </div> */}
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="py-12 md:py-24 bg-slate-950">
        <div className="container mx-auto px-4 max-w-screen-xl">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
              Enterprise-Grade Infrastructure
            </h2>
            <p className="text-xl text-gray-300 max-w-2xl mx-auto">
              Built for performance, reliability, and security
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 md:gap-8">
            {features.map((feature, index) => (
              <FeatureCard key={index} {...feature} />
            ))}
          </div>
        </div>
      </section>

      {/* Server Types Section */}
      <section className="py-12 md:py-24 bg-slate-900">
        <div className="container mx-auto px-4 max-w-screen-xl">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
              Choose From Popular Distributions
            </h2>
            <p className="text-xl text-gray-300 max-w-2xl mx-auto">
              Select an OS, Deploy in Seconds!
            </p>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-2 md:gap-8">
            {[
              {
                name: "Ubuntu",
                image:
                  "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/UbuntuCoF.svg/1024px-UbuntuCoF.svg.png",
              },
              {
                name: "Fedora",
                image:
                  "https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Fedora_icon_%282021%29.svg/2089px-Fedora_icon_%282021%29.svg.png",
              },
              {
                name: "Debian",
                image:
                  "https://www.shareicon.net/data/512x512/2015/09/16/101872_debian_512x512.png",
              },
              {
                name: "CentOS",
                image:
                  "https://static-00.iconduck.com/assets.00/centos-icon-2048x2048-39pfdqnc.png",
              },
              {
                name: "OpenSUSE",
                image:
                  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSZ-uWShZ8-N9qAw6Hso8_NxX5KrkwmDRyTXA&s",
              },
              {
                name: "Windows",
                image:
                  "https://imgs.search.brave.com/5CpHkL_QsUFbg2gefzq01sBYrytDbfq0RNJrUDnHYSM/rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly9jZG4u/d2luZG93c3JlcG9y/dC5jb20vd3AtY29u/dGVudC91cGxvYWRz/LzIwMjMvMDIvY2hh/bmdlLWJvb3QtbG9n/by13aW5kb3dzLTEw/LTg4Nng1OTAucG5n",
              },
            ].map((type, index) => (
              <ServerTypeCard key={index} {...type} />
            ))}
          </div>
        </div>
      </section>
      <section className="py-12 md:py-24 bg-gray-900">
        <div className="container mx-auto px-4 max-w-screen-xl">
          <div className="flex flex-col md:flex-row items-center gap-12">
            <div className="flex-1">
              <div className="relative">
                <div className="absolute -inset-4"></div>
                <img
                  src="https://virtfusion.com/wp-content/uploads/2023/03/screen-2023-dark-1.png"
                  alt="Control Panel Interface"
                  className="relative"
                />
              </div>
            </div>
            <div className="flex-1">
              <h2 className="text-3xl md:text-4xl font-bold text-white mb-3">
                Intuitive Control Panel
              </h2>
              <p className="text-xl text-gray-300 mb-6 leading-relaxed">
                Take full control of your Minecraft server with our custom-built
                panel. Manage plugins, monitor performance, and configure
                settings with ease. Perfect for both beginners and experienced
                server administrators.
              </p>
              <ul className="space-y-3 mb-6">
                <li className="flex items-center text-gray-300">
                  <Settings className="w-6 h-6 mr-3 text-blue-500" />
                  One-click plugin installation and configuration
                </li>
                <li className="flex items-center text-gray-300">
                  <Cpu className="w-6 h-6 mr-3 text-blue-500" />
                  Real-time performance monitoring and optimization
                </li>
                <li className="flex items-center text-gray-300">
                  <Users className="w-6 h-6 mr-3 text-blue-500" />
                  Advanced user and permission management
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>
      {/* Plans Section */}
      <section className="py-12 md:py-24 bg-slate-950">
        <div className="container mx-auto px-4 max-w-screen-xl">
          <div className="text-center mb-6">
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
              Choose Your Plan
            </h2>
            <p className="text-xl text-gray-300 mb-8">
              Flexible plans for every workload
            </p>
          </div>

          <div className="grid grid-cols-1 gap-2 md:gap-4">
            {plans.map((plan, index) => (
              <PlanCard key={index} {...plan} />
            ))}
          </div>
        </div>
      </section>
      <CTA />
    </div>
  );
};

export default VPSPage;
