"use client";

import Link from "next/link";
import { Button, BackgroundSection } from "@/components/ui";

interface HeroSectionProps {
  backgroundImage: string;
}

export default function HeroSection({ backgroundImage }: HeroSectionProps) {
  return (
    <BackgroundSection backgroundImage={backgroundImage} className="pt-24">
      <div className="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 font-gaming"
              style={{
                backgroundImage: `linear-gradient(90deg, var(--accent-color) 0%, var(--accent) 30%, var(--accent) 50%, var(--accent) 70%, var(--accent-color) 100%)`,
                backgroundSize: "200% auto",
                WebkitBackgroundClip: "text",
                WebkitTextFillColor: "transparent",
                backgroundClip: "text",
                color: "transparent",
                filter: `drop-shadow(0 0 12px color-mix(in srgb, var(--accent-color) 40%, transparent))`,
              }}
            >
              GAME.OF.TECH
            </span>
          </h1>
        </div>

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

        {/* Description */}
        <p
          className="text-base md:text-lg max-w-3xl mx-auto mb-12 leading-relaxed px-4"
          style={{ color: "var(--foreground)" }}
        >
          Transformez votre apprentissage en aventure. Participez aux ateliers,
          défiez-vous sur les katas, partagez vos connaissances lors des
          présentations et progressez dans votre parcours tech. Gagnez de
          l&apos;expérience, montez en niveau et affrontez vos collègues sur le
          classement. L&apos;excellence technique, ça se joue.
        </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 variant="primary" size="lg">
              See events
            </Button>
          </Link>
          <Link href="/leaderboard">
            <Button
              variant="primary"
              size="lg"
              className="flex items-center gap-2"
            >
              <span>⏵</span>
              <span>See leaderboard</span>
            </Button>
          </Link>
        </div>
      </div>
    </BackgroundSection>
  );
}