import { Poppins } from "next/font/google";
import Image from "next/image";
import serverImage from "@/app/img/hero-right.png";
import footerImage from "@/app/img/logo.png";
import footerImageText from "@/app/img/Status-01.png";
import SLA from "@app/legal/SLA.pdf";
import TOS  from "@app/legal/TOS.pdf";
import Privacy from "@app/legal/Privacy.pdf";

const poppins = Poppins({
  weight: ["400", "600", "700"],
  subsets: ["latin"],
  variable: "--font-poppins",
});

const offerings = [
  {
    title: "VPS Hosting",
    description:
      "High performance Virtual Private Servers powered by AMD Ryzen™ and our premium network ensure your services run smoothly and reliably.",
    link: "https://billing.skylinkhosting.com/index.php?rp=/store/phoenix-usa-vps",
  },
  {
    title: "Premium Minecraft Hosting",
    description:
      "Host your dream server at an affordable price, without sacrificing on quality. Premium hardware and DDoS mitigation let you focus on playing.",
    link: "https://billing.skylinkhosting.com/index.php?rp=/store/premium-minecraft-hosting",
  },
  {
    title: "Dedicated Servers",
    description:
      "Run any compute task on a dedicated machine. Available with 1G or 10G networking and protected by our premium DDoS mitigation.",
    link: "#",
  },
  {
    title: "Colocation",
    description:
      "Host your own hardware in our racks, and leave the power, networking, cooling, and DDoS mitigation to us. Available in Phoenix, AZ.",
    link: "#",
  },
];

const features = [
  {
    title: "Privacy",
    description:
      "We have great respect for all customer privacy. Unless necessary, we will never look through client data.",
    icon: "🔒",
  },
  {
    title: "Full Control",
    description:
      "You are in full control of your server. Skylink Hosting does not restrict anything, allowing client freedom.",
    icon: "⚙️",
  },
  {
    title: "Backup Vaults",
    description:
      "Backup your server automatically and securely using our built-in backup manager. Never worry about data loss.",
    icon: "💾",
  },
  {
    title: "DDoS Protected",
    description:
      "Always-on enterprise DDoS mitigation protects client services from bad actors, and is operated with Path.net.",
    icon: "🛡️",
  },
  {
    title: "24/7 Support Team",
    description:
      "Have a question, or multiple? Speak to our 24/7 support team. Get support via Discord, email, or a ticket.",
    icon: "📞",
  },
];

