{{--
    Renders an authored menu tree.

    @param string $menuKey   which menu to render (primary, footer, ...)
    @param string $style     'horizontal' | 'stacked'

    Items whose target cannot be resolved are skipped rather than rendered as a
    dead link — the project forbids href="#" placeholders.
--}}
@php
    $menuItems = app(\App\Domain\Website\Services\WebsiteMenuService::class)->tree($menuKey ?? 'primary');
    $style = $style ?? 'horizontal';
@endphp

@if ($menuItems->isNotEmpty())
    <ul class="flex {{ $style === 'stacked' ? 'flex-col gap-2' : 'items-center gap-1 lg:gap-2' }}">
        @foreach ($menuItems as $item)
            @php
                $href = $item->href();
                $kids = $item->children->where('is_visible', true);
            @endphp

            @continue (! $href && $kids->isEmpty())

            <li class="relative" @if ($kids->isNotEmpty()) x-data="{ open: false }" x-on:mouseleave="open = false" @endif>
                @if ($kids->isNotEmpty())
                    <button type="button"
                            x-on:click="open = !open" x-on:mouseenter="open = true"
                            x-bind:aria-expanded="open ? 'true' : 'false'"
                            class="inline-flex items-center gap-1.5 rounded-lg px-3 py-2 font-medium transition hover:opacity-70">
                        @if ($item->icon)<x-website.icon :name="$item->icon" class="w-4 h-4" />@endif
                        {{ $item->localizedLabel() }}
                        <svg class="w-3.5 h-3.5 transition-transform" x-bind:class="open && 'rotate-180'"
                             fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                        </svg>
                    </button>

                    <ul x-show="open" x-cloak x-transition.opacity
                        x-on:keydown.escape.window="open = false"
                        class="absolute z-40 mt-1 min-w-52 rounded-xl border bg-white p-2 shadow-lg
                               {{ $style === 'stacked' ? 'static border-0 shadow-none p-0 ms-4 mt-2' : 'start-0' }}">
                        @foreach ($kids as $child)
                            @php $childHref = $child->href(); @endphp
                            @continue (! $childHref)
                            <li>
                                <a href="{{ $childHref }}"
                                   @if ($child->open_in_new_tab) target="_blank" rel="noopener noreferrer" @endif
                                   class="flex items-center gap-2 rounded-lg px-3 py-2 text-sm hover:bg-gray-50">
                                    @if ($child->icon)<x-website.icon :name="$child->icon" class="w-4 h-4" />@endif
                                    {{ $child->localizedLabel() }}
                                </a>
                            </li>
                        @endforeach
                    </ul>
                @else
                    <a href="{{ $href }}"
                       @if ($item->open_in_new_tab) target="_blank" rel="noopener noreferrer" @endif
                       class="inline-flex items-center gap-1.5 rounded-lg px-3 py-2 font-medium transition
                              {{ $item->highlight ? 'ec-btn ec-btn--primary rounded-full px-5' : 'hover:opacity-70' }}">
                        @if ($item->icon)<x-website.icon :name="$item->icon" class="w-4 h-4" />@endif
                        {{ $item->localizedLabel() }}
                    </a>
                @endif
            </li>
        @endforeach
    </ul>
@endif
