"use client"

export default function TestTailwind() {
  return (
    <div className="min-h-screen bg-gray-100 p-8">
      <div className="max-w-2xl mx-auto">
        <h1 className="text-4xl font-bold text-blue-600 mb-8">Test Tailwind CSS v4</h1>
        
        <div className="space-y-6">
          {/* Test des couleurs de base */}
          <div className="bg-white p-6 rounded-lg shadow-lg">
            <h2 className="text-2xl font-semibold mb-4">Couleurs de base</h2>
            <div className="grid grid-cols-4 gap-4">
              <div className="h-16 bg-red-500 rounded flex items-center justify-center text-white">Red</div>
              <div className="h-16 bg-blue-500 rounded flex items-center justify-center text-white">Blue</div>
              <div className="h-16 bg-green-500 rounded flex items-center justify-center text-white">Green</div>
              <div className="h-16 bg-yellow-500 rounded flex items-center justify-center text-black">Yellow</div>
            </div>
          </div>

          {/* Test des espacements */}
          <div className="bg-white p-6 rounded-lg shadow-lg">
            <h2 className="text-2xl font-semibold mb-4">Espacements</h2>
            <div className="space-y-2">
              <div className="p-2 bg-gray-200">p-2</div>
              <div className="p-4 bg-gray-300">p-4</div>
              <div className="p-6 bg-gray-400">p-6</div>
            </div>
          </div>

          {/* Test des couleurs personnalisées */}
          <div className="bg-white p-6 rounded-lg shadow-lg">
            <h2 className="text-2xl font-semibold mb-4">Couleurs personnalisées Banquise</h2>
            <div className="space-y-2">
              <div className="text-banquise-blue p-2">Texte banquise-blue</div>
              <div className="bg-banquise-blue text-white p-2 rounded">Background banquise-blue</div>
              <div className="text-banquise-blue-dark p-2">Texte banquise-blue-dark</div>
              <div className="bg-banquise-blue-dark text-white p-2 rounded">Background banquise-blue-dark</div>
            </div>
          </div>

          {/* Test des animations */}
          <div className="bg-white p-6 rounded-lg shadow-lg">
            <h2 className="text-2xl font-semibold mb-4">Animations</h2>
            <div className="space-y-4">
              <div className="animate-pulse bg-blue-200 p-4 rounded">Pulse animation</div>
              <div className="animate-bounce bg-green-200 p-4 rounded inline-block">Bounce animation</div>
              <div className="animate-gentle-float bg-yellow-200 p-4 rounded inline-block">Custom gentle float</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}