@extends('layouts.app')

@section('title', 'Справочный центр — teeu')
@section('meta_description', 'Помощь teeu: инструкции и ответы на вопросы о покупках, заказах, доставке и работе продавцов.')

@section('seo')
    @include('partials.seo.meta', [
        'canonical' => route('help.index'),
        'ogTitle' => 'Справочный центр teeu',
        'ogDescription' => 'Инструкции и ответы на вопросы о покупках, заказах, доставке и работе продавцов.',
    ])
@endsection

@section('content')
    {{-- Макет «Справочный центр»: разделы карточками в две колонки, в каждой —
         первые статьи ссылками и «Все статьи (N)». --}}
    <div class="mx-auto w-full max-w-[1040px]">
        <nav class="text-[12.5px] text-[var(--color-muted)]">
            <a href="{{ route('home') }}" class="text-[var(--color-muted)] transition hover:text-[var(--color-primary)]">Главная</a>
            <span>/</span> <span class="text-[var(--color-secondary)]">Справочный центр</span>
        </nav>
        <h1 class="mt-2.5 text-[22px] font-extrabold tracking-[-0.5px] text-[var(--color-ink)] sm:text-[26px]">Справочный центр</h1>
        <p class="mt-1 max-w-2xl text-sm text-[var(--color-secondary)]">Инструкции и ответы на частые вопросы. Выберите раздел.</p>

        @if ($categories->isEmpty())
            <p class="mt-8 text-[13.5px] text-[var(--color-muted)]">Статьи скоро появятся.</p>
        @else
            <div class="mt-5 grid gap-3 sm:grid-cols-2">
                @foreach ($categories as $category)
                    <div class="rounded-[var(--radius-lg)] border border-[var(--color-line)] bg-white p-5">
                        <h2 class="text-base font-bold text-[var(--color-ink)]">
                            <a href="{{ route('help.category', $category->slug) }}" class="text-[var(--color-ink)] transition hover:text-[var(--color-primary)]">{{ $category->title }}</a>
                        </h2>
                        @if ($category->description)
                            <p class="mt-1 text-[13px] leading-[1.5] text-[var(--color-muted)]">{{ $category->description }}</p>
                        @endif
                        <ul class="mt-3 flex flex-col gap-2">
                            @foreach ($category->articles->take(6) as $article)
                                <li>
                                    <a href="{{ route('help.show', [$category->slug, $article->slug]) }}"
                                       class="text-[13px] text-[var(--color-primary)] hover:text-[var(--color-primary-dark)]">{{ $article->title }}</a>
                                </li>
                            @endforeach
                        </ul>
                        <a href="{{ route('help.category', $category->slug) }}" class="mt-3 inline-block text-[12.5px] text-[var(--color-muted)] hover:text-[var(--color-primary)]">Все статьи ({{ $category->articles->count() }})</a>
                    </div>
                @endforeach
            </div>
        @endif
    </div>
@endsection