{{ define "main" }}
<div class="gradient-bg py-12 md:py-16 lg:py-24">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="max-w-3xl mx-auto text-center">
            <div class="flex justify-center space-x-2 mb-6">
                {{ with .Params.categories }}
                    {{ range first 2 . }}
                        <a href="/{{ . | anchorize }}"><span class="bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded-full">{{ . }}</span></a>
                        
                    {{ end }}
                {{ end }}
            </div>
            <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">{{ .Title }}</h1>
            <div class="flex items-center justify-center space-x-4 text-gray-600">
                <div class="flex items-center">
                    <a href="/author/{{ .Params.author | urlize }}" class="text-blue-600 hover:text-blue-800 underline decoration-blue-600 hover:decoration-blue-800 transition-colors">{{ .Params.author | default "Auteur" }}</a>
                </div>
                <span>•</span>
                <span>{{ .Date.Format "2 janvier 2006" }}</span>
                <span>•</span>
                <span>{{ .ReadingTime }} min de lecture</span>
            </div>
        </div>
    </div>
</div>

<!-- Article Content -->
<article class="py-12 md:py-16">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="max-w-3xl mx-auto">
            {{ if .Params.featured_image }}
                <img src="{{ .Params.featured_image }}" alt="{{ .Title }}" class="w-full h-auto rounded-lg mb-8">
            {{ end }}
            <div class="prose">
                {{ .Content }}
            </div>
        </div>
    </div>
</article>

<!-- Author Bio -->
<div class="py-12 bg-gray-50">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="max-w-3xl mx-auto">
            <div class="flex items-start space-x-6">
                <div>
                    <h3 class="text-xl font-semibold text-gray-900">{{ .Params.author | default "Auteur" }}</h3>
                    <p class="text-blue-600 font-medium mb-4">Rédacteur technologique & chercheur sur le futur du travail</p>
                    <p class="text-gray-700">{{ .Params.author_bio | default "Biographie de l'auteur ici." }}</p>
                    <div class="flex space-x-4 mt-4">
                        <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors"><i class="fab fa-twitter"></i></a>
                        <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors"><i class="fab fa-linkedin"></i></a>
                        <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors"><i class="fab fa-medium"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Related Articles -->
<div class="py-12">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-2xl font-bold text-gray-900 mb-8 text-center">Articles connexes</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            {{ range first 3 (where .Site.RegularPages "Type" "post") }}
            <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-shadow">
                {{ if .Params.featured_image }}
                    <img src="{{ .Params.featured_image }}" alt="Article" class="w-full h-48 object-cover">
                {{ else }}
                    <img src="https://images.unsplash.com/photo-1581091226033-d5c48150dbaa?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" alt="Article" class="w-full h-48 object-cover">
                {{ end }}
                <div class="p-6">
                    <span class="text-sm font-medium text-blue-600">
                        {{ with .Params.categories }}
                            {{ range first 1 . }}
                                {{ . }}
                            {{ end }}
                        {{ end }}
                    </span>
                    <h3 class="text-xl font-semibold mt-2 mb-3">
                        <a href="{{ .Permalink }}" class="text-gray-900 hover:text-blue-600 transition-colors">{{ .Title }}</a>
                    </h3>
                    <p class="text-gray-600">{{ .Summary | truncate 100 }}</p>
                    <div class="flex items-center mt-4 text-sm text-gray-500">
                        <span>{{ .Date.Format "2 janvier 2006" }}</span>
                        <span class="mx-2">•</span>
                        <span>{{ .ReadingTime }} min de lecture</span>
                    </div>
                </div>
            </div>
            {{ end }}
        </div>
    </div>
</div>

<!-- Newsletter -->
<div class="py-12 bg-blue-50">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="max-w-3xl mx-auto text-center">
            <h2 class="text-2xl font-bold text-gray-900 mb-4">Rejoignez la newsletter</h2>
            <p class="text-gray-700 mb-6">Restez informé des dernières actualités sur la technologie et le futur du travail.</p>
            <form class="flex flex-col sm:flex-row gap-4 max-w-xl mx-auto">
                <input type="email" placeholder="Votre adresse email" class="flex-grow px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
                <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition-colors">S'abonner</button>
            </form>
        </div>
    </div>
</div>
{{ end }}