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

const features = [
  {
    icon: Rocket,
    title: "Lightning Fast Servers",
    description:
      "High-performance servers with NVMe SSDs for blazing fast website load times",
  },
  {
    icon: Shield,
    title: "Advanced Security",
    description:
      "Enterprise-grade DDoS protection and free SSL certificates included",
  },
  {
    icon: Database,
    title: "Daily Backups",
    description: "Automated daily backups with one-click restore functionality",
  },
  {
    icon: Network,
    title: "Global CDN",
    description: "Content delivery network with 200+ global edge locations",
  },
];

const plans = [
  {
    name: "Starter",
    price: "$4.99",
    storage: "10GB SSD",
    bandwidth: "Unmetered",
    websites: "1 Website",
    backups: "Daily",
    ssl: "Free SSL",
    support: "24/7 Support",
    link: "https://example.com/",
  },
  {
    name: "Professional",
    price: "$9.99",
    storage: "50GB SSD",
    bandwidth: "Unmetered",
    websites: "Unlimited",
    backups: "Daily",
    ssl: "Free SSL",
    support: "Priority Support",
    link: "https://example.com/",
  },
  {
    name: "Business",
    price: "$24.99",
    storage: "200GB SSD",
    bandwidth: "Unmetered",
    websites: "Unlimited",
    backups: "Daily",
    ssl: "Wildcard SSL",
    support: "Premium Support",
    link: "https://example.com/",
  },
];

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-600 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-600" />
    </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,
  storage,
  bandwidth,
  websites,
  backups,
  ssl,
  link,
  support,
  recommended,
}) => (
  <div className="bg-gray-900 p-5 rounded-md border border-gray-900 group cursor-pointer relative">
    <div className="relative">
      <div className="relative">
        <div className="text-center mb-6">
          <h3 className="text-2xl font-bold text-white mb-2">{name}</h3>
          <div className="text-3xl font-bold text-blue-600 mb-2">
            {price}
            <span className="text-lg text-gray-400">/mo</span>
          </div>
          <p className="text-gray-400">{websites}</p>
        </div>
        <ul className="space-y-2 mb-3">
          <li className="flex items-center text-gray-300">
            <HardDrive className="w-5 h-5 mr-2 text-blue-600" />
            {storage}
          </li>
          <li className="flex items-center text-gray-300">
            <Network className="w-5 h-5 mr-2 text-blue-600" />
            {bandwidth}
          </li>
          <li className="flex items-center text-gray-300">
            <Clock className="w-5 h-5 mr-2 text-blue-600" />
            {backups}
          </li>
          <li className="flex items-center text-gray-300">
            <Shield className="w-5 h-5 mr-2 text-blue-600" />
            {ssl}
          </li>
          <li className="flex items-center text-gray-300">
            <Users className="w-5 h-5 mr-2 text-blue-600" />
            {support}
          </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 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 WebHosting = () => {
  return (
    <div className="bg-slate-900 min-h-screen">
      <Helmet>
        <title>Web Hosting | GameZone</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-gray-900 text-blue-600 mb-6">
                <div className="relative">
                  <Award className="w-5 h-5 mr-2" />
                </div>
                <span className="text-sm font-semibold">
                  #1 Web Hosting Provider
                </span>
              </div>
              <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight">
                Professional
                <br />
                <span className="text-blue-600">Web Hosting</span>
              </h1>
              <p className="text-xl text-gray-300 mb-8 leading-relaxed">
                Lightning-fast hosting powered by NVMe SSDs, featuring automatic
                backups, free SSL, and 24/7 expert support.
              </p>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-4 mb-8">
                <StatCard value="99.9%" label="Uptime" icon={Heart} />
                <StatCard value="0.1s" label="Response" icon={Zap} />
                <StatCard value="24/7" label="Support" icon={Users} />
                <StatCard value="45+" label="Data Centers" icon={Server} />
              </div>
            </div>
            <div className="flex-1 hidden md:block">
              <div className="bg-slate-950 rounded-xl">
                <div className="relative">
                  <img
                    src="/images/web-hosting.jpg"
                    alt="Web Hosting Dashboard"
                    className="relative rounded-lg w-full"
                  />
                </div>
              </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 Hosting
            </h2>
            <p className="text-xl text-gray-300 max-w-2xl mx-auto">
              Built for performance, secured for peace of mind, and backed by
              24/7 expert support
            </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 a Popular Application
            </h2>
            <p className="text-xl text-gray-300 max-w-2xl mx-auto">
              Worry free of relying on just cPanel, we provide other
              applications!
            </p>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-2 md:gap-8">
            {[
              {
                name: "Wordpress",
                image: "https://cdn-icons-png.flaticon.com/512/174/174881.png",
              },
              {
                name: "Laravel",
                image:
                  "https://static-00.iconduck.com/assets.00/laravel-icon-1990x2048-xawylrh0.png",
              },
              {
                name: "NamelessMC",
                image:
                  "https://namelessmc.com/uploads/avatars/defaults/15a1d8fbaef6dd_olqikfemgjnhp.png",
              },
              {
                name: "cPanel",
                image:
                  "https://innovahosting.net/app/public/upload/cms/pages/47/z2Uikmn6KNy3MhR2u9hfED85hNyubTEFJU1m4ZEQ.png",
              },
              {
                name: "DirectAdmin",
                image: "https://www.svgrepo.com/show/331367/directadmin.svg",
              },
              {
                name: "WHMCS",
                image:
                  "https://cdn4.iconfinder.com/data/icons/logos-and-brands/512/376_Whmcs_logo-512.png",
              },
            ].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://www.cloudhostworld.com/img/chw-image/makes-unique/CHW-C2.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-600" />
                  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-600" />
                  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-600" />
                  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-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">
              Flexible plans that grow with your business
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-2 md:gap-8 mb-8">
            {plans.map((plan, index) => (
              <PlanCard key={index} {...plan} recommended={index === 1} />
            ))}
          </div>

          {/* Feature Comparison Table */}
          <div className="bg-gray-900 rounded-md border border-slate-950 overflow-hidden">
            <div className="p-6 border-b border-slate-950">
              <h3 className="text-2xl font-bold text-white">Plan Comparison</h3>
            </div>
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead>
                  <tr className="bg-gray-900">
                    <th className="text-left p-4 text-white font-extrabold">
                      Features
                    </th>
                    <th className="text-center p-4 text-white font-extrabold">
                      Starter
                    </th>
                    <th className="text-center p-4 text-white font-extrabold">
                      Professional
                    </th>
                    <th className="text-center p-4 text-white font-extrabold">
                      Business
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="border-t border-gray-900">
                    <td className="p-4 text-gray-300">Websites</td>
                    <td className="p-4 text-center text-gray-300">1 Website</td>
                    <td className="p-4 text-center text-gray-300">Unlimited</td>
                    <td className="p-4 text-center text-gray-300">Unlimited</td>
                  </tr>
                  <tr className="border-t border-gray-900">
                    <td className="p-4 text-gray-300">Storage Space</td>
                    <td className="p-4 text-center text-gray-300">10GB SSD</td>
                    <td className="p-4 text-center text-gray-300">50GB SSD</td>
                    <td className="p-4 text-center text-gray-300">200GB SSD</td>
                  </tr>
                  <tr className="border-t border-gray-900">
                    <td className="p-4 text-gray-300">Bandwidth</td>
                    <td className="p-4 text-center text-gray-300">Unmetered</td>
                    <td className="p-4 text-center text-gray-300">Unmetered</td>
                    <td className="p-4 text-center text-gray-300">Unmetered</td>
                  </tr>
                  <tr className="border-t border-gray-900">
                    <td className="p-4 text-gray-300">Free Domain</td>
                    <td className="p-4 text-center text-gray-300">-</td>
                    <td className="p-4 text-center text-gray-300">1 Domain</td>
                    <td className="p-4 text-center text-gray-300">3 Domains</td>
                  </tr>
                  <tr className="border-t border-gray-900">
                    <td className="p-4 text-gray-300">SSL Certificate</td>
                    <td className="p-4 text-center text-gray-300">Free SSL</td>
                    <td className="p-4 text-center text-gray-300">Free SSL</td>
                    <td className="p-4 text-center text-gray-300">
                      Wildcard SSL
                    </td>
                  </tr>
                  <tr className="border-t border-gray-900">
                    <td className="p-4 text-gray-300">Email Accounts</td>
                    <td className="p-4 text-center text-gray-300">5</td>
                    <td className="p-4 text-center text-gray-300">Unlimited</td>
                    <td className="p-4 text-center text-gray-300">Unlimited</td>
                  </tr>
                  <tr className="border-t border-gray-900">
                    <td className="p-4 text-gray-300">Backup Frequency</td>
                    <td className="p-4 text-center text-gray-300">Daily</td>
                    <td className="p-4 text-center text-gray-300">Daily</td>
                    <td className="p-4 text-center text-gray-300">Daily</td>
                  </tr>
                  <tr className="border-t border-gray-900">
                    <td className="p-4 text-gray-300">Backup Retention</td>
                    <td className="p-4 text-center text-gray-300">7 Days</td>
                    <td className="p-4 text-center text-gray-300">14 Days</td>
                    <td className="p-4 text-center text-gray-300">30 Days</td>
                  </tr>
                  <tr className="border-t border-gray-900">
                    <td className="p-4 text-gray-300">CDN Access</td>
                    <td className="p-4 text-center text-gray-300">Basic</td>
                    <td className="p-4 text-center text-gray-300">Premium</td>
                    <td className="p-4 text-center text-gray-300">
                      Enterprise
                    </td>
                  </tr>
                  <tr className="border-t border-gray-900">
                    <td className="p-4 text-gray-300">DDoS Protection</td>
                    <td className="p-4 text-center text-gray-300">Basic</td>
                    <td className="p-4 text-center text-gray-300">Advanced</td>
                    <td className="p-4 text-center text-gray-300">
                      Enterprise
                    </td>
                  </tr>
                  <tr className="border-t border-gray-900">
                    <td className="p-4 text-gray-300">Support</td>
                    <td className="p-4 text-center text-gray-300">
                      24/7 Support
                    </td>
                    <td className="p-4 text-center text-gray-300">
                      Priority Support
                    </td>
                    <td className="p-4 text-center text-gray-300">
                      Premium Support
                    </td>
                  </tr>
                  <tr className="border-t border-gray-900">
                    <td className="p-4 text-gray-300">
                      Server Location Options
                    </td>
                    <td className="p-4 text-center text-gray-300">
                      3 Locations
                    </td>
                    <td className="p-4 text-center text-gray-300">
                      10 Locations
                    </td>
                    <td className="p-4 text-center text-gray-300">
                      All Locations
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </section>
      <FAQ />
      <CTA />
    </div>
  );
};

export default WebHosting;
