@extends('layouts.app')

@section('meta_title', 'Nos Activites - ' . config('app.name'))
@section('meta_description', 'Decouvrez nos domaines d\'expertise : facades, amenagement exterieur, crepis, toiture, maconnerie, cloisons interieures.')

@section('content')
    {{-- Header --}}
    <section class="hero-gradient text-white py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <nav class="text-sm text-blue-200 mb-4">
                <a href="{{ route('home') }}" class="hover:text-white transition">Accueil</a>
                <span class="mx-2">/</span>
                <span class="text-white">Activites</span>
            </nav>
            <h1 class="text-4xl font-extrabold mb-4">Nos Activites</h1>
            <p class="text-xl text-blue-100 max-w-2xl">
                Decouvrez l'ensemble de nos domaines d'expertise en construction et renovation.
            </p>
        </div>
    </section>

    {{-- ================================================================
         Grille de cards activites
         ================================================================ --}}
    <section class="py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

            {{-- Introduction --}}
            <div class="text-center max-w-3xl mx-auto mb-14">
                <h2 class="text-3xl font-bold text-gray-900 mb-4">Une expertise complete</h2>
                <p class="text-gray-500 text-lg leading-relaxed">
                    De la toiture aux cloisons interieures, en passant par les facades et l'amenagement exterieur,
                    nous couvrons l'ensemble des travaux de construction et de renovation.
                </p>
            </div>

            {{-- Grille responsive --}}
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
                @foreach($categories as $index => $category)
                    <x-activity-card :category="$category" :index="$index" />
                @endforeach
            </div>

        </div>
    </section>

    {{-- ================================================================
         Section detail alterned (pour SEO + contenu riche)
         ================================================================ --}}
    <section class="py-16 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center max-w-3xl mx-auto mb-14">
                <h2 class="text-3xl font-bold text-gray-900 mb-4">En detail</h2>
                <p class="text-gray-500">Chaque activite beneficie de notre savoir-faire et de notre exigence de qualite.</p>
            </div>

            <div class="space-y-20">
                @php
                    $defaultDescriptions = [
                        'facades'               => 'La facade est la premiere impression de votre batiment. Nous realisons le ravalement, l\'isolation thermique par l\'exterieur (ITE), la peinture et la restauration de facades en tous materiaux. Nos techniques garantissent un resultat esthetique durable et une meilleure performance energetique.',
                        'amenagement-exterieur' => 'Terrasses en bois ou en pierre, allees carrossables, murets de soutenement, clotures, pavage et dallage : nous transformons vos espaces exterieurs en lieux de vie fonctionnels et accueillants, en harmonie avec votre habitation.',
                        'crepis'                => 'Nos equipes maitrisent l\'application de crepis mineraux, silicone et acryliques, tant en interieur qu\'en exterieur. Finitions lisses, grattees, talochees ou structurees : chaque projet est realise avec precision pour un rendu impeccable.',
                        'toiture'               => 'Reparation, renovation complete ou construction neuve : nous intervenons sur tous types de toitures (tuiles, ardoises, zinc, toitures plates). Charpente, isolation, zinguerie et etancheite sont au coeur de notre metier.',
                        'maconnerie'            => 'Du gros oeuvre aux finitions, notre equipe de macons realise fondations, murs porteurs, extensions, ouvertures et tous travaux de structure. La maconnerie est le socle de chaque construction reussie.',
                        'cloison-interieur'     => 'Nous installons des cloisons en plaques de platre (Gyproc), faux plafonds, doublages isolants et amenagements interieurs sur mesure. Redistribuez vos espaces efficacement avec des finitions propres et soignees.',
                    ];

                    $slugMap = [
                        'facades'               => 'facades',
                        'amenagement-exterieur' => 'amenagement-exterieur',
                        'crepis'                => 'crepis',
                        'toiture'               => 'toiture',
                        'maconnerie'            => 'maconnerie',
                        'cloison-interieur'     => 'cloison-interieur',
                        'cloisons-interieures'  => 'cloison-interieur',
                    ];
                @endphp

                @foreach($categories as $index => $category)
                    @php
                        $slug = $category->slug;
                        $iconSlug = $slugMap[$slug] ?? 'default';
                        $svgPath = resource_path("icons/activities/{$iconSlug}.svg");
                        if (!file_exists($svgPath)) $svgPath = resource_path('icons/activities/default.svg');
                        $svg = file_exists($svgPath) ? file_get_contents($svgPath) : '';

                        $detailDesc = $category->description ?: ($defaultDescriptions[$iconSlug] ?? 'Notre expertise en ' . mb_strtolower($category->name) . ' nous permet de realiser des travaux de qualite.');
                    @endphp

                    <div class="flex flex-col {{ $index % 2 !== 0 ? 'md:flex-row-reverse' : 'md:flex-row' }} gap-10 items-center">
                        {{-- Illustration --}}
                        <div class="flex-1 w-full">
                            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-12 flex items-center justify-center min-h-[280px]">
                                <div class="w-28 h-28 text-primary-300">
                                    {!! $svg !!}
                                </div>
                            </div>
                        </div>

                        {{-- Texte --}}
                        <div class="flex-1">
                            <h3 class="text-2xl md:text-3xl font-bold text-gray-900 mb-4">{{ $category->name }}</h3>
                            <p class="text-gray-600 leading-relaxed mb-6">
                                {{ $detailDesc }}
                            </p>
                            <div class="flex flex-wrap items-center gap-4">
                                <a href="{{ route('activities.show', $category->slug) }}"
                                   class="inline-flex items-center px-5 py-2.5 bg-primary-700 hover:bg-primary-800 text-white text-sm font-semibold rounded-lg transition shadow-sm">
                                    En savoir plus
                                    <svg class="w-4 h-4 ml-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                                </a>
                                <a href="{{ route('projects.index', ['categorie' => $category->slug]) }}"
                                   class="text-sm text-primary-600 hover:text-primary-800 font-medium underline underline-offset-4 transition">
                                    Realisations ({{ $category->published_projects_count ?? 0 }})
                                </a>
                                <a href="{{ route('contact') }}"
                                   class="text-sm text-gray-400 hover:text-primary-600 transition">
                                    Devis gratuit
                                </a>
                            </div>
                        </div>
                    </div>

                    @if(!$loop->last)
                        <hr class="border-gray-200">
                    @endif
                @endforeach
            </div>
        </div>
    </section>

    {{-- CTA --}}
    <section class="py-16 bg-primary-700 text-white">
        <div class="max-w-4xl mx-auto px-4 text-center">
            <h2 class="text-3xl font-bold mb-4">Besoin d'un devis ?</h2>
            <p class="text-blue-100 mb-8 text-lg">Nous realisons des devis gratuits et personnalises pour chacun de vos projets.</p>
            <a href="{{ route('contact') }}"
               class="inline-flex items-center px-8 py-3 bg-accent-500 hover:bg-accent-600 text-white font-semibold rounded-lg transition shadow-lg">
                Contactez-nous
            </a>
        </div>
    </section>
@endsection