@php
    $depth = (int) ($level ?? 0);
    $hasChildren = !empty($item['children']);
    $hasRoute = isset($item['route']);
    $hasUrl = !empty($item['url']);
    $hasLink = $hasRoute || $hasUrl;
    $link = $hasRoute ? route($item['route']) : ($item['url'] ?? '#');
    $levelClasses = [
        0 => 'rounded-2xl border border-slate-200 bg-white',
        1 => 'rounded-xl border border-slate-200 bg-slate-50',
        2 => 'rounded-xl border border-slate-100 bg-white',
    ];
    $containerClass = $levelClasses[$depth] ?? 'rounded-xl border border-slate-100 bg-white';
@endphp

@if ($hasChildren)
    <details class="{{ $containerClass }} group overflow-hidden">
        <summary class="flex cursor-pointer list-none items-center justify-between gap-3 px-4 py-3">
            <div class="min-w-0">
                <p class="text-sm font-semibold text-slate-900">{{ $item['title'] }}</p>
                @if (!empty($item['description']))
                    <p class="mt-1 text-xs text-slate-500">{{ $item['description'] }}</p>
                @endif
            </div>
            <span class="shrink-0 text-slate-400 transition group-open:rotate-180">
                <svg class="mobile-icon-sm" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.168l3.71-3.938a.75.75 0 1 1 1.08 1.04l-4.25 4.512a.75.75 0 0 1-1.08 0L5.21 8.27a.75.75 0 0 1 .02-1.06Z" clip-rule="evenodd"/>
                </svg>
            </span>
        </summary>

        <div class="space-y-3 border-t border-slate-100 px-4 py-3">
            @foreach ($item['children'] as $child)
                @include('mobile::livewire.mobile.partials.service-tree-item', ['item' => $child, 'level' => $depth + 1])
            @endforeach
        </div>
    </details>
@else
    @if ($hasLink)
        <a
            href="{{ $link }}"
            @if ($hasRoute) wire:navigate @endif
            class="flex items-center justify-between gap-3 {{ $containerClass }} px-4 py-3 transition hover:border-emerald-200 hover:bg-emerald-50/60"
        >
            <div class="min-w-0">
                <p class="text-sm font-semibold text-slate-900">{{ $item['title'] }}</p>
                @if (!empty($item['description']))
                    <p class="mt-1 text-xs text-slate-500">{{ $item['description'] }}</p>
                @endif
            </div>

            <span class="shrink-0 text-emerald-700">
                <svg class="mobile-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M7 17 17 7M9 7h8v8" />
                </svg>
            </span>
        </a>
    @else
        <div class="flex items-start gap-3 {{ $containerClass }} px-4 py-3">
            <div class="min-w-0">
                <p class="text-sm font-semibold text-slate-900">{{ $item['title'] }}</p>
                @if (!empty($item['description']))
                    <p class="mt-1 text-xs text-slate-500">{{ $item['description'] }}</p>
                @endif
            </div>
        </div>
    @endif
@endif