export default function TestColors() {
  return (
    <div className="min-h-screen bg-banquise-slate-50">
      {/* Header avec gradient moderne */}
      <div className="bg-gradient-banquise-nav text-white p-8 mb-8">
        <h1 className="text-4xl font-bold mb-4">Nouvelle Palette Banquise</h1>
        <p className="text-banquise-blue-200 text-lg">Design professionnel et harmonieux</p>
      </div>

      <div className="max-w-6xl mx-auto p-8 space-y-12">
        
        {/* Palette Bleus */}
        <section>
          <h2 className="text-2xl font-bold text-banquise-blue-900 mb-6">Palette Bleus Principaux</h2>
          <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
            <div className="bg-banquise-blue-900 text-white p-4 rounded-lg text-center">
              <div className="font-bold">900</div>
              <div className="text-sm">#0f2a3d</div>
              <div className="text-xs mt-2">Headers foncés</div>
            </div>
            <div className="bg-banquise-blue-800 text-white p-4 rounded-lg text-center">
              <div className="font-bold">800</div>
              <div className="text-sm">#1f5078</div>
              <div className="text-xs mt-2">Navigation</div>
            </div>
            <div className="bg-banquise-blue-600 text-white p-4 rounded-lg text-center">
              <div className="font-bold">600</div>
              <div className="text-sm">#34a6fc</div>
              <div className="text-xs mt-2">Boutons primaires</div>
            </div>
            <div className="bg-banquise-blue-400 text-white p-4 rounded-lg text-center">
              <div className="font-bold">400</div>
              <div className="text-sm">#76beee</div>
              <div className="text-xs mt-2">Liens</div>
            </div>
            <div className="bg-banquise-blue-200 text-banquise-blue-900 p-4 rounded-lg text-center">
              <div className="font-bold">200</div>
              <div className="text-sm">#a0ecf9</div>
              <div className="text-xs mt-2">Accents clairs</div>
            </div>
          </div>
        </section>

        {/* Palette Gris */}
        <section>
          <h2 className="text-2xl font-bold text-banquise-blue-900 mb-6">Palette Gris Harmonieux</h2>
          <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
            <div className="bg-banquise-slate-900 text-white p-4 rounded-lg text-center">
              <div className="font-bold">Slate 900</div>
              <div className="text-sm">#0f172a</div>
              <div className="text-xs mt-2">Texte principal</div>
            </div>
            <div className="bg-banquise-slate-700 text-white p-4 rounded-lg text-center">
              <div className="font-bold">Slate 700</div>
              <div className="text-sm">#334155</div>
              <div className="text-xs mt-2">Texte secondaire</div>
            </div>
            <div className="bg-banquise-slate-300 text-banquise-slate-800 p-4 rounded-lg text-center">
              <div className="font-bold">Slate 300</div>
              <div className="text-sm">#cbd5e1</div>
              <div className="text-xs mt-2">Bordures</div>
            </div>
            <div className="bg-banquise-slate-100 text-banquise-slate-800 p-4 rounded-lg text-center">
              <div className="font-bold">Slate 100</div>
              <div className="text-sm">#f1f5f9</div>
              <div className="text-xs mt-2">Fonds clairs</div>
            </div>
            <div className="bg-banquise-slate-50 text-banquise-slate-800 p-4 rounded-lg text-center border">
              <div className="font-bold">Slate 50</div>
              <div className="text-sm">#f8fafc</div>
              <div className="text-xs mt-2">Fonds de page</div>
            </div>
          </div>
        </section>

        {/* Exemples d'application */}
        <section>
          <h2 className="text-2xl font-bold text-banquise-blue-900 mb-6">Exemples d'Application</h2>
          
          <div className="grid md:grid-cols-2 gap-6">
            {/* Card moderne */}
            <div className="bg-white border border-banquise-slate-200 rounded-xl p-6 shadow-banquise">
              <div className="w-12 h-12 bg-gradient-banquise-primary rounded-lg mb-4 flex items-center justify-center text-white font-bold">
                B
              </div>
              <h3 className="text-lg font-bold text-banquise-blue-900 mb-2">Service Moderne</h3>
              <p className="text-banquise-slate-600 mb-4">Description avec contraste optimal pour la lisibilité.</p>
              <button className="bg-gradient-banquise-primary text-white px-4 py-2 rounded-lg hover:shadow-banquise-lg transition-all">
                Découvrir
              </button>
            </div>

            {/* Card subtile */}
            <div className="bg-gradient-banquise-card border border-banquise-blue-200 rounded-xl p-6">
              <div className="w-12 h-12 bg-banquise-blue-200 rounded-lg mb-4 flex items-center justify-center text-banquise-blue-800 font-bold">
                S
              </div>
              <h3 className="text-lg font-bold text-banquise-blue-800 mb-2">Service Subtil</h3>
              <p className="text-banquise-slate-700 mb-4">Design épuré avec couleurs harmonieuses.</p>
              <button className="bg-banquise-blue-600 text-white px-4 py-2 rounded-lg hover:bg-banquise-blue-700 transition-colors">
                En savoir plus
              </button>
            </div>
          </div>
        </section>

        {/* Navigation exemple */}
        <section>
          <h2 className="text-2xl font-bold text-banquise-blue-900 mb-6">Exemple Navigation</h2>
          <div className="bg-gradient-banquise-nav rounded-xl p-4">
            <div className="flex items-center justify-between">
              <div className="text-white font-bold text-xl">La Banquise</div>
              <div className="flex space-x-6">
                <a href="#" className="text-banquise-blue-200 hover:text-white transition-colors">Accueil</a>
                <a href="#" className="text-banquise-blue-200 hover:text-white transition-colors">Services</a>
                <a href="#" className="text-banquise-blue-200 hover:text-white transition-colors">À propos</a>
              </div>
              <button className="bg-banquise-blue-600 text-white px-4 py-2 rounded-lg hover:bg-banquise-blue-500 transition-colors">
                Contact
              </button>
            </div>
          </div>
        </section>

        <div className="text-center pt-8">
          <a href="/" className="text-banquise-blue-600 hover:text-banquise-blue-800 underline text-lg">
            ← Voir le site avec la nouvelle palette
          </a>
        </div>
      </div>
    </div>
  );
}