"use client";

import Link from "next/link";

export default function Footer() {
  return (
    <footer className="bg-[#0a0a0a] pt-32 pb-12 border-t border-white/5 px-6">
      <div className="max-w-7xl mx-auto grid md:grid-cols-4 gap-16 lg:gap-20 mb-20">
        
        {/* Brand Column */}
        <div className="col-span-1 md:col-span-1">
          <Link href="/" className="inline-block mb-8 transition-transform hover:scale-105">
            <img src="/image/banner.png" alt="HotHost Logo" className="h-10 w-auto" />
          </Link>
          <p className="text-gray-500 text-sm leading-relaxed">
            Premium infrastructure designed for gaming communities. Powered by Ryzen 7 performance and 24/7 expert support.
          </p>
        </div>

        {/* Links Columns */}
        <div>
          <h4 className="font-black text-[10px] uppercase tracking-[0.4em] mb-10 text-[#6c63ff]">Explore</h4>
          <div className="flex flex-col gap-4 text-gray-500 text-sm font-bold uppercase tracking-widest">
            <Link href="/minecraft" className="hover:text-white transition-colors">Minecraft</Link>
            <Link href="/discord" className="hover:text-white transition-colors">Discord Bot</Link>
            <Link href="/hytale" className="hover:text-white transition-colors">Hytale</Link>
          </div>
        </div>

        <div>
          <h4 className="font-bold text-[10px] uppercase tracking-[0.4em] mb-10 text-[#6c63ff]">Legal</h4>
          <div className="flex flex-col gap-4 text-gray-500 text-sm font-bold uppercase tracking-widest">
            <Link href="/terms" className="hover:text-white transition-colors">Terms of Service</Link>
            <Link href="/refund" className="hover:text-white transition-colors">Rufund Policy</Link>
          </div>
        </div>

        <div>
          <h4 className="font-bold text-[10px] uppercase tracking-[0.4em] mb-10 text-[#6c63ff]">Support</h4>
          <p className="text-gray-400 font-mono text-sm">info@hothost.org</p>
          <div className="mt-4 flex items-center gap-2 text-[10px] text-gray-600 font-bold uppercase tracking-widest">
             <i className="fas fa-circle text-success text-[6px]"></i> Global Infrastructure
          </div>
        </div>

      </div>

      <div className="max-w-7xl mx-auto pt-8 border-t border-white/5 text-center text-[10px] text-gray-600 uppercase tracking-widest font-bold">
        © 2026 HotHost Global. All rights reserved.
      </div>
    </footer>
  );
}