@extends('layouts.app')

@section('title', 'Каталог — teeu')
@section('meta_description', 'Все категории товаров на маркетплейсе teeu: от строительства и ремонта до электроники и товаров для дома.')

@section('seo')
    @include('partials.seo.meta', ['canonical' => route('catalog.index'), 'ogTitle' => 'Каталог — teeu'])
@endsection

@section('content')
    <nav class="mb-4 text-sm text-[var(--color-muted)]">
        <a href="{{ route('home') }}" class="hover:text-[var(--color-primary)]">Главная</a>
        <span class="mx-1">/</span>
        <span class="text-[var(--color-ink)]">Каталог</span>
    </nav>

    <h1 class="text-2xl font-extrabold tracking-tight text-[var(--color-ink)]">Каталог</h1>

    {{-- Хаб перелинковки: подкатегории уехали сюда из шапки, поэтому здесь они
         обычными <a href> и без JS (SEO §7). Список подрезан — остальное берётся
         со страницы самого раздела, где выводятся все его дети. --}}
    @php($tints = [['#EAF2FF', '#1466E0'], ['#FDECF2', '#D6417E'], ['#FDF3E6', '#B7761A'], ['#F5ECFB', '#8B4FC4'], ['#E9F7EF', '#1F9D57'], ['#FFF3D6', '#C8951A'], ['#EAF7EE', '#2E9E5B'], ['#EDEEFB', '#5B57D6']])
    @php($visibleChildren = 12)
    <div class="mt-6 grid gap-3.5 sm:grid-cols-2 lg:grid-cols-3">
        @foreach ($roots as $i => $root)
            @php([$bg, $fg] = $tints[$i % count($tints)])
            @php($children = $childrenMap[$root['id']] ?? [])
            <div class="rounded-[var(--radius-lg)] border border-[var(--color-line)] bg-white p-5 transition hover:border-[#D3E3FF] hover:shadow-[var(--shadow-card)]">
                <a href="{{ $root['url'] }}" class="flex items-center gap-3">
                    <span class="grid h-11 w-11 shrink-0 place-items-center rounded-[14px] text-lg font-extrabold" style="background:{{ $bg }};color:{{ $fg }}">
                        @if ($root['icon'])
                            <i data-lucide="{{ $root['icon'] }}" class="h-5 w-5"></i>
                        @else
                            {{ mb_substr($root['name'], 0, 1) }}
                        @endif
                    </span>
                    <h2 class="text-[15px] font-bold leading-tight text-[var(--color-ink)]">{{ $root['name'] }}</h2>
                </a>

                @if ($children)
                    <div class="mt-3 flex flex-col">
                        @foreach (array_slice($children, 0, $visibleChildren) as $child)
                            <a href="{{ $child['url'] }}" class="py-1 text-[13px] text-[var(--color-slate)] transition hover:text-[var(--color-primary)]">{{ $child['name'] }}</a>
                        @endforeach
                        @if (count($children) > $visibleChildren)
                            <a href="{{ $root['url'] }}" class="py-1 text-[13px] font-bold text-[var(--color-primary)] transition hover:text-[var(--color-primary-dark)]">
                                Все разделы ({{ count($children) }})
                            </a>
                        @endif
                    </div>
                @endif
            </div>
        @endforeach
    </div>
@endsection