export default function GameCenter() {
  const items = [
    "Slots",
    "Live Casino",
    "Poker",
    "Fish",
    "Sports",
    "E-sports",
    "Lottery",
  ];

  return (
    <section className="w-full px-4 py-3">
      
      {/* TITLE */}
      <h2 className="text-[#ffb100] text-[26px] sm:text-[28px] font-black mb-3 tracking-wide">
        Game Center
      </h2>

      {/* GRID */}
      <div className="flex flex-wrap gap-2">

        {items.map((item) => (
          <a
            key={item}
            href="#"
            className="
              inline-flex items-center justify-center
              px-3 py-2 sm:px-4 sm:py-2.5
              rounded-[6px]
              border-[1.5px] border-[#2ef0c9]/45
              bg-black/10
              text-[#2ef0c9]
              font-extrabold
              text-[17px] sm:text-[18px]
              leading-none
              shadow-[inset_0_1px_0_rgba(255,255,255,0.06)]
              active:translate-y-[1px]
              transition
              select-none
            "
          >
            {item}
          </a>
        ))}

      </div>
    </section>
  );
}