@extends('layouts.app')

@section('title', 'Nos Réalisations | DÉCO BAT')
@section('description', 'Découvrez nos projets : EHPAD, Maisons individuelles, Magasins et Chaufferies tertiaires. L\'expertise DÉCO BAT en images.')

@section('content')
<!-- Header -->
<div class="relative bg-gray-900 py-24 sm:py-32">
    <div class="absolute inset-0 overflow-hidden">
        <img src="https://images.unsplash.com/photo-1497366216548-37526070297c?q=80&w=2069&auto=format&fit=crop" alt="Nos Réalisations" class="w-full h-full object-cover opacity-30">
        <div class="absolute inset-0 bg-gradient-to-b from-gray-900/50 to-gray-900"></div>
    </div>
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h1 class="text-4xl font-extrabold text-white sm:text-5xl sm:tracking-tight lg:text-6xl">Nos Réalisations</h1>
        <p class="mt-6 text-xl text-gray-300 max-w-3xl mx-auto">De la conception à la livraison, découvrez la qualité de nos interventions dans le résidentiel, le tertiaire et le commerce.</p>
    </div>
</div>

<!-- Portfolio Grid -->
<div class="bg-gray-50 py-16 sm:py-24">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12">

            <!-- Card 1: EHPAD -->
            <a href="{{ route('projects.ehpad') }}" class="group relative overflow-hidden rounded-2xl shadow-xl aspect-[4/3] cursor-pointer block">
                <img src="https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?q=80&w=1600&auto=format&fit=crop" alt="EHPAD & Maisons de Retraite" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent transition-opacity duration-300">
                    <div class="absolute bottom-0 left-0 p-8 transform transition-transform duration-300 group-hover:-translate-y-2">
                        <span class="inline-block px-3 py-1 bg-teal-600 text-white text-xs font-bold uppercase tracking-wider rounded-full mb-3">Santé & Collectif</span>
                        <h3 class="text-2xl md:text-3xl font-bold text-white mb-2">EHPAD & Maisons de Retraite</h3>
                        <p class="text-gray-300 text-sm md:text-base opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-100">
                            Rénovation des chambres, mise aux normes PMR des salles de bain et optimisation des espaces communs pour le bien-être des résidents.
                        </p>
                    </div>
                </div>
            </a>

            <!-- Card 2: Maison Individuelle -->
            <a href="{{ route('projects.maison') }}" class="group relative overflow-hidden rounded-2xl shadow-xl aspect-[4/3] cursor-pointer block">
                <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?q=80&w=1600&auto=format&fit=crop" alt="Maison Individuelle" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent transition-opacity duration-300">
                    <div class="absolute bottom-0 left-0 p-8 transform transition-transform duration-300 group-hover:-translate-y-2">
                         <span class="inline-block px-3 py-1 bg-purple-600 text-white text-xs font-bold uppercase tracking-wider rounded-full mb-3">Résidentiel</span>
                        <h3 class="text-2xl md:text-3xl font-bold text-white mb-2">Maison Individuelle</h3>
                        <p class="text-gray-300 text-sm md:text-base opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-100">
                            Construction, extension et rénovation globale. Aménagement intérieur sur-mesure et isolation thermique performante.
                        </p>
                    </div>
                </div>
            </a>

            <!-- Card 3: Magasins -->
            <a href="{{ route('projects.magasin') }}" class="group relative overflow-hidden rounded-2xl shadow-xl aspect-[4/3] cursor-pointer block">
                <img src="https://images.unsplash.com/photo-1567401893414-76b7b1e5a7a5?q=80&w=1600&auto=format&fit=crop" alt="Magasins Grands Surfaces" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent transition-opacity duration-300">
                    <div class="absolute bottom-0 left-0 p-8 transform transition-transform duration-300 group-hover:-translate-y-2">
                         <span class="inline-block px-3 py-1 bg-amber-600 text-white text-xs font-bold uppercase tracking-wider rounded-full mb-3">Commerce</span>
                        <h3 class="text-2xl md:text-3xl font-bold text-white mb-2">Magasins & Surfaces Commerciales</h3>
                        <p class="text-gray-300 text-sm md:text-base opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-100">
                            Agencement de surfaces de vente, éclairage technique et climatisation pour le confort client. Respect des délais courts.
                        </p>
                    </div>
                </div>
            </a>

             <!-- Card 4: Chaufferie -->
            <a href="{{ route('projects.chaufferie') }}" class="group relative overflow-hidden rounded-2xl shadow-xl aspect-[4/3] cursor-pointer block">
                <img src="https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?q=80&w=1600&auto=format&fit=crop" alt="Chaufferie Tertiaire" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent transition-opacity duration-300">
                    <div class="absolute bottom-0 left-0 p-8 transform transition-transform duration-300 group-hover:-translate-y-2">
                         <span class="inline-block px-3 py-1 bg-red-600 text-white text-xs font-bold uppercase tracking-wider rounded-full mb-3">Industrie & Tertiaire</span>
                        <h3 class="text-2xl md:text-3xl font-bold text-white mb-2">Chaufferie Tertiaire</h3>
                        <p class="text-gray-300 text-sm md:text-base opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-100">
                            Installation et maintenance de systèmes de chauffage grande puissance. Réseaux hydrauliques complexes et régulation.
                        </p>
                    </div>
                </div>
            </a>

        </div>

    </div>
</div>

<!-- CTA -->
<div class="bg-teal-900 py-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-3xl font-bold text-white mb-4">Un projet en tête ?</h2>
        <p class="text-xl text-teal-100 mb-8 max-w-2xl mx-auto">Parlez-nous de vos besoins, nous construirons ensemble la solution adaptée.</p>
        <a href="{{ route('contact') }}" class="inline-flex items-center justify-center px-8 py-4 border border-transparent rounded-full shadow-lg text-lg font-bold text-teal-900 bg-white hover:bg-gray-100 transition-all transform hover:scale-105">
            Discuter de mon projet
        </a>
    </div>
</div>
@endsection