<?php
/**
 * Shared mobile menu panel shell: backdrop + right drawer + title row + content slot.
 * Expects: $pgo_header_mobile_open_var (Alpine state name), $pgo_header_mobile_panel_title, $pgo_header_mobile_panel_content (HTML).
 *
 * @package PufferGo
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

$pgo_header_mobile_open_var      = isset( $pgo_header_mobile_open_var ) ? $pgo_header_mobile_open_var : 'mobileOpen';
$pgo_header_mobile_panel_title   = isset( $pgo_header_mobile_panel_title ) ? $pgo_header_mobile_panel_title : __( 'Menu', 'puffergo' );
$pgo_header_mobile_panel_content = isset( $pgo_header_mobile_panel_content ) ? $pgo_header_mobile_panel_content : '';
$pgo_header_mobile_panel_id      = isset( $pgo_header_mobile_panel_id ) ? $pgo_header_mobile_panel_id : 'puffergo-mobile-menu-panel';
?>
<div
	id="<?php echo esc_attr( $pgo_header_mobile_panel_id ); ?>"
	class="fixed inset-0 z-50 lg:hidden"
	x-show="<?php echo esc_attr( $pgo_header_mobile_open_var ); ?>"
	x-cloak
	role="dialog"
	aria-modal="true"
	:aria-hidden="<?php echo esc_attr( $pgo_header_mobile_open_var ); ?> ? 'false' : 'true'"
	x-transition:enter="transition ease-out duration-200"
	x-transition:enter-start="opacity-0"
	x-transition:enter-end="opacity-100"
	x-transition:leave="transition ease-in duration-150"
	x-transition:leave-start="opacity-100"
	x-transition:leave-end="opacity-0"
>
	<div class="fixed inset-0 bg-neutral-900/20" @click="<?php echo esc_attr( $pgo_header_mobile_open_var ); ?> = false" aria-hidden="true"></div>
	<div class="fixed inset-y-0 right-0 z-50 w-full max-w-sm overflow-y-auto bg-neutral-50 p-6 shadow-xl sm:ring-1 sm:ring-neutral-200/80" @click.stop>
		<div class="flex items-center justify-between">
			<span class="text-base font-semibold text-neutral-900"><?php echo esc_html( $pgo_header_mobile_panel_title ); ?></span>
			<button
				type="button"
				class="puffergo-header-mobile-close -m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-neutral-700 hover:bg-neutral-100"
				@click="<?php echo esc_attr( $pgo_header_mobile_open_var ); ?> = false"
				aria-label="<?php esc_attr_e( 'Close menu', 'puffergo' ); ?>"
			>
				<span class="sr-only"><?php esc_html_e( 'Close menu', 'puffergo' ); ?></span>
				<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true" class="size-6">
					<path d="M6 18 18 6M6 6l12 12" stroke-linecap="round" stroke-linejoin="round" />
				</svg>
			</button>
		</div>
		<div class="mt-6 flex flex-col gap-0">
			<?php
			// Content is HTML produced by the including template (menu list); safe in controlled context.
			echo $pgo_header_mobile_panel_content; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
			?>
		</div>
	</div>
</div>
