<?php
if (! defined('ABSPATH')) {
    exit;
} $nav_pages = array();

if (function_exists('wc_get_page_id')) {
    $shop_page_id = wc_get_page_id('shop');

    if ($shop_page_id && $shop_page_id > 0) {
        $nav_pages[] = array('label' => __('Products', 'puffergo'), 'url' => get_permalink($shop_page_id), );
    }
}

if (empty($nav_pages) && post_type_exists('puffergo_product')) {
    $nav_pages[] = array('label' => __('Products', 'puffergo'), 'url' => get_post_type_archive_link('puffergo_product'), );
}

if (post_type_exists('puffergo_solution')) {
    $url = get_post_type_archive_link('puffergo_solution');

    if ($url) {
        $nav_pages[] = array('label' => __('Solutions', 'puffergo'), 'url' => $url, );
    }
} $contact_pages = get_posts(array('post_type' => 'page', 'meta_key' => '_wp_page_template', 'meta_value' => 'puffergo-fullpage.php', 'numberposts' => 1, 'fields' => 'ids', 's' => 'contact', ));

if (! empty($contact_pages)) {
    $nav_pages[] = array('label' => __('Contact Us', 'puffergo'), 'url' => get_permalink($contact_pages[0]), );
} ?>

<style>
	/* ── Puffer fish CSS animation ── */
	.pgo-404-puffer {
		display: inline-block;
		position: relative;
		width: 80px;
		height: 80px;
		animation: pgo-float 3s ease-in-out infinite;
	}
	.pgo-404-puffer .pgo-body {
		position: absolute;
		width: 64px;
		height: 58px;
		background: #facc15;
		border-radius: 50%;
		top: 11px;
		left: 8px;
	}
	.pgo-404-puffer .pgo-eye {
		position: absolute;
		width: 8px;
		height: 8px;
		background: #0f172a;
		border-radius: 50%;
		top: 24px;
		left: 52px;
	}
	.pgo-404-puffer .pgo-eye::after {
		content: '';
		position: absolute;
		width: 3px;
		height: 3px;
		background: #fff;
		border-radius: 50%;
		top: 1px;
		left: 2px;
	}
	.pgo-404-puffer .pgo-mouth {
		position: absolute;
		width: 10px;
		height: 5px;
		border-bottom: 2.5px solid #0f172a;
		border-radius: 0 0 50% 50%;
		top: 38px;
		left: 54px;
	}
	.pgo-404-puffer .pgo-fin {
		position: absolute;
		width: 18px;
		height: 12px;
		background: #eab308;
		border-radius: 50%;
		top: 36px;
		left: 2px;
		transform: rotate(-20deg);
		animation: pgo-fin-flap 0.8s ease-in-out infinite alternate;
	}
	.pgo-404-puffer .pgo-spine {
		position: absolute;
		width: 4px;
		height: 4px;
		background: #eab308;
		border-radius: 50%;
	}
	.pgo-404-puffer .pgo-spine:nth-child(5) { top: 8px; left: 28px; }
	.pgo-404-puffer .pgo-spine:nth-child(6) { top: 6px; left: 38px; }
	.pgo-404-puffer .pgo-spine:nth-child(7) { top: 10px; left: 48px; }

	/* Bubble decorations */
	.pgo-404-bubbles {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 120px;
		height: 120px;
		pointer-events: none;
	}
	.pgo-404-bubbles span {
		position: absolute;
		display: block;
		border-radius: 50%;
		background: color-mix(in srgb, var(--pg-brand-600, #4f46e5) 6%, transparent);
		animation: pgo-bubble-rise 4s ease-in infinite;
	}
	.pgo-404-bubbles span:nth-child(1) { width: 8px; height: 8px; left: 20%; bottom: 0; animation-delay: 0s; }
	.pgo-404-bubbles span:nth-child(2) { width: 5px; height: 5px; left: 55%; bottom: 0; animation-delay: 1.2s; }
	.pgo-404-bubbles span:nth-child(3) { width: 6px; height: 6px; left: 75%; bottom: 0; animation-delay: 2.5s; }

	@keyframes pgo-float {
		0%, 100% { transform: translateY(0); }
		50%      { transform: translateY(-12px); }
	}
	@keyframes pgo-fin-flap {
		0%   { transform: rotate(-20deg); }
		100% { transform: rotate(-35deg); }
	}
	@keyframes pgo-bubble-rise {
		0%   { transform: translateY(0); opacity: 0.7; }
		100% { transform: translateY(-100px); opacity: 0; }
	}
</style>

<main class="puffergo-fullpage-layout">
	<section class="py-16 md:py-28">
		<div class="mx-auto max-w-2xl px-6 text-center">

			<!-- 河豚动画 -->
			<div class="relative inline-block mb-8">
				<div class="pgo-404-bubbles">
					<span></span>
					<span></span>
					<span></span>
				</div>
				<div class="pgo-404-puffer">
					<div class="pgo-body"></div>
					<div class="pgo-eye"></div>
					<div class="pgo-mouth"></div>
					<div class="pgo-fin"></div>
					<div class="pgo-spine"></div>
					<div class="pgo-spine"></div>
					<div class="pgo-spine"></div>
				</div>
			</div>

			<!-- 大号 404 -->
			<p class="text-6xl font-extrabold tracking-tight md:text-7xl text-brand-600">
				404
			</p>

			<!-- 提示标题 -->
			<h1 class="mt-4 text-2xl font-bold md:text-3xl text-neutral-900">
				<?php esc_html_e('Page Not Found', 'puffergo'); ?>
			</h1>

			<!-- 说明文案 -->
			<p class="mt-3 text-base text-neutral-500">
				<?php esc_html_e('The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.', 'puffergo'); ?>
			</p>

			<!-- 导航链接（核心恢复路径） -->
			<nav class="mt-10" aria-label="<?php esc_attr_e('Quick links', 'puffergo'); ?>">
				<ul class="flex flex-wrap items-center justify-center gap-3">
					<li>
						<a href="<?php echo esc_url(home_url('/')); ?>"
							class="rounded-theme bg-brand-600 px-6 py-2.5 text-sm font-medium text-on-primary transition hover:bg-brand-700">
							<?php esc_html_e('Back to Home', 'puffergo'); ?>
						</a>
					</li>
					<?php foreach ($nav_pages as $nav_page) : if (empty($nav_page['url'])) {
					    continue;
					} ?>
						<li>
							<a href="<?php echo esc_url($nav_page['url']); ?>"
								class="rounded-theme border border-neutral-200 px-5 py-2.5 text-sm font-medium text-neutral-900 transition hover:border-brand-600 hover:text-brand-600">
								<?php echo esc_html($nav_page['label']); ?>
							</a>
						</li>
					<?php endforeach; ?>
				</ul>
			</nav>

		</div>
	</section>
</main>
