Testimonials

@props([
    'eyebrow'      => 'Customer stories',
    'heading'      => 'Hear it straight from our customers',
    'subheading'   => 'Real teams share how our product changed the way they work — in their own words.',
    'testimonials' => null,
])

@php
    $testimonials ??= [
        ['duration' => '2:14', 'alt' => 'Sarah Chen speaking on camera', 'quote' => 'Onboarding our team went from a week-long slog to a single afternoon. I genuinely did not believe it until I saw it happen.', 'name' => 'Sarah Chen', 'role' => 'Product Lead', 'company' => 'Luminary Labs', 'src' => null, 'fallback' => 'SC'],
        ['duration' => '3:42', 'alt' => 'Marcus Reid sharing his experience', 'quote' => 'We replaced three separate tools with one. Our engineers stopped complaining — that alone tells you everything.', 'name' => 'Marcus Reid', 'role' => 'CTO', 'company' => 'Northgate Software', 'src' => null, 'fallback' => 'MR'],
        ['duration' => '1:58', 'alt' => 'Priya Nair describing her workflow', 'quote' => 'The design-system integrations are thoughtful in a way I have not seen elsewhere. It respects how we actually work.', 'name' => 'Priya Nair', 'role' => 'Head of Design', 'company' => 'Arctiq Studio', 'src' => null, 'fallback' => 'PN'],
        ['duration' => '4:07', 'alt' => 'James Okafor discussing scaling', 'quote' => 'Scaling from fifty to five hundred users was invisible to our ops team. That is the kind of quiet confidence you want.', 'name' => 'James Okafor', 'role' => 'VP Engineering', 'company' => 'Vesper Cloud', 'src' => null, 'fallback' => 'JO'],
        ['duration' => '2:33', 'alt' => 'Amara Diallo reflecting on adoption', 'quote' => 'Our non-technical co-founders were up and running without a single message to engineering. That is the dream.', 'name' => 'Amara Diallo', 'role' => 'Founder & CEO', 'company' => 'Halo Commerce', 'src' => null, 'fallback' => 'AD'],
        ['duration' => '3:19', 'alt' => 'Tom Eriksson on developer experience', 'quote' => 'Every developer on my team asked why we had not adopted this sooner. The DX is simply in a different league.', 'name' => 'Tom Eriksson', 'role' => 'Engineering Manager', 'company' => 'Polaris Systems', 'src' => null, 'fallback' => 'TE'],
    ];
@endphp

<x-ui.section space="xl" {{ $attributes }}>
    <x-ui.container size="xl" gutter="sm">
        <div class="mx-auto max-w-2xl text-center">
            <p class="text-sm font-semibold uppercase tracking-widest text-primary">{{ __($eyebrow) }}</p>
            <h2 class="mt-4 text-3xl font-bold tracking-tight sm:text-4xl">{{ __($heading) }}</h2>
            <p class="mt-4 text-base leading-7 text-muted-foreground">{{ __($subheading) }}</p>
        </div>

        <div class="mt-14 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ($testimonials as $t)
                <x-ui.card class="flex flex-col overflow-hidden p-0">
                    <div class="relative aspect-video w-full overflow-hidden bg-muted">
                        <div class="absolute inset-0 bg-gradient-to-br from-muted via-muted/60 to-secondary" role="img" aria-label="{{ __($t['alt']) }}"></div>
                        <div class="absolute inset-0 flex items-center justify-center">
                            <x-ui.button variant="default" size="icon" shape="pill" class="size-14 shadow-lg ring-4 ring-background/30 transition-transform duration-200 hover:scale-110" aria-label="{{ __('Play video') }}">
                                <svg viewBox="0 0 24 24" fill="currentColor" class="ms-0.5 size-6 shrink-0 rtl:-scale-x-100" aria-hidden="true"><path d="M8 5.14v14l11-7-11-7z" /></svg>
                            </x-ui.button>
                        </div>
                        <div class="absolute bottom-3 end-3">
                            <span class="inline-flex items-center rounded-md bg-background/80 px-2 py-0.5 text-sm font-medium tabular-nums text-foreground backdrop-blur-sm">{{ $t['duration'] }}</span>
                        </div>
                    </div>

                    <x-ui.quote-card
                        variant="plain"
                        glyph="none"
                        avatar-size="sm"
                        :quote="__($t['quote'])"
                        :name="__($t['name'])"
                        :role="__($t['role'])"
                        :company="__($t['company'])"
                        :avatar="$t['src'] ?? null"
                        :initials="$t['fallback']"
                        class="flex-1 p-6"
                    />
                </x-ui.card>
            @endforeach
        </div>
    </x-ui.container>
</x-ui.section>