@php
    $partners = [
        ['name' => 'TikTok', 'label' => 'Marketing Partners', 'class' => 'tiktok'],
        ['name' => 'Google', 'label' => 'Premier Partner', 'class' => 'google'],
        ['name' => 'Meta', 'label' => 'Business Partner', 'class' => 'meta'],
        ['name' => 'AWS', 'label' => 'Partner Network', 'class' => 'aws'],
        ['name' => 'Microsoft', 'label' => 'Solutions Partner', 'class' => 'microsoft'],
    ];

    $signals = [
        ['value' => 'Beta', 'label' => 'Accès innovation'],
        ['value' => 'Ops', 'label' => 'Support régies'],
        ['value' => 'Data', 'label' => 'Pilotage certifié'],
    ];
@endphp

<section class="atirao-partners" aria-labelledby="atirao-partners-title" data-atirao-reveal-section>
    <div class="atirao-partners__mesh" aria-hidden="true"></div>
    <div class="atirao-container atirao-partners__layout">
        <div class="atirao-partners__content">
            <div class="atirao-section-label atirao-section-label--red atirao-reveal" data-atirao-reveal>
                <span></span>
                Partenaires mondiaux
            </div>

            <h2 id="atirao-partners-title" class="atirao-partners__title atirao-reveal" data-atirao-reveal>
                Un accès privilégié aux dernières innovations.
            </h2>

            <p class="atirao-partners__intro atirao-reveal" data-atirao-reveal>
                Nous collaborons avec les plus grandes régies publicitaires mondiales, Google, Meta, TikTok, Amazon, LinkedIn et plus encore, afin d'offrir à nos clients un accès privilégié aux dernières innovations du digital. Nos experts sont formés en continu par leurs équipes pour maîtriser les nouvelles fonctionnalités, garantir un pilotage optimal des campagnes et vous faire bénéficier d'un avantage compétitif durable.
            </p>

            <div class="atirao-partners__signals atirao-reveal" data-atirao-reveal>
                @foreach ($signals as $signal)
                    <div>
                        <strong>{{ $signal['value'] }}</strong>
                        <span>{{ $signal['label'] }}</span>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="atirao-partners__visual atirao-reveal" data-atirao-reveal>
            <div class="atirao-partners__screen" aria-label="Partenaires technologiques et publicitaires">
                <div class="atirao-partners__orbit" aria-hidden="true"></div>
                <div class="atirao-partners__center-mark" aria-hidden="true">
                    <span>AT</span>
                </div>

                @foreach ($partners as $index => $partner)
                    <div class="atirao-partner-chip atirao-partner-chip--{{ $partner['class'] }}" style="--chip-index: {{ $index }}">
                        @switch($partner['class'])
                            @case('tiktok')
                                <div class="atirao-partner-logo atirao-partner-logo--tiktok">
                                    <strong>TikTok<span></span></strong>
                                    <small>Marketing Partners</small>
                                </div>
                                @break

                            @case('google')
                                <div class="atirao-partner-logo atirao-partner-logo--google">
                                    <i>Premier</i>
                                    <div>
                                        <strong>
                                            <span>G</span><span>o</span><span>o</span><span>g</span><span>l</span><span>e</span>
                                        </strong>
                                        <small>Partner</small>
                                    </div>
                                </div>
                                @break

                            @case('meta')
                                <div class="atirao-partner-logo atirao-partner-logo--meta">
                                    <svg viewBox="0 0 92 54" aria-hidden="true" focusable="false">
                                        <path d="M10 40C19 11 31 11 46 39C61 11 73 11 82 40" />
                                        <path d="M10 40C17 49 31 47 46 39C61 47 75 49 82 40" />
                                    </svg>
                                    <div>
                                        <strong>Meta</strong>
                                        <small>Business Partner</small>
                                    </div>
                                </div>
                                @break

                            @case('aws')
                                <div class="atirao-partner-logo atirao-partner-logo--aws">
                                    <strong>aws</strong>
                                    <div>
                                        <small>partner</small>
                                        <small>network</small>
                                    </div>
                                </div>
                                @break

                            @case('microsoft')
                                <div class="atirao-partner-logo atirao-partner-logo--microsoft">
                                    <span class="atirao-partner-logo__window" aria-hidden="true">
                                        <i></i><i></i><i></i><i></i>
                                    </span>
                                    <div>
                                        <strong>Microsoft</strong>
                                        <small>Solutions Partner</small>
                                    </div>
                                </div>
                                @break
                        @endswitch
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</section>