---
const { months } = Astro.props;
---
<h1 class="text-3xl font-bold mb-6 border-b pb-4">Index du Journal</h1>

<section class="mb-8">
    <h2 class="text-2xl font-semibold mb-4 text-slate-700">Fondations</h2>
    <ul class="list-disc list-inside space-y-2">
        <li><a href="/bujo/keys" class="text-blue-600 hover:underline">Clés (Keys) - Notre langage de symboles</a></li>
        <li><a href="/bujo/future-log" class="text-blue-600 hover:underline">Future Log - Le planning annuel</a></li>
    </ul>
</section>

<section class="mb-8">
    <h2 class="text-2xl font-semibold mb-4 text-slate-700">Logs Temporels</h2>
    <p class="text-slate-600 mb-4">Le cœur du journal, où le temps est cartographié mois par mois.</p>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        {months.map(monthPath => {
            const [year, month] = monthPath.split('/');
            const monthName = new Date(parseInt(year), parseInt(month) - 1).toLocaleString('fr-FR', { month: 'long' });
            return (
                <a href={`/bujo/${monthPath}`} class="bg-slate-100 p-4 rounded-lg text-center font-semibold hover:bg-blue-100 transition-colors">
                    {monthName.charAt(0).toUpperCase() + monthName.slice(1)} {year}
                </a>
            )
        })}
    </div>
</section>

<section>
    <h2 class="text-2xl font-semibold mb-4 text-slate-700">Collections</h2>
    <p class="text-slate-600 mb-4">Les pages thématiques qui rassemblent idées, suivis et inspirations.</p>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-slate-50 p-4 rounded-lg">
            <h3 class="font-semibold text-slate-800 mb-2">Organisation & Suivi</h3>
            <ul class="list-disc list-inside space-y-2 text-sm">
                <li><a href="/bujo/collections/trackers-mensuels" class="text-blue-600 hover:underline">Trackers d'Habitudes</a></li>
                <li><a href="/bujo/collections/objectifs-du-mois" class="text-blue-600 hover:underline">Objectifs du Mois</a></li>
                <li><a href="/bujo/collections/suivi-depenses" class="text-blue-600 hover:underline">Suivi des Dépenses</a></li>
            </ul>
        </div>
        <div class="bg-slate-50 p-4 rounded-lg">
            <h3 class="font-semibold text-slate-800 mb-2">Inspiration & Bien-être</h3>
            <ul class="list-disc list-inside space-y-2 text-sm">
                <li><a href="/bujo/collections/gratitude" class="text-blue-600 hover:underline">Journal de Gratitude</a></li>
                <li><a href="/bujo/collections/brain-dump" class="text-blue-600 hover:underline">Brain Dump (Vide-esprit)</a></li>
                <li><a href="/bujo/collections/bucket-list" class="text-blue-600 hover:underline">Bucket List</a></li>
            </ul>
        </div>
        <div class="bg-slate-50 p-4 rounded-lg">
            <h3 class="font-semibold text-slate-800 mb-2">Créativité & Culture</h3>
            <ul class="list-disc list-inside space-y-2 text-sm">
                <li><a href="/bujo/collections/livres-a-lire" class="text-blue-600 hover:underline">Livres à lire</a></li>
                <li><a href="/bujo/collections/films-a-voir" class="text-blue-600 hover:underline">Films & Séries à voir</a></li>
                <li><a href="/bujo/collections/idees-projets" class="text-blue-600 hover:underline">Idées de Projets Créatifs</a></li>
            </ul>
        </div>
    </div>
</section>