<?php
if (! defined('ABSPATH')) {
    exit;
} $GLOBALS['puffergo_fullpage_template'] = true;
$brand = get_option('puffergo_coming_soon_brand', get_bloginfo('name'));
$description = get_option('puffergo_coming_soon_description', '');
$label = get_option('puffergo_coming_soon_label', '');

if (! $label) {
    $label = __('Website Coming Soon', 'puffergo');
}

if (! $description) {
    $description = __('构建下一代深海交互体验。精彩即将揭晓。', 'puffergo');
} $primary = '#4f46e5';
$primary_hover = '#4338ca';
$brand_600 = '#4f46e5';

if (class_exists('PufferGo_Design_System')) {
    $tokens = PufferGo_Design_System::get_active_tokens();

    if ($tokens) {
        if (! empty($tokens['primaryColor'])) {
            $primary = sanitize_hex_color($tokens['primaryColor']);
            $brand_600 = $primary;
        }

if (! empty($tokens['secondaryColor'])) {
            $primary_hover = sanitize_hex_color($tokens['secondaryColor']);
        }
    }
} $css_vars = '';

if (class_exists('PufferGo_Design_System')) {
    $compiled = PufferGo_Design_System::get_compiled_css();

    if ($compiled) {
        $css_vars = $compiled;
    }
} ?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo('charset'); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title><?php echo esc_html($brand); ?> &mdash; Coming Soon</title>
	<?php
$tw_css = PUFFERGO_PLUGIN_DIR . '/assets/css/tailwind.css';

if (file_exists($tw_css)) {
    echo '<style>';
    echo file_get_contents($tw_css);
    echo '</style>';
} ?>
	<style>
		/* Design System CSS variables for Tailwind color-mix mapping */
		:root {
			--pg-brand-600: <?php echo esc_attr($brand_600); ?>;
			--pg-accent-600: <?php echo esc_attr($primary_hover); ?>;
			/* Fallback neutral palette */
			--pg-neutral-50: #f8fafc;
			--pg-neutral-100: #ffffff;
			--pg-neutral-200: #e2e8f0;
			--pg-neutral-400: #94a3b8;
			--pg-neutral-600: #64748b;
			--pg-neutral-900: #0f172a;
		}
		<?php
