the-tip-top-frontend/components/AboutContest.tsx

'use client';

import Image from 'next/image';
import Link from 'next/link';
import Button from './Button';

interface AboutContestProps {
  title?: string;
  description?: string;
  imageUrl?: string;
}

export default function AboutContest({
  title = "Jeu Concours Thé Tip Top - Boutique de Thé Premium à Nice",
  description,
  imageUrl = "/images/tea-collection.jpg",
}: AboutContestProps) {
  const defaultDescription = `
    Bienvenue dans notre grand jeu-concours Thé Tip Top organisé à l'occasion de l'ouverture de notre 10ème boutique de thé premium à Nice.
    Nous vous offrons la chance de gagner des produits exceptionnels : thés bio, accessoires exclusifs et bien plus encore.

    Participez facilement en quelques clics et tentez votre chance parmi nos lots prestigieux.
    Avec 100% de tickets gagnants, chaque participation vous offre la garantie de repartir avec un cadeau !
  `;

  return (
    <section className="py-20 bg-transparent">
      <div className="container mx-auto px-4">
        <div className="max-w-7xl mx-auto">
          <div className="grid md:grid-cols-2 gap-12 items-center">
            {/* Texte */}
            <div className="order-2 md:order-1">
              <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6 leading-tight">
                {title}
              </h2>

              <div className="prose prose-lg text-gray-700 mb-8 space-y-4">
                {(description || defaultDescription).split('\n').filter(p => p.trim()).map((paragraph, index) => (
                  <p key={index} className="leading-relaxed">
                    {paragraph.trim()}
                  </p>
                ))}
              </div>

              {/* Points clés */}
              <div className="space-y-3 mb-8">
                <div className="flex items-start gap-3">
                  <svg className="w-6 h-6 text-[#1a4d2e] flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                  </svg>
                  <span className="text-gray-800">
                    <span className="font-semibold">100% de gagnants :</span> Chaque ticket acheté à 49€ vous fait gagner un lot
                  </span>
                </div>

                <div className="flex items-start gap-3">
                  <svg className="w-6 h-6 text-[#1a4d2e] flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                  </svg>
                  <span className="text-gray-800">
                    <span className="font-semibold">Résultat immédiat :</span> Découvrez instantanément votre lot en ligne
                  </span>
                </div>

                <div className="flex items-start gap-3">
                  <svg className="w-6 h-6 text-[#1a4d2e] flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                  </svg>
                  <span className="text-gray-800">
                    <span className="font-semibold">Thés bio et artisanaux :</span> Tous nos produits sont de qualité premium
                  </span>
                </div>
              </div>

              <Link href="/register">
                <Button
                  size="lg"
                  className="bg-[#1a4d2e] hover:bg-[#2d5a3d] text-white font-bold shadow-xl"
                >
                  En savoir plus
                  <svg className="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
                  </svg>
                </Button>
              </Link>
            </div>

            {/* Image */}
            <div className="order-1 md:order-2">
              <div className="relative rounded-2xl overflow-hidden shadow-2xl">
                {/* Fallback avec illustration CSS si l'image n'existe pas */}
                <div className="aspect-[4/3] bg-gradient-to-br from-[#1a4d2e] via-[#2d5a3d] to-[#1a4d2e] relative">
                  {/* Motif décoratif */}
                  <div className="absolute inset-0 opacity-20">
                    <div className="absolute inset-0" style={{
                      backgroundImage: 'url("data:image/svg+xml,%3Csvg width=\'60\' height=\'60\' viewBox=\'0 0 60 60\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'none\' fill-rule=\'evenodd\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.3\'%3E%3Cpath d=\'M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z\'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")',
                    }}></div>
                  </div>

                  {/* Icône de thé */}
                  <div className="absolute inset-0 flex items-center justify-center">
                    <div className="text-9xl opacity-40">🍵</div>
                  </div>

                  {/* Badges décoratifs */}
                  <div className="absolute top-4 right-4 bg-[#f59e0b] text-white px-4 py-2 rounded-full font-bold shadow-lg">
                    10 ans
                  </div>
                  <div className="absolute bottom-4 left-4 bg-white/90 backdrop-blur-sm text-[#1a4d2e] px-4 py-2 rounded-full font-bold shadow-lg">
                    Premium Bio
                  </div>
                </div>

                {/* Note: Vous pouvez remplacer le div ci-dessus par une vraie image :
                <Image
                  src={imageUrl}
                  alt="Collection de thés Thé Tip Top"
                  width={600}
                  height={450}
                  className="w-full h-full object-cover"
                />
                */}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}