<script lang="ts">
	import { goto } from '$app/navigation';

	let isHover = false;

	// 提取函数：处理“激活”状态
	function handleFocus() {
		isHover = true;
	}

	// 提取函数：处理“失活”状态
	function handleBlur() {
		isHover = false;
	}
</script>


<!--<div class={'relative pt-10 px-4  h-screen w-screen flex justify-center items-center transition-all ' }}-->
<!--		 class:backdrop-blur-xs={isHover}-->
<!--&gt;-->
<!--	<button class="btn btn-wide" on:mouseenter={()=>{isHover = true}} on:mouseout={()=>{isHover = false}}>安装游戏</button>-->
<!--</div>-->


<div class="hero  min-h-screen transition-all {isHover ? 'bg-neutral-700/30' : ''} "
		 class:backdrop-blur-xs={isHover}

>
	<div class="hero-content text-center select-none">
		<div class="max-w-md" >
			<h1 class="text-5xl font-bold"
					on:mouseenter={()=>{isHover = true}}
					on:mouseout={()=>{isHover = false}}
					on:blur={handleBlur}
					on:focus={handleFocus}
			>逃离鸭科夫</h1>
			<p class="py-6"
				 on:mouseenter={()=>{isHover = true}}
				 on:mouseout={()=>{isHover = false}}
				 on:blur={handleBlur}
				 on:focus={handleFocus}
			>
				<span class="font-bold">《逃离鸭科夫》</span>是一款鸭子题材PVE俯视角撤离射击游戏。你要在鸭科夫的世界里搜寻物资，建造藏身处，升级装备，从一无所有到做大做强；面对虎视眈眈的敌鸭，想方设法生存下去——或者逃离。
			</p>
			<button class="btn btn-primary btn-wide "
							on:mouseenter={()=>{isHover = true}}
							on:mouseout={()=>{isHover = false}}
							on:blur={handleBlur}
							on:focus={handleFocus}
							on:click={()=>{goto('/install')}}
			>安装游戏</button>
			<button class="btn btn-primary btn-wide "
							on:mouseenter={()=>{isHover = true}}
							on:mouseout={()=>{isHover = false}}
							on:blur={handleBlur}
							on:focus={handleFocus}
							on:click={()=>{goto('/success')}}
			>完成</button>
		</div>
	</div>
</div>