<div id="home-content" style="padding: 3rem; max-width: 900px; margin: 0 auto;">
    <div style="text-align: center; margin-bottom: 3rem;">
        <h1 style="font-size: 2.5rem; color: #c792ea; margin-bottom: 1rem;">
            📝 Project Notes
        </h1>
        <p style="font-size: 1.2rem; color: var(--text-secondary); margin-bottom: 2rem;">
            Bienvenue dans votre espace de notes Markdown
        </p>
        <button onclick="showNewNoteModal()" style="font-size: 1.1rem; padding: 1rem 2rem;">
            ✨ Créer une nouvelle note
        </button>
    </div>

    <div style="margin-top: 3rem;">
        <h2 style="color: #82aaff; font-size: 1.5rem; margin-bottom: 1.5rem;">
            🚀 Démarrage rapide
        </h2>
        <div style="display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));">
            <div style="background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-md); padding: 1.5rem;">
                <h3 style="color: #89ddff; margin-bottom: 0.5rem;">📁 Parcourir</h3>
                <p style="color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 1rem;">
                    Explorez vos notes dans l'arborescence à gauche
                </p>
            </div>
            <div style="background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-md); padding: 1.5rem;">
                <h3 style="color: #c3e88d; margin-bottom: 0.5rem;">🔍 Rechercher</h3>
                <p style="color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 1rem;">
                    Utilisez la barre de recherche en haut pour trouver vos notes
                </p>
            </div>
            <div style="background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-md); padding: 1.5rem;">
                <h3 style="color: #ffcb6b; margin-bottom: 0.5rem;">⚡ Slash commands</h3>
                <p style="color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 1rem;">
                    Tapez <code style="color: #f07178;">/</code> dans l'éditeur pour insérer du Markdown
                </p>
            </div>
        </div>
    </div>

    <div style="margin-top: 3rem;">
        <h2 style="color: #82aaff; font-size: 1.5rem; margin-bottom: 1.5rem;">
            ✨ Fonctionnalités
        </h2>
        <ul style="color: var(--text-secondary); line-height: 2; list-style: none; padding: 0;">
            <li style="padding: 0.5rem 0; border-bottom: 1px solid var(--border-secondary);">
                <span style="color: #c792ea;">◆</span> Éditeur Markdown avec coloration syntaxique (CodeMirror)
            </li>
            <li style="padding: 0.5rem 0; border-bottom: 1px solid var(--border-secondary);">
                <span style="color: #82aaff;">◆</span> Prévisualisation en temps réel avec scroll synchronisé
            </li>
            <li style="padding: 0.5rem 0; border-bottom: 1px solid var(--border-secondary);">
                <span style="color: #89ddff;">◆</span> Organisation par dossiers avec arborescence dynamique
            </li>
            <li style="padding: 0.5rem 0; border-bottom: 1px solid var(--border-secondary);">
                <span style="color: #c3e88d;">◆</span> Recherche avancée par tag, titre ou contenu
            </li>
            <li style="padding: 0.5rem 0; border-bottom: 1px solid var(--border-secondary);">
                <span style="color: #ffcb6b;">◆</span> Thème Material Darker pour vos yeux
            </li>
            <li style="padding: 0.5rem 0;">
                <span style="color: #f07178;">◆</span> Sauvegarde automatique avec Ctrl/Cmd+S
            </li>
        </ul>
    </div>

    <div style="margin-top: 3rem; text-align: center; padding: 2rem; background: var(--bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-primary);">
        <p style="color: var(--text-muted); font-size: 0.9rem;">
            💡 Astuce : Cliquez sur une note dans l'arborescence pour commencer à éditer
        </p>
    </div>
</div>