export default function Home() {
  return (
    <div
      className={`${poppins.className} min-h-screen bg-[#0d1117] text-white font-sans`}
    >
      {/* Header */}
      <header className="flex justify-between items-center px-6 sm:px-12 lg:px-24 py-5 bg-[#0d1117] shadow-md">
        <h1 className="text-3xl font-bold text-[#eacc54]">Skylink Hosting</h1>
        <nav className="space-x-6 text-lg">
          <a href="/" className="hover:text-[#eacc54]">
            Home
          </a>
          <a
            href="https://billing.skylinkhosting.com/"
            className="hover:text-[#eacc54]"
          >
            Billing Portal
          </a>
          <a
            href="https://compute.skylinkhosting.com/"
            className="hover:text-[#eacc54]"
          >
            VPS Panel
          </a>
          <a
            href="https://game.skylinkhosting.com/"
            className="hover:text-[#eacc54]"
          >
            Game Panel
          </a>
          {/* <a href="#" className="hover:text-[#eacc54]">
            Web Panel
          </a> */}
        </nav>
      </header>

      {/* Hero Section */}
      <main className="flex flex-col lg:flex-row items-center justify-between px-6 sm:px-12 lg:px-24 py-20 bg-[#0d1117]">
        {/* Left Content */}
        <div className="lg:w-1/2 text-center lg:text-left space-y-6">
          <h2 className="text-5xl md:text-6xl font-extrabold leading-tight text-white">
            High Performance <br />
            Cloud Hosting
          </h2>
          <p className="text-lg text-[#b5b9be] leading-relaxed mt-6 max-w-3xl lg:max-w-none">
            Deploy your idea instantly with our VPS, game, and web services, or
            with our dedicated and colocation services with our optimized
            premium-blend network.
          </p>
          <div className="flex flex-col lg:flex-row justify-center lg:justify-start space-y-4 lg:space-y-0 lg:space-x-4 mt-8">
            <button className="px-8 py-4 bg-blue-500 text-white font-semibold rounded-full hover:bg-blue-600 transition">
              <a href="https://billing.skylinkhosting.com/">Get Stated!</a>
            </button>
            <button className="px-8 py-4 bg-gray-800 text-white font-semibold rounded-full hover:bg-gray-700 transition">
              <a href="https://discord.skylinkhosting.com">Ask a Question</a>
            </button>
          </div>
        </div>

        {/* Right Content - Image */}
        <div className="lg:w-1/2 flex justify-center">
          <Image
            src={serverImage}
            alt="Cloud Hosting Illustration"
            width={500}
            height={500}
            className="rounded-lg"
          />
        </div>
      </main>

      {/* What We Offer Section */}
      <section className="bg-[#0d1117] py-16">
        <h2 className="text-4xl text-center font-extrabold mb-12 text-[#fefefe]">
          What We Offer
        </h2>
        <div className="max-w-6xl mx-auto flex flex-wrap justify-center gap-8 px-6">
          {offerings.map((offer, index) => (
            <div
              key={index}
              className="p-6 bg-[#161b22] text-center rounded-2xl shadow-lg hover:shadow-xl transition-transform transform hover:-translate-y-2 flex flex-col justify-between h-full max-w-sm"
            >
              <h3 className="text-2xl font-semibold text-[#fefefe] mb-4">
                {offer.title}
              </h3>
              <p className="text-[#b5b9be] mb-6">{offer.description}</p>
              <a
                href={offer.link}
                className="text-[#eacc54] font-semibold hover:underline mt-auto"
              >
                Get Started →
              </a>
            </div>
          ))}
        </div>
      </section>

      {/* Features Section */}
      <section className="bg-[#0d1117] py-16">
        <h2 className="text-4xl text-center font-extrabold mb-12 text-[#fefefe]">
          Features
        </h2>
        <div className="max-w-6xl mx-auto flex flex-wrap justify-center gap-8 px-6">
          {features.map((feature, index) => (
            <div
              key={index}
              className="p-6 bg-[#161b22] text-center rounded-2xl shadow-lg hover:shadow-xl transition-transform transform hover:-translate-y-2 flex flex-col justify-between h-full max-w-sm"
            >
              <div>
                <div className="text-4xl mb-4">{feature.icon}</div>
                <h3 className="text-2xl font-semibold text-[#fefefe] mb-4">
                  {feature.title}
                </h3>
                <p className="text-[#b5b9be] mb-6">{feature.description}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Cube Section */}
      <section className="py-16">
        <div className="max-w-4xl mx-auto rounded-xl bg-[#23252A] p-8 shadow-md">
          <h2 className="text-3xl font-extrabold text-white text-center mb-4">
            Like what you see?
          </h2>
          <p className="text-center text-[#b5b9be] mb-6">
            Create a ticket for questions or get started today!
          </p>
          <div className="flex justify-center space-x-6">
            <button className="px-8 py-3 bg-blue-500 text-white font-semibold rounded-full hover:bg-blue-600 transition">
              <a href="https://billing.skylinkhosting.com/">Getting Started</a>
            </button>
            <button className="px-8 py-3 bg-gray-800 text-white font-semibold rounded-full hover:bg-gray-700 transition">
              <a href="https://discord.skylinkhosting.com/">Have a Question?</a>
            </button>
          </div>
        </div>
      </section>

      {/* Footer Section */}
      <footer className="bg-[#0d1117] text-[#b5b9be] py-16">
        <div className="max-w-6xl mx-auto px-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
          {/* Logo and Terms */}
          <div>
            <div className="mb-6">
              <Image
                src={footerImageText}
                alt="Skylink Hosting Logo"
                width={350}
                height={100}
              />
            </div>
            <p className="text-sm">
              By using Skylink Hosting's website and services, you agree to our{" "}
              <a
                href="https://billing.skylinkhosting.com/index.php?rp=/knowledgebase/1/ToS-Terms-of-Service.html"
                className="text-[#eacc54] hover:underline"
              >
                Terms of Service
              </a>
              ,{" "}
              <a
                href="https://billing.skylinkhosting.com/index.php?rp=/knowledgebase/2/Privacy-Policy.html"
                className="text-[#eacc54] hover:underline"
              >
                Privacy Policy
              </a>{" "}
              and{" "}
              <a
                href="https://billing.skylinkhosting.com/index.php?rp=/knowledgebase/3/SLA-Service-Level-Agreement.html"
                className="text-[#eacc54] hover:underline"
              >
                SLA
              </a>
              .
            </p>
          </div>

          {/* Navigation Links */}
          <div className="flex flex-col space-y-4">
            <h3 className="text-[#fefefe] font-semibold">Links</h3>
            <a href="/" className="hover:text-[#eacc54]">
              Home
            </a>
            <a
              href="https://billing.skylinkhosting.com/"
              className="hover:text-[#eacc54]"
            >
              Billing Portal
            </a>
            <a
              href="https://compute.skylinkhosting.com/"
              className="hover:text-[#eacc54]"
            >
              VPS Panel
            </a>
            <a
              href="https://game.skylinkhosting.com/"
              className="hover:text-[#eacc54]"
            >
              Game Panel
            </a>
            {/* <a href="#" className="hover:text-[#eacc54]">
              Web Panel
            </a> */}
          </div>

          {/* Legal Links */}
          <div className="flex flex-col space-y-4">
            <h3 className="text-[#fefefe] font-semibold">Legal</h3>
            <a href="https://billing.skylinkhosting.com/index.php?rp=/knowledgebase/1/ToS-Terms-of-Service.html" className="hover:text-[#eacc54]">
              Terms of Service
            </a>
            <a href="https://billing.skylinkhosting.com/index.php?rp=/knowledgebase/2/Privacy-Policy.html" className="hover:text-[#eacc54]">
              Privacy Policy
            </a>
            <a href="https://billing.skylinkhosting.com/index.php?rp=/knowledgebase/3/SLA-Service-Level-Agreement.html" className="hover:text-[#eacc54]">
              Service Level Agreement
            </a>
          </div>
        </div>

        {/* Contact Section */}
        <div className="mt-12 text-center">
          <p className="text-sm">
            Questions? Feel free to email us at{" "}
            <a
              href="mailto:support@skylinkhosting.com"
              className="text-[#eacc54] hover:underline"
            >
              support@skylinkhosting.com
            </a>
          </p>
          <p className="mt-4 text-sm">© 2025 Skylink Hosting LLC</p>
        </div>
      </footer>
    </div>
  );
}