<?php
/**
 * Template Name: Variant 3
 *
 * PufferGo header template variant 3 (TailwindPlus-style, Alpine-powered).
 * Supports one level of dropdown (desktop hover / mobile accordion).
 * Uses shared context and mobile panel partial.
 *
 * @var PufferGo_Header_Data $data Header data (injected by render_variants).
 *
 * @package PufferGo
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
?>
<header class="bg-neutral-50 puffergo-default-header" x-data="{ mobileOpen: false, openDropdownId: null, mobileOpenId: null }">
	<nav
		aria-label="<?php esc_attr_e( 'Global', 'puffergo' ); ?>"
		class="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8"
	>
		<div class="flex lg:flex-1">
			<a href="<?php echo esc_url( $data->home_url ); ?>" class="-m-1.5 p-1.5" aria-label="<?php echo esc_attr( $data->brand_name ); ?>">
				<span class="sr-only"><?php esc_html_e( 'Home', 'puffergo' ); ?></span>
			<?php if ( ! puffergo_the_logo( 'h-8 w-auto max-w-[12rem] object-contain object-left', array( 'fetchpriority' => 'high', 'loading' => 'eager' ) ) ) : ?>
				<span class="h-8 w-auto inline-flex items-center justify-center rounded bg-brand-600 px-2 text-sm font-semibold text-white"><?php echo esc_html( $data->brand_name ); ?></span>
			<?php endif; ?>
			</a>
		</div>
		<div class="flex lg:hidden">
			<button
				type="button"
				class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-neutral-700"
				@click="mobileOpen = true"
			>
				<span class="sr-only"><?php esc_html_e( 'Open main 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="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" stroke-linecap="round" stroke-linejoin="round" />
				</svg>
			</button>
		</div>
		<div class="hidden lg:flex lg:gap-x-12 items-center">
			<?php
			$nav_index = 0;
			foreach ( $data->menu_items as $pgo_item ) :
				$is_current   = ($data->is_current)( $pgo_item );
				$has_children = ! empty( $pgo_item->children ) && is_array( $pgo_item->children );
				$link_class   = 'text-sm/6 font-semibold text-neutral-900';
				if ( $is_current ) {
					$link_class .= ' underline';
				} else {
					$link_class .= ' no-underline';
				}
				$idx = (int) $nav_index;

				if ( $has_children ) :
					?>
					<div
						class="relative"
						@click.outside="openDropdownId = null"
						@mouseenter="openDropdownId = <?php echo esc_js( $idx ); ?>"
						@mouseleave="openDropdownId = null"
					>
						<button
							type="button"
							class="flex items-center gap-x-1.5 rounded-lg bg-neutral-50 px-4 text-sm/6 font-semibold text-neutral-900"
							@click="openDropdownId = openDropdownId === <?php echo esc_js( $idx ); ?> ? null : <?php echo esc_js( $idx ); ?>"
							:aria-expanded="openDropdownId === <?php echo esc_js( $idx ); ?> ? 'true' : 'false'"
						>
							<?php echo esc_html( $pgo_item->title ); ?>
							<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-5 flex-none text-neutral-400">
								<path d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
							</svg>
						</button>

						<div
							x-cloak
							x-show="openDropdownId === <?php echo esc_js( $idx ); ?>"
							x-transition:enter="transition ease-out duration-200"
							x-transition:enter-start="opacity-0 translate-y-1"
							x-transition:enter-end="opacity-100 translate-y-0"
							x-transition:leave="transition ease-in duration-150"
							x-transition:leave-start="opacity-100 translate-y-0"
							x-transition:leave-end="opacity-0 translate-y-1"
							class="absolute left-1/2 -translate-x-1/2 top-full z-50 mt-3 w-56 rounded-xl bg-neutral-50 shadow-lg ring-neutral-200"
						>
							<div class="p-2">
								<?php foreach ( $pgo_item->children as $pgo_child ) : ?>
									<a href="<?php echo esc_url( $pgo_child->url ); ?>" class="block rounded-lg px-3 py-2 text-sm font-semibold text-neutral-900 no-underline hover:bg-neutral-100">
										<?php echo esc_html( $pgo_child->title ); ?>
									</a>
								<?php endforeach; ?>
							</div>
						</div>
					</div>
					<?php
				else :
					?>
					<a href="<?php echo esc_url( $pgo_item->url ); ?>" class="<?php echo esc_attr( $link_class ); ?>">
						<?php echo esc_html( $pgo_item->title ); ?>
					</a>
					<?php
				endif;
				++$nav_index;
			endforeach;
			?>
			<?php require PUFFERGO_PLUGIN_DIR . '/templates/components/header-empty-menu-notice.php'; ?>
		</div>
	</nav>

	<?php
	ob_start();
	?>
	<div class="flow-root">
		<div class="-my-6 divide-y divide-neutral-500/10">
			<div class="space-y-2 py-6">
				<?php
				// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound -- Template partial scope.
				$nav_index = 0;
				foreach ( $data->menu_items as $pgo_item ) :
					$is_current   = ($data->is_current)( $pgo_item );
					$has_children = ! empty( $pgo_item->children ) && is_array( $pgo_item->children );
					$idx          = (int) $nav_index;

					if ( $has_children ) :
						?>
						<div class="-mx-3">
							<button
								type="button"
								class="flex w-full items-center justify-between rounded-lg py-2 pl-3 pr-3.5 text-base/7 font-semibold text-neutral-900 hover:bg-neutral-50"
								@click="mobileOpenId = mobileOpenId === <?php echo esc_js( $idx ); ?> ? null : <?php echo esc_js( $idx ); ?>"
								:aria-expanded="mobileOpenId === <?php echo esc_js( $idx ); ?> ? 'true' : 'false'"
							>
								<?php echo esc_html( $pgo_item->title ); ?>
								<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-5 flex-none" :class="mobileOpenId === <?php echo esc_js( $idx ); ?> ? 'rotate-180' : ''">
									<path d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
								</svg>
							</button>
							<div
								x-cloak
								x-show="mobileOpenId === <?php echo esc_js( $idx ); ?>"
								class="mt-2 space-y-2"
							>
								<?php foreach ( $pgo_item->children as $pgo_mc ) : ?>
									<a href="<?php echo esc_url( $pgo_mc->url ); ?>" class="block rounded-lg py-2 pr-3 pl-6 text-sm/7 font-semibold text-neutral-900 hover:bg-neutral-50">
										<?php echo esc_html( $pgo_mc->title ); ?>
									</a>
								<?php endforeach; ?>
							</div>
						</div>
						<?php
					else :
						$mobile_class = $is_current
							? '-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-neutral-900 bg-neutral-50'
							: '-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-neutral-900 hover:bg-neutral-50';
						?>
						<a href="<?php echo esc_url( $pgo_item->url ); ?>" class="<?php echo esc_attr( $mobile_class ); ?>">
							<?php echo esc_html( $pgo_item->title ); ?>
						</a>
						<?php
					endif;
					++$nav_index;
				endforeach;
				// phpcs:enable
				?>
			</div>
		</div>
	</div>
	<?php
	$pgo_header_mobile_panel_content = ob_get_clean();
	$pgo_header_mobile_open_var      = 'mobileOpen';
	$pgo_header_mobile_panel_title   = __( 'Menu', 'puffergo' );
	require PUFFERGO_PLUGIN_DIR . '/templates/components/mobile-panel.php';
	?>
</header>
