Testimonials

@props([
    'eyebrow'     => 'Testimonials',
    'heading'     => 'Trusted by teams that ship',
    'lead'        => 'From indie hackers to enterprise engineering orgs — here\'s what they say about building with our component system.',
    'ratingScore' => '4.9',
    'ratingCount' => '1,200',
    'logos'       => null,
    'testimonials'=> null,
])

@php
    $logos ??= [
        ['label' => 'Acme Corp'],
        ['label' => 'Globex'],
        ['label' => 'Initech'],
        ['label' => 'Umbrella'],
    ];

    $testimonials ??= [
        ['quote' => 'Shipping a polished dashboard used to take weeks. With this system we had our first production screen in an afternoon. The token layer alone saved our design-to-code handoff.', 'name' => 'Priya Nair', 'role' => 'Head of Product', 'company' => 'Acme Corp', 'src' => null, 'fallback' => 'PN'],
        ['quote' => 'Every block composes cleanly with our existing Blade views. RTL support and dark-mode came for free — no custom CSS, no overrides, no surprises.', 'name' => 'Lucas Ferreira', 'role' => 'Senior Engineer', 'company' => 'Globex', 'src' => null, 'fallback' => 'LF'],
        ['quote' => 'The copy-into-your-app model was the deciding factor. We own the code; audits are straightforward; and we can extend anything without forking a dependency.', 'name' => 'Aisha Kamara', 'role' => 'CTO', 'company' => 'Initech', 'src' => null, 'fallback' => 'AK'],
    ];
@endphp

<x-ui.section data-slot="testimonials-split" space="xl" {{ $attributes }}>
    <x-ui.container size="xl" gutter="sm">
        <div class="lg:grid lg:grid-cols-2 lg:gap-x-16 xl:gap-x-24">
            <div class="lg:sticky lg:top-24 lg:self-start">
                <x-ui.badge variant="outline" class="mb-4">{{ __($eyebrow) }}</x-ui.badge>
                <h2 class="text-3xl font-bold tracking-tight sm:text-4xl">{{ __($heading) }}</h2>
                <p class="mt-4 text-base leading-relaxed text-muted-foreground">{{ __($lead) }}</p>

                <div class="mt-8 flex items-center gap-x-4">
                    <div class="flex items-center gap-x-0.5" role="img" aria-label="{{ __(':score out of 5 stars', ['score' => $ratingScore]) }}">
                        @for ($i = 0; $i < 5; $i++)
                            <svg viewBox="0 0 20 20" fill="currentColor" class="size-5 text-warning" aria-hidden="true">
                                <path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" clip-rule="evenodd" />
                            </svg>
                        @endfor
                    </div>
                    <p class="text-sm text-muted-foreground"><span class="font-semibold text-foreground">{{ $ratingScore }}</span> {{ __('from :count reviews', ['count' => $ratingCount]) }}</p>
                </div>

                <div class="mt-10 border-t border-border pt-8">
                    <p class="mb-6 text-sm font-medium uppercase tracking-widest text-muted-foreground">{{ __('Trusted by') }}</p>
                    <div class="flex flex-wrap items-center gap-x-8 gap-y-4">
                        @foreach ($logos as $logo)
                            <span class="select-none text-base font-semibold text-muted-foreground transition-colors duration-200 hover:text-muted-foreground" aria-label="{{ $logo['label'] }}">{{ $logo['label'] }}</span>
                        @endforeach
                    </div>
                </div>
            </div>

            <div class="mt-12 flex flex-col gap-y-6 lg:mt-0">
                @foreach ($testimonials as $testimonial)
                    <x-ui.quote-card
                        glyph="solid"
                        size="md"
                        :divider="false"
                        :quote="__($testimonial['quote'])"
                        :name="__($testimonial['name'])"
                        :role="__($testimonial['role'])"
                        :company="__($testimonial['company'])"
                        :avatar="$testimonial['src'] ?? null"
                        :initials="$testimonial['fallback'] ?? null"
                        class="sm:p-8"
                    />
                @endforeach
            </div>
        </div>
    </x-ui.container>
</x-ui.section>