"use client";
import React from "react";

function MainComponent() {
  const [activeTab, setActiveTab] = useState("accueil");
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  return (
    <div className="min-h-screen bg-gradient-to-br from-[#f8fafc] to-[#e2e8f0]">
      <nav className="bg-[#1e40af] shadow-lg">
        <div className="max-w-7xl mx-auto px-4">
          <div className="flex justify-between items-center h-16">
            <div className="flex items-center">
              <span className="text-white text-2xl font-roboto font-bold">
                DonAction
              </span>
            </div>

            <div className="hidden md:flex items-center space-x-4">
              <button
                className="text-white hover:text-[#93c5fd] font-roboto"
                onClick={() => setActiveTab("accueil")}
              >
                Accueil
              </button>
              <button
                className="text-white hover:text-[#93c5fd] font-roboto"
                onClick={() => setActiveTab("causes")}
              >
                Causes
              </button>
              <button
                className="text-white hover:text-[#93c5fd] font-roboto"
                onClick={() => setActiveTab("don")}
              >
                Faire un don
              </button>
              <button className="bg-[#22c55e] text-white px-4 py-2 rounded-full hover:bg-[#16a34a] font-roboto">
                Connexion
              </button>
            </div>

            <div className="md:hidden">
              <button
                onClick={() => setIsMenuOpen(!isMenuOpen)}
                className="text-white"
              >
                <i
                  className={`fas ${
                    isMenuOpen ? "fa-times" : "fa-bars"
                  } text-2xl`}
                ></i>
              </button>
            </div>
          </div>
        </div>

        {isMenuOpen && (
          <div className="md:hidden bg-[#1e40af] pb-4 px-4">
            <div className="flex flex-col space-y-2">
              <button
                className="text-white hover:text-[#93c5fd] font-roboto"
                onClick={() => setActiveTab("accueil")}
              >
                Accueil
              </button>
              <button
                className="text-white hover:text-[#93c5fd] font-roboto"
                onClick={() => setActiveTab("causes")}
              >
                Causes
              </button>
              <button
                className="text-white hover:text-[#93c5fd] font-roboto"
                onClick={() => setActiveTab("don")}
              >
                Faire un don
              </button>
              <button className="bg-[#22c55e] text-white px-4 py-2 rounded-full hover:bg-[#16a34a] font-roboto">
                Connexion
              </button>
            </div>
          </div>
        )}
      </nav>

      <main className="max-w-7xl mx-auto px-4 py-8">
        <div className="text-center mb-12">
          <h1 className="text-4xl md:text-6xl font-bold text-[#1e40af] font-roboto mb-4">
            Ensemble, changeons des vies
          </h1>
          <p className="text-lg text-gray-600 font-roboto mb-8">
            Plateforme sécurisée pour soutenir les causes qui vous tiennent à
            cœur
          </p>
          <button className="bg-[#22c55e] text-white px-8 py-4 rounded-full text-lg hover:bg-[#16a34a] font-roboto">
            Commencer à donner
          </button>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
          <div className="bg-white p-6 rounded-lg shadow-lg">
            <i className="fas fa-heart text-[#dc2626] text-3xl mb-4"></i>
            <h3 className="text-xl font-bold mb-2 font-roboto">Don Sécurisé</h3>
            <p className="text-gray-600 font-roboto">
              Vos dons sont protégés par des systèmes de paiement sécurisés
            </p>
          </div>

          <div className="bg-white p-6 rounded-lg shadow-lg">
            <i className="fas fa-globe text-[#2563eb] text-3xl mb-4"></i>
            <h3 className="text-xl font-bold mb-2 font-roboto">
              Impact Global
            </h3>
            <p className="text-gray-600 font-roboto">
              Soutenez des causes partout dans le monde
            </p>
          </div>

          <div className="bg-white p-6 rounded-lg shadow-lg">
            <i className="fas fa-users text-[#7c3aed] text-3xl mb-4"></i>
            <h3 className="text-xl font-bold mb-2 font-roboto">Communauté</h3>
            <p className="text-gray-600 font-roboto">
              Rejoignez une communauté de donateurs engagés
            </p>
          </div>
        </div>

        <div className="bg-white p-8 rounded-lg shadow-lg mb-12">
          <h2 className="text-3xl font-bold mb-6 text-center font-roboto">
            Causes Populaires
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {[1, 2, 3].map((item) => (
              <div key={item} className="border rounded-lg overflow-hidden">
                <img
                  src={`/cause-${item}.jpg`}
                  alt={`Cause caritative ${item}`}
                  className="w-full h-48 object-cover"
                />
                <div className="p-4">
                  <h3 className="font-bold mb-2 font-roboto">
                    Projet Humanitaire
                  </h3>
                  <div className="h-2 bg-gray-200 rounded mb-2">
                    <div
                      className="h-2 bg-[#22c55e] rounded"
                      style={{ width: "70%" }}
                    ></div>
                  </div>
                  <p className="text-sm text-gray-600 font-roboto">
                    15 000 € collectés sur 20 000 €
                  </p>
                  <button className="mt-4 w-full bg-[#1e40af] text-white py-2 rounded hover:bg-[#1e3a8a] font-roboto">
                    Soutenir
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </main>

      <footer className="bg-[#1e40af] text-white py-8">
        <div className="max-w-7xl mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div>
              <h4 className="text-xl font-bold mb-4 font-roboto">DonAction</h4>
              <p className="text-sm font-roboto">
                Ensemble pour un monde meilleur
              </p>
            </div>
            <div>
              <h4 className="text-xl font-bold mb-4 font-roboto">Contact</h4>
              <p className="text-sm font-roboto">contact@donaction.org</p>
            </div>
            <div>
              <h4 className="text-xl font-bold mb-4 font-roboto">
                Suivez-nous
              </h4>
              <div className="flex space-x-4">
                <i className="fab fa-facebook text-2xl hover:text-[#93c5fd] cursor-pointer"></i>
                <i className="fab fa-twitter text-2xl hover:text-[#93c5fd] cursor-pointer"></i>
                <i className="fab fa-instagram text-2xl hover:text-[#93c5fd] cursor-pointer"></i>
              </div>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}

export default MainComponent;