<div class="space-y-3">
    {{-- Categories Presets --}}
    <x-filament::section 
        collapsible
        icon="heroicon-o-squares-2x2"
        icon-color="warning"
    >
        <x-slot name="heading">
            Categories
        </x-slot>
        <x-slot name="description">
            {{ count($categories) }} available
        </x-slot>

        <div class="-mx-4 -mb-4">
            <table class="w-full">
                <tbody class="divide-y divide-gray-100 dark:divide-white/5">
                    @foreach($categories as $cat)
                        <tr class="group hover:bg-gray-50 dark:hover:bg-white/5 transition-colors">
                            <td class="py-2.5 ps-4 pe-2">
                                <div class="flex items-center gap-2.5">
                                    <span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-warning-50 dark:bg-warning-400/10">
                                        <x-filament::icon icon="heroicon-m-tag" class="h-4 w-4 text-warning-600 dark:text-warning-400" />
                                    </span>
                                    <span class="text-sm font-medium text-gray-950 dark:text-white">{{ $cat->name }}</span>
                                </div>
                            </td>
                            <td class="py-2.5 pe-4 text-end">
                                <x-filament::button
                                    size="xs"
                                    color="gray"
                                    icon="heroicon-m-plus"
                                    wire:click="addCategoryPreset('{{ $position }}', '{{ $cat->slug }}', '{{ addslashes($cat->name) }}')"
                                    class="opacity-0 group-hover:opacity-100 transition-opacity"
                                >
                                    Add
                                </x-filament::button>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </x-filament::section>

    {{-- Pages Presets --}}
    <x-filament::section 
        collapsible
        icon="heroicon-o-document-text"
        icon-color="info"
    >
        <x-slot name="heading">
            Pages
        </x-slot>
        <x-slot name="description">
            {{ count($pages) }} available
        </x-slot>

        <div class="-mx-4 -mb-4">
            <table class="w-full">
                <tbody class="divide-y divide-gray-100 dark:divide-white/5">
                    @foreach($pages as $page)
                        <tr class="group hover:bg-gray-50 dark:hover:bg-white/5 transition-colors">
                            <td class="py-2.5 ps-4 pe-2">
                                <div class="flex items-center gap-2.5">
                                    <span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-info-50 dark:bg-info-400/10">
                                        <x-filament::icon icon="heroicon-m-document" class="h-4 w-4 text-info-600 dark:text-info-400" />
                                    </span>
                                    <span class="text-sm font-medium text-gray-950 dark:text-white">{{ $page->title }}</span>
                                </div>
                            </td>
                            <td class="py-2.5 pe-4 text-end">
                                <x-filament::button
                                    size="xs"
                                    color="gray"
                                    icon="heroicon-m-plus"
                                    wire:click="addPagePreset('{{ $position }}', '{{ $page->slug }}', '{{ addslashes($page->title) }}')"
                                    class="opacity-0 group-hover:opacity-100 transition-opacity"
                                >
                                    Add
                                </x-filament::button>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </x-filament::section>

    {{-- Custom Link --}}
    <x-filament::section 
        collapsible
        icon="heroicon-o-link"
        icon-color="gray"
    >
        <x-slot name="heading">
            Custom Link
        </x-slot>
        <x-slot name="description">
            Add any URL
        </x-slot>

        <div x-data="{ label: '', url: '' }" class="space-y-3">
            <div class="space-y-1.5">
                <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3">
                    <span class="text-sm font-medium leading-6 text-gray-950 dark:text-white">Link Label</span>
                </label>
                <x-filament::input.wrapper>
                    <x-filament::input 
                        type="text" 
                        x-model="label" 
                        placeholder="e.g. Shop All, Contact Us" 
                    />
                </x-filament::input.wrapper>
            </div>

            <div class="space-y-1.5">
                <label class="fi-fo-field-wrp-label inline-flex items-center gap-x-3">
                    <span class="text-sm font-medium leading-6 text-gray-950 dark:text-white">Target URL</span>
                </label>
                <x-filament::input.wrapper>
                    <x-filament::input 
                        type="text" 
                        x-model="url" 
                        placeholder="e.g. /shop, https://example.com" 
                    />
                </x-filament::input.wrapper>
            </div>

            <x-filament::button 
                size="sm"
                icon="heroicon-m-plus"
                class="w-full"
                @click="if(label && url) { $wire.addCustomLinkPreset('{{ $position }}', label, url); label = ''; url = ''; }"
            >
                Add to Menu
            </x-filament::button>
        </div>
    </x-filament::section>
</div>
