Hero

@props([
    'eyebrow'        => 'Loved by builders',
    'heading'        => 'The toolkit founders actually recommend',
    'subheading'     => 'Join thousands of teams shipping faster with components they own. No lock-in, no runtime dependency — just code you control.',
    'primaryCta'     => 'Start building free',
    'primaryHref'    => '#',
    'secondaryCta'   => 'Read the reviews',
    'secondaryHref'  => '#',
    'avatars'        => null,
    'ratingValue'    => 4.9,
    'ratingLabel'    => 'Rated 4.9/5 by 2,000+ founders',
    'partners'       => null,
])

@php
    $avatars ??= [
        ['src' => 'https://picsum.photos/seed/ava/80/80', 'name' => 'Ava Chen'],
        ['src' => 'https://picsum.photos/seed/bram/80/80', 'name' => 'Bram Diaz'],
        ['src' => 'https://picsum.photos/seed/cleo/80/80', 'name' => 'Cleo Park'],
        ['src' => 'https://picsum.photos/seed/dev/80/80', 'name' => 'Dev Rao'],
        ['src' => 'https://picsum.photos/seed/esme/80/80', 'name' => 'Esme Liu'],
    ];

    $partners ??= ['Northwind', 'Acme Co', 'Lumen', 'Vertex', 'Cobalt'];

    // Whole-/half-star summary read by the avatar group's accessible label so AT
    // hears the social proof, not just the decorative faces.
    $reviewerCount = max(0, count($avatars));
@endphp

<x-ui.section data-slot="hero-21" space="none" class="relative isolate overflow-hidden" {{ $attributes }}>
    <div class="mx-auto flex max-w-3xl flex-col items-center px-4 py-20 text-center sm:py-28">
        @if ($eyebrow)
            <x-ui.badge variant="secondary" class="mb-6">{{ __($eyebrow) }}</x-ui.badge>
        @endif

        <h1 class="text-balance text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
            {{ __($heading) }}
        </h1>

        <p class="mx-auto mt-6 max-w-2xl text-pretty text-lg text-muted-foreground">
            {{ __($subheading) }}
        </p>

        <div class="mt-10 flex w-full flex-col items-center justify-center gap-4 sm:w-auto sm:flex-row">
            <x-ui.button :href="$primaryHref" size="lg" class="w-full sm:w-auto">{{ __($primaryCta) }}</x-ui.button>
            @if ($secondaryCta)
                <x-ui.button :href="$secondaryHref" size="lg" variant="outline" class="w-full sm:w-auto">{{ __($secondaryCta) }}</x-ui.button>
            @endif
        </div>

        {{-- Social-proof cluster: overlapping faces + a committed rating + a summary line. --}}
        <div class="mt-12 flex flex-col items-center gap-4 sm:flex-row sm:gap-6">
            <x-ui.avatar-group
                :avatars="$avatars"
                :max="4"
                size="md"
                aria-label="{{ __(':count happy customers', ['count' => $reviewerCount]) }}"
            />

            <div class="flex flex-col items-center gap-2 sm:items-start">
                <x-ui.rating :value="$ratingValue" :max="5" :read-only="true" size="sm" />
                <p class="text-sm text-muted-foreground">{{ __($ratingLabel) }}</p>
            </div>
        </div>

        @if (! empty($partners))
            <div class="mt-14 w-full border-t border-border pt-8">
                <p class="text-sm font-medium uppercase tracking-wide text-muted-foreground">
                    {{ __('Powering teams at') }}
                </p>
                <ul class="mt-4 flex flex-wrap items-center justify-center gap-x-8 gap-y-4">
                    @foreach ($partners as $partner)
                        <li class="text-sm font-semibold tracking-tight text-foreground">
                            {{ __($partner) }}
                        </li>
                    @endforeach
                </ul>
            </div>
        @endif
    </div>
</x-ui.section>