got-gaming/components/EventsPageSection.tsx

"use client";

interface Event {
  id: string;
  date: string;
  name: string;
  description: string;
  type: "SUMMIT" | "LAUNCH" | "FESTIVAL" | "COMPETITION";
  status: "UPCOMING" | "LIVE" | "PAST";
}

interface EventsPageSectionProps {
  events: Event[];
  backgroundImage: string;
}

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({
  events,
  backgroundImage,
}: EventsPageSectionProps) {
  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('${backgroundImage}')`,
        }}
      >
        {/* 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>
  );
}