got-gaming/components/EventsPageSection.tsx

"use client";

interface Event {
  id: number;
  date: string;
  name: string;
  description: string;
  type: "summit" | "launch" | "festival" | "competition";
  status: "upcoming" | "live" | "past";
}

const events: Event[] = [
  {
    id: 1,
    date: "18 NOVEMBRE 2023",
    name: "Sommet de l'Innovation Tech",
    description:
      "Rejoignez les leaders de l'industrie et les innovateurs pour une journée de discussions sur les technologies de pointe, les percées de l'IA et des opportunités de networking.",
    type: "summit",
    status: "past",
  },
  {
    id: 2,
    date: "3 DÉCEMBRE 2023",
    name: "Lancement de la Révolution IA",
    description:
      "Assistez au lancement de systèmes d'IA révolutionnaires qui vont remodeler le paysage du gaming. Aperçus exclusifs et opportunités d'accès anticipé.",
    type: "launch",
    status: "past",
  },
  {
    id: 3,
    date: "22 DÉCEMBRE 2023",
    name: "Festival du Code d'Hiver",
    description:
      "Une célébration de l'excellence en programmation avec des hackathons, des défis de codage et des prix. Montrez vos compétences et rivalisez avec les meilleurs développeurs.",
    type: "festival",
    status: "past",
  },
  {
    id: 4,
    date: "15 JANVIER 2024",
    name: "Expo Informatique Quantique",
    description:
      "Explorez l'avenir de l'informatique quantique dans le gaming. Démonstrations interactives, conférences d'experts et ateliers pratiques pour tous les niveaux.",
    type: "summit",
    status: "upcoming",
  },
  {
    id: 5,
    date: "8 FÉVRIER 2024",
    name: "Championnat Cyber Arena",
    description:
      "L'événement de gaming compétitif ultime. Compétissez pour la gloire, des récompenses exclusives et le titre de Champion Cyber Arena. Inscriptions ouvertes.",
    type: "competition",
    status: "upcoming",
  },
  {
    id: 6,
    date: "12 MARS 2024",
    name: "Gala Tech du Printemps",
    description:
      "Une soirée élégante célébrant les réalisations technologiques. Cérémonie de remise de prix, networking et annonces exclusives des plus grandes entreprises tech.",
    type: "festival",
    status: "upcoming",
  },
];

const getEventTypeColor = (type: Event["type"]) => {
  switch (type) {
    case "summit":
      return "from-blue-600 to-cyan-500";
    case "launch":
      return "from-purple-600 to-pink-500";
    case "festival":
      return "from-pixel-gold to-orange-500";
    case "competition":
      return "from-red-600 to-orange-500";
    default:
      return "from-gray-600 to-gray-500";
  }
};

const getEventTypeLabel = (type: Event["type"]) => {
  switch (type) {
    case "summit":
      return "Sommet";
    case "launch":
      return "Lancement";
    case "festival":
      return "Festival";
    case "competition":
      return "Compétition";
    default:
      return type;
  }
};

const getStatusBadge = (status: Event["status"]) => {
  switch (status) {
    case "upcoming":
      return (
        <span className="px-3 py-1 bg-green-900/50 border border-green-500/50 text-green-400 text-xs uppercase tracking-widest rounded">
          À venir
        </span>
      );
    case "live":
      return (
        <span className="px-3 py-1 bg-red-900/50 border border-red-500/50 text-red-400 text-xs uppercase tracking-widest rounded animate-pulse">
          En direct
        </span>
      );
    case "past":
      return (
        <span className="px-3 py-1 bg-gray-800/50 border border-gray-600/50 text-gray-400 text-xs uppercase tracking-widest rounded">
          Passé
        </span>
      );
  }
};

export default function EventsPageSection() {
  return (
    <section className="relative w-full min-h-screen flex flex-col items-center justify-center overflow-hidden pt-24 pb-16">
      {/* Background Image */}
      <div
        className="absolute inset-0 bg-cover bg-center bg-no-repeat"
        style={{
          backgroundImage: `url('/got-2.jpg')`,
        }}
      >
        {/* Dark overlay for readability */}
        <div className="absolute inset-0 bg-gradient-to-b from-black/70 via-black/60 to-black/80"></div>
      </div>

      {/* Content */}
      <div className="relative z-10 w-full max-w-6xl mx-auto px-8 py-16">
        {/* Title Section */}
        <div className="text-center mb-16">
          <h1 className="text-5xl md:text-7xl font-gaming font-black mb-4 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)",
              }}
            >
              EVENTS
            </span>
          </h1>
          <div className="text-pixel-gold text-lg md:text-xl font-gaming-subtitle font-semibold flex items-center justify-center gap-2 mb-6 tracking-wide">
            <span>✦</span>
            <span>Événements à venir et passés</span>
            <span>✦</span>
          </div>
          <p className="text-gray-400 text-sm max-w-2xl mx-auto">
            Rejoignez-nous pour des événements tech passionnants, des
            compétitions et des célébrations tout au long de l'année
          </p>
        </div>

        {/* Events Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {events.map((event) => (
            <div
              key={event.id}
              className="bg-black/60 border border-pixel-gold/30 rounded-lg overflow-hidden backdrop-blur-sm hover:border-pixel-gold/50 transition group"
            >
              {/* Event Header */}
              <div
                className={`h-2 bg-gradient-to-r ${getEventTypeColor(
                  event.type
                )}`}
              ></div>

              {/* Event Content */}
              <div className="p-6">
                {/* Status Badge */}
                <div className="flex justify-between items-start mb-4">
                  {getStatusBadge(event.status)}
                  <span className="text-pixel-gold text-xs uppercase tracking-widest">
                    {getEventTypeLabel(event.type)}
                  </span>
                </div>

                {/* Date */}
                <div className="text-white text-sm font-bold uppercase tracking-widest mb-3">
                  {event.date}
                </div>

                {/* Event Name */}
                <h3 className="text-xl font-bold text-white mb-3 group-hover:text-pixel-gold transition">
                  {event.name}
                </h3>

                {/* Description */}
                <p className="text-gray-400 text-sm leading-relaxed mb-4">
                  {event.description}
                </p>

                {/* Action Button */}
                {event.status === "upcoming" && (
                  <button className="w-full px-4 py-2 border border-pixel-gold/50 bg-black/40 text-white uppercase text-xs tracking-widest rounded hover:bg-pixel-gold/10 hover:border-pixel-gold transition">
                    S'inscrire maintenant
                  </button>
                )}
                {event.status === "live" && (
                  <button className="w-full px-4 py-2 border border-red-500/50 bg-red-900/20 text-red-400 uppercase text-xs tracking-widest rounded hover:bg-red-900/30 transition animate-pulse">
                    Rejoindre en direct
                  </button>
                )}
                {event.status === "past" && (
                  <button className="w-full px-4 py-2 border border-gray-600/50 bg-gray-900/20 text-gray-500 uppercase text-xs tracking-widest rounded cursor-not-allowed">
                    Événement terminé
                  </button>
                )}
              </div>
            </div>
          ))}
        </div>

        {/* Footer Info */}
        <div className="mt-12 text-center">
          <p className="text-gray-500 text-sm">
            Restez informé de nos derniers événements et annonces
          </p>
        </div>
      </div>
    </section>
  );
}