Features

@props([
    'eyebrow' => 'Everything you need',
    'heading' => 'One toolkit, every surface covered',
    'subheading' => 'Composable primitives, copy-into-your-app blocks, and a design-token system that keeps light, dark, and per-surface themes in sync.',
    'hero' => null,
    'features' => null,
])

@php
    $hero ??= [
        'badge' => 'Live analytics',
        'title' => 'A dashboard your team actually reads',
        'description' => 'Real-time metrics composed from the same primitives you install — themeable, accessible, and yours to edit.',
        'metric' => '128.4k',
        'metricLabel' => 'Monthly active sessions',
        'delta' => '+18.2%',
        // Relative bar heights (out of 100) for the faux chart.
        'bars' => [38, 54, 47, 66, 58, 79, 72, 91],
    ];

    $features ??= [
        [
            'title' => 'Token themeable',
            'description' => 'Re-theme every surface by editing CSS variables — no component edits required.',
            'icon' => 'palette',
        ],
        [
            'title' => 'Accessible by default',
            'description' => 'WCAG 2.2 AA targets: keyboard, focus-visible, ARIA wiring, and RTL-safe layout.',
            'icon' => 'shield',
        ],
        [
            'title' => 'You own the source',
            'description' => 'Blocks copy into your app as plain Blade. No runtime lock-in, ever.',
            'icon' => 'code',
        ],
        [
            'title' => 'Safe updates',
            'description' => 'Pull upstream changes with reviewable diffs that never clobber your edits.',
            'icon' => 'refresh',
        ],
    ];

    $icons = [
        'palette' => '<path d="M12 21a9 9 0 1 1 0-18c4.97 0 9 3.58 9 8 0 2.5-2 4-4 4h-1.5a1.5 1.5 0 0 0-1.06 2.56A1.5 1.5 0 0 1 12 21Z"/><circle cx="7.5" cy="10.5" r="1"/><circle cx="12" cy="7.5" r="1"/><circle cx="16.5" cy="10.5" r="1"/>',
        'shield' => '<path d="M12 3 4 6v6c0 4.5 3.4 7.6 8 9 4.6-1.4 8-4.5 8-9V6l-8-3Z"/><path d="m9 12 2 2 4-4"/>',
        'code' => '<path d="m16 18 4-4-4-4"/><path d="m8 6-4 4 4 4"/><path d="m14 4-4 16"/>',
        'refresh' => '<path d="M3 12a9 9 0 0 1 15-6.7L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16"/><path d="M3 21v-5h5"/>',
    ];
@endphp

<x-ui.section space="xl" {{ $attributes }}>
    <x-ui.container gutter="sm">
        <div class="mx-auto max-w-2xl text-center">
            @if ($eyebrow)
                <x-ui.badge variant="secondary" class="mb-4">{{ __($eyebrow) }}</x-ui.badge>
            @endif
            <h2 class="text-balance text-3xl font-bold tracking-tight sm:text-4xl">{{ __($heading) }}</h2>
            <p class="mt-4 text-pretty text-xl text-muted-foreground">{{ __($subheading) }}</p>
        </div>

        <x-ui.bento :cols="3" :gap="6" class="mt-12">
            {{-- Large hero tile with a faux analytics dashboard --}}
            <x-ui.bento.item :colSpan="2" :rowSpan="2" class="flex flex-col">
                <div class="flex flex-wrap items-start justify-between gap-4">
                    <div>
                        @if (! empty($hero['badge']))
                            <x-ui.badge variant="secondary" class="mb-4">{{ __($hero['badge']) }}</x-ui.badge>
                        @endif
                        <h3 class="text-xl font-semibold tracking-tight">{{ __($hero['title']) }}</h3>
                        <p class="mt-2 max-w-md text-sm text-muted-foreground">{{ __($hero['description']) }}</p>
                    </div>
                    @if (! empty($hero['delta']))
                        <x-ui.badge variant="outline" class="gap-2">
                            <svg class="size-3 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                <path d="m6 15 6-6 6 6" />
                            </svg>
                            {{ $hero['delta'] }}
                        </x-ui.badge>
                    @endif
                </div>

                <div class="mt-6 flex items-end gap-4">
                    <span class="text-3xl font-bold tracking-tight">{{ $hero['metric'] }}</span>
                    <span class="pb-2 text-sm text-muted-foreground">{{ __($hero['metricLabel']) }}</span>
                </div>

                {{-- Faux bar chart — token colours only, fixed height steps --}}
                <div class="mt-6 flex flex-1 items-end gap-2 rounded-lg border border-border bg-gradient-to-b from-muted/40 to-background p-6" role="img" aria-label="{{ __('Illustrative usage trend chart') }}">
                    @foreach ($hero['bars'] as $i => $bar)
                        @php
                            // Map a 0-100 value to one of a fixed, JIT-safe height ramp.
                            $h = match (true) {
                                $bar >= 85 => 'h-[92%]',
                                $bar >= 70 => 'h-[76%]',
                                $bar >= 55 => 'h-[60%]',
                                $bar >= 40 => 'h-[44%]',
                                default => 'h-[30%]',
                            };
                        @endphp
                        <div class="flex h-32 flex-1 items-end" aria-hidden="true">
                            <div class="w-full rounded-t-md transition-colors {{ $h }} {{ $loop->last ? 'bg-primary' : 'bg-primary/30 group-hover:bg-primary/45' }}"></div>
                        </div>
                    @endforeach
                </div>
            </x-ui.bento.item>

            {{-- Smaller feature tiles --}}
            @foreach ($features as $feature)
                <x-ui.bento.item>
                    <x-slot:icon>
                        <span class="inline-flex size-10 items-center justify-center rounded-md border border-border bg-muted text-primary">
                            <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                {!! $icons[$feature['icon']] ?? $icons['code'] !!}
                            </svg>
                        </span>
                    </x-slot:icon>

                    <h3 class="font-semibold text-foreground">{{ __($feature['title']) }}</h3>
                    <p class="mt-2 text-sm text-muted-foreground">{{ __($feature['description']) }}</p>
                </x-ui.bento.item>
            @endforeach
        </x-ui.bento>
    </x-ui.container>
</x-ui.section>