'use client';

import type { Metadata } from "next";
import Link from "next/link";
import { useState } from "react";

interface Winner {
  date: string;
  name: string;
  prize: string;
  prizeType: 'coffret-prestige' | 'boite-signature' | 'infuseur' | 'coffret-decouverte' | 'boite-detox';
  boutique: string;
  city: string;
  testimonial?: {
    initials: string;
    text: string;
    stars: number;
  };
}

const winners: Winner[] = [
  {
    date: "15 janvier 2024",
    name: "Marie L.",
    prize: "Coffret prestige 69€",
    prizeType: "coffret-prestige",
    boutique: "Boutique Rivoli",
    city: "Paris 1er"
  },
  {
    date: "15 janvier 2024",
    name: "Pierre L.",
    prize: "Boîte 100g thé signature",
    prizeType: "boite-signature",
    boutique: "Boutique République",
    city: "Lyon"
  },
  {
    date: "14 janvier 2024",
    name: "Sophie L.",
    prize: "Infuseur à thé premium",
    prizeType: "infuseur",
    boutique: "Boutique Canebière",
    city: "Marseille"
  },
  {
    date: "14 janvier 2024",
    name: "Thomas L.",
    prize: "Coffret découverte 39€",
    prizeType: "coffret-decouverte",
    boutique: "Boutique Saint-Germain",
    city: "Paris 6e"
  },
  {
    date: "13 janvier 2024",
    name: "Julie L.",
    prize: "Boîte 100g thé détox",
    prizeType: "boite-detox",
    boutique: "Boutique Capitole",
    city: "Toulouse"
  },
  {
    date: "13 janvier 2024",
    name: "Antoine L.",
    prize: "Infuseur à thé premium",
    prizeType: "infuseur",
    boutique: "Boutique Promenade",
    city: "Nice"
  },
  {
    date: "12 janvier 2024",
    name: "Camille L.",
    prize: "Boîte 100g thé signature",
    prizeType: "boite-signature",
    boutique: "Boutique Sainte-Catherine",
    city: "Bordeaux"
  },
  {
    date: "12 janvier 2024",
    name: "Maxime L.",
    prize: "Infuseur à thé premium",
    prizeType: "infuseur",
    boutique: "Boutique Kléber",
    city: "Strasbourg"
  },
  {
    date: "11 janvier 2024",
    name: "Emma L.",
    prize: "Coffret prestige 69€",
    prizeType: "coffret-prestige",
    boutique: "Boutique Vieux-Lille",
    city: "Lille"
  },
  {
    date: "11 janvier 2024",
    name: "Lucas L.",
    prize: "Boîte 100g thé détox",
    prizeType: "boite-detox",
    boutique: "Boutique Commerce",
    city: "Nantes"
  },
];

const testimonials = [
  {
    initials: "ML",
    name: "Marie L.",
    city: "Paris 9e",
    text: "J'ai gagné le coffret prestige ! Les thés sont délicieux, merci Thé Tip Top pour cette belle surprise !",
    stars: 5
  },
  {
    initials: "PD",
    name: "Pierre D.",
    city: "Lyon",
    text: "Le thé signature est exceptionnel ! Je recommande vivement cette boutique, et le jeu est super !",
    stars: 5
  },
  {
    initials: "SB",
    name: "Sophie B.",
    city: "Marseille",
    text: "Mon infuseur est magnifique ! Parfait pour mes thés du matin. Merci pour ce jeu génial !",
    stars: 5
  }
];

const getPrizeIcon = (type: string) => {
  switch (type) {
    case 'coffret-prestige':
      return '🎁';
    case 'boite-signature':
      return '🌿';
    case 'infuseur':
      return '🍵';
    case 'coffret-decouverte':
      return '🎁';
    case 'boite-detox':
      return '📦';
    default:
      return '🎁';
  }
};

const getPrizeColor = (type: string) => {
  switch (type) {
    case 'coffret-prestige':
      return 'bg-pink-100 text-pink-700';
    case 'boite-signature':
      return 'bg-yellow-100 text-yellow-700';
    case 'infuseur':
      return 'bg-blue-100 text-blue-700';
    case 'coffret-decouverte':
      return 'bg-orange-100 text-orange-700';
    case 'boite-detox':
      return 'bg-green-100 text-green-700';
    default:
      return 'bg-gray-100 text-gray-700';
  }
};

