@php
    $section = function (string $slug) use ($document): ?array {
        foreach ($document['sections'] as $item) {
            if ($item['slug'] === $slug) {
                return $item;
            }
        }

        return null;
    };
    $cards = [
        ['slug' => 'kitchen', 'icon' => 'kitchen'],
        ['slug' => 'home', 'icon' => 'sofa'],
        ['slug' => 'office', 'icon' => 'office'],
        ['slug' => 'electronics', 'icon' => 'electronics'],
    ];
    $reasons = [
        ['slug' => 'practical', 'icon' => 'grid'],
        ['slug' => 'easy', 'icon' => 'search'],
        ['slug' => 'discovery', 'icon' => 'tag'],
    ];
@endphp

<x-store.layout :title="$document['seo_title']" :description="$document['meta_description']" :canonical="$canonical">
    <x-store.header />
    <x-store.category-nav :items="$navItems" />
    <main class="info-page mx-auto w-full max-w-3xl px-4 py-6 lg:max-w-5xl lg:py-8">
        <p class="text-[12px] text-muted"><a href="{{ route('home') }}" class="font-medium text-brand">{{ __('ui.home') }}</a> / {{ __('ui.about') }}</p>
        <h1 class="mt-2 text-[26px] font-bold leading-tight text-navy lg:text-4xl">{{ $document['title'] }}</h1>
        <p class="mt-1 text-sm font-medium text-brand">{{ $document['subtitle'] }}</p>

        @if ($intro = $section('intro'))
            <div class="mt-5 space-y-3 text-sm leading-relaxed text-[#3d4663]">
                @foreach (preg_split("/\n\s*\n/", trim($intro['body'])) as $paragraph)
                    <p>{{ $paragraph }}</p>
                @endforeach
            </div>
        @endif

        @if ($mission = $section('mission'))
            <section class="mt-6 rounded-2xl border border-[#E6E2F6] bg-[#F4F1FF] px-4 py-4">
                <h2 class="text-lg font-bold text-navy">{{ $mission['heading'] }}</h2>
                <p class="mt-2 text-sm leading-relaxed text-[#3d4663]">{{ $mission['body'] }}</p>
            </section>
        @endif

        <h2 class="mt-7 text-lg font-bold text-navy">{{ __('ui.find_title') }}</h2>
        <div class="mt-3 grid gap-3 sm:grid-cols-2">
            @foreach ($cards as $card)
                @if ($item = $section($card['slug']))
                    <article class="info-card">
                        <x-store.icon :name="$card['icon']" class="text-brand" width="20" height="20" />
                        <h3 class="mt-2 text-sm font-bold text-navy">{{ $item['heading'] }}</h3>
                        <p class="mt-1 text-[13px] leading-snug text-muted">{{ $item['body'] }}</p>
                    </article>
                @endif
            @endforeach
        </div>
        @if ($more = $section('more'))
            <p class="mt-3 text-[13px] leading-relaxed text-muted">{{ $more['body'] }}</p>
        @endif

        <h2 class="mt-7 text-lg font-bold text-navy">{{ __('ui.why_shop') }}</h2>
        <div class="mt-3 grid gap-3 md:grid-cols-3">
            @foreach ($reasons as $reason)
                @if ($item = $section($reason['slug']))
                    <article class="info-card">
                        <x-store.icon :name="$reason['icon']" class="text-brand" width="18" height="18" />
                        <h3 class="mt-2 text-sm font-bold text-navy">{{ $item['heading'] }}</h3>
                        <p class="mt-1 text-[13px] leading-snug text-muted">{{ $item['body'] }}</p>
                    </article>
                @endif
            @endforeach
        </div>

        @if ($cta = $section('cta-title'))
            <section class="mt-7 rounded-2xl bg-brand px-5 py-5 text-white">
                <h2 class="text-lg font-bold">{{ $cta['heading'] }}</h2>
                <p class="mt-1 text-sm text-white/90">{{ $cta['body'] }}</p>
                <a href="{{ route('home') }}#featured" class="mt-3 inline-flex items-center gap-1 rounded-full bg-accent px-4 py-2 text-sm font-semibold text-navy">
                    {{ __('ui.explore') }}
                    <x-store.icon name="arrow-right" width="16" height="16" />
                </a>
            </section>
        @endif
    </main>
    <x-store.footer />
    <x-store.mobile-bottom-nav />
    <x-store.drawers :categories="$categories" />
</x-store.layout>