@extends('layouts.store', ['title' => (($selected?->name_ar ?? 'كل الأقسام').' | RaseedNow')])

@section('content')
    @php($isEnglish = app()->getLocale() === 'en')
    <main class="rn-catalog-page">
        <section class="rn-catalog-hero">
            <div>
                <span>{{ $isEnglish ? 'RaseedNow catalog' : 'كتالوج RaseedNow' }}</span>
                <h1>{{ $isEnglish ? 'Games, gift cards and digital accounts' : 'الألعاب والبطاقات والحسابات الرقمية' }}</h1>
                <p>{{ $isEnglish ? 'Browse every department and subcategory from one clear page.' : 'كل الأقسام والصب كاتيجوريز في صفحة واحدة منظمة وسريعة.' }}</p>
            </div>
            <form action="{{ $selected ? route('catalog.category', $selected) : route('catalog.index') }}">
                <svg viewBox="0 0 24 24" fill="none"><circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="2"/><path d="m20 20-4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
                <input name="q" value="{{ $query }}" placeholder="{{ $isEnglish ? 'Search games and cards...' : 'ابحث عن لعبة أو بطاقة...' }}">
                <button>بحث</button>
            </form>
        </section>

        <section class="rn-catalog-shell">
            <nav class="rn-catalog-roots" aria-label="الأقسام الرئيسية">
                <a href="{{ route('catalog.index') }}" @class(['is-active' => ! $selected])><b>✦</b><span>كل الأقسام</span></a>
                @foreach($roots as $root)