@props(['partenaires'])

@php
    // On ne garde que les partenaires ayant réellement un logo.
    $logos = collect($partenaires)->filter(fn ($p) => $p->logoUrl())->values();

    $vitessePxParSeconde = 60;

    $repetitionsParCopie = max(1, (int) ceil(8 / max(1, $logos->count())));
    $listeParCopie = collect(range(1, $repetitionsParCopie))->flatMap(fn () => $logos); 
    $copies = 5;

    $logosParCopie = $listeParCopie->count();
    $largeurLogoMobile = 128 + 64;   // 8rem logo + 4rem gap (en px, base 16px)
    $largeurLogoDesktop = 176 + 112; // 11rem logo + 7rem gap (desktop)

    // Durée calculée à partir de la largeur RÉELLE d'une copie, pour garder
    // une vitesse constante (px/s) quel que soit le nombre de partenaires.
    $dureeMobile = round(($logosParCopie * $largeurLogoMobile) / $vitessePxParSeconde);
    $dureeDesktop = round(($logosParCopie * $largeurLogoDesktop) / $vitessePxParSeconde);
@endphp


@if ($logos->isNotEmpty())
<section class="ow-partenaires relative overflow-hidden">
    <div class="mx-auto max-w-7xl px-6">
        <div class="reveal text-center">
            <span class="section-eyebrow">{{ lpick('Partenaires et liens utiles', 'Partners & useful links', 'Partner & nützliche Links') }}</span>
        </div>

        <div class="ow-partenaires-body">
            {{-- Séparateur doré incurvé au-dessus du bloc de logos (effet de rouleau/cylindre) --}}
            <div class="ow-gold-arc ow-gold-arc--top"></div>

            <div class="ow-marquee group relative flex items-center">
                <div class="ow-marquee-track flex items-center" style="--ow-duree-mobile: {{ $dureeMobile }}s; --ow-duree-desktop: {{ $dureeDesktop }}s;">
                    {{-- Exactement 2 copies du ruban : la 1re est lisible, la 2e masquée aux lecteurs d'écran. --}}
                    @for ($i = 0; $i < $copies; $i++)
                        @foreach ($listeParCopie as $p)
                            @if ($p->part_url)
                                <a
                                    href="{{ $p->part_url }}"
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    class="ow-logo shrink-0"
                                    aria-label="{{ $p->part_nom }}"
                                    @if ($i > 0) aria-hidden="true" tabindex="-1" @endif
                                >
                                    <span class="ow-logo-inner">
                                        <img src="{{ $p->logoUrl() }}" alt="{{ $p->part_nom }}" class="ow-logo-img" />
                                    </span>
                                </a>
                            @else
                                <span class="ow-logo shrink-0" @if ($i > 0) aria-hidden="true" @endif>
                                    <span class="ow-logo-inner">
                                        <img src="{{ $p->logoUrl() }}" alt="{{ $p->part_nom }}" class="ow-logo-img" />
                                    </span>
                                </span>
                            @endif
                        @endforeach
                    @endfor
                </div>
            </div>

            {{-- Séparateur doré incurvé au-dessous du bloc de logos --}}
            <div class="ow-gold-arc ow-gold-arc--bottom"></div>
        </div>
    </div>
</section>

<style>
    .ow-partenaires { padding-top: 1.5rem; padding-bottom: 1.5rem; }
    .ow-partenaires-body { margin-top: 2rem; }

    /* Séparateurs incurvés : un arc de cercle (bord elliptique) dessiné avec
       un dégradé doré qui s'estompe sur les côtés, pour donner l'impression
       que la ligne épouse la surface d'un rouleau/cylindre. */
    .ow-gold-arc {
        position: relative;
        height: 18px;
        width: 100%;
        -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
        mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
    }
    .ow-gold-arc::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        height: 36px;
        border: 1px solid var(--gold, #C9963A);
        border-radius: 50%;
    }
    .ow-gold-arc--top::before { bottom: -18px; border-bottom-color: transparent; }
    .ow-gold-arc--bottom::before { top: -18px; border-top-color: transparent; opacity: 0.6; }

    .ow-marquee {
        overflow: hidden;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
        mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
    }
    .ow-marquee-track {
        width: max-content;
        gap: 4rem;
        /* Durée calculée côté serveur pour une vitesse constante (px/s) quel
           que soit le nombre de logos ; voir --ow-duree-mobile / --ow-duree-desktop
           posées en style inline sur cet élément. */
        animation: ow-marquee var(--ow-duree-mobile, 15s) linear infinite;
        will-change: transform;
    }
    /* Boucle continue : on translate d'exactement la moitié du ruban. Les deux
       moitiés étant identiques, l'image à -50% == celle à 0% -> aucune coupure. */
    @keyframes ow-marquee {
        from { transform: translateX(0); }
        to   { transform: translateX(-50%); }
    }
    .ow-marquee:hover .ow-marquee-track { animation-play-state: paused; }

    .ow-logo-img { height: 4rem; width: 8rem; object-fit: contain; }

    /* Logos plats (pas d'effet 3D) : hover CSS classique, fiable sur toute
       la largeur, y compris près des bords. */
    .ow-logo { display: inline-flex; }
    .ow-logo-inner {
        display: inline-flex;
        filter: grayscale(1);
        opacity: 0.55;
        transition: filter 0.2s ease-out, opacity 0.2s ease-out, transform 0.2s ease-out;
    }
    .ow-logo:hover .ow-logo-inner { filter: grayscale(0); opacity: 1; transform: scale(1.35); }

    @media (min-width: 768px) {
        .ow-partenaires { padding-top: 3rem; padding-bottom: 3rem; }
        .ow-marquee-track { gap: 7rem; }
        .ow-logo-img { height: 6rem; width: 11rem; }
        .ow-marquee-track { animation-duration: var(--ow-duree-desktop, 30s); }
        .ow-gold-arc { height: 26px; }
        .ow-gold-arc::before { height: 52px; }
        .ow-gold-arc--top::before { bottom: -26px; }
        .ow-gold-arc--bottom::before { top: -26px; }
    }

    @media (prefers-reduced-motion: reduce) {
        .ow-marquee-track { animation: none; flex-wrap: wrap; justify-content: center; row-gap: 1.5rem; }
    }
</style>
@endif