{% extends 'base.html' %}
{% load wagtailcore_tags wagtailimages_tags %}

{% block title %}Accueil{% endblock %}

{% block content %}
<!-- Hero Section -->
<section class="bg-dotgrid py-20">
    <div class="max-w-4xl mx-auto px-4 text-center">
        <h1 class="font-serif text-4xl md:text-5xl font-bold mb-6">
            {{ page.hero_title }}
        </h1>
        <p class="text-xl text-gray-medium mb-8 max-w-2xl mx-auto">
            {{ page.hero_text }}
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <a href="/blog/" class="bg-accent text-white px-6 py-3 rounded font-medium hover:bg-ink transition-colors">
                {{ page.hero_cta_text }}
            </a>
            <a href="/a-propos/" class="border border-ink px-6 py-3 rounded font-medium hover:bg-ink hover:text-white transition-colors">
                En savoir plus
            </a>
        </div>
    </div>
</section>

<!-- Value Proposition -->
<section class="py-16">
    <div class="max-w-6xl mx-auto px-4">
        <h2 class="font-serif text-3xl font-bold text-center mb-12">
            Pourquoi JoPer ?
        </h2>
        <div class="grid md:grid-cols-3 gap-8">
            <!-- Card 1 -->
            <div class="p-6 border border-dot rounded bg-white">
                <div class="text-3xl mb-4">·</div>
                <h3 class="font-serif text-xl font-bold mb-2">Pas de dogme</h3>
                <p class="text-gray-medium">
                    On ne te vend pas LA méthode miracle. On te donne des outils à mixer selon tes besoins.
                </p>
            </div>
            <!-- Card 2 -->
            <div class="p-6 border border-dot rounded bg-white">
                <div class="text-3xl mb-4">○</div>
                <h3 class="font-serif text-xl font-bold mb-2">Minimaliste</h3>
                <p class="text-gray-medium">
                    Pas de fioritures, pas de compétences artistiques nécessaires. L'efficacité avant l'esthétique.
                </p>
            </div>
            <!-- Card 3 -->
            <div class="p-6 border border-dot rounded bg-white">
                <div class="text-3xl mb-4">−</div>
                <h3 class="font-serif text-xl font-bold mb-2">Authentique</h3>
                <p class="text-gray-medium">
                    Des conseils testés dans la vraie vie, pas de la théorie Pinterest impossible à suivre.
                </p>
            </div>
        </div>
    </div>
</section>

<!-- Featured Articles -->
{% if featured_posts %}
<section class="py-16 bg-cream">
    <div class="max-w-6xl mx-auto px-4">
        <h2 class="font-serif text-3xl font-bold text-center mb-4">
            Derniers articles
        </h2>
        <p class="text-center text-gray-medium mb-12">
            Des conseils pratiques pour ton organisation
        </p>
        <div class="grid md:grid-cols-3 gap-8">
            {% for post in featured_posts %}
            <article class="border border-dot rounded bg-white overflow-hidden hover:shadow-lg transition-shadow">
                {% if post.featured_image %}
                <a href="{{ post.url }}">
                    {% image post.featured_image fill-400x250 class="w-full" %}
                </a>
                {% endif %}
                <div class="p-6">
                    <h3 class="font-serif text-xl font-bold mb-2">
                        <a href="{{ post.url }}" class="hover:text-accent transition-colors">
                            {{ post.title }}
                        </a>
                    </h3>
                    <p class="text-gray-medium text-sm mb-4">
                        {{ post.excerpt|truncatewords:20 }}
                    </p>
                    <div class="flex items-center justify-between text-sm text-gray-medium">
                        <span>{{ post.first_published_at|date:"d M Y" }}</span>
                        <span>{{ post.reading_time }} min</span>
                    </div>
                </div>
            </article>
            {% endfor %}
        </div>
        <div class="text-center mt-10">
            <a href="/blog/" class="text-accent hover:underline font-medium">
                Voir tous les articles &rarr;
            </a>
        </div>
    </div>
</section>
{% endif %}

<!-- CTA Newsletter -->
{% include "includes/newsletter_form.html" with source="homepage" %}
{% endblock %}