import React, { useState, useEffect } from "react";
import {
  Menu,
  X,
  Mail,
  Phone,
  Globe,
  Twitter,
  Github,
  ExternalLink,
  HeadsetIcon,
  ArrowRight,
  ArrowUp,
  BoxIcon,
  Gamepad2,
  WifiIcon,
  Ticket,
} from "lucide-react";
import PromoPopup from "./PromoPopup";
// Navbar Contents
const fastLinks = [
  { title: "Game Panel", path: "https://game.skylinkhosting.com", icon: Gamepad2 },
  { title: "VPS Panel", path: "https://compute.skylinkhosting.com", icon: BoxIcon },
  { title: "Status", path: "https://status.skylinkhosting.com", icon: WifiIcon },
  { title: "Create a Ticket", path: "https://billing.skylinkhosting.com/contact.php", icon: Ticket },
];
const navLinks = [
  { title: "Home", path: "/" },
  { title: "Games Servers", path: "/games" },
  { title: "VPS", path: "/vps" },
  // { title: "Web Hosting", path: "/web-hosting" },
  { title: "Support", path: "/support" },
];
// Footer Contents
const socialLinks = [
  // {
  //   icon: Twitter,
  //   href: "https://twitter.com/virtugraphics",
  //   label: "Twitter",
  // },
  {
    icon: HeadsetIcon,
    href: "https://skylinkhosting.com/discord",
    label: "Discord",
  },
  // {
  //   icon: Github,
  //   href: "https://github.com/virtugraphics",
  //   label: "GitHub",
  // },
];

const companyLinks = [
  // { label: "About Us", href: "/about" },
  // { label: "Network Specs", href: "/specs" },
  // { label: "Careers", href: "/careers" },
  // { label: "Partners", href: "/partners" },
  { label: "Terms of Service (ToS)", href: "https://cdn.skylinkhosting.com/Static/Legal/ToS.pdf"},
  { label: "Privacy Policy", href: "https://cdn.skylinkhosting.com/Static/Legal/Privacy.pdf"},
  { label: "Service Level Agreement (SLA)", href: "https://cdn.skylinkhosting.com/Static/Legal/SLA.pdf"},
];

const supportLinks = [
  { label: "Support Center", href: "/support" },
  { label: "Network Status", href: "https://status.skylinkhosting.com/" },
  { label: "Contact", href: "https://billing.skylinkhosting.com/contact.php" },
];

const contactLinks = [
  {
    icon: Mail,
    label: "support@skylinkhosting.com",
    href: "mailto:support@skylinkhosting.com",
  },
  // {
  //   icon: Phone,
  //   label: "+1 814-673-1843",
  //   href: "tel:1-814-673-1843",
  // },
  // {
  //   icon: Globe,
  //   label: "Pennsylvania, US",
  //   href: null,
  // },
];

const legalLinks = [
  { label: "Terms", href: "https://cdn.skylinkhosting.com/Static/Legal/ToS.pdf" },
  { label: "Privacy", href: "https://cdn.skylinkhosting.com/Static/Legal/Privacy.pdf" },
  { label: "SLA", href: "https://cdn.skylinkhosting.com/Static/Legal/SLA.pdf" },
  // { label: "Sitemap", href: "/sitemap" },
];

