"use client";

import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import hytaleData from "@/components/jsons/hytale.json";

export default function HytalePricing() {
  return (
    <div className="min-h-screen bg-[#060606] text-white selection:bg-[#6c63ff]/30 font-inter">
      <Navbar />

      {/* HEADER */}
      <section className="relative pt-48 pb-12 px-6 max-w-7xl mx-auto text-center">
        <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-[#6c63ff]/10 border border-[#6c63ff]/20 text-[#6c63ff] text-[10px] font-black uppercase tracking-widest mb-8">
          ⚔️ High Performance Nodes
        </div>
        <h1 className="text-5xl lg:text-7xl font-black mb-6 uppercase tracking-tighter">
          Hytale <span className="text-[#6c63ff]">Pricing</span>
        </h1>
        <p className="text-gray-400 max-w-2xl mx-auto text-lg leading-relaxed">
          {hytaleData.description}
        </p>
      </section>

      {/* PACKAGES GRID */}
      <section className="pb-32 px-6 max-w-7xl mx-auto">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {hytaleData.packages.map((pkg) => (
            <div 
              key={pkg.name} 
              className="bg-[#0e0e0e] border border-white/5 p-10 rounded-[3.5rem] flex flex-col justify-between transition-all group relative overflow-hidden"
            >
              {/* Coming Soon Overlay Effect (Optional) */}
              <div className="absolute top-4 right-6">
                <span className="text-[10px] font-black uppercase tracking-[0.2em] text-[#6c63ff] animate-pulse">
                  Coming Soon
                </span>
              </div>

              <div>
                <div className="flex justify-between items-start mb-8">
                  <h3 className="text-3xl font-black uppercase tracking-tighter">{pkg.name}</h3>
                  <div className="text-right">
                    <div className="text-3xl font-black text-[#6c63ff]">
                      {pkg.price}{pkg.price !== "Negotiable" ? "€" : ""}
                    </div>
                    {pkg.price !== "Negotiable" && (
                      <div className="text-[10px] text-gray-500 uppercase font-bold tracking-widest">/ Month</div>
                    )}
                  </div>
                </div>

                <ul className="space-y-4 mb-10 opacity-50 italic">
                  <li className="flex items-center gap-3 text-sm text-gray-400 font-medium">
                    <i className="fas fa-memory text-[#6c63ff] w-5 text-center"></i> RAM: {pkg.memory}
                  </li>
                  <li className="flex items-center gap-3 text-sm text-gray-400 font-medium">
                    <i className="fas fa-hdd text-[#6c63ff] w-5 text-center"></i> Disk: {pkg.disk} NVMe
                  </li>
                  <li className="flex items-center gap-3 text-sm text-gray-400 font-medium">
                    <i className="fas fa-database text-[#6c63ff] w-5 text-center"></i> Databases: {pkg.databases}
                  </li>
                  <li className="flex items-center gap-3 text-sm text-gray-400 font-medium">
                    <i className="fas fa-shield-alt text-[#6c63ff] w-5 text-center"></i> Enterprise DDoS Shield
                  </li>
                </ul>
              </div>

              {/* DISABLED BUTTON WITH COMING SOON TEXT */}
              <button 
                disabled
                className="block w-full text-center bg-white/5 border border-white/10 text-gray-500 py-5 rounded-2xl font-black uppercase tracking-widest text-[11px] cursor-not-allowed"
              >
                Coming Soon
              </button>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}