<?php
if (! defined('ABSPATH')) {
    exit;
} ?>
<header
	class="puffergo-default-header pgo-header-shell-dark"
	style="--puffergo-header-bg: oklch(21% 0.034 264.665); --puffergo-header-text: #f5f7ff; --puffergo-header-accent: #60a5fa; --puffergo-header-nav-justify: space-between; --puffergo-header-nav-gap: 0; --puffergo-header-brand-flex: 1 1 0%; --puffergo-header-menu-margin-left: 0; --puffergo-header-menu-margin-right: 0; --puffergo-header-spacer-flex: 0 0 0;"
	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); } }"
	:class="{ 'pgo-header-menu-open': openDropdownId !== null }">
	<nav
		aria-label="<?php esc_attr_e('Global', 'puffergo'); ?>"
		class="pgo-header-nav">
		<div class="flex" style="flex: var(--puffergo-header-brand-flex, 1 1 0%);">
			<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="inline-flex h-8 items-center justify-center rounded px-2 text-sm font-semibold text-white" style="background-color: var(--puffergo-header-accent, #60a5fa);"><?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"
				style="color: var(--puffergo-header-text, #f5f7ff); background-color: transparent; border: 0; appearance: none;"
				@mouseover="$el.style.opacity = '1'"
				@mouseout="$el.style.opacity = ''"
				@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="pgo-header-menu-desktop" style="margin-left: var(--puffergo-header-menu-margin-left, 0); margin-right: var(--puffergo-header-menu-margin-right, 0);">
			<?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) : ?>
					<div
						class="relative"
						@click.outside="openDropdownId = null"
						@mouseenter="openDropdownId = <?php echo esc_js($idx); ?>"
						@mouseleave="openDropdownId = null">
						<?php if ($is_clickable_parent) : ?>
							<div class="flex items-center gap-x-1">
								<a
									href="<?php echo esc_url($pgo_item->url); ?>"
									class="pgo-header-desktop-link no-underline"
									style="color: var(--puffergo-header-text, #f5f7ff);">
									<?php echo esc_html($pgo_item->title); ?>
								</a>
								<button
									type="button"
									class="pgo-header-menu-trigger"
									@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 opacity-60">
										<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-menu-trigger"
								@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 opacity-60">
									<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
    $pgo_has_subtree = false;
    $pgo_first_sub = '';

    foreach ($pgo_item->children as $pgo_ci => $pgo_child) {
        if (! empty($pgo_child->children) && is_array($pgo_child->children)) {
            $pgo_has_subtree = true;
            $pgo_first_sub = $idx . '-' . $pgo_ci;
            break;
        }
    } ?>
						<div
							x-cloak
							x-data="{ activeSub: '<?php echo esc_js($pgo_first_sub); ?>' }"
							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="pgo-header-dropdown-panel"
							<?php if ($pgo_has_subtree) : ?>
							<?php  ?>
							style="width: 44rem; max-width: calc(100vw - 3rem); left: 50%; right: auto; margin-left: -22rem;"
							<?php endif; ?>
						>
							<div class="pgo-header-dropdown-list">
								<?php
    $pgo_branch_items = $pgo_item->children;
    $pgo_branch_depth = 1;
    $pgo_branch_style = 'stacked';
    $pgo_branch_path = (string) $idx;
    require PUFFERGO_PLUGIN_DIR . '/templates/components/menu-branch-desktop.php'; ?>
							</div>
						</div>
					</div>
				<?php else : $link_class = $is_current ? 'pgo-header-desktop-link pgo-header-desktop-link-current' : 'pgo-header-desktop-link'; ?>
					<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'; ?>
			<?php require PUFFERGO_PLUGIN_DIR . '/templates/components/language-switcher.php'; ?>
		</div>

		<?php  ?>
		<div aria-hidden="true" data-puffergo-spacer="header" style="flex: var(--puffergo-header-spacer-flex, 0 0 0); align-self: stretch;"></div>
	</nav>

	<?php
    ob_start(); ?>
	<div class="flow-root">
		<div class="-my-6">
			<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);
    $idx = (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) $idx); ?>')"
										:aria-expanded="pgoMobileIsOpen('<?php echo esc_js((string) $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 opacity-60" :class="pgoMobileIsOpen('<?php echo esc_js((string) $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="pgo-header-mobile-parent"
									@click="pgoMobileToggle('<?php echo esc_js((string) $idx); ?>')"
									:aria-expanded="pgoMobileIsOpen('<?php echo esc_js((string) $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 opacity-60" :class="pgoMobileIsOpen('<?php echo esc_js((string) $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; ?>
							<div x-cloak x-show="pgoMobileIsOpen('<?php echo esc_js((string) $idx); ?>')" class="pgo-header-mobile-children">
								<?php
    $pgo_branch_items = $pgo_item->children;
    $pgo_branch_depth = 1;
    $pgo_branch_path = (string) $idx;
    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>