Logo Cloud

@props([
    'eyebrow' => 'Trusted by teams worldwide',
    'heading' => 'Trusted by fast-moving teams everywhere',
    'logos' => null,
    'spotlight' => false,
])

@php
    // A "trusted by" logo cloud, optionally with a cursor-spotlight reveal
    // (spotlight=true). The base grid renders the wordmarks in a muted token;
    // when spotlight is on, an aria-hidden overlay duplicates them in
    // text-foreground and is clipped by a radial mask centred on the pointer
    // (the --x/--y CSS vars written by the inline Alpine handler), so logos
    // brighten as the spotlight passes over them. The mask uses the bare
    // `black`/`transparent` keywords (token-safe — no raw colour) and defaults
    // to the centre, so a static spotlight still shows with no pointer and for
    // reduced-motion users (onMove bails on prefers-reduced-motion).
    $logos ??= [
        'Northwind',
        'Acme Co',
        'Globex',
        'Initech',
        'Umbrella',
        'Soylent',
        'Hooli',
        'Vandelay',
        'Stark',
        'Wayne',
    ];

    $gridClasses = 'grid grid-cols-2 overflow-hidden rounded-lg border border-border sm:grid-cols-3 lg:grid-cols-5';
    $cellClasses = 'flex items-center justify-center border-b border-e border-border p-6 last:border-e-0 sm:p-8 [&:nth-child(2n)]:border-e-0 sm:[&:nth-child(2n)]:border-e sm:[&:nth-child(3n)]:border-e-0 lg:[&:nth-child(3n)]:border-e lg:[&:nth-child(5n)]:border-e-0';
    $logoClasses = 'text-base font-semibold tracking-tight sm:text-lg';
@endphp

<x-ui.section data-slot="logo-cloud-01" space="xl" {{ $attributes }}>
    <div class="mx-auto max-w-5xl px-4">
        <div class="flex flex-col items-center text-center">
            @if ($eyebrow)
                <x-ui.badge variant="secondary" class="mb-6">{{ __($eyebrow) }}</x-ui.badge>
            @endif

            <h2 class="text-balance text-2xl font-semibold tracking-tight text-muted-foreground sm:text-3xl">
                {{ __($heading) }}
            </h2>

            <x-ui.separator class="mt-8 max-w-xs" />
        </div>

        @if ($spotlight)
            {{-- Spotlight stage: the pointer position is mirrored into --x/--y;
                 the reveal layer is masked to a soft circle around it. --}}
            <div
                x-data="{
                    reduced: window.matchMedia('(prefers-reduced-motion: reduce)').matches,
                    onMove(e) {
                        if (this.reduced) return;
                        const r = this.$el.getBoundingClientRect();
                        this.$el.style.setProperty('--x', (e.clientX - r.left) + 'px');
                        this.$el.style.setProperty('--y', (e.clientY - r.top) + 'px');
                    },
                }"
                @pointermove="onMove($event)"
                style="--x:50%; --y:50%; --spot:260px;"
                class="group relative mt-12"
            >
                {{-- Base layer: muted wordmarks (always legible, the accessible copy). --}}
                <ul role="list" class="{{ $gridClasses }}">
                    @foreach ($logos as $logo)
                        <li class="{{ $cellClasses }}">
                            <span class="{{ $logoClasses }} text-muted-foreground">{{ __($logo) }}</span>
                        </li>
                    @endforeach
                </ul>

                {{-- Reveal layer: a brighter duplicate clipped to the spotlight. It is
                     purely decorative (the base layer already carries the names). --}}
                <ul
                    role="presentation"
                    aria-hidden="true"
                    class="{{ $gridClasses }} pointer-events-none absolute inset-0 border-transparent"
                    style="-webkit-mask-image:radial-gradient(var(--spot) circle at var(--x) var(--y), black 0%, transparent 70%); mask-image:radial-gradient(var(--spot) circle at var(--x) var(--y), black 0%, transparent 70%);"
                >
                    @foreach ($logos as $logo)
                        <li class="{{ $cellClasses }} border-transparent">
                            <span class="{{ $logoClasses }} text-foreground">{{ __($logo) }}</span>
                        </li>
                    @endforeach
                </ul>
            </div>
        @else
            <ul role="list" class="{{ $gridClasses }} mt-12">
                @foreach ($logos as $logo)
                    <li class="{{ $cellClasses }}">
                        <span class="{{ $logoClasses }} text-muted-foreground transition-colors hover:text-foreground">
                            {{ __($logo) }}
                        </span>
                    </li>
                @endforeach
            </ul>
        @endif
    </div>
</x-ui.section>