got-gaming/components/HeroSection.tsx

"use client";

import { useBackgroundImage } from "@/hooks/usePreferences";
import Link from "next/link";
import { useState, useEffect, useRef } from "react";

export default function HeroSection() {
  const backgroundImage = useBackgroundImage("home", "/got-2.jpg");
  const titleRef = useRef<HTMLSpanElement>(null);
  const [mousePosition, setMousePosition] = useState({ x: 50, y: 50 });

  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      if (titleRef.current) {
        const rect = titleRef.current.getBoundingClientRect();
        const x = ((e.clientX - rect.left) / rect.width) * 100;
        const y = ((e.clientY - rect.top) / rect.height) * 100;
        setMousePosition({
          x: Math.max(0, Math.min(100, x)),
          y: Math.max(0, Math.min(100, y)),
        });
      }
    };

    window.addEventListener("mousemove", handleMouseMove);
    return () => window.removeEventListener("mousemove", handleMouseMove);
  }, []);

  // Calculer la position du gradient basée sur la souris avec plus d'amplitude
  const gradientPosition = mousePosition.x;
  const glowIntensity = 12 + mousePosition.x / 5;
  const glowOpacity = 0.4 + mousePosition.y / 250;

  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-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 relative">
            <span
              ref={titleRef}
              className="title-animated inline-block relative z-10"
              style={{
                backgroundImage: `linear-gradient(90deg, #daa520 0%, #ffa500 ${Math.max(
                  10,
                  gradientPosition - 20
                )}%, #ff8c00 ${gradientPosition}%, #ffa500 ${Math.min(
                  90,
                  gradientPosition + 20
                )}%, #daa520 100%)`,
                backgroundSize: "200% auto",
                WebkitBackgroundClip: "text",
                WebkitTextFillColor: "transparent",
                backgroundClip: "text",
                color: "transparent",
                transition: "background-image 0.15s ease-out",
                filter: `drop-shadow(0 0 ${glowIntensity}px rgba(255, 140, 0, ${glowOpacity}))`,
              }}
            >
              GAME.OF.TECH
            </span>
            {/* Glow effect qui suit la souris */}
            <span
              className="absolute inset-0 pointer-events-none"
              style={{
                backgroundImage: `linear-gradient(90deg, transparent 0%, rgba(255, 140, 0, 0.3) ${gradientPosition}%, transparent 100%)`,
                WebkitBackgroundClip: "text",
                WebkitTextFillColor: "transparent",
                backgroundClip: "text",
                filter: `blur(${10 + mousePosition.x / 20}px)`,
                opacity: 0.5,
                zIndex: 0,
                transition: "all 0.15s ease-out",
              }}
              aria-hidden="true"
            >
              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>
    </section>
  );
}