if ($css_vars) : echo $css_vars; endif; ?>
		/* Minimal reset for standalone Coming Soon page (no preflight) */
		*, *::before, *::after { box-sizing: border-box; }
		h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote { margin: 0; padding: 0; }
		button { font: inherit; }
		html, body { height: 100%; overflow: hidden; }
		.game-overlay.hidden { opacity: 0; pointer-events: none; }
		.score-active { color: rgba(79, 70, 229, 0.1); }
		#gameCanvas { width: 100%; height: 100%; display: block; }
		.line-left { background: linear-gradient(to left, rgba(0,0,0,0.06), transparent); }
		.line-right { background: linear-gradient(to right, rgba(0,0,0,0.06), transparent); }
		/* Override puffergo-fullpage-layout constraints for full-screen Coming Soon */
		.puffergo-fullpage-layout { max-width: none; margin: 0; padding: 0; display: flex; flex-direction: column; flex: 1 1 0%; min-height: 0; }
		/* Flex grow: brand section 2/3, game section 1/3 */
		.puffergo-fullpage-layout .flex-2 { flex: 2 1 0%; }
		/* bg-main for overlay background */
		.puffergo-fullpage-layout .bg-main { background-color: color-mix(in srgb, var(--pg-neutral-900) calc(var(--tw-bg-opacity, 1) * 100%), transparent); }
		/* Difficulty option states (no Tailwind hover to avoid conflicts) */
		.puffergo-fullpage-layout .diff-opt { cursor: pointer; user-select: none; background-color: transparent; color: var(--pg-neutral-600); }
		.puffergo-fullpage-layout .diff-opt:hover { background-color: rgba(255,255,255,1); }
		.puffergo-fullpage-layout .diff-opt.active { background-color: rgba(255,255,255,1) !important; color: var(--pg-brand-600); box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
	</style>
	<?php wp_head(); ?>
</head>
<body class="puffergo-fullpage-layout">
<?php wp_body_open(); ?>

<div class="bg-ground font-body text-main flex flex-col flex-1">
<!-- Brand Info Section -->
<section class="flex-2 flex flex-col items-center justify-center text-center p-8 relative z-10">
	<span class="text-xs font-bold uppercase tracking-widest text-primary/80 mb-6 bg-primary/10 px-5 py-2 rounded-full">
		<?php echo esc_html($label); ?>
	</span>
	<h1 class="text-6xl md:text-8xl lg:text-[8rem] font-extrabold tracking-tighter leading-none mb-6 bg-gradient-to-br from-neutral-900 to-brand-600 bg-clip-text text-transparent">
		<?php echo esc_html($brand); ?>
	</h1>
	<p class="text-base md:text-lg text-muted max-w-lg leading-relaxed font-normal">
		<?php echo esc_html($description); ?>
	</p>
</section>

<!-- Slogan Divider -->
<div class="py-9 bg-ground flex items-center justify-center gap-8">
	<div class="h-px w-20 flex-shrink-0 line-left"></div>
	<span class="text-xs uppercase tracking-widest font-bold text-primary/50 whitespace-nowrap">
		Survival is the first step to exploration
	</span>
	<div class="h-px w-20 flex-shrink-0 line-right"></div>
</div>

<!-- Game Section -->
<section class="flex-1 relative bg-surface overflow-hidden flex flex-col rounded-none shadow-[0_-15px_40px_rgba(0,0,0,0.02)]" id="gameViewport">
	<div class="absolute top-6 right-8 text-[1.75rem] font-extrabold text-black/[0.03] z-10 transition-colors" id="score">0</div>

	<div class="absolute inset-0 flex flex-col items-center justify-center bg-white/82 backdrop-blur-xl z-[50] transition-opacity duration-300" id="overlay">
		<div class="flex gap-1 bg-main/4 p-1 rounded-xl mb-7 border border-black/[0.03]">
			<div class="diff-opt px-3.5 py-1.5 text-[0.65rem] font-bold text-muted rounded-lg cursor-pointer transition-all" data-level="baby">Baby</div>
			<div class="diff-opt px-3.5 py-1.5 text-[0.65rem] font-bold text-muted rounded-lg cursor-pointer transition-all" data-level="easy">Easy</div>
			<div class="diff-opt active px-3.5 py-1.5 text-[0.65rem] font-bold text-primary rounded-lg cursor-pointer transition-all" data-level="normal">Normal</div>
			<div class="diff-opt px-3.5 py-1.5 text-[0.65rem] font-bold text-muted rounded-lg cursor-pointer transition-all" data-level="hard">Hard</div>
			<div class="diff-opt px-3.5 py-1.5 text-[0.65rem] font-bold text-muted rounded-lg cursor-pointer transition-all" data-level="insane">Insane</div>
		</div>
		<button class="btn-start px-14 py-4 bg-primary text-white border-none rounded-xl font-extrabold text-base cursor-pointer transition-all shadow-[0_8px_20px_rgba(79,70,229,0.25)] hover:-translate-y-0.5 hover:shadow-[0_12px_24px_rgba(79,70,229,0.35)]" id="startBtn">START DIVING</button>
		<p class="mt-6 text-xs text-muted uppercase tracking-wider font-medium">Space / Click to jump</p>
		<p class="text-xs text-neutral-400 mt-7 font-semibold">BEST RECORD: <span id="bestScore">0</span></p>
	</div>

	<canvas id="gameCanvas"></canvas>
</section>

<script>
(function(){
	var canvas = document.getElementById('gameCanvas');
	var ctx = canvas.getContext('2d');
	var viewport = document.getElementById('gameViewport');
	var overlay = document.getElementById('overlay');
	var startBtn = document.getElementById('startBtn');
	var scoreEl = document.getElementById('score');
	var bestScoreEl = document.getElementById('bestScore');
	var diffOpts = document.querySelectorAll('.diff-opt');
	var CONFIG = {
		baby:   { gravity: 0.12, jump: -3.5, pipeSpeed: 1.6, pipeInterval: 140, gap: 155 },
		easy:   { gravity: 0.20, jump: -4.5, pipeSpeed: 2.4, pipeInterval: 120, gap: 135 },
		normal: { gravity: 0.35, jump: -6.5, pipeSpeed: 4.0, pipeInterval: 90,  gap: 105 },
		hard:   { gravity: 0.50, jump: -7.8, pipeSpeed: 5.0, pipeInterval: 75,  gap: 95  },
		insane: { gravity: 0.65, jump: -9.2, pipeSpeed: 6.5, pipeInterval: 60,  gap: 85  }
	};
	var currentDiff = 'normal';
	var gameState = 'IDLE';
	var score = 0;
	var frame = 0;
	var puffer, pipes, bubbles;

	function resize() {
		canvas.width = viewport.clientWidth;
		canvas.height = viewport.clientHeight;
	}
	window.addEventListener('resize', resize);
	resize();

	function Puffer() {
		this.x = 80;
		this.y = canvas.height / 2;
		this.radius = 12;
		this.velocity = 0;
	}
	Puffer.prototype.update = function(g) {
		this.velocity += g;
		this.y += this.velocity;
		return (this.y + this.radius > canvas.height || this.y - this.radius < 0);
	};
	Puffer.prototype.draw = function() {
		ctx.save();
		ctx.translate(this.x, this.y);
		ctx.rotate(Math.max(-0.4, Math.min(0.4, this.velocity * 0.08)));
		ctx.beginPath();
		ctx.fillStyle = '#facc15';
		ctx.arc(0, 0, this.radius, 0, Math.PI * 2);
		ctx.fill();
		ctx.fillStyle = '#0f172a';
		ctx.beginPath();
		ctx.arc(this.radius * 0.4, -this.radius * 0.2, 2.5, 0, Math.PI * 2);
		ctx.fill();
		ctx.restore();
	};

	function Pipe(diff) {
		this.width = 52;
		this.x = canvas.width;
		this.gap = CONFIG[diff].gap;
		this.top = Math.random() * (canvas.height - this.gap - 50) + 25;
		this.passed = false;
	}
	Pipe.prototype.draw = function(speed) {
		this.x -= speed;
		ctx.fillStyle = 'rgba(79, 70, 229, 0.05)';
		ctx.strokeStyle = 'rgba(79, 70, 229, 0.08)';
		ctx.lineWidth = 2;
		ctx.beginPath();
		ctx.roundRect(this.x, 0, this.width, this.top, [0, 0, 4, 4]);
		ctx.fill(); ctx.stroke();
		var bY = this.top + this.gap;
		ctx.beginPath();
		ctx.roundRect(this.x, bY, this.width, canvas.height - bY, [4, 4, 0, 0]);
		ctx.fill(); ctx.stroke();
	};

	function init() {
		puffer = new Puffer();
		pipes = [];
		bubbles = [];
		score = 0;
		frame = 0;
		scoreEl.innerText = '0';
		scoreEl.classList.add('score-active');
		bestScoreEl.innerText = localStorage.getItem('puffer_best') || 0;
	}

	function gameLoop() {
		if (gameState !== 'PLAYING') return;
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		var cfg = CONFIG[currentDiff];
		if (Math.random() < 0.03) {
			bubbles.push({ x: Math.random() * canvas.width, y: canvas.height + 10, s: Math.random() * 4 + 1, v: Math.random() * 0.5 + 0.3 });
		}
		for (var i = bubbles.length - 1; i >= 0; i--) {
			var b = bubbles[i];
			b.y -= b.v;
			ctx.beginPath();
			ctx.arc(b.x, b.y, b.s, 0, Math.PI * 2);
			ctx.fillStyle = 'rgba(79, 70, 229, 0.04)';
			ctx.fill();
			if (b.y < -10) bubbles.splice(i, 1);
		}
		if (puffer.update(cfg.gravity)) endGame();
		puffer.draw();
		if (frame % cfg.pipeInterval === 0) pipes.push(new Pipe(currentDiff));
		for (var j = pipes.length - 1; j >= 0; j--) {
			var p = pipes[j];
			p.draw(cfg.pipeSpeed);
			if (puffer.x + puffer.radius - 3 > p.x && puffer.x - puffer.radius + 3 < p.x + p.width &&
				(puffer.y - puffer.radius + 3 < p.top || puffer.y + puffer.radius - 3 > p.top + p.gap)) {
				endGame();
			}
			if (!p.passed && p.x + p.width < puffer.x) {
				score++;
				scoreEl.innerText = score;
				p.passed = true;
			}
			if (p.x + p.width < -100) pipes.splice(j, 1);
		}
		frame++;
		requestAnimationFrame(gameLoop);
	}

	function endGame() {
		gameState = 'IDLE';
		overlay.classList.remove('hidden');
		scoreEl.classList.remove('score-active');
		var best = parseInt(localStorage.getItem('puffer_best')) || 0;
		if (score > best) { localStorage.setItem('puffer_best', score); }
		bestScoreEl.innerText = localStorage.getItem('puffer_best');
	}

	function handleJump(e) {
		if (e && e.code === 'Space') e.preventDefault();
		if (gameState === 'PLAYING') puffer.velocity = CONFIG[currentDiff].jump;
	}

	startBtn.addEventListener('click', function(e) {
		e.stopPropagation();
		init();
		gameState = 'PLAYING';
		overlay.classList.add('hidden');
		gameLoop();
	});

	window.addEventListener('keydown', handleJump);
	viewport.addEventListener('mousedown', function(e) {
		if (gameState === 'PLAYING') handleJump(e);
	});

	diffOpts.forEach(function(opt) {
		opt.addEventListener('click', function(e) {
			e.stopPropagation();
			diffOpts.forEach(function(o) { o.classList.remove('active'); });
			opt.classList.add('active');
			currentDiff = opt.dataset.level;
		});
	});

	resize();
	puffer = new Puffer();
	bestScoreEl.innerText = localStorage.getItem('puffer_best') || 0;
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	puffer.draw();
})();
</script>

<?php wp_footer(); ?>

<!-- Powered by PufferGo -->
<a href="https://puffergo.com" target="_blank" rel="noopener noreferrer nofollow" class="puffergo-badge" aria-label="Powered by PufferGo">
	Powered by <strong>PufferGo</strong>
</a>

<style>
.puffergo-badge {
	position: fixed;
	bottom: 12px;
	right: 12px;
	z-index: 9999;
	font-size: 10px;
	color: rgba(100,116,139,0.45);
	text-decoration: none;
	letter-spacing: 0.02em;
	transition: color 0.2s;
}
.puffergo-badge:hover {
	color: rgba(79,70,229,0.8);
}
.puffergo-badge strong {
	font-weight: 600;
}
@media (max-width: 640px) {
	.puffergo-badge {
		bottom: 8px;
		right: 8px;
		font-size: 9px;
	}
}
</style>
</div>
</body>
</html>
