@php
    $defaultCards = [
        ['slug' => 'Paid_Ads', 'number' => '01', 'icon' => 'MegaphoneIcon', 'title' => 'Paid Ads', 'description' => 'Campagnes Google Ads, Social Ads, Display et Amazon pensees pour la conversion et le ROI.', 'tags' => ['Google Ads', 'Social Ads', 'Display', 'Amazon']],
        ['slug' => 'Marketing_de_contenu', 'number' => '02', 'icon' => 'PencilSquareIcon', 'title' => 'Marketing de contenu', 'description' => 'Stratégie éditoriale, branding, vidéos, storytelling et community management à forte valeur.', 'tags' => ['Editorial', 'Branding', 'Video', 'Community']],
        ['slug' => rawurldecode('D%C3%A9veloppement_%26_technologies'), 'number' => '03', 'icon' => 'CodeBracketIcon', 'title' => 'Développement & Tech', 'description' => 'Sites web, landing pages, CRM et apps sur mesure, performants et orientés conversion.', 'tags' => ['Laravel', 'CRM', 'Apps']],
        ['slug' => 'Analytics_et_data', 'number' => '04', 'icon' => 'ChartBarIcon', 'title' => 'Analytics & Data', 'description' => 'Tracking, reporting, data visualisation, MMP et analyse de performance pour mieux décider.', 'tags' => ['GA4', 'Looker', 'MMP']],
        ['slug' => 'Automation', 'number' => '05', 'icon' => 'BoltIcon', 'title' => 'Automation', 'description' => 'Scénarios e-mail, SMS, WhatsApp, CRM et nurturing multicanal pour accélérer vos opérations.', 'tags' => ['Email', 'SMS', 'WhatsApp']],
        ['slug' => 'SEO', 'number' => '06', 'icon' => 'MagnifyingGlassIcon', 'title' => 'SEO', 'description' => 'Audit technique, netlinking, SEO local et optimisation sémantique pour gagner en visibilité.', 'tags' => ['Audit', 'Local', 'Netlinking']],
    ];
@endphp

<section id="expertises" class="atirao-expertises" aria-labelledby="atirao-expertises-title" data-atirao-reveal-section>
    <div class="atirao-container">
        <div class="atirao-section-heading">
            <div class="atirao-reveal" data-atirao-reveal>
                <div class="atirao-section-label">
                    <span></span>
                    Nos expertises
                </div>
                <h2 id="atirao-expertises-title">
                    Exécution multicanale.<br>
                    <span>Performance prouvée.</span>
                </h2>
            </div>
            <p class="atirao-reveal" data-atirao-reveal>
                Un accompagnement 360° pour faire grandir votre marque en ligne.
            </p>
        </div>

        <div class="atirao-expertises__grid">
            @foreach ($defaultCards as $card)
                <article class="atirao-expertise-card atirao-reveal {{ $loop->first ? 'atirao-expertise-card--accent' : '' }}" style="--card-index: {{ $loop->index }}" data-atirao-reveal>
                    <div class="atirao-expertise-card__top">
                        <span>{{ $card['number'] }}</span>
                        <div class="atirao-expertise-card__icon">
                            <x-ui.icon :name="$card['icon']" :size="19" />
                        </div>
                    </div>
                    <div class="atirao-expertise-card__body">
                        <h3>{{ $card['title'] }}</h3>
                        <p>{{ $card['description'] }}</p>
                    </div>
                    <div class="atirao-expertise-card__tags">
                        @foreach ($card['tags'] as $tag)
                            <span>{{ $tag }}</span>
                        @endforeach
                    </div>
                    <a class="atirao-expertise-card__link" href="{{ route('expertises.show', $card['slug']) }}">
                        En savoir plus
                        <x-ui.icon name="ArrowRightIcon" :size="12" />
                    </a>
                </article>
            @endforeach
        </div>
    </div>
</section>