"use client";

import { useBackgroundImage } from "@/hooks/usePreferences";
import Link from "next/link";

export default function HeroSection() {
  const backgroundImage = useBackgroundImage("home", "/got-2.jpg");

  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('${backgroundImage}')`,
        }}
      >
        {/* 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 xl:max-w-6xl mx-auto px-8 py-16 text-center flex flex-col items-center">
        {/* Game Title */}
        <div className="w-full flex justify-center mb-4">
          <h1 className="text-6xl md:text-8xl lg:text-9xl xl:text-9xl font-gaming font-black 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>
        </div>

        {/* 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">
          Dans un monde numérique de technologie de pointe, où les systèmes d'IA
          évoluent et où d'anciens codes attendent d'être découverts. Partez
          pour un voyage épique pour forger des alliances, conquérir des défis
          et raconter votre histoire d'innovation au sein d'une communauté de
          gaming tech florissante.
        </p>

        {/* Call-to-Action Buttons */}
        <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
          <Link href="/events">
            <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">
              <span>See events</span>
            </button>
          </Link>
          <Link href="/leaderboard">
            <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>See leaderboard</span>
            </button>
          </Link>
        </div>
      </div>

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