<template>
    <div class="font-sans text-gray-800">
        <!-- 头部导航 -->
        <header class="flex justify-between items-center bg-blue-100 p-4 border-b border-blue-200">
            <div class="text-2xl font-bold text-blue-700">全能查 APP</div>
            <button
                class="lg:hidden text-blue-700 text-2xl focus:outline-none transition-transform transform hover:scale-110"
                @click="toggleMenu">
                <span v-if="!isMenuOpen">☰</span>
                <span v-else>✕</span>
            </button>
            <nav :class="`lg:flex lg:items-center lg:gap-6 ${isMenuOpen
                    ? 'flex flex-col items-end absolute top-16 right-0 bg-blue-100 w-full shadow-md py-4 px-6'
                    : 'hidden'
                }`">
                <a href="#support" class="text-blue-700 hover:text-blue-500 transition-colors"
                    @click="toggleMenu">联系我们</a>
            </nav>
        </header>

        <!-- 横幅 -->
        <section class="text-center py-16 bg-gradient-to-r from-blue-100 to-blue-200 text-blue-800">
            <h1 class="text-4xl lg:text-5xl font-bold mb-4 animate-fade-in">
                防范风险，从全能查开始
            </h1>
            <p class="text-lg lg:text-xl mb-6 animate-fade-in delay-200">
                全能查，为您的安全保驾护航
            </p>
        </section>

        <!-- APP 预览 -->
        <section id="features" class="py-16 bg-blue-50 text-center">
            <h2 class="text-3xl font-bold text-blue-700 mb-6">APP 预览</h2>
            <div class="flex flex-wrap justify-center gap-6">
                <img class="shadow-lg rounded-lg transition-transform transform hover:scale-105 h-96 object-contain"
                    src="/image/app_1.jpg" alt="APP preview" />
                <img class="shadow-lg rounded-lg transition-transform transform hover:scale-105 h-96 object-contain"
                    src="/image/app_2.jpg" alt="APP preview" />
                <img class="shadow-lg rounded-lg transition-transform transform hover:scale-105 h-96 object-contain"
                    src="/image/app_3.jpg" alt="APP preview" />
            </div>
        </section>

        <!-- 技术支持 -->
        <section id="support" class="py-16 bg-blue-100 text-center">
            <h2 class="text-3xl font-bold text-blue-700 mb-4">技术支持</h2>
            <p class="text-lg text-blue-800 mb-2">
                如需帮助，请通过以下邮箱联系我们：
            </p>
            <p class="text-blue-700 underline hover:text-blue-500 transition-colors">
                <a href="mailto:admin@iieeii.com">admin@iieeii.com</a>
            </p>
        </section>

        <!-- 页脚 -->
        <footer class="bg-blue-200 text-gray-700 text-center py-4">
            <div class="flex items-center justify-center gap-2">
                <img src="https://qcloudimg.tencent-cloud.cn/raw/eed02831a0e201b8d794c8282c40cf2e.png" alt="网安 icon"
                    class="w-6 h-6" />
                <p class="text-sm">
                    琼公网安备 46010002000443 号 | 琼ICP备 2024038584 号-2
                </p>
            </div>
        </footer>
    </div>
</template>

<script setup>
import { ref } from "vue";

const isMenuOpen = ref(false);

function toggleMenu() {
    isMenuOpen.value = !isMenuOpen.value;
}
</script>

<style>
@keyframes fade-in {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fade-in 1s ease-out;
}

.animate-fade-in.delay-200 {
    animation-delay: 0.2s;
}

.animate-fade-in.delay-400 {
    animation-delay: 0.4s;
}
</style>
