<x-filament-panels::page>
    <div class="space-y-6">
        @if ($this->isDemoMode())
            <div class="rounded-2xl border border-amber-200 bg-amber-50 px-5 py-4 text-sm font-semibold text-amber-900">
                Demo mode is enabled. Settings are read-only in this admin demo.
            </div>
        @endif

        <div class="rounded-2xl border border-gray-200 bg-white p-2 shadow-sm">
            <div class="flex gap-2 overflow-x-auto">
                @foreach ($this->tabLabels() as $group => $label)
                    <button
                        type="button"
                        wire:click="setActiveGroup('{{ $group }}')"
                        @class([
                            'shrink-0 rounded-xl px-4 py-2 text-sm font-medium transition',
                            'bg-primary-600 text-white shadow-sm' => $activeGroup === $group,
                            'text-gray-600 hover:bg-gray-50 hover:text-gray-950' => $activeGroup !== $group,
                        ])
                    >
                        {{ $label }}
                    </button>
                @endforeach
            </div>
        </div>

        {{ $this->content }}
    </div>
</x-filament-panels::page>