export default function AboutPage() {
  const [periodFilter, setPeriodFilter] = useState("Toutes les dates");
  const [typeFilter, setTypeFilter] = useState("Tous les lots");

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Hero Section */}
      <section className="bg-white py-12">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto text-center">
            <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
              Nos gagnants
            </h1>
            <p className="text-lg text-gray-600">
              Découvrez les heureux gagnants de notre jeu-concours Thé Tip Top.
              Félicitations à tous les participants !
            </p>
          </div>
        </div>
      </section>

      {/* Stats Section */}
      <section className="py-8">
        <div className="container mx-auto px-4">
          <div className="max-w-5xl mx-auto">
            <div className="grid md:grid-cols-3 gap-6">
              {/* Stat 1 */}
              <div className="bg-white rounded-xl shadow-md p-6 text-center">
                <div className="text-4xl font-bold text-[#1a4d2e] mb-2">10</div>
                <div className="text-gray-900 font-semibold mb-1">Gagnants au total</div>
                <div className="text-sm text-gray-500">Depuis le début du jeu</div>
              </div>

              {/* Stat 2 */}
              <div className="bg-white rounded-xl shadow-md p-6 text-center">
                <div className="text-4xl font-bold text-[#1a4d2e] mb-2">5</div>
                <div className="text-gray-900 font-semibold mb-1">Jours d'activité</div>
                <div className="text-sm text-gray-500">Jours avec des gagnants</div>
              </div>

              {/* Stat 3 */}
              <div className="bg-white rounded-xl shadow-md p-6 text-center">
                <div className="text-4xl font-bold text-[#1a4d2e] mb-2">10</div>
                <div className="text-gray-900 font-semibold mb-1">Villes représentées</div>
                <div className="text-sm text-gray-500">Dans toute la France</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Winners List */}
      <section className="py-8 pb-16">
        <div className="container mx-auto px-4">
          <div className="max-w-5xl mx-auto">
            <div className="bg-white rounded-xl shadow-md overflow-hidden">
              <div className="p-6 border-b border-gray-200">
                <div className="flex items-center gap-2">
                  <span className="text-xl">🏆</span>
                  <h2 className="text-xl font-bold text-gray-900">Liste des gagnants ({winners.length})</h2>
                </div>
              </div>

              {/* Table Header */}
              <div className="hidden md:grid md:grid-cols-4 gap-4 px-6 py-4 bg-gray-50 border-b border-gray-200 text-sm font-semibold text-gray-700">
                <div>DATE</div>
                <div>GAGNANT</div>
                <div>LOT REMPORTÉ</div>
                <div>BOUTIQUE</div>
              </div>

              {/* Table Rows */}
              <div className="divide-y divide-gray-200">
                {winners.map((winner, index) => (
                  <div key={index} className="px-6 py-4 hover:bg-gray-50 transition-colors">
                    <div className="grid md:grid-cols-4 gap-4 items-center">
                      {/* Date */}
                      <div className="flex items-center gap-2">
                        <span className="text-gray-400 md:hidden font-semibold">📅</span>
                        <span className="text-gray-600">{winner.date}</span>
                      </div>

                      {/* Name */}
                      <div className="flex items-center gap-2">
                        <span className="text-gray-400 md:hidden font-semibold">👤</span>
                        <span className="font-medium text-gray-900">{winner.name}</span>
                      </div>

                      {/* Prize */}
                      <div>
                        <span className={`inline-flex items-center gap-2 px-3 py-1 rounded-full text-sm font-medium ${getPrizeColor(winner.prizeType)}`}>
                          <span>{getPrizeIcon(winner.prizeType)}</span>
                          <span>{winner.prize}</span>
                        </span>
                      </div>

                      {/* Boutique */}
                      <div className="flex items-center gap-2">
                        <span className="text-gray-400 md:hidden font-semibold">🏪</span>
                        <div>
                          <div className="font-medium text-gray-900">{winner.boutique}</div>
                          <div className="text-sm text-gray-500">{winner.city}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Testimonials Section */}
      <section className="pb-16">
        <div className="container mx-auto px-4">
          <div className="max-w-5xl mx-auto">
            <h2 className="text-2xl font-bold text-gray-900 mb-8 text-center">Témoignages de nos gagnants</h2>
            <div className="grid md:grid-cols-3 gap-6">
              {testimonials.map((testimonial, index) => (
                <div key={index} className="bg-white rounded-xl shadow-md p-6">
                  <div className="flex items-center gap-3 mb-4">
                    <div className="w-12 h-12 bg-[#1a4d2e] text-white rounded-full flex items-center justify-center font-bold">
                      {testimonial.initials}
                    </div>
                    <div>
                      <div className="font-semibold text-gray-900">{testimonial.name}</div>
                      <div className="text-sm text-gray-500">{testimonial.city}</div>
                    </div>
                  </div>
                  <p className="text-gray-600 text-sm mb-3 italic">"{testimonial.text}"</p>
                  <div className="flex gap-1">
                    {[...Array(testimonial.stars)].map((_, i) => (
                      <span key={i} className="text-yellow-400">⭐</span>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="pb-16">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <div className="bg-gradient-to-br from-[#1a4d2e] via-[#2d5a3d] to-[#1a4d2e] rounded-xl p-12 text-center text-white">
              <h2 className="text-3xl md:text-4xl font-bold mb-4">
                Vous aussi, rejoignez nos gagnants !
              </h2>
              <p className="text-xl mb-8 text-white/90 max-w-2xl mx-auto">
                Avec 100% de gagnants garantis, c'est votre tour de remporter un magnifique lot.
                Rendez-vous en boutique et tentez votre chance !
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <Link
                  href="/register"
                  className="inline-flex items-center justify-center bg-[#f59e0b] hover:bg-[#d97706] text-white font-bold px-8 py-4 rounded-lg transition-all shadow-xl"
                >
                  ⭐ Participer maintenant
                </Link>
                <Link
                  href="/lots"
                  className="inline-flex items-center justify-center bg-white hover:bg-gray-100 text-[#1a4d2e] font-bold px-8 py-4 rounded-lg transition-all"
                >
                  Voir les lots
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}