{% extends 'layouts/front_layout.html.twig' %}

{% block title %}Actualités | Luxim{% endblock %}

{% block body %}
<div class="min-h-screen bg-white">
    {# Hero Section avec Image de fond et Overlay #}
    <section class="relative overflow-hidden py-24 text-white">
        {# Background Image & Overlay #}
        <div class="absolute inset-0 z-0">
            <img
                src="https://images.unsplash.com/photo-1497215728101-856f4ea42174?q=80&w=2070&auto=format&fit=crop"
                alt="Actualités Luxim Immobilier"
                class="h-full w-full object-cover"
            />
            <div class="absolute inset-0 bg-slate-900/80 backdrop-blur-[2px]"></div>
        </div>

        <div class="container relative z-10 mx-auto px-4">
            <div data-aos="fade-up" data-aos-duration="600">
                <span class="inline-block mb-4 rounded-full bg-primary/20 px-4 py-1 font-heading text-xs font-bold uppercase tracking-[0.2em] text-primary">
                    Blog
                </span>
                <h1 class="mt-2 font-heading text-4xl font-black md:text-5xl">
                    <span class="text-primary">Actualités</span> Luxim
                </h1>
                <p class="mt-6 max-w-2xl text-xl text-white/80 leading-relaxed">
                    Restez informé de nos dernières nouvelles, lancements de projets
                    immobiliers et événements marquants.
                </p>
            </div>
        </div>
    </section>

    {# Articles Grid #}
    <section class="py-20">
        <div class="container mx-auto px-4">
            <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
                {# Simulation de la boucle sur les articles (à lier à votre base de données plus tard) #}
                {% set articles = [
                    {
                        'title': "Lancement du programme Résidence Soleil à Yopougon",
                        'date': "15 Janvier 2026",
                        'summary': "Luxim annonce le lancement de son nouveau programme de logements accessibles à Yopougon, destiné aux jeunes ménages.",
                        'image': "https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?q=80&w=800"
                    },
                    {
                        'title': "Luxim remporte le prix du meilleur promoteur 2025",
                        'date': "20 Décembre 2025",
                        'summary': "Lors de la cérémonie des Awards de l'Immobilier, Luxim a été distingué pour la qualité de ses réalisations.",
                        'image': "https://images.unsplash.com/photo-1567427017947-545c5f8d16ad?q=80&w=800"
                    },
                    {
                        'title': "Livraison réussie de la Résidence Azur",
                        'date': "10 Novembre 2025",
                        'summary': "32 familles ont reçu les clés de leur nouveau logement à Marcory, dans un cadre sécurisé et moderne.",
                        'image': "https://images.unsplash.com/photo-1582408921715-18e7806367c1?q=80&w=800"
                    },
                    {
                        'title': "Partenariat avec la Banque de l'Habitat",
                        'date': "5 Octobre 2025",
                        'summary': "Un accord de financement facilité permet à nos clients d'accéder à des crédits immobiliers à taux préférentiels.",
                        'image': "https://images.unsplash.com/photo-1560518883-ce09059eeffa?q=80&w=800"
                    },
                    {
                        'title': "Visite de chantier : Cité Belvédère avance bien",
                        'date': "15 Septembre 2025",
                        'summary': "Les travaux de la Cité Belvédère progressent conformément au calendrier, avec une livraison prévue en 2027.",
                        'image': "https://images.unsplash.com/photo-1541888946425-d81bb19480c5?q=80&w=800"
                    }
                ] %}

                {% for article in articles %}
                    <div 
                        data-aos="fade-up" 
                        data-aos-delay="{{ loop.index0 * 100 }}"
                        class="h-full"
                    >
                        <div class="group flex h-full flex-col overflow-hidden rounded-xl border-0 bg-white shadow-lg transition-shadow hover:shadow-xl">
                            {# Image Wrapper #}
                            <div class="h-48 overflow-hidden bg-slate-100">
                                <img
                                    src="{{ article.image }}"
                                    alt="{{ article.title }}"
                                    class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
                                    loading="lazy"
                                    onerror="this.src='https://placehold.co/600x400?text=Actualité+Luxim'"
                                />
                            </div>
                            
                            {# Content Wrapper (CardContent) #}
                            <div class="flex flex-1 flex-col p-6">
                                <div class="mb-2 flex items-center gap-2 text-xs text-slate-500">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/></svg>
                                    {{ article.date }}
                                </div>
                                
                                <h3 class="font-heading text-lg font-bold leading-snug text-slate-900">
                                    {{ article.title }}
                                </h3>
                                
                                <p class="mt-2 line-clamp-3 text-sm leading-relaxed text-slate-500">
                                    {{ article.summary }}
                                </p>
                                
                                <div class="mt-auto pt-4">
                                    <a href="#" class="inline-flex items-center gap-1 text-sm font-semibold text-primary transition-colors hover:text-primary/80">
                                        Lire la suite 
                                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </section>
</div>
{% endblock %}