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&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>
  );
}