Testimonial Wall code

@props([
    'quotes' => [],
])

@php
    /*
    | Masonry-style testimonial wall mixing emphasized theme-tinted cards with
    | light quote cards. Pass `quotes`
    | as an array of:
    |   [
    |     'quote'   => '…',
    |     'author'  => 'Adam Wathan',
    |     'role'    => 'Founder, Tailwind',
    |     'avatar'  => null,             // optional image src
    |     'featured'=> true,             // theme-tinted, larger-text card
    |     'brand'   => 'tailwindcss',    // optional small wordmark on featured cards
    |   ]
    |
    | Usage:
    |   <x-ui.testimonial-wall :quotes="$quotes" />
    */
@endphp

<div {{ $attributes->merge(['class' => 'columns-1 gap-5 sm:columns-2 lg:columns-3 [&>*]:mb-5']) }}>
    @foreach ($quotes as $q)
        @php
            $featured = (bool) ($q['featured'] ?? false);
            $card = $featured
                ? 'break-inside-avoid rounded-2xl border border-brand-200 bg-brand-50 p-7 dark:border-brand-800/70 dark:bg-brand-950/40'
                : 'break-inside-avoid rounded-2xl border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-900';
            $quoteColor = $featured ? 'text-gray-950 dark:text-white' : 'text-gray-700 dark:text-gray-200';
            $quoteSize = $featured ? 'text-xl leading-snug' : 'text-sm leading-relaxed';
            $authorColor = 'text-gray-900 dark:text-white';
            $roleColor = 'text-gray-500 dark:text-gray-400';
        @endphp

        <figure class="{{ $card }}">
            @if ($featured && ! empty($q['brand']))
                <figcaption class="mb-5 flex items-center gap-2 text-sm font-semibold text-gray-950 dark:text-white">
                    <x-ui.icon :name="$q['brandIcon'] ?? 'sparkle'" weight="fill" size="lg" class="text-brand-400" />
                    {{ $q['brand'] }}
                </figcaption>
            @endif

            <blockquote class="{{ $quoteSize }} {{ $quoteColor }} text-pretty">{{ $q['quote'] }}</blockquote>

            <figcaption class="mt-6 flex items-center gap-3">
                <x-ui.avatar :name="$q['author']" :src="$q['avatar'] ?? null" size="sm" />
                <div class="min-w-0">
                    <div class="truncate text-sm font-semibold {{ $authorColor }}">{{ $q['author'] }}</div>
                    @if (! empty($q['role']))
                        <div class="truncate text-xs {{ $roleColor }}">{{ $q['role'] }}</div>
                    @endif
                </div>
            </figcaption>
        </figure>
    @endforeach
</div>