const FastLinks = () => {
  return (
    <div className="bg-slate-900 text-white py-2 border-b border-gray-900">
      <div className="container mx-auto max-w-screen-xl px-4">
        {/* Desktop Layout Only */}
        <div className="hidden lg:flex items-center justify-between">
          <div className="flex items-center gap-4 text-sm text-gray-400">
            <a
              href="mailto:support@skylinkhosting.com"
              className="flex items-center gap-2 hover:text-blue-500 transition-colors duration-200"
            >
              <Mail className="w-4 h-4" />
              support@skylinkhosting.com
            </a>
            {/* <span className="flex items-center gap-2">
              <Phone className="w-4 h-4" />
              +1 814-673-1843
            </span> */}
          </div>
          <ul className="flex items-center space-x-6">
            {fastLinks.map((link) => (
              <li key={link.path}>
                <a
                  href={link.path}
                  className="flex items-center gap-2 text-gray-400 hover:text-blue-500 transition-colors duration-200"
                >
                  <link.icon className="w-4 h-4" />
                  <span className="text-sm">{link.title}</span>
                  <ExternalLink className="w-3 h-3" />
                </a>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
};

const NavBar = () => {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [isScrolled, setIsScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 20);
    };

    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  useEffect(() => {
    if (isMobileMenuOpen) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "unset";
    }
    return () => {
      document.body.style.overflow = "unset";
    };
  }, [isMobileMenuOpen]);

  return (
    <nav
      className={`sticky top-0 z-50 bg-slate-900 text-white py-4 border-b border-gray-900 transition-all duration-200 ${
        isScrolled ? "shadow-xl" : ""
      }`}
    >
      <div className="container max-w-screen-xl mx-auto px-4">
        <div className="flex items-center justify-between">
          <a href="/" className="flex items-center gap-2">
            {/* <img
              src="https://placehold.co/32x32"
              alt="GameZone Logo"
              className="w-8 h-8 rounded-md"
            /> */}
            <h1 className="text-xl md:text-2xl font-bold">
              <span className="text-blue-500">Skylink </span>
              <span className="text-white">Hosting</span>
            </h1>
          </a>

          <div className="flex items-center gap-4">
            {/* Desktop Navigation */}
            <ul className="hidden lg:flex items-center space-x-8">
              {navLinks.map((link) => (
                <li key={link.path}>
                  <a
                    href={link.path}
                    className="text-lg font-semibold text-gray-300 hover:text-blue-500 transition-colors duration-200"
                  >
                    {link.title}
                  </a>
                </li>
              ))}
            </ul>

            <div className="hidden lg:flex items-center ml-3">
              <a
                href="https://billing.skylinkhosting.com/clientarea.php"
                className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md font-medium transition-all duration-200"
              >
                Client Area
              </a>
            </div>

            {/* Mobile Menu Button */}
            <button
              className="lg:hidden p-2 bg-slate-950 rounded-md border border-gray-900 hover:border-blue-500 transition-all duration-200"
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
              aria-label="Toggle menu"
            >
              {isMobileMenuOpen ? (
                <X className="w-6 h-6 text-gray-400" />
              ) : (
                <Menu className="w-6 h-6 text-gray-400" />
              )}
            </button>
          </div>
        </div>

        {/* Mobile Menu */}
        <div
          className={`lg:hidden fixed inset-0 bg-gray-900 transition-all duration-300 z-50 overflow-y-auto ${
            isMobileMenuOpen ? "opacity-100 visible" : "opacity-0 invisible"
          }`}
          style={{ marginTop: "73px" }}
        >
          <div className="container mx-auto px-4 py-4">
            {/* Main Navigation */}
            <div className="mb-4">
              <ul className="space-y-1">
                {navLinks.map((link) => (
                  <li key={link.path}>
                    <a
                      href={link.path}
                      className="flex items-center justify-between p-3 bg-slate-950 rounded-lg border border-gray-900 hover:border-blue-500 transition-all duration-200"
                      onClick={() => setIsMobileMenuOpen(false)}
                    >
                      <span className="text-lg font-medium text-gray-300">
                        {link.title}
                      </span>
                      <ArrowRight className="w-5 h-5 text-gray-400" />
                    </a>
                  </li>
                ))}
              </ul>
            </div>

            {/* Quick Access */}
            <div className="mb-4">
              <h3 className="text-sm font-medium text-gray-400 mb-2 px-1">
                Quick Access
              </h3>
              <div className="grid grid-cols-2 gap-2">
                {fastLinks.map((link) => (
                  <a
                    key={link.title}
                    href={link.path}
                    className="flex items-center gap-2 p-3 bg-slate-950 rounded-lg border border-gray-900 hover:border-blue-500 transition-all duration-200"
                    onClick={() => setIsMobileMenuOpen(false)}
                  >
                    <link.icon className="w-5 h-5 text-blue-500" />
                    <span className="text-gray-300 font-medium">
                      {link.title}
                    </span>
                  </a>
                ))}
              </div>
            </div>

            {/* Contact Section */}
            <div className="space-y-1 mb-4">
              <h3 className="text-sm font-medium text-gray-400 mb-2 px-1">
                Contact Us
              </h3>
              <a
                href="mailto:support@skylinkhosting.com"
                className="flex items-center gap-2 p-3 bg-slate-950 rounded-lg border border-gray-900 hover:border-blue-500 transition-all duration-200"
              >
                <Mail className="w-5 h-5 text-blue-500" />
                <span className="text-gray-300">support@skylinkhosting.com</span>
              </a>
              {/* <a
                href="tel:1-814-673-1843"
                className="flex items-center gap-2 p-3 bg-slate-950 rounded-lg border border-gray-900 hover:border-blue-500 transition-all duration-200"
              >
                <Phone className="w-5 h-5 text-blue-500" />
                <span className="text-gray-300">+1 814-673-1843</span>
              </a> */}
            </div>

            {/* Client Area Button */}
            <a
              href="https://billing.skylinkhosting.com"
              className="block w-full bg-blue-600 hover:bg-blue-700 text-white p-3 rounded-lg text-center font-medium transition-all duration-200 border border-transparent hover:border-blue-500"
              onClick={() => setIsMobileMenuOpen(false)}
            >
              Client Area
            </a>
          </div>
        </div>
      </div>
    </nav>
  );
};

const Footer = () => {
  const currentYear = new Date().getFullYear();

  return (
    <footer className="bg-slate-900 text-white">
      <div className="container mx-auto max-w-screen-xl px-4 py-24">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          {/* Company Info */}
          <div>
            <div className="flex items-center gap-2 mb-6">
              {/* <img
                src="https://placehold.co/32x32"
                alt="GameZone Logo"
                className="w-8 h-8 rounded-md"
              /> */}
              <span className="text-xl font-bold">
                <span className="text-blue-500">Skylink </span>
                <span className="text-white">Hosting</span>
              </span>
            </div>
            <p className="text-gray-400 mb-4">
              Premium game hosting solutions with enterprise-grade
              infrastructure and 24/7 support.
            </p>
            <div className="flex gap-4">
              {socialLinks.map((social, index) => (
                <a
                  key={index}
                  href={social.href}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="bg-slate-950 p-2 rounded-md border border-gray-900"
                  aria-label={social.label}
                >
                  <social.icon className="w-5 h-5 text-gray-400" />
                </a>
              ))}
            </div>
          </div>

          {/* Company Links */}
          <div>
            <h3 className="text-lg font-semibold text-white mb-4">Company</h3>
            <ul className="space-y-2">
              {companyLinks.map((link, index) => (
                <li key={index}>
                  <a
                    href={link.href}
                    className="text-gray-400 hover:text-blue-500 transition-colors duration-200"
                  >
                    {link.label}
                  </a>
                </li>
              ))}
            </ul>
          </div>

          {/* Support Links */}
          <div>
            <h3 className="text-lg font-semibold text-white mb-4">Support</h3>
            <ul className="space-y-2">
              {supportLinks.map((link, index) => (
                <li key={index}>
                  <a
                    href={link.href}
                    className="text-gray-400 hover:text-blue-500 transition-colors duration-200"
                  >
                    {link.label}
                  </a>
                </li>
              ))}
            </ul>
          </div>

          {/* Contact Info */}
          <div>
            <h3 className="text-lg font-semibold text-white mb-4">
              Contact Us
            </h3>
            <div className="space-y-3">
              {contactLinks.map((contact, index) => {
                const ContactWrapper = contact.href ? "a" : "div";
                return (
                  <ContactWrapper
                    key={index}
                    href={contact.href}
                    className="flex items-center gap-2 text-gray-400 hover:text-blue-500 transition-colors duration-200"
                  >
                    <contact.icon className="w-4 h-4 text-blue-500" />
                    <span>{contact.label}</span>
                  </ContactWrapper>
                );
              })}
            </div>
          </div>
        </div>

        {/* Bottom Bar */}
        <div className="mt-12 pt-8 border-t border-gray-900">
          <div className="flex flex-col md:flex-row justify-between items-center gap-4">
            <div className="text-gray-400 text-sm">
              © {currentYear} Skylink Hosting LLC. All rights reserved.
            </div>
            <div className="flex flex-wrap justify-center gap-6">
              {legalLinks.map((link, index) => (
                <a
                  key={index}
                  href={link.href}
                  className="text-sm text-gray-400 hover:text-blue-500 transition-colors duration-200"
                >
                  {link.label}
                </a>
              ))}
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
};

const ScrollToTop = () => {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const toggleVisibility = () => {
      if (window.pageYOffset > 300) {
        setIsVisible(true);
      } else {
        setIsVisible(false);
      }
    };

    window.addEventListener("scroll", toggleVisibility);
    return () => window.removeEventListener("scroll", toggleVisibility);
  }, []);

  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth",
    });
  };

  return isVisible ? (
    <button
      onClick={scrollToTop}
      className="fixed bottom-6 right-6 p-3 bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-all duration-200"
      aria-label="Scroll to top"
    >
      <ArrowUp className="w-6 h-6" />
    </button>
  ) : null;
};

export const Layout = ({ children }) => {
  return (
    <div className="min-h-screen bg-gray-900 flex flex-col">
      <FastLinks />
      <NavBar />
      <main className="flex-grow">{children}</main>
      <PromoPopup />
      <ScrollToTop />
      <Footer />
    </div>
  );
};

export default Layout;
