import React from "react";
import {
  Server,
  Shield,
  Zap,
  Globe,
  Users,
  Clock,
  Award,
  Gauge,
  Heart,
  ExternalLink,
  Settings,
  Sparkles,
  CogIcon,
} from "lucide-react";
import { Panel } from "../components/Panel";
import CTA from "../components/home/CTA";
import { Helmet } from "react-helmet";

const plans = [
  {
    ram: "2GB",
    price: "$8",
    players: "1-20",
    storage: "30GB NVMe",
    backups: "1 Daily",
    plugins: "15 Plugins",
    link: "https://example.com/",
  },
  {
    ram: "4GB",
    price: "$12",
    players: "20-40",
    storage: "50GB NVMe",
    backups: "2 Daily",
    plugins: "Unlimited",
    link: "https://example.com/",
  },
  {
    ram: "6GB",
    price: "$16",
    players: "40-60",
    storage: "75GB NVMe",
    backups: "4 Daily",
    plugins: "Unlimited",
    link: "https://example.com/",
  },
  {
    ram: "8GB",
    price: "$20",
    players: "60-80",
    storage: "100GB NVMe",
    backups: "6 Daily",
    plugins: "Unlimited",
    link: "https://example.com/",
  },
  {
    ram: "12GB",
    price: "$28",
    players: "80-120",
    storage: "150GB NVMe",
    backups: "8 Daily",
    plugins: "Unlimited",
    link: "https://example.com/",
  },
  {
    ram: "16GB",
    price: "$36",
    players: "120-160",
    storage: "200GB NVMe",
    backups: "12 Daily",
    plugins: "Unlimited",
    link: "https://example.com/",
  },
];

const features = [
  // {
  //   icon: Sparkles,
  //   title: "One-Click Modpack Install",
  //   description:
  //     "Install popular modpacks like RLCraft, SkyFactory, and FTB with just one click",
  // },
  {
    icon: Shield,
    title: "Enterprise DDoS Protection",
    description:
      "Layer 7 protection with automatic mitigation and 24/7 monitoring.",
  },
  {
    icon: Gauge,
    title: "NVMe SSD Storage",
    description:
      "Lightning-fast storage.",
  },
  {
    icon: Settings,
    title: "Custom Control Panel",
    description:
      "Easy-to-use custom panel for full server control and mod management.",
  },
];

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 = ({
  ram,
  price,
  players,
  storage,
  link,
  backups,
  plugins,
  recommended,
}) => (
  <div className="bg-slate-900 p-5 rounded-md border border-slate-900 group cursor-pointer relative">
    <div className="text-center mb-6">
      <h3 className="text-2xl font-bold text-white mb-2">{ram} RAM</h3>
      <div className="text-3xl font-bold text-blue-500 mb-2">
        {price}
        <span className="text-lg text-gray-400">/mo</span>
      </div>
      <p className="text-gray-400">Up to {players} Players</p>
    </div>
    <ul className="space-y-2 mb-3">
      <li className="flex items-center text-gray-300">
        <Server className="w-5 h-5 mr-2 text-blue-500" />
        {storage}
      </li>
      <li className="flex items-center text-gray-300">
        <Clock className="w-5 h-5 mr-2 text-blue-500" />
        {backups} Backups
      </li>
      <li className="flex items-center text-gray-300">
        <CogIcon className="w-5 h-5 mr-2 text-blue-500" />
        {plugins}
      </li>
      <li className="flex items-center text-gray-300">
        <Shield className="w-5 h-5 mr-2 text-blue-500" />
        DDoS Protection
      </li>
      <li className="flex items-center text-gray-300">
        <Globe className="w-5 h-5 mr-2 text-blue-500" />
        Unlimited Bandwidth
      </li>
    </ul>
    <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 Server</span>
      <ExternalLink className="w-4 h-4 ml-2" />
    </a>
  </div>
);

const ServerTypeCard = ({ name, image }) => (
  <div className="bg-slate-950 p-5 rounded-md border border-slate-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 MinecraftPage = () => {
  return (
    <div className="bg-slate-900 min-h-screen">
      <Helmet>
        <title>Minecraft Hosting | Skylink Hosting</title>
      </Helmet>
      {/* Hero */}
      <section className="min-h-44 md:min-h-screen 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-slate-900 transition-all duration-200 text-blue-500 mb-6">
                <Award className="w-5 h-5 mr-2" />
                <span className="text-sm font-semibold">
                  #1 Minecraft Host of 2025
                </span>
              </div>
              <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight">
                Minecraft
                <br />
                <span className="text-blue-500">Server Hosting</span>
              </h1>
              <p className="text-xl text-gray-300 mb-8 leading-relaxed">
                Experience next-gen Minecraft hosting with instant setup,
                one-click modpack installation, and 99.99% uptime guarantee.
              </p>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-4 mb-8">
                <StatCard value="45ms" label="Average Latency" icon={Zap} />
                <StatCard value="99.9%" 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 w-fit rounded-md">
                <img
                  src="/images/minecraft.jpeg"
                  alt="Minecraft Server Interface"
                  className="rounded-md w-fit h-auto"
                />
              </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">
              Next-Gen Minecraft Hosting
            </h2>
            <p className="text-xl text-gray-300 max-w-2xl mx-auto">
              Built for performance, optimized for gaming, and backed by
              enterprise infrastructure
            </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">
              All Server Types Supported
            </h2>
            <p className="text-xl text-gray-300 max-w-2xl mx-auto">
              Deploy any Minecraft server version or modification with one click
            </p>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-2 md:gap-8">
            {[
              {
                name: "Vanilla",
                image:
                  "https://cdn.icon-icons.com/icons2/2699/PNG/512/minecraft_logo_icon_168974.png",
              },
              {
                name: "Paper",
                image:
                  "https://docs.papermc.io/assets/images/papermc-logomark-512-f125384f3367cd4d9291ca983fcb7334.png",
              },
              {
                name: "Forge",
                image:
                  "https://avatars.githubusercontent.com/u/1390178?s=200&v=4",
              },
              {
                name: "Bedrock",
                image:
                  "https://preview.redd.it/1wo65al6iox71.png?width=640&crop=smart&auto=webp&s=e9aab23333f9556cbeaa37587002dc9d7181137f",
              },
              {
                name: "Fabric",
                image:
                  "https://media.forgecdn.net/avatars/thumbnails/185/822/256/256/636829723898798601.png",
              },
              {
                name: "Spigot",
                image:
                  "https://avatars.githubusercontent.com/u/4350249?s=280&v=4",
              },
            ].map((type, index) => (
              <ServerTypeCard key={index} {...type} />
            ))}
          </div>
        </div>
      </section>

      {/* Panel Showcase Section */}
      <Panel />

      {/* 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-16">
            <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">
              Scalable plans for every size of community
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 md:gap-8">
            {plans.slice(0, 3).map((plan, index) => (
              <PlanCard key={index} {...plan} recommended={index === 1} />
            ))}
          </div>
          <div className="mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 md:gap-8">
            {plans.slice(3).map((plan, index) => (
              <PlanCard key={index + 3} {...plan} />
            ))}
          </div>
        </div>
      </section>
      <CTA />
    </div>
  );
};

export default MinecraftPage;
