@aware(['page'])
<div class="categories mb-16">
    <div class="theme-max-w mx-auto px-5">
        <div class="flex flex-col md:flex-row gap-4">

            <div class="rounded-xl p-4 w-full md:w-52 bg-slate-200 shadow-lg md:self-start">
                <h3 class="text-xl font-bold text-gray-900 mb-4 text-center">Categories</h3>
                <nav class="flex md:flex-col flex-row justify-center md:justify-start md:space-y-2 space-x-2 md:space-x-0"
                     aria-label="Tabs" role="tablist">
                    @foreach($categories as $index => $category)
                        <button type="button"
                                class="hs-tab-active:bg-slate-500 hs-tab-active:text-white py-2 px-4 rounded-lg text-md font-medium text-gray-700 hover:bg-blue-100 hover:text-blue-700 transition-colors {{ $index === 0 ? 'active' : '' }}"
                                id="tab-{{ $loop->index }}"
                                data-hs-tab="#tab-panel-{{ $loop->index }}"
                                aria-controls="tab-panel-{{ $loop->index }}"
                                role="tab"
                                aria-selected="{{ $index === 0 ? 'true' : 'false' }}">
                            {{ $category['title'] }}
                        </button>
                    @endforeach
                </nav>
            </div>

            <div class="w-full">
                @foreach($categories as $index => $category)
                    <div id="tab-panel-{{ $loop->index }}" class="{{ $index === 0 ? '' : 'hidden' }}" role="tabpanel" aria-labelledby="tab-{{ $loop->index }}">
                         <div>
                             <div class="relative w-full mx-auto bg-white rounded-lg shadow-lg overflow-hidden">
                                 <div class="w-full" id="{{isset($category['name']) ? $category['name'] : ''}}">
                                     <img src="{{asset('storage/'.$category['image'])}}" alt="" class="shadow-xl rounded-xl w-full"/>
                                 </div>
                             </div>
                             @if(isset($category['pointers']))
                                 @if($category['pointers'])
                                     @push('inlinescript')
                                         @php
                                             $safeVarName = 'pointers' . preg_replace('/[^A-Za-z0-9_]/', '_', $category['name']);
                                         @endphp
                                         <script>
                                             const {{$safeVarName}} = [
                                                 @foreach($category['pointers'] as $pointer)
                                                    { top: {{$pointer['top']}}, left: {{$pointer['left']}}, label: '{{$pointer['label']}}' },
                                                 @endforeach
                                             ];
                                             createInteractivePoints(pointers{{$category['name']}}, '{{$category['name']}}');
                                         </script>
                                     @endpush
                                 @endif
                             @endif
                         </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>