@props(['menu'])

<div
    x-data="{
        slideOverOpen: false,
        _scrollY: 0,
        _padRight: 0,

        open() {
        this.slideOverOpen = true;
        this.lockScroll();
        },

        close() {
        this.slideOverOpen = false;
        this.unlockScroll();
        },

        lockScroll() {
            window.__lockScrollWorld?.();
			
            this._scrollY = window.scrollY || 0;
            const sw = window.innerWidth - document.documentElement.clientWidth;
            this._padRight = sw > 0 ? sw : 0;

            document.documentElement.classList.add('is-scroll-locked');
            document.body.style.position = 'fixed';
            document.body.style.top = `-${this._scrollY}px`;
            document.body.style.left = '0';
            document.body.style.right = '0';
            document.body.style.width = '100%';
            document.body.style.paddingRight = this._padRight ? `${this._padRight}px` : '';
        },

        unlockScroll() {
            const y = this._scrollY;

            document.documentElement.classList.remove('is-scroll-locked');
            document.body.style.position = '';
            document.body.style.top = '';
            document.body.style.left = '';
            document.body.style.right = '';
            document.body.style.width = '';
            document.body.style.paddingRight = '';

            window.scrollTo(0, y);

            // aspetta 1 frame, poi riabilita (così le misure sono corrette)
            requestAnimationFrame(() => {
                window.__unlockScrollWorld?.();
            });
        },
    }"
    class="relative w-auto h-auto"
>
	<span>
		<span
			class="flex items-center justify-center gap-4 text-current text-sm cursor-pointer select-none"
			x-show="!slideOverOpen"
		>
			<x-icon-hamburger @click="open()" class="w-12 h-auto"/>
			<span class="hidden font-normal! md:block">{{ __('Menu', 'radicle') }}</span>
			<div class="md:hidden block">
                @foreach($languageSwitchers as $key => $value)
                    <a
                        href="{{ esc_url($value['href']) }}"
                        hreflang="{{ e($value['lang']) }}"
                        aria-label="{{ e($value['native_name']) }}"
                    >
                        <span> {{ strtoupper(substr($value['locale'], 0, 2)) }}</span>
                    </a>
                @endforeach
            </div>
		</span>

		<span
			class="flex items-center font-normal! justify-center gap-4 text-sm cursor-pointer select-none text-current"
			x-show="slideOverOpen"
		>
			<x-icon-x @click="close()" class="w-12 h-auto"/>
			{{ __('Chiudi', 'radicle') }}
		</span>
	</span>

	<template x-teleport="body">
		<div
			x-show="slideOverOpen"
			x-cloak
			@keydown.window.escape="close()"
			class="relative w-auto h-auto"
			data-lenis-prevent
		>
			<div class="fixed inset-x-0 top-0 flex justify-center z-30">
				<div
					x-show="slideOverOpen"
					x-transition:enter="transform transition ease-in-out duration-500 md:duration-700"
					x-transition:enter-start="-translate-y-full opacity-0"
					x-transition:enter-end="translate-y-0 opacity-100"
					x-transition:leave="transform transition ease-in-out duration-500 md:duration-700"
					x-transition:leave-start="translate-y-0 opacity-100"
					x-transition:leave-end="-translate-y-full opacity-0"
					class="relative w-screen h-screen max-w-full overflow-hidden bg-beige md:flex"
				>
					<!-- MOBILE BG IMAGE (sotto) -->
					<div class="absolute inset-0 md:hidden">
						<img
							src="{{ asset('resources/images/image/menu-img.avif') }}"
							alt="Menu Background"
							class="w-full h-full object-cover"
						/>
						<!-- gradiente da DESTRA verso SINISTRA (quindi to-l) -->
						<div class="absolute inset-0 bg-gradient-to-r from-beige from-0% via-beige/80 via-65% to-transparent to-100%"></div>
					</div>

					<!-- CONTENUTO MENU -->
					<div class="relative z-10 flex h-full w-full md:w-1/2 md:bg-beige">
					<!-- spingo a destra su mobile -->
					<div class="flex w-full justify-start items-center">
						<div class="w-full max-w-sm md:max-w-md mx-10">
							<ul class="list-none p-0 flex flex-col gap-4">
								@foreach($menu as $item)
									<li>
										<a
											href="{{ $item->url }}"
											class="flex items-center gap-4 w-full text-carbon"
										>
											<h3 class="!font-sans">
												{!! $item->title !!}
											</h3>
										</a>

										@if(isset($item->children) && count($item->children) > 0)
											<div class="hidden md:flex flex-col gap-4 mt-2 mb-6">
												@foreach($item->children as $child)
													<a href="{{ $child->url }}" class="font-light text-xl text-carbon">
														{!! $child->title !!}
													</a>
												@endforeach
											</div>
										@endif
									</li>
								@endforeach
							</ul>
						</div>
					</div>
					</div>

					<!-- DESKTOP IMAGE (metà destra) -->
					<div class="hidden md:block md:w-1/2 relative">
					<img
						src="{{ asset('resources/images/image/menu-img.avif') }}"
						alt="Menu Background"
						class="w-full h-full object-cover"
					/>
					</div>
				</div>
			</div>
		</div>
	</template>
</div>