@props(['networks'])

{{--
    Text/initial badges rather than reproduced network logos — carrying an
    actual MTN/Airtel/etc. logo mark here would raise the same trademark
    concern as copying BuyPower's branding did; this ticker communicates
    "every major network is supported" without reproducing anyone's mark.
--}}
<section class="border-y border-slate-200 bg-slate-50 py-8 dark:border-slate-800 dark:bg-slate-900/50" aria-label="Supported networks and billers">
    <div class="group relative flex overflow-hidden [mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent)]">
        @for ($i = 0; $i < 2; $i++)
            <div class="flex shrink-0 animate-marquee items-center gap-4 pr-4 group-hover:[animation-play-state:paused]" aria-hidden="{{ $i === 1 ? 'true' : 'false' }}">
                @foreach ($networks as $network)
                    <span class="flex items-center gap-2 rounded-full border border-slate-200 bg-white px-5 py-2.5 text-sm font-semibold whitespace-nowrap text-slate-700 shadow-sm dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200">
                        <span class="flex h-6 w-6 items-center justify-center rounded-full bg-brand-100 text-xs font-bold text-brand-700 dark:bg-brand-900/60 dark:text-brand-300">
                            {{ Str::substr($network['name'], 0, 1) }}
                        </span>
                        {{ $network['name'] }}
                    </span>
                @endforeach
            </div>
        @endfor
    </div>
</section>