@props([
    'category',
    'index' => 0,
    'description' => null,
])

@php
    // ---------------------------------------------------------------
    // Mapping slug -> fichier SVG dans resources/icons/activities/
    // ---------------------------------------------------------------
    $slugMap = [
        'facades'               => 'facades',
        'amenagement-exterieur' => 'amenagement-exterieur',
        'crepis'                => 'crepis',
        'toiture'               => 'toiture',
        'maconnerie'            => 'maconnerie',
        'cloison-interieur'     => 'cloison-interieur',
        'cloisons-interieures'  => 'cloison-interieur',
    ];

    $slug = $category->slug ?? '';
    $iconFile = $slugMap[$slug] ?? null;

    // Fallback : essayer de trouver par mot-cle dans le nom
    if (!$iconFile) {
        $nameLower = mb_strtolower($category->name ?? '');
        $keywords = [
            'facade'      => 'facades',
            'amenagement' => 'amenagement-exterieur',
            'exterieur'   => 'amenagement-exterieur',
            'crepis'      => 'crepis',
            'enduit'      => 'crepis',
            'toiture'     => 'toiture',
            'toit'        => 'toiture',
            'maconnerie'  => 'maconnerie',
            'macon'       => 'maconnerie',
            'cloison'     => 'cloison-interieur',
            'interieur'   => 'cloison-interieur',
        ];
        foreach ($keywords as $keyword => $file) {
            if (str_contains($nameLower, $keyword)) {
                $iconFile = $file;
                break;
            }
        }
    }

    // Chemin du SVG
    $svgPath = resource_path("icons/activities/{$iconFile}.svg");
    if (!$iconFile || !file_exists($svgPath)) {
        $svgPath = resource_path('icons/activities/default.svg');
    }

    $svgContent = file_exists($svgPath) ? file_get_contents($svgPath) : '';

    // Descriptions par defaut
    $defaultDescriptions = [
        'facades'               => 'Renovation, ravalement et isolation de facades. Nous redonnons vie a vos murs exterieurs avec des techniques eprouvees et des materiaux de qualite, pour un resultat esthetique et durable.',
        'amenagement-exterieur' => 'Terrasses, allees, clotures, murets et pavage. Nous concevons et realisons vos espaces exterieurs pour qu\'ils allient fonctionnalite et elegance au quotidien.',
        'crepis'                => 'Application de crepis interieurs et exterieurs, enduits decoratifs et finitions. Un savoir-faire artisanal pour des surfaces lisses, texturees ou structurees selon vos envies.',
        'toiture'               => 'Renovation, reparation et entretien de toiture. Charpente, couverture, zinguerie et isolation : nous assurons l\'etancheite et la longevite de votre toit.',
        'maconnerie'            => 'Travaux de gros oeuvre et maconnerie traditionnelle. Fondations, murs porteurs, extensions et transformations — la base solide de tout projet de construction.',
        'cloison-interieur'     => 'Pose de cloisons seches, faux plafonds et amenagements interieurs. Redistribuez vos espaces rapidement et proprement avec des finitions soignees.',
    ];

    $desc = $description
        ?? $category->description
        ?? $defaultDescriptions[$iconFile ?? '']
        ?? 'Notre expertise en ' . mb_strtolower($category->name) . ' nous permet de realiser des travaux de qualite, adaptes a chaque projet.';

    // Couleurs alternees
    $colors = [
        ['from-blue-50', 'to-blue-100', 'text-blue-400', 'group-hover:text-blue-500'],
        ['from-emerald-50', 'to-emerald-100', 'text-emerald-400', 'group-hover:text-emerald-500'],
        ['from-amber-50', 'to-amber-100', 'text-amber-400', 'group-hover:text-amber-500'],
        ['from-rose-50', 'to-rose-100', 'text-rose-400', 'group-hover:text-rose-500'],
        ['from-violet-50', 'to-violet-100', 'text-violet-400', 'group-hover:text-violet-500'],
        ['from-cyan-50', 'to-cyan-100', 'text-cyan-400', 'group-hover:text-cyan-500'],
    ];
    $color = $colors[$index % count($colors)];
@endphp

<div id="{{ $category->slug }}"
     class="group bg-white rounded-2xl border border-gray-100 shadow-sm hover:shadow-xl hover:border-gray-200 transition-all duration-300 overflow-hidden scroll-mt-20">

    {{-- Icone --}}
    <div class="bg-gradient-to-br {{ $color[0] }} {{ $color[1] }} p-8 flex items-center justify-center">
        <div class="w-12 h-12 {{ $color[2] }} {{ $color[3] }} transition-colors duration-300">
            {!! $svgContent !!}
        </div>
    </div>

    {{-- Contenu --}}
    <div class="p-6">
        <span class="inline-block text-xs font-semibold uppercase tracking-wider text-gray-400 mb-2">
            Activite {{ $index + 1 }}
        </span>
        <h3 class="text-xl font-bold text-gray-900 mb-3 group-hover:text-primary-700 transition-colors">
            {{ $category->name }}
        </h3>
        <p class="text-gray-600 text-sm leading-relaxed mb-5 line-clamp-4">
            {{ $desc }}
        </p>

        {{-- Actions --}}
        <div class="flex items-center justify-between pt-4 border-t border-gray-100">
            <a href="{{ route('activities.show', $category->slug) }}"
               class="inline-flex items-center text-sm font-semibold text-primary-700 hover:text-primary-800 transition">
                En savoir plus
                <svg class="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform" 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>
            @if($category->published_projects_count ?? false)
                <span class="text-xs text-gray-400">
                    {{ $category->published_projects_count }} projet{{ $category->published_projects_count > 1 ? 's' : '' }}
                </span>
            @endif
        </div>
    </div>
</div>