<?php
if (! defined('ABSPATH')) {
    exit;
} ?>
<header
	class="puffergo-default-header pgo-header-flyout-root relative isolate z-10"
	style="--puffergo-header-bg: rgb(17 24 39); --puffergo-header-text: #f5f7ff; --puffergo-header-accent: #6366f1;"
	x-data="{ mobileOpen: false, openDropdownId: null, mobileOpenPaths: [], pgoMobileToggle(p){ this.mobileOpenPaths.includes(p) ? this.mobileOpenPaths = this.mobileOpenPaths.filter(x => x !== p) : this.mobileOpenPaths.push(p); }, pgoMobileIsOpen(p){ return this.mobileOpenPaths.includes(p); } }"
	@click.outside="openDropdownId = null"
	:class="{ 'pgo-header-menu-open': openDropdownId !== null }"
>
	<nav aria-label="<?php esc_attr_e('Global', 'puffergo'); ?>" class="mx-auto flex max-w-canvas 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('pgo-header-flyout-logo-img', array('fetchpriority' => 'high', 'loading' => 'eager'))) : ?>
					<span class="pgo-header-flyout-logo-fallback"><?php echo esc_html($data->brand_name); ?></span>
				<?php endif; ?>
			</a>
		</div>

		<div class="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-gray-400" @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">
			<?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);
    $idx = (int) $nav_index;
    $is_clickable_parent = $has_children && puffergo_is_clickable_parent($pgo_item);

    if ($has_children) : ?>
					<?php if ($is_clickable_parent) : ?>
						<div class="flex items-center gap-x-1">
							<a
								href="<?php echo esc_url($pgo_item->url); ?>"
								class="text-sm/6 font-semibold no-underline"
								style="color: var(--puffergo-header-text); text-decoration: <?php echo $is_current ? 'underline' : 'none'; ?>; text-underline-offset: 4px;"
							>
								<?php echo esc_html($pgo_item->title); ?>
							</a>
							<button
								type="button"
								class="flex items-center justify-center size-5 rounded"
								style="background: none; border: none; padding: 0; cursor: pointer; outline: none;"
								@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-label="<?php echo esc_attr(sprintf(__('Toggle %s submenu', 'puffergo'), $pgo_item->title)); ?>"
							>
								<svg
									viewBox="0 0 20 20"
									fill="currentColor"
									aria-hidden="true"
									class="size-5 flex-none transition-transform duration-200 opacity-60"
									style="color: var(--puffergo-header-text);"
									:class="openDropdownId === <?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>
					<?php else : ?>
						<button
							type="button"
							class="flex items-center gap-x-1 text-sm/6 font-semibold"
							style="color: var(--puffergo-header-text); background: none; border: none; padding: 0; cursor: pointer; outline: none;"
							@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 transition-transform duration-200 opacity-60"
								style="color: var(--puffergo-header-text);"
								:class="openDropdownId === <?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>
					<?php endif; ?>
					<?php else : $link_class = 'text-sm/6 font-semibold';

					    if ($is_current) {
					        $link_class .= ' underline underline-offset-4';
					    } ?>
					<a href="<?php echo esc_url($pgo_item->url); ?>" class="<?php echo esc_attr($link_class); ?>" style="color: var(--puffergo-header-text);">
						<?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>

		<div class="hidden lg:flex lg:flex-1 lg:justify-end">
			<?php require PUFFERGO_PLUGIN_DIR . '/templates/components/language-switcher.php'; ?>
		</div>
	</nav>

	<?php
    $flyout_index = 0;

foreach ($data->menu_items as $pgo_item) : $has_children = ! empty($pgo_item->children) && is_array($pgo_item->children);
    $fidx = (int) $flyout_index;

    if ($has_children) : ?>
			<div
				x-cloak
				x-show="openDropdownId === <?php echo esc_js($fidx); ?>"
				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 top-16 left-0 w-full overflow-visible backdrop:bg-transparent"
				style="background-color: var(--puffergo-header-bg);"
			>
				<div aria-hidden="true" class="absolute inset-0 top-1/2 ring-1 ring-white/15" style="background-color: var(--puffergo-header-bg);"></div>

				<div class="relative" style="background-color: var(--puffergo-header-bg);">
					<div class="mx-auto grid max-w-canvas grid-cols-2 gap-x-4 gap-y-8 px-6 py-10 sm:grid-cols-3 lg:px-8 xl:grid-cols-4 xl:gap-x-8">
						<?php
    $pgo_branch_items = $pgo_item->children;
        $pgo_branch_depth = 1;
        $pgo_branch_style = 'mega';
        $pgo_branch_path = (string) $fidx;
        require PUFFERGO_PLUGIN_DIR . '/templates/components/menu-branch-desktop.php'; ?>
					</div>
				</div>
			</div>
			<?php
    endif;
    ++$flyout_index; endforeach; ?>

	<?php
    ob_start(); ?>
	<div class="mt-6 flow-root">
		<div class="-my-6 divide-y divide-white/10">
			<div class="space-y-2 py-6">
			<?php
    $mobile_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);
    $midx = (int) $mobile_index;
    $is_clickable_parent = $has_children && puffergo_is_clickable_parent($pgo_item);

    if ($has_children) : ?>
					<div class="-mx-3">
						<?php if ($is_clickable_parent) : ?>
							<div class="flex items-center justify-between">
								<a href="<?php echo esc_url($pgo_item->url); ?>" class="pgo-header-mobile-parent-link">
									<?php echo esc_html($pgo_item->title); ?>
								</a>
								<button
									type="button"
									class="pgo-header-mobile-parent-toggle"
									@click="pgoMobileToggle('<?php echo esc_js((string) $midx); ?>')"
									:aria-expanded="pgoMobileIsOpen('<?php echo esc_js((string) $midx); ?>') ? 'true' : 'false'"
									aria-label="<?php echo esc_attr(sprintf(__('Toggle %s submenu', 'puffergo'), $pgo_item->title)); ?>"
								>
									<svg
										viewBox="0 0 20 20"
										fill="currentColor"
										aria-hidden="true"
										class="size-5 flex-none transition-transform duration-200"
										:class="pgoMobileIsOpen('<?php echo esc_js((string) $midx); ?>') ? '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>
						<?php else : ?>
							<button
								type="button"
								class="pgo-header-mobile-parent"
								@click="pgoMobileToggle('<?php echo esc_js((string) $midx); ?>')"
								:aria-expanded="pgoMobileIsOpen('<?php echo esc_js((string) $midx); ?>') ? '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 transition-transform duration-200"
									:class="pgoMobileIsOpen('<?php echo esc_js((string) $midx); ?>') ? '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>
						<?php endif; ?>
						<div x-cloak x-show="pgoMobileIsOpen('<?php echo esc_js((string) $midx); ?>')" class="mt-2 space-y-2">
							<?php
    $pgo_branch_items = $pgo_item->children;
    $pgo_branch_depth = 1;
    $pgo_branch_path = (string) $midx;
    require PUFFERGO_PLUGIN_DIR . '/templates/components/menu-branch-mobile.php'; ?>
						</div>
					</div>
					<?php else : $mobile_class = $is_current ? 'pgo-header-mobile-link pgo-header-mobile-link-current' : 'pgo-header-mobile-link'; ?>
					<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;
    ++$mobile_index; endforeach; ?>
			</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>
