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

{% block title %}Résidence Les Palmiers - Détail du Programme | Luxim{% endblock %}

{% block body %}
<div class="min-h-screen bg-white">
    {# Header Section #}
    <section class="bg-slate-50 py-12 text-slate-900 border-b">
        <div class="container mx-auto px-4">
            <a href="{{ path('app_programmes') }}" class="mb-4 inline-flex items-center gap-2 text-sm text-slate-500 hover:text-primary transition-colors">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
                Retour aux programmes
            </a>
            
            <div data-aos="fade-up">
                <span class="mb-2 inline-block rounded-full bg-primary px-3 py-1 text-xs font-semibold text-white">
                    En cours
                </span>
                <h1 class="font-heading text-4xl font-black md:text-5xl">
                    Résidence Les Palmiers
                </h1>
                <div class="mt-2 flex items-center gap-1 text-slate-500">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-primary"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>
                    Cocody, Abidjan — Appartements F3 & F4
                </div>
            </div>
        </div>
    </section>

    {# Section Contenu #}
    <section class="py-16">
        <div class="container mx-auto grid gap-12 px-4 lg:grid-cols-3">
            
            <div class="lg:col-span-2">
                {# Image Principale #}
                <div class="mb-8 overflow-hidden rounded-xl bg-slate-100 shadow-lg" data-aos="zoom-in">
                    <img
                        src="https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?auto=format&fit=crop&w=1200&q=80"
                        alt="Résidence Les Palmiers"
                        class="h-[400px] w-full object-cover transition-transform duration-700 hover:scale-105"
                    />
                </div>

                {# Galerie Secondaire #}
                <div class="mb-10 grid grid-cols-3 gap-4">
                    <div class="group relative cursor-pointer overflow-hidden rounded-lg bg-slate-200 shadow-sm" data-aos="fade-up" data-aos-delay="100">
                        <img src="https://images.unsplash.com/photo-1600607687940-c52af04657b3?q=80&w=800" class="h-32 w-full object-cover transition-transform duration-500 group-hover:scale-110" />
                        <div class="absolute inset-0 bg-black/20 opacity-0 transition-opacity group-hover:opacity-100"></div>
                    </div>
                    <div class="group relative cursor-pointer overflow-hidden rounded-lg bg-slate-200 shadow-sm" data-aos="fade-up" data-aos-delay="200">
                        <img src="https://images.unsplash.com/photo-1600566753190-17f0bb2a6c3e?q=80&w=800" class="h-32 w-full object-cover transition-transform duration-500 group-hover:scale-110" />
                        <div class="absolute inset-0 bg-black/20 opacity-0 transition-opacity group-hover:opacity-100"></div>
                    </div>
                    <div class="group relative cursor-pointer overflow-hidden rounded-lg bg-slate-200 shadow-sm" data-aos="fade-up" data-aos-delay="300">
                        <img src="https://images.unsplash.com/photo-1600121848594-d8644e57abab?q=80&w=800" class="h-32 w-full object-cover transition-transform duration-500 group-hover:scale-110" />
                        <div class="absolute inset-0 bg-black/20 opacity-0 transition-opacity group-hover:opacity-100"></div>
                    </div>
                </div>

                {# Description #}
                <div class="prose prose-slate max-w-none">
                    <h2 class="mb-4 font-heading text-2xl font-bold text-slate-900">Description du projet</h2>
                    <p class="text-lg leading-relaxed text-slate-600">
                        Un programme de 48 appartements modernes situés au cœur de Cocody, avec des finitions haut de gamme, parking souterrain et espaces verts.
                    </p>
                    <p class="mt-4 leading-relaxed text-slate-600">
                        Situé dans l'un des quartiers les plus prisés, ce programme offre un cadre de vie exceptionnel avec des espaces communs soigneusement aménagés, une sécurité renforcée 24h/24 et des finitions de haut standing. Chaque logement a été pensé par nos architectes pour maximiser la lumière naturelle et offrir une ventilation optimale.
                    </p>

                    <div class="mt-8 rounded-lg bg-slate-50 p-6 border-l-4 border-primary">
                        <h4 class="font-bold text-primary mb-2">Points forts :</h4>
                        <ul class="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm text-slate-700">
                            <li>• Matériaux de construction importés</li>
                            <li>• Groupe électrogène et réserve d'eau</li>
                            <li>• Parking souterrain sécurisé</li>
                            <li>• Proximité écoles et commerces</li>
                        </ul>
                    </div>
                </div>
            </div>

            {# Sidebar avec Caractéristiques #}
            <aside>
                <div class="sticky top-24 rounded-xl border bg-white p-6 shadow-xl">
                    <h3 class="mb-6 font-heading text-lg font-bold">Caractéristiques clés</h3>
                    
                    <div class="space-y-4">
                        {# Surface #}
                        <div class="flex items-center gap-4 border-b border-slate-100 pb-4">
                            <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.4 2.4 0 0 1 0-3.4l2.6-2.6a2.4 2.4 0 0 1 3.4 0Z"/><path d="m14.5 12.5 2-2"/><path d="m11.5 9.5 2-2"/><path d="m8.5 6.5 2-2"/><path d="m17.5 15.5 2-2"/></svg>
                            </div>
                            <div>
                                <div class="text-xs uppercase tracking-wider text-slate-400 font-bold">Surface</div>
                                <div class="text-lg font-bold">75m² à 120m²</div>
                            </div>
                        </div>

                        {# Chambres #}
                        <div class="flex items-center gap-4 border-b border-slate-100 pb-4">
                            <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
                            </div>
                            <div>
                                <div class="text-xs uppercase tracking-wider text-slate-400 font-bold">Chambres</div>
                                <div class="text-lg font-bold">2 à 3 chambres</div>
                            </div>
                        </div>

                        {# Prix #}
                        <div class="flex items-center gap-4 border-b border-slate-100 pb-4">
                            <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="12" x="2" y="6" rx="2"/><circle cx="12" cy="12" r="2"/><path d="M6 12h.01M18 12h.01"/></svg>
                            </div>
                            <div>
                                <div class="text-xs uppercase tracking-wider text-slate-400 font-bold">Prix</div>
                                <div class="text-lg font-bold">À partir de 35M FCFA</div>
                            </div>
                        </div>

                        {# Livraison #}
                        <div class="flex items-center gap-4">
                            <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                            </div>
                            <div>
                                <div class="text-xs uppercase tracking-wider text-slate-400 font-bold">Livraison</div>
                                <div class="text-lg font-bold">Décembre 2025</div>
                            </div>
                        </div>
                    </div>

                    <div class="mt-8 space-y-3">
                        <a href="{{ path('app_contact') }}" class="block">
                            <button class="w-full bg-slate-900 text-white py-4 rounded-lg font-heading font-bold hover:bg-primary transition-all active:scale-95 shadow-lg">
                                Demander la brochure
                            </button>
                        </a>
                        <p class="text-center text-[10px] text-slate-400 uppercase tracking-widest font-bold">
                            Sans engagement — Réponse sous 24h
                        </p>
                    </div>
                </div>
            </aside>
        </div>
    </section>
</div>
{% endblock %}