<!DOCTYPE html>
<html lang="fr">
<head>
  <base href="/">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Copropriété & Gestion Locative Manager - Interactive Navigation</title>
  
  <!-- Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  
  <!-- React and ReactDOM -->
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  
  <!-- Feather Icons as alternative to Lucide -->
  <script src="https://unpkg.com/feather-icons"></script>
  
  <!-- Babel for JSX -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  
  <style>
    @keyframes expandWidth {
      from { transform: scaleX(0); }
      to { transform: scaleX(1); }
    }
    
    .animate-expandWidth {
      animation: expandWidth 0.3s ease-out forwards;
    }
    
    .feather {
      width: 1.25rem;
      height: 1.25rem;
    }
    
    .feather-sm {
      width: 1rem;
      height: 1rem;
    }
    
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
    .animate-fadeIn {
      animation: fadeIn 0.5s ease-in-out;
    }
  </style>
</head>
<body class="bg-white dark:bg-slate-800 transition-colors duration-300">
  <div id="root"></div>

  <script type="text/babel">
    const { useState, useEffect, useRef } = React;

    // Composant Icon optimisé
    const Icon = ({ name, size = "normal", className = "" }) => {
      const iconRef = useRef(null);

      useEffect(() => {
        if (iconRef.current) {
          feather.replace({ elements: iconRef.current });
        }
      }, [name, size]);

      const sizeClass = size === "small" ? "feather-sm" : "feather";

      return <i ref={iconRef} data-feather={name} className={`${sizeClass} ${className}`}></i>;
    };

    // Composant Modal d'Authentification
    const AuthModal = ({ isOpen, onClose, mode = 'login', onAuthSuccess }) => {
      const [authMode, setAuthMode] = useState(mode);
      const [email, setEmail] = useState('');
      const [password, setPassword] = useState('');
      const [confirmPassword, setConfirmPassword] = useState('');
      const [name, setName] = useState('');
      const [error, setError] = useState('');
      const [loading, setLoading] = useState(false);

      const handleSubmit = async (e) => {
        e.preventDefault();
        setError('');
        setLoading(true);

        if (authMode === 'register' && password !== confirmPassword) {
          setError('Les mots de passe ne correspondent pas');
          setLoading(false);
          return;
        }

        // Simuler une requête d'authentification
        setTimeout(() => {
          if (authMode === 'login') {
            onAuthSuccess(); // Mettre à jour l'état d'authentification dans le parent
            onClose();
          } else {
            setError('');
            alert('Un email de confirmation a été envoyé à votre adresse.');
            onClose();
          }
          setLoading(false);
        }, 1500);
      };

      if (!isOpen) return null;

      return (
        <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4" role="dialog" aria-modal="true">
          <div className="bg-white dark:bg-slate-800 rounded-lg w-full max-w-md p-6 relative">
            <button
              onClick={onClose}
              className="absolute right-4 top-4 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
              aria-label="Fermer la fenêtre modal"
            >
              <Icon name="x" />
            </button>

            <h2 className="text-2xl font-bold mb-6 text-gray-900 dark:text-white">
              {authMode === 'login' ? 'Connexion' : 'Inscription'}
            </h2>

            <form onSubmit={handleSubmit} className="space-y-4">
              {authMode === 'register' && (
                <div>
                  <label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Nom
                  </label>
                  <input
                    id="name"
                    type="text"
                    required
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                    className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-slate-700 dark:border-slate-600 dark:text-white"
                  />
                </div>
              )}

              <div>
                <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  Email
                </label>
                <input
                  id="email"
                  type="email"
                  required
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-slate-700 dark:border-slate-600 dark:text-white"
                />
              </div>

              <div>
                <label htmlFor="password" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  Mot de passe
                </label>
                <input
                  id="password"
                  type="password"
                  required
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-slate-700 dark:border-slate-600 dark:text-white"
                />
              </div>

              {authMode === 'register' && (
                <div>
                  <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Confirmer le mot de passe
                  </label>
                  <input
                    id="confirmPassword"
                    type="password"
                    required
                    value={confirmPassword}
                    onChange={(e) => setConfirmPassword(e.target.value)}
                    className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-slate-700 dark:border-slate-600 dark:text-white"
                  />
                </div>
              )}

              {error && (
                <div className="text-red-600 text-sm">
                  {error}
                </div>
              )}

              <button
                type="submit"
                disabled={loading}
                className={`w-full flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 ${loading ? 'opacity-50 cursor-not-allowed' : ''}`}
              >
                {loading ? (
                  <Icon name="loader" className="animate-spin" />
                ) : authMode === 'login' ? (
                  'Se connecter'
                ) : (
                  "S'inscrire"
                )}
              </button>

              <div className="flex items-center my-4">
                <div className="flex-1 border-t border-gray-300"></div>
                <span className="px-3 text-sm text-gray-500">ou</span>
                <div className="flex-1 border-t border-gray-300"></div>
              </div>

              <div className="space-y-2">
                <button type="button" className="w-full flex items-center justify-center gap-2 px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:bg-slate-700 dark:border-slate-600 dark:text-white dark:hover:bg-slate-600">
                  <Icon name="chrome" size="small" />
                  Continuer avec Google
                </button>
                <button type="button" className="w-full flex items-center justify-center gap-2 px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:bg-slate-700 dark:border-slate-600 dark:text-white dark:hover:bg-slate-600">
                  <Icon name="facebook" size="small" />
                  Continuer avec Facebook
                </button>
              </div>

              <div className="text-sm text-center mt-4">
                {authMode === 'login' ? (
                  <>
                    Pas encore de compte?{' '}
                    <button
                      type="button"
                      onClick={() => setAuthMode('register')}
                      className="text-blue-600 hover:text-blue-500"
                    >
                      S'inscrire
                    </button>
                  </>
                ) : (
                  <>
                    Déjà un compte?{' '}
                    <button
                      type="button"
                      onClick={() => setAuthMode('login')}
                      className="text-blue-600 hover:text-blue-500"
                    >
                      Se connecter
                    </button>
                  </>
                )}
              </div>
            </form>
          </div>
        </div>
      );
    };

    // Composant QuizPage enrichi avec gestion de score
    const QuizPage = () => {
      const categories = [
        { id: 'rules', name: 'Règles Générales' },
        { id: 'conflicts', name: 'Gestion des Conflits' },
        { id: 'decisions', name: 'Prise de Décisions' },
        { id: 'maintenance', name: 'Maintenance' },
        { id: 'finances', name: 'Finances' },
        { id: 'meetings', name: 'Réunions' },
        { id: 'elections', name: 'Élections' },
        { id: 'legal', name: 'Aspects Légaux' },
        { id: 'communications', name: 'Communications' },
        { id: 'renovations', name: 'Rénovations' },
      ];

      const questions = {
        rules: [
          {
            question: 'Quelle est la durée maximale des travaux dans une copropriété?',
            options: ['1 mois', '3 mois', '6 mois', '12 mois'],
            answer: 2,
            explanation: 'La durée maximale est de 6 mois sauf exceptions spécifiées.'
          },
          // Ajoutez 9 autres questions ici
        ],
        conflicts: [
          {
            question: 'Comment doit-on gérer un conflit de voisinage en copropriété?',
            options: ['Ignorer le problème', 'Faire appel au syndic', 'Résoudre à l’amiable', 'Prendre des mesures légales'],
            answer: 2,
            explanation: 'La résolution à l’amiable est recommandée avant de prendre des mesures plus formelles.'
          },
          // Ajoutez 9 autres questions ici
        ],
        // Ajoutez les autres catégories avec 10 questions chacune
      };

      const resources = {
        rules: [
          { title: 'Guide des Règles de Copropriété', link: 'https://example.com/guide-rules' },
          // Ajouter d'autres ressources
        ],
        conflicts: [
          { title: 'Gestion des Conflits en Copropriété', link: 'https://example.com/guide-conflicts' },
          // Ajouter d'autres ressources
        ],
        // Ajouter les autres catégories avec leurs ressources
      };

      const [currentCategory, setCurrentCategory] = useState(null);
      const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
      const [userAnswers, setUserAnswers] = useState([]);
      const [showExplanation, setShowExplanation] = useState(false);
      const [quizCompleted, setQuizCompleted] = useState(false);
      const [score, setScore] = useState(0);

      const startQuiz = (categoryId) => {
        if (!questions[categoryId] || questions[categoryId].length === 0) {
          alert('La catégorie sélectionnée n\'est pas disponible pour le moment.');
          return;
        }
        setCurrentCategory(categoryId);
        setCurrentQuestionIndex(0);
        setUserAnswers([]);
        setShowExplanation(false);
        setQuizCompleted(false);
        setScore(0);
      };

      const handleAnswer = (index) => {
        const isCorrect = index === questions[currentCategory][currentQuestionIndex].answer;
        if (isCorrect) setScore(score + 1);
        setUserAnswers([...userAnswers, { questionIndex: currentQuestionIndex, selected: index, isCorrect }]);
        setShowExplanation(true);
      };

      const nextQuestion = () => {
        if (currentQuestionIndex + 1 < questions[currentCategory].length) {
          setCurrentQuestionIndex(currentQuestionIndex + 1);
          setShowExplanation(false);
        } else {
          setQuizCompleted(true);
        }
      };

      const restartQuiz = () => {
        setCurrentQuestionIndex(0);
        setUserAnswers([]);
        setShowExplanation(false);
        setQuizCompleted(false);
        setScore(0);
      };

      if (!currentCategory) {
        return (
          <div className="p-6">
            <h2 className="text-2xl font-bold mb-4">Choisissez une catégorie de Quiz</h2>
            <div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
              {categories.map(category => (
                <button
                  key={category.id}
                  onClick={() => startQuiz(category.id)}
                  className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors"
                  aria-label={`Démarrer le quiz sur ${category.name}`}
                >
                  {category.name}
                </button>
              ))}
            </div>
          </div>
        );
      }

      if (quizCompleted) {
        return (
          <div className="p-6">
            <h2 className="text-2xl font-bold mb-4">Quiz Terminé!</h2>
            <p className="mb-4">Vous avez obtenu {score} sur {questions[currentCategory].length}.</p>
            <p className="mb-4">Merci d'avoir participé. Consultez les ressources ci-dessous pour en savoir plus.</p>
            <ul className="list-disc list-inside mb-4">
              {resources[currentCategory].map(resource => (
                <li key={resource.link}>
                  <a href={resource.link} className="text-blue-600 hover:underline" target="_blank" rel="noopener noreferrer">
                    {resource.title}
                  </a>
                </li>
              ))}
            </ul>
            <div className="flex gap-4">
              <button
                onClick={() => setCurrentCategory(null)}
                className="bg-gray-600 text-white px-4 py-2 rounded-md hover:bg-gray-700 transition-colors"
              >
                Retour aux catégories
              </button>
              <button
                onClick={restartQuiz}
                className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors"
              >
                Reprendre le Quiz
              </button>
            </div>
          </div>
        );
      }

      const currentQuestion = questions[currentCategory][currentQuestionIndex];

      return (
        <div className="p-6">
          <h2 className="text-2xl font-bold mb-4">
            Catégorie: {categories.find(cat => cat.id === currentCategory).name}
          </h2>
          <div className="mb-4">
            <p className="mb-2 font-medium">Question {currentQuestionIndex + 1} de {questions[currentCategory].length}:</p>
            <p>{currentQuestion.question}</p>
          </div>
          <div className="space-y-2">
            {currentQuestion.options.map((option, index) => (
              <button
                key={index}
                onClick={() => handleAnswer(index)}
                className={`w-full text-left px-4 py-2 border rounded-md
                  ${userAnswers[currentQuestionIndex]?.selected === index 
                    ? (index === currentQuestion.answer ? 'bg-green-500 text-white' : 'bg-red-500 text-white') 
                    : 'hover:bg-gray-100 dark:hover:bg-slate-700'
                  }
                  transition-colors
                `}
                disabled={userAnswers[currentQuestionIndex]?.selected !== undefined}
                aria-pressed={userAnswers[currentQuestionIndex]?.selected === index}
              >
                {option}
              </button>
            ))}
          </div>
          {showExplanation && (
            <div className="mt-4 p-4 bg-gray-100 dark:bg-slate-700 rounded-md">
              <p><strong>Explication :</strong> {currentQuestion.explanation}</p>
            </div>
          )}
          {showExplanation && (
            <button
              onClick={nextQuestion}
              className="mt-4 bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors"
            >
              {currentQuestionIndex + 1 < questions[currentCategory].length ? 'Prochaine Question' : 'Terminer le Quiz'}
            </button>
          )}
        </div>
      );
    };

    // Composant TabNav modifié avec gestion d'authentification améliorée
    const TabNav = () => {
      const [activeTab, setActiveTab] = useState('accueil');
      const [isLoggedIn, setIsLoggedIn] = useState(false);
      const [isDarkMode, setIsDarkMode] = useState(() => {
        // Initialiser le mode sombre basé sur les préférences de l'utilisateur
        if (typeof window !== 'undefined') {
          return localStorage.getItem('theme') === 'dark' || false;
        }
        return false;
      });
      const [isScrolled, setIsScrolled] = useState(false);
      const [showAuthModal, setShowAuthModal] = useState(false);
      const [authMode, setAuthMode] = useState('login');

      useEffect(() => {
        const handleScroll = () => {
          setIsScrolled(window.scrollY > 20);
        };
        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
      }, []);

      useEffect(() => {
        if (isDarkMode) {
          document.documentElement.classList.add('dark');
          localStorage.setItem('theme', 'dark');
        } else {
          document.documentElement.classList.remove('dark');
          localStorage.setItem('theme', 'light');
        }
      }, [isDarkMode]);

      const tabs = [
        {
          name: 'Accueil',
          icon: <Icon name="home" />,
          id: 'accueil'
        },
        {
          name: 'Quiz',
          icon: <Icon name="file-text" />,
          id: 'quiz',
          subTabs: [
            { name: 'En Cours', icon: <Icon name="clipboard" size="small" />, id: 'en-cours' },
            { name: 'Terminé', icon: <Icon name="check" size="small" />, id: 'termine' },
            { name: 'Archives', icon: <Icon name="archive" size="small" />, id: 'archives' }
          ]
        },
        {
          name: 'Réunions',
          icon: <Icon name="calendar" />,
          id: 'reunions',
        },
        {
          name: 'Documents',
          icon: <Icon name="file-text" />,
          id: 'documents'
        },
        {
          name: 'Classement',
          icon: <Icon name="users" />,
          id: 'classement'
        }
      ];

      const containerClasses = `
        fixed w-full top-0 z-50 transition-all duration-300
        ${isDarkMode ? 'bg-slate-800 text-white' : 'bg-white text-slate-800'}
        ${isScrolled ? 'shadow-lg' : ''}
      `;

      const TabButton = ({ tab, isMain = true }) => {
        const isActive = activeTab === tab.id;
        
        return (
          <button
            onClick={() => setActiveTab(tab.id)}
            className={`
              relative px-4 py-3 flex items-center gap-2
              transition-all duration-200 
              ${isMain ? 'min-w-[120px]' : 'min-w-[100px]'}
              ${isActive 
                ? isDarkMode
                  ? 'bg-blue-600 text-white'
                  : 'bg-blue-50 text-blue-600'
                : isDarkMode
                  ? 'hover:bg-slate-700'
                  : 'hover:bg-slate-50'
              }
              ${isMain ? 'rounded-t-lg' : 'rounded-md'}
              ${!isMain && 'text-sm'}
            `}
            role="tab"
            aria-selected={isActive}
          >
            {tab.icon}
            <span>{tab.name}</span>
            
            {isMain && isActive && (
              <div className={`
                absolute bottom-0 left-0 w-full h-0.5
                ${isDarkMode ? 'bg-blue-400' : 'bg-blue-600'}
                animate-expandWidth
              `} />
            )}
          </button>
        );
      };

      const handleAuthClick = (mode) => {
        setAuthMode(mode);
        setShowAuthModal(true);
      };

      const handleAuthSuccess = () => {
        setIsLoggedIn(true);
      };

      const handleLogout = () => {
        setIsLoggedIn(false);
      };

      return (
        <>
          <div className={containerClasses}>
            <div className="max-w-7xl mx-auto px-4">
              <div className="flex flex-col">
                <div className="flex justify-between items-center h-16 border-b border-slate-700">
                  <div className="font-bold text-xl">
                    <span className="bg-gradient-to-r from-blue-400 to-blue-600 bg-clip-text text-transparent">
                      Copropriété & Gestion Locative Manager
                    </span>
                  </div>

                  <div className="flex items-center gap-4">
                    {isLoggedIn ? (
                      <button
                        onClick={handleLogout}
                        className="flex items-center px-3 py-1.5 rounded-md bg-red-600 hover:bg-red-700 
                          transition-colors text-white text-sm gap-2"
                      >
                        <Icon name="log-out" size="small" />
                        Déconnexion
                      </button>
                    ) : (
                      <div className="flex gap-2">
                        <button
                          onClick={() => handleAuthClick('login')}
                          className={`px-3 py-1.5 rounded-md transition-colors text-sm
                            ${isDarkMode 
                              ? 'bg-slate-700 hover:bg-slate-600' 
                              : 'bg-slate-100 hover:bg-slate-200'
                            }`}
                        >
                          Connexion
                        </button>
                        <button 
                          onClick={() => handleAuthClick('register')}
                          className="px-3 py-1.5 rounded-md bg-blue-600 hover:bg-blue-700 
                            transition-colors text-white text-sm">
                          Inscription
                        </button>
                      </div>
                    )}

                    <button className={`
                      p-1.5 rounded-md transition-colors
                      ${isDarkMode ? 'hover:bg-slate-700' : 'hover:bg-slate-100'}
                    `} aria-label="Profil utilisateur">
                      <Icon name="user" />
                    </button>

                    <button
                      onClick={() => setIsDarkMode(!isDarkMode)}
                      className={`
                        p-1.5 rounded-md transition-colors
                        ${isDarkMode ? 'hover:bg-slate-700' : 'hover:bg-slate-100'}
                      `}
                      aria-label="Alterner thème"
                    >
                      {isDarkMode ? (
                        <Icon name="sun" />
                      ) : (
                        <Icon name="moon" />
                      )}
                    </button>

                    <button className={`
                      p-1.5 rounded-md transition-colors
                      ${isDarkMode ? 'hover:bg-slate-700' : 'hover:bg-slate-100'}
                    `} aria-label="Aide">
                      <Icon name="help-circle" />
                    </button>
                  </div>
                </div>

                <div className="flex gap-1 mt-2" role="tablist">
                  {tabs.map((tab) => (
                    <TabButton key={tab.id} tab={tab} />
                  ))}
                </div>

                {tabs.find(tab => tab.id === activeTab)?.subTabs && (
                  <div className={`
                    flex gap-1 p-2 mt-1
                    ${isDarkMode ? 'bg-slate-700' : 'bg-slate-50'}
                    rounded-md
                  `}>
                    {tabs.find(tab => tab.id === activeTab).subTabs.map((subTab) => (
                      <TabButton key={subTab.id} tab={subTab} isMain={false} />
                    ))}
                  </div>
                )}
              </div>
            </div>
          </div>
          
          <AuthModal
            isOpen={showAuthModal}
            onClose={() => setShowAuthModal(false)}
            mode={authMode}
            onAuthSuccess={handleAuthSuccess}
          />

          <main className="pt-20 pb-10">
            {activeTab === 'accueil' && <HomePage />}
            {activeTab === 'quiz' && <QuizPage />}
            {/* Ajoutez d'autres composants pour les autres onglets */}
          </main>
        </>
      );
    };

    // Composant HomePage amélioré
    const HomePage = () => {
      const recentQuizzes = [
        { title: 'Quiz sur la Réglementation', date: '2024-01-15', status: 'completed' },
        { title: 'Quiz sur les Bonnes Pratiques', date: '2024-01-14', status: 'completed' },
        { title: 'Quiz sur la Gestion Locative', date: '2024-01-13', status: 'in-progress' }
      ];

      const notifications = [
        { type: 'nouveau-defi', title: 'Nouveau Document Mis à Jour', message: 'Découvrez notre nouveau règlement intérieur!', date: '2024-01-15' },
        { type: 'succes', title: 'Changement de Statut', message: 'Félicitations! Votre demande a été approuvée.', date: '2024-01-14' },
        { type: 'mise-a-jour', title: 'Nouvelle Fonctionnalité', message: 'La planification des réunions est maintenant disponible', date: '2024-01-13' }
      ];

      return (
        <div className="max-w-7xl mx-auto px-4 mt-6">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            {/* Section Quiz Récents */}
            <section className="bg-slate-800 rounded-lg p-6">
              <h2 className="text-xl font-bold mb-4 text-white flex items-center gap-2">
                <Icon name="file-text" />
                Résumé des Quiz Récents
              </h2>
              <div className="space-y-4">
                {recentQuizzes.map((quiz, index) => (
                  <div key={index} className="bg-slate-700 rounded-lg p-4 flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <Icon name="file-text" />
                      <div>
                        <h3 className="text-white font-medium">{quiz.title}</h3>
                        <p className="text-slate-400 text-sm">{quiz.date}</p>
                      </div>
                    </div>
                    {quiz.status === 'completed' && (
                      <div className="bg-green-500/20 text-green-400 px-3 py-1 rounded-full text-sm">
                        Terminé
                      </div>
                    )}
                    {quiz.status === 'in-progress' && (
                      <div className="bg-blue-500/20 text-blue-400 px-3 py-1 rounded-full text-sm">
                        En cours
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </section>

            {/* Section Notifications */}
            <section className="bg-slate-800 rounded-lg p-6">
              <h2 className="text-xl font-bold mb-4 text-white flex items-center gap-2">
                <Icon name="bell" />
                Notifications
              </h2>
              <div className="space-y-4">
                {notifications.map((notification, index) => (
                  <div key={index} className="bg-slate-700 rounded-lg p-4">
                    <div className="flex items-center gap-2 mb-2">
                      <Icon name={
                        notification.type === 'nouveau-defi' ? 'star' :
                        notification.type === 'succes' ? 'award' : 'info'
                      } />
                      <h3 className="text-white font-medium">{notification.title}</h3>
                    </div>
                    <p className="text-slate-300 text-sm">{notification.message}</p>
                    <p className="text-slate-400 text-xs mt-2">{notification.date}</p>
                  </div>
                ))}
              </div>
            </section>
          </div>
        </div>
      );
    };

    // Rendu de l'application
    ReactDOM.render(<TabNav />, document.getElementById('root'));
  </script>
</body>
</html>atualizar a navegação para substituir "Réunions" por "Défi du Jour," "Documents" por "Performance" e adicionar um novo item "Aide & Support" após "Classement".