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

{% block title %}Villa Harmony - Détail du Projet | 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_construction_vente') }}" 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 projets de construction
            </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 uppercase tracking-wider">
                    Chantier en cours
                </span>
                <h1 class="font-heading text-4xl font-black md:text-5xl">
                    Villa Harmony
                </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 Angré, Abidjan — Villa Duplex de Standing
                </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-3xl bg-slate-100 shadow-lg" data-aos="zoom-in">
                    <img
                        src="https://images.unsplash.com/photo-1613977257363-707ba9348227?auto=format&fit=crop&w=1200&q=80"
                        alt="Villa Harmony"
                        class="h-[450px] w-full object-cover transition-transform duration-700 hover:scale-105"
                    />
                </div>

                {# Galerie de l'évolution du chantier #}
                <div class="mb-10">
                    <h3 class="mb-4 font-heading text-lg font-bold text-slate-900">Vues 3D & État actuel</h3>
                    <div class="grid grid-cols-3 gap-4">
                        <div class="group relative cursor-pointer overflow-hidden rounded-xl 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 flex items-center justify-center bg-black/40 opacity-0 transition-opacity group-hover:opacity-100">
                                <span class="text-white text-xs font-bold uppercase">Extérieur</span>
                            </div>
                        </div>
                        <div class="group relative cursor-pointer overflow-hidden rounded-xl 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 flex items-center justify-center bg-black/40 opacity-0 transition-opacity group-hover:opacity-100">
                                <span class="text-white text-xs font-bold uppercase">Salon</span>
                            </div>
                        </div>
                        <div class="group relative cursor-pointer overflow-hidden rounded-xl bg-slate-200 shadow-sm" data-aos="fade-up" data-aos-delay="300">
                            <img src="https://images.unsplash.com/photo-1503387762-592deb58ef4e?q=80&w=800" class="h-32 w-full object-cover transition-transform duration-500 group-hover:scale-110" />
                            <div class="absolute inset-0 flex items-center justify-center bg-black/40 opacity-0 transition-opacity group-hover:opacity-100">
                                <span class="text-white text-xs font-bold uppercase">Chantier</span>
                            </div>
                        </div>
                    </div>
                </div>

                {# Description spécifique Construction-Vente #}
                <div class="prose prose-slate max-w-none">
                    <h2 class="mb-4 font-heading text-2xl font-bold text-slate-900">À propos de la réalisation</h2>
                    <p class="text-lg leading-relaxed text-slate-600">
                        La <strong>Villa Harmony</strong> est une construction exclusive signée Luxim. Ce projet combine architecture contemporaine et confort thermique, utilisant des matériaux durables et des finitions premium.
                    </p>
                    <p class="mt-4 leading-relaxed text-slate-600">
                        Vendu en état futur d'achèvement, ce projet permet aux acquéreurs de personnaliser certains choix de finitions (carrelages, sanitaires, peinture) tout en bénéficiant de la rigueur de suivi de chantier de nos ingénieurs.
                    </p>

                    <div class="mt-8 grid gap-6 md:grid-cols-2">
                        <div class="rounded-2xl bg-slate-50 p-6 border border-slate-100">
                            <h4 class="font-bold text-slate-900 mb-4 flex items-center gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                                Garanties Luxim
                            </h4>
                            <ul class="space-y-2 text-sm text-slate-600">
                                <li>• Garantie décennale structurelle</li>
                                <li>• Assurance dommages-ouvrage</li>
                                <li>• Respect des normes environnementales</li>
                                <li>• Service après-vente (SAV) dédié</li>
                            </ul>
                        </div>
                        <div class="rounded-2xl bg-slate-50 p-6 border border-slate-100">
                            <h4 class="font-bold text-slate-900 mb-4 flex items-center gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" /></svg>
                                Équipements inclus
                            </h4>
                            <ul class="space-y-2 text-sm text-slate-600">
                                <li>• Cuisine équipée (hors électro)</li>
                                <li>• Baies vitrées en aluminium noir</li>
                                <li>• Pré-installation climatisation</li>
                                <li>• Jardin paysager et clôture sécurisée</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            {# Sidebar avec Caractéristiques #}
            <aside>
                <div class="sticky top-24 rounded-3xl border bg-white p-8 shadow-2xl">
                    <h3 class="mb-6 font-heading text-xl font-bold">Fiche Technique</h3>
                    
                    <div class="space-y-5">
                        <div class="flex items-center gap-4 border-b border-slate-50 pb-4">
                            <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-primary/10 text-primary">
                                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>
                            </div>
                            <div>
                                <div class="text-[10px] uppercase tracking-widest text-slate-400 font-bold">Type de Bien</div>
                                <div class="text-md font-bold text-slate-900">Villa Duplex 5 Pièces</div>
                            </div>
                        </div>

                        <div class="flex items-center gap-4 border-b border-slate-50 pb-4">
                            <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-primary/10 text-primary">
                                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 3H3v18h18V3zM9 3v18m6-18v18M3 9h18M3 15h18"/></svg>
                            </div>
                            <div>
                                <div class="text-[10px] uppercase tracking-widest text-slate-400 font-bold">Surface Terrain</div>
                                <div class="text-md font-bold text-slate-900">350 m²</div>
                            </div>
                        </div>

                        <div class="flex items-center gap-4 border-b border-slate-50 pb-4">
                            <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-primary/10 text-primary">
                                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                            </div>
                            <div>
                                <div class="text-[10px] uppercase tracking-widest text-slate-400 font-bold">Délai Livraison</div>
                                <div class="text-md font-bold text-slate-900">8 Mois (T4 2026)</div>
                            </div>
                        </div>

                        <div class="flex items-center gap-4">
                            <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-primary/10 text-primary">
                                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
                            </div>
                            <div>
                                <div class="text-[10px] uppercase tracking-widest text-slate-400 font-bold">Budget Projet</div>
                                <div class="text-md font-bold text-primary">À partir de 75M FCFA</div>
                            </div>
                        </div>
                    </div>

                    <div class="mt-10 space-y-3">
                        <a href="{{ path('app_contact') }}" class="block">
                            <button class="w-full bg-slate-900 text-white py-4 rounded-2xl font-heading font-bold hover:bg-primary transition-all active:scale-95 shadow-lg group flex items-center justify-center gap-2">
                                Réserver une visite
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform group-hover:translate-x-1"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                            </button>
                        </a>
                        <button class="w-full border-2 border-slate-100 bg-white text-slate-600 py-3 rounded-2xl font-heading font-bold hover:bg-slate-50 transition-all flex items-center justify-center gap-2">
                             <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
                             Télécharger les plans
                        </button>
                    </div>
                </div>
            </aside>
        </div>
    </section>
</div>
{% endblock %}