"use client";

export default function HeroSection() {
  return (
    <section className="relative w-full min-h-screen flex flex-col items-center justify-center overflow-hidden pt-24">
      {/* Background Image */}
      <div
        className="absolute inset-0 bg-cover bg-center bg-no-repeat"
        style={{
          backgroundImage: `url('/got-2.jpg')`,
        }}
      >
        {/* Dark overlay for readability */}
        <div className="absolute inset-0 bg-gradient-to-b from-black/70 via-black/60 to-black/80"></div>
      </div>

      {/* Hero Content */}
      <div className="relative z-10 w-full max-w-5xl mx-auto px-8 py-16 text-center">
        {/* Game Title */}
        <h1 className="text-6xl md:text-8xl lg:text-9xl font-gaming font-black mb-4 tracking-tight">
          <span
            className="bg-gradient-to-r from-pixel-gold via-orange-400 to-pixel-gold bg-clip-text text-transparent"
            style={{
              textShadow: "0 0 30px rgba(218, 165, 32, 0.5)",
            }}
          >
            GAME.OF.TECH
          </span>
        </h1>

        {/* Subtitle */}
        <div className="text-pixel-gold text-xl md:text-2xl font-gaming-subtitle font-semibold flex items-center justify-center gap-2 mb-8 tracking-wider">
          <span>✦</span>
          <span>Peaksys</span>
          <span>✦</span>
        </div>

        {/* Description */}
        <p className="text-white text-base md:text-lg max-w-3xl mx-auto mb-12 leading-relaxed px-4">
          In a digital world of cutting-edge technology, where AI systems are
          evolving and ancient code awaits discovery. Go on an epic journey to
          forge alliances, conquer challenges and tell your story of innovation
          as part of a flourishing tech gaming community.
        </p>

        {/* Call-to-Action Buttons */}
        <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
          <button className="px-8 py-3 border border-pixel-gold/50 bg-black/60 text-white uppercase text-sm tracking-widest rounded hover:bg-pixel-gold/10 hover:border-pixel-gold transition">
            PLAY NOW
          </button>
          <button className="px-8 py-3 border border-pixel-gold/50 bg-black/60 text-white uppercase text-sm tracking-widest rounded hover:bg-pixel-gold/10 hover:border-pixel-gold transition flex items-center gap-2">
            <span>⏵</span>
            <span>Watch Trailer</span>
          </button>
        </div>
      </div>

      <style jsx>{`
        @keyframes float {
          0%,
          100% {
            transform: translateY(0px);
          }
          50% {
            transform: translateY(-20px);
          }
        }
      `}</style>
    </section>
  );
}