@extends('layouts.app', ['tab' => 'free'])
@php
    $isRtl = app()->getLocale() === 'ar';
    $tabLabel    = $isRtl ? setting('tab_free_label_ar', 'Free') : setting('tab_free_label_en', 'Free');
    $tabSubtitle = $isRtl ? setting('tab_free_subtitle_ar', '') : setting('tab_free_subtitle_en', '');
@endphp
@section('title', $tabLabel)

@section('content')
@php
    $sections = [
        ['key' => 'robots',     'list' => $robots,     'icon' => '🤖', 'label' => __('messages.robots')],
        ['key' => 'indicators', 'list' => $indicators, 'icon' => '📊', 'label' => __('messages.indicators')],
        ['key' => 'courses',    'list' => $courses,    'icon' => '🎓', 'label' => __('messages.courses')],
        ['key' => 'copiers',    'list' => $copiers,    'icon' => '📡', 'label' => __('messages.copiers')],
    ];
    $totalCount = collect($sections)->sum(fn($s) => $s['list']->count());
@endphp

<div class="mb-6 sm:mb-8">
    <h1 class="text-2xl sm:text-3xl font-extrabold text-white">
        🎁 <span class="teal-text">{{ $tabLabel }}</span>
    </h1>
    <p class="text-sm text-gray-400 mt-1">{{ $tabSubtitle }}</p>
</div>

{{-- Category pills --}}
<div class="sticky top-[8.5rem] z-10 -mx-4 px-4 sm:mx-0 sm:px-0 mb-6">
    <div class="flex items-center gap-2 overflow-x-auto scrollbar-hide bg-[#0d1426]/90 backdrop-blur p-1.5 rounded-2xl border border-white/5">
        @foreach($sections as $s)
            <a href="#cat-{{ $s['key'] }}"
               class="shrink-0 px-3.5 py-1.5 rounded-xl text-xs font-bold transition whitespace-nowrap
                      bg-white/5 hover:bg-white/10 text-gray-200 hover:text-white border border-white/5">
                <span class="me-1">{{ $s['icon'] }}</span>{{ $s['label'] }}
                <span class="ms-1 text-[10px] opacity-70">{{ $s['list']->count() }}</span>
            </a>
        @endforeach
    </div>
</div>

@if($totalCount === 0)
    @include('partials.empty')
@else
    @foreach($sections as $s)
        @if($s['list']->count())
            <section id="cat-{{ $s['key'] }}" class="mt-8 first:mt-0 scroll-mt-44">
                <div class="flex items-center gap-2 mb-4">
                    <span class="text-2xl">{{ $s['icon'] }}</span>
                    <h2 class="text-lg sm:text-xl font-bold text-white">{{ $s['label'] }}</h2>
                    <span class="ms-1 px-2 py-0.5 rounded-md bg-white/5 text-xs text-gray-400">{{ $s['list']->count() }}</span>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5">
                    @foreach($s['list'] as $service)
                        @include('partials.service_card', ['service' => $service, 'vip' => false])
                    @endforeach
                </div>
            </section>
        @endif
    @endforeach
@endif
@endsection