"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 z-[1]"></div>
      </div>

      {/* Hero Content */}
      <div className="relative z-10 w-full max-w-5xl xl:max-w-6xl mx-auto px-4 sm:px-8 py-16 text-center flex flex-col items-center">
        {/* Game Title */}
        <div className="w-full flex justify-center mb-4 overflow-hidden">
          <h1 className="text-4xl sm:text-5xl md:text-8xl lg:text-9xl xl:text-9xl font-gaming font-black tracking-tight relative break-words">
            <span
              className="title-animated inline-block relative z-10"
              style={{
                backgroundImage: `linear-gradient(90deg, #daa520 0%, #ffa500 30%, #ff8c00 50%, #ffa500 70%, #daa520 100%)`,
                backgroundSize: "200% auto",
                WebkitBackgroundClip: "text",
                WebkitTextFillColor: "transparent",
                backgroundClip: "text",
                color: "transparent",
                filter: `drop-shadow(0 0 12px rgba(255, 140, 0, 0.4))`,
              }}
            >
              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&apos;IA évoluent et où d&apos;anciens codes attendent d&apos;être
          découverts. Partez pour un voyage épique pour forger des alliances,
          conquérir des défis et raconter votre histoire d&apos;innovation au
          sein d&apos;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>
    </section>
  );
}