<?php
if (! defined('ABSPATH')) {
    exit;
} ?>
<style>
	.puffergo-default-header button:focus,
	.puffergo-default-header button:focus-visible { outline: none; box-shadow: none; }
	.puffergo-default-header button::-moz-focus-inner { border: 0; }
	.puffergo-default-header__dropdown-item:hover { background-color: color-mix(in srgb, var(--puffergo-header-text, #171717) 8%, transparent); }
</style>
<header
	class="puffergo-default-header"
	style="--puffergo-header-bg: #ffffff; --puffergo-header-text: #171717; --puffergo-header-accent: #2563eb; background-color: var(--puffergo-header-bg); color: var(--puffergo-header-text);"
	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="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" style="color: inherit;" 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 px-2 text-sm font-semibold text-white" style="background-color: var(--puffergo-header-accent, #2563eb);"><?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, #171717);"
				@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';
    $link_style = 'color: var(--puffergo-header-text, #171717); text-decoration: ' . ($is_current ? 'underline' : 'none') . '; text-underline-offset: 4px; text-decoration-color: var(--puffergo-header-accent, #2563eb);';
    $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.5">
								<a
									href="<?php echo esc_url($pgo_item->url); ?>"
									class="text-sm/6 font-semibold no-underline"
									style="color: var(--puffergo-header-text, #171717); text-decoration: <?php echo $is_current ? 'underline' : 'none'; ?>; text-underline-offset: 4px; text-decoration-color: var(--puffergo-header-accent, #2563eb);"
								>
									<?php echo esc_html($pgo_item->title); ?>
								</a>
								<button
									type="button"
									class="flex items-center justify-center size-5 rounded focus:outline-none focus-visible:outline-none"
									style="background: none; border: 0; outline: none; cursor: pointer;"
									@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-50" style="color: var(--puffergo-header-text, #171717);">
										<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.5 rounded-lg text-sm/6 font-semibold focus:outline-none focus-visible:outline-none"
								style="background-color: var(--puffergo-header-bg, #fff); color: var(--puffergo-header-text, #171717); border: 0; 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 opacity-50">
									<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;
        }
    } $pgo_panel_width_class = $pgo_has_subtree ? '' : 'w-56';
    $pgo_panel_width_style = $pgo_has_subtree ? ' width: 44rem; max-width: calc(100vw - 3rem);' : ''; ?>
						<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="absolute left-1/2 -translate-x-1/2 top-full z-50 mt-3 <?php echo esc_attr($pgo_panel_width_class); ?> overflow-hidden rounded-xl shadow-lg ring-1"
							style="background-color: var(--puffergo-header-bg, #fff); --tw-ring-color: color-mix(in srgb, var(--puffergo-header-text, #171717) 10%, transparent);<?php echo esc_attr($pgo_panel_width_style); ?>"
						>
							<div>
								<?php
    $pgo_branch_items = $pgo_item->children;
    $pgo_branch_depth = 1;
    $pgo_branch_style = 'default';
    $pgo_branch_path = (string) $idx;
    require PUFFERGO_PLUGIN_DIR . '/templates/components/menu-branch-desktop.php'; ?>
							</div>
						</div>
					</div>
					<?php else : ?>
					<a href="<?php echo esc_url($pgo_item->url); ?>" class="<?php echo esc_attr($link_class); ?>" style="<?php echo esc_attr($link_style); ?>">
						<?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>
	</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
    $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="-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-50" :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-50" :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="mt-2 space-y-2"
							>
								<?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;
    ++$nav_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>
