Features

@props([
    'eyebrow' => 'Everything you need',
    'heading' => 'Built for how modern teams work',
    'lead'    => 'Every feature is designed to reduce friction, improve collaboration, and help your team ship faster — without sacrificing quality.',
    'items'   => null,
])

@php
    $items ??= [
        ['value' => 'feature-0', 'title' => 'Instant deployment pipelines', 'description' => 'Push to any branch and your changes are live in seconds. Our zero-config CI/CD layer detects your stack, caches dependencies, and streams build logs in real time.', 'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5 10.5 6.75 14.25 10.5l5.25-5.25M21 3h-6m6 0v6" />'],
        ['value' => 'feature-1', 'title' => 'Collaborative review workflows', 'description' => 'Invite teammates to comment on any line, suggest edits, and approve changes — all tracked inside a single audit trail your whole organisation can trust.', 'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z" />'],
        ['value' => 'feature-2', 'title' => 'Granular access controls', 'description' => 'Grant or revoke permissions at the workspace, project, or file level. Role-based policies integrate with your existing identity provider via SAML or OAuth 2.0.', 'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z" />'],
        ['value' => 'feature-3', 'title' => 'Analytics and usage insights', 'description' => 'Understand how your product is being used with real-time dashboards, retention curves, and funnel analysis — no third-party script required.', 'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z" />'],
    ];

    $defaultValue = $items[0]['value'] ?? 'feature-0';
@endphp

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

        <div class="mt-12 flex flex-col gap-8 lg:mt-16 lg:flex-row lg:items-start lg:gap-12" x-data="{ active: @js($defaultValue) }">
            <div class="w-full lg:w-5/12">
                <x-ui.accordion :default="$defaultValue" variant="separated" class="w-full">
                    @foreach ($items as $item)
                        <x-ui.accordion.item :value="$item['value']" @click="active = {{ Js::from($item['value']) }}">
                            <x-ui.accordion.trigger>
                                <x-slot:icon>
                                    {{-- TRUST BOUNDARY: `icon` is rendered as raw SVG markup ({!! !!}); it must be
                                         developer-authored path data, never user/CMS input. To render icons chosen
                                         at runtime, switch to an internal key => svg map (see weather-widget-01). --}}
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="size-5 shrink-0" aria-hidden="true">{!! $item['icon'] !!}</svg>
                                </x-slot:icon>
                                {{ __($item['title']) }}
                            </x-ui.accordion.trigger>
                            <x-ui.accordion.content>
                                <p class="text-sm leading-relaxed text-muted-foreground">{{ __($item['description']) }}</p>
                            </x-ui.accordion.content>
                        </x-ui.accordion.item>
                    @endforeach
                </x-ui.accordion>
            </div>

            <div class="w-full lg:sticky lg:top-24 lg:w-7/12">
                <div class="relative aspect-video overflow-hidden rounded-lg border border-border bg-muted">
                    @foreach ($items as $item)
                        <div
                            x-show="active === @js($item['value'])"
                            x-transition:enter="transition duration-300 ease-out"
                            x-transition:enter-start="opacity-0 translate-y-2"
                            x-transition:enter-end="opacity-100 translate-y-0"
                            x-transition:leave="absolute inset-0 transition duration-150 ease-in"
                            x-transition:leave-start="opacity-100"
                            x-transition:leave-end="opacity-0"
                            class="flex size-full flex-col items-center justify-center gap-4 p-8"
                            aria-hidden="true"
                        >
                            <span class="flex size-16 items-center justify-center rounded-lg bg-primary/10 text-primary ring-1 ring-primary/20">
                                {{-- TRUST BOUNDARY: `icon` is rendered as raw SVG markup ({!! !!}); it must be
                                     developer-authored path data, never user/CMS input. To render icons chosen
                                     at runtime, switch to an internal key => svg map (see weather-widget-01). --}}
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="size-8" aria-hidden="true">{!! $item['icon'] !!}</svg>
                            </span>
                            <p class="text-center text-sm font-medium text-muted-foreground">{{ __($item['title']) }}</p>
                            <div class="w-full max-w-xs space-y-2" aria-hidden="true">
                                <div class="h-2 w-full rounded-full bg-border"></div>
                                <div class="h-2 w-4/5 rounded-full bg-border"></div>
                                <div class="h-2 w-3/5 rounded-full bg-border"></div>
                            </div>
                        </div>
                    @endforeach
                    <div class="absolute end-3 top-3 rounded-md bg-background/80 px-2 py-2 text-sm text-muted-foreground ring-1 ring-border backdrop-blur-sm" aria-hidden="true">{{ __('Preview') }}</div>
                </div>
            </div>
        </div>
    </x-ui.container>
</x-ui.section>