@php
    $logoDirectories = [
        'Icons/brands',
        'CaseStudiesImages',
    ];
    $allowedExtensions = ['svg', 'png', 'webp', 'jpg', 'jpeg'];
    $excludedFiles = [
        'share icon.svg',
        'file.svg',
        'sogeblack.svg',
        'sogewhite.png',
    ];
    $referenceLogos = collect();

    foreach ($logoDirectories as $directory) {
        $absoluteDirectory = public_path($directory);

        if (!is_dir($absoluteDirectory)) {
            continue;
        }

        foreach (\Illuminate\Support\Facades\File::files($absoluteDirectory) as $file) {
            $extension = strtolower($file->getExtension());

            if (!in_array($extension, $allowedExtensions, true)
                || in_array(strtolower($file->getFilename()), $excludedFiles, true)) {
                continue;
            }

            $filename = $file->getFilename();
            $name = pathinfo($filename, PATHINFO_FILENAME);
            $name = preg_replace('/[_-]+/', ' ', $name);
            $name = preg_replace('/\s+/', ' ', $name);

            $referenceLogos->push([
                'name' => trim($name),
                'src' => asset($directory . '/' . $filename),
                'source' => $directory . '/' . $filename,
            ]);
        }
    }

    $referenceLogos = $referenceLogos
        ->sortBy(fn ($logo) => strtolower($logo['source']), SORT_NATURAL)
        ->values();

    $rowCount = min(3, max(1, $referenceLogos->count()));
    $logosPerRow = (int) ceil($referenceLogos->count() / $rowCount);
    $logoRows = $referenceLogos->chunk($logosPerRow)->values();
@endphp

<div class="atirao-home atirao-shared-references" data-atirao-home>
    <section
        class="atirao-reference-logos"
        aria-labelledby="shared-reference-logos-title"
        data-reference-logo-count="{{ $referenceLogos->count() }}"
    >
        <div class="atirao-container">
            <div class="atirao-reference-logos__header">
                <div class="atirao-section-label atirao-section-label--red">
                    <span></span>
                    Nos références
                </div>
                <h2 id="shared-reference-logos-title">Ils nous font confiance.</h2>
                <p>
                    Découvrez les marques qui nous ont confié leurs enjeux digitaux,
                    stratégiques et créatifs.
                </p>
            </div>

            @if ($referenceLogos->isNotEmpty())
                <div class="atirao-reference-logos__stage">
                    @foreach ($logoRows as $rowIndex => $logoRow)
                        <div class="atirao-reference-logos__lane {{ $rowIndex % 2 === 1 ? 'atirao-reference-logos__lane--reverse' : '' }}">
                            <div
                                class="atirao-reference-logos__track"
                                style="--marquee-duration: {{ 62 + ($rowIndex * 8) }}s"
                            >
                                @for ($copy = 0; $copy < 2; $copy++)
                                    <div
                                        class="atirao-reference-logos__group"
                                        @if ($copy === 1) aria-hidden="true" @endif
                                    >
                                        @foreach ($logoRow as $index => $logo)
                                            <div
                                                class="atirao-reference-logo"
                                                style="--logo-index: {{ ($rowIndex * $logosPerRow) + $index }}"
                                                data-logo-source="{{ $logo['source'] }}"
                                            >
                                                <img
                                                    src="{{ $logo['src'] }}"
                                                    alt="{{ $copy === 0 ? $logo['name'] : '' }}"
                                                    loading="lazy"
                                                    decoding="async"
                                                >
                                            </div>
                                        @endforeach
                                    </div>
                                @endfor
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>
    </section>
</div>