<?php
/**
 * Template Name: Variant 2
 *
 * PufferGo header template variant 2 (Tailwind + Alpine).
 * Dropdown nav matches Tailwind flyout style. Styles from fullpage-tailwind.css + header-tokens.css.
 * 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="puffergo-default-header bg-neutral-50 border-b border-neutral-200/10" x-data="{ mobileOpen: false, openDropdownId: null }">
	<nav
		aria-label="<?php esc_attr_e( 'Global', 'puffergo' ); ?>"
		class="puffergo-header-nav puffergo-nav-align-wrapper <?php echo esc_attr( $data->nav_align_class ); ?> mx-auto flex max-w-7xl items-center justify-between gap-3 p-5 lg:px-8"
	>
		<a href="<?php echo esc_url( $data->home_url ); ?>" class="-m-1.5 flex shrink-0 items-center p-1.5 text-neutral-900 no-underline" aria-label="<?php echo esc_attr( $data->brand_name ); ?>">
		<?php if ( ! puffergo_the_logo( 'h-8 w-auto max-w-[12rem] object-contain object-left', array( 'fetchpriority' => 'high', 'loading' => 'eager' ) ) ) : ?>
			<span class="text-sm font-semibold"><?php echo esc_html( $data->brand_name ); ?></span>
		<?php endif; ?>
		</a>

		<div class="puffergo-nav-spacer-left <?php echo esc_attr( $data->spacer_left_class ); ?>" aria-hidden="true"></div>

		<div class="puffergo-mobile-toggle-wrap flex lg:hidden">
			<button
				type="button"
				class="puffergo-header-mobile-toggle -m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-neutral-700"
				@click="mobileOpen = true"
				:aria-expanded="mobileOpen ? 'true' : 'false'"
				aria-controls="puffergo-mobile-menu-panel"
			>
				<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="puffergo-desktop-nav hidden lg:flex lg:items-center lg:gap-x-12">
			<?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   = 'puffergo-nav-link text-sm font-semibold text-neutral-900 no-underline cursor-pointer';
				if ( $is_current ) {
					$link_class .= ' puffergo-nav-item-current text-brand-600';
				}
				$idx = (int) $nav_index;

				if ( $has_children ) :
					$dropdown_id = 'puffergo-dropdown-' . $nav_index;
					?>
					<div
						class="puffergo-nav-item puffergo-nav-dropdown relative flex items-center"
						@click.outside="openDropdownId = null"
					>
						<button
							type="button"
							class="<?php echo esc_attr( $link_class ); ?> inline-flex items-center gap-1 border-0 bg-transparent p-0 font-inherit"
							@click="openDropdownId = openDropdownId === <?php echo esc_js( $idx ); ?> ? null : <?php echo esc_js( $idx ); ?>"
							:aria-expanded="openDropdownId === <?php echo esc_js( $idx ); ?> ? 'true' : 'false'"
							aria-haspopup="true"
							aria-controls="<?php echo esc_attr( $dropdown_id ); ?>"
							id="<?php echo esc_attr( $dropdown_id ); ?>-btn"
						>
							<?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 fill-rule="evenodd" clip-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0L5.21 8.23a.75.75 0 01.02-1.06z" />
							</svg>
						</button>

						<div
							id="<?php echo esc_attr( $dropdown_id ); ?>"
							class="puffergo-nav-dropdown-panel absolute left-1/2 top-full z-50 mt-2 w-56 -translate-x-1/2 overflow-hidden rounded-xl bg-neutral-50 py-2 shadow-lg ring-1 ring-neutral-200/80"
							role="menu"
							aria-labelledby="<?php echo esc_attr( $dropdown_id ); ?>-btn"
							x-show="openDropdownId === <?php echo esc_js( $idx ); ?>"
							x-cloak
							x-transition:enter="transition ease-out duration-200"
							x-transition:enter-start="opacity-0 -translate-y-1.5"
							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.5"
						>
							<div class="flex flex-col 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.5 py-2.5 text-sm font-semibold text-neutral-900 no-underline transition-colors hover:bg-neutral-50 hover:text-brand-600"
										role="menuitem"
									><?php echo esc_html( $pgo_child->title ); ?></a>
								<?php endforeach; ?>
							</div>
						</div>
					</div>
					<?php
				else :
					printf(
						'<a href="%s" class="%s">%s</a>',
						esc_url( $pgo_item->url ),
						esc_attr( $link_class ),
						esc_html( $pgo_item->title )
					);
				endif;
				++$nav_index;
			endforeach;
			?>
			<?php require PUFFERGO_PLUGIN_DIR . '/templates/components/header-empty-menu-notice.php'; ?>
		</div>

		<div class="puffergo-nav-spacer-right <?php echo esc_attr( $data->spacer_right_class ); ?>" aria-hidden="true"></div>
	</nav>

	<?php
	ob_start();
	?>
	<div class="flex flex-col gap-2 py-6">
		<?php 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 );
			$mobile_class = 'puffergo-nav-link block -mx-3 rounded-lg px-3 py-2 text-base font-semibold text-neutral-900 no-underline cursor-pointer';
			if ( $is_current ) {
				$mobile_class .= ' puffergo-nav-item-current text-brand-600';
			}

			if ( $has_children ) : ?>
				<div class="puffergo-nav-item-parent">
					<span class="block -mx-3 rounded-lg px-3 py-2 text-base font-semibold text-neutral-900"><?php echo esc_html( $pgo_item->title ); ?></span>
					<ul class="mt-1 list-none pl-4">
						<?php foreach ( $pgo_item->children as $pgo_child ) : ?>
							<li><a href="<?php echo esc_url( $pgo_child->url ); ?>" class="block -mx-3 rounded-lg px-3 py-2 text-sm text-neutral-600 no-underline cursor-pointer hover:bg-neutral-50 hover:text-neutral-900"><?php echo esc_html( $pgo_child->title ); ?></a></li>
						<?php endforeach; ?>
					</ul>
				</div>
			<?php else :
				printf(
					'<a href="%s" class="%s">%s</a>',
					esc_url( $pgo_item->url ),
					esc_attr( $mobile_class ),
					esc_html( $pgo_item->title )
				);
			endif;
		endforeach; ?>
	</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>
