<script setup lang="ts">
import { Phone } from 'lucide-vue-next';

const submenus = [
    { name: '首页', href: '/' },
    { name: '行业痛点', href: '#pain' },
    { name: '解决方案', href: '#solution' },
    { name: '核心产品', href: '#product' },
    { name: '精准养老', href: '#elderly' },
    { name: "合作伙伴", href: '#partner' },
    { name: '关于锦泽', href: '#about' },
]

// 获取当前 hash 值
const route = useRoute()
const currentHash = ref('')

// 监听 hash 变化
watch(() => route.hash, (newHash) => {
    currentHash.value = newHash
}, { immediate: true })

// 检查链接是否激活
const isActive = (href: string) => {
    return currentHash.value === href
}

const footerSections = [
    {
        title: '关于锦泽',
        links: [
            { text: '关于我们', href: '/about' },
            { text: '企业文化', href: '/culture' },
            { text: '发展历程', href: '/history' },
            { text: '核心优势', href: '/advantage' },
        ],
    },
    {
        title: '核心产品',
        links: [
            { text: '智慧康养床', href: '/product/bed' },
            { text: '管家机器人', href: '/product/robot' },
            { text: '运营管理系统', href: '/product/system' },
            { text: '智慧监控平台', href: '/product/monitor' },
        ],
    },
    {
        title: '硬件设施',
        links: [
            { text: '康复设备', href: '/facility/rehab' },
            { text: '服务机器人', href: '/facility/robot' },
            { text: '采集传感器', href: '/facility/sensor' },
        ],
    },
    {
        title: '市场应用',
        links: [
            { text: '医疗机构合作', href: '/market/hospital' },
            { text: '科研机构合作', href: '/market/research' },
            { text: '企业合作伙伴', href: '/market/enterprise' },
        ],
    },
]
</script>

<template>
    <div class="w-screen h-screen overflow-x-hidden">
        <header class="sticky top-0 z-99 md:block hidden">
            <nav class="flex items-center justify-center bg-white py-[1rem]">
                <NuxtLink to="/" class="flex items-center h-[2.25rem]">
                    <img src="/images/logoL.png" alt="logo" class="h-[2.25rem] object-cover" />
                </NuxtLink>
                <div class="flex items-center justify-center gap-6 text-[#9c9d9d] gap-[3.75rem] mx-[1.875rem]">
                    <NuxtLink 
                        :to="item.href" 
                        :class="[
                            'hover:text-black',
                            isActive(item.href) ? 'text-[#18bbb8] font-medium border-b border-[#18bbb8] border-solid' : ''
                        ]"
                        :external="true"
                        v-for="item in submenus" 
                        :key="item.href">
                        {{ item.name }}
                    </NuxtLink>
                </div>
                <div
                    class="rounded-full w-[10rem] h-[2.25rem] border border-[#18bbb8] border-solid flex items-center justify-center">
                    <Phone :size="20" color="#18bbb8" class="mr-2" />
                    <a href="tel:400-621-1003">400-621-1003</a>
                </div>
            </nav>
        </header>
        <slot />
        <footer class="grid grid-cols-1 md:flex justify-items-center md:justify-items-start bg-[#1a222a] px-[2.5%] pt-[70px] pb-[20px] justify-between" id="about">
            <img src="/images/logo.png" alt="logo" srcset="" class="h-[49px]">
            <div class="max-w-6xl grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-4 flex flex-col items-start">
                <section v-for="section in footerSections" :key="section.title" class="space-y-3 flex flex-col items-center">
                    <h2 class="text-lg font-semibold text-[#18bbb8]">{{ section.title }}</h2>
                    <ul class="space-y-2 text-[#9c9d9d] flex flex-col justify-center">
                        <li v-for="link in section.links" :key="link.href">
                            <a class="hover:text-blue-600">{{ link.text }}</a>
                        </li>
                    </ul>
                </section>
            </div>

            <section class="max-w-6xl flex flex-col items-center justify-center">
                <h2 class="text-2xl font-semibold text-[#18bbb8]">联系我们</h2>
                <div class="space-y-4 mt-4 flex flex-col items-center justify-center">
                    <!-- 二维码部分 -->
                    <div class="flex space-x-4">
                        <div class="w-24 h-24">
                            <img src="/images/qrcode1.png" alt="二维码 1" class="w-full h-full object-contain">
                        </div>
                        <div class="w-24 h-24">
                            <img src="/images/qecode2.png" alt="二维码 2" class="w-full h-full object-contain">
                        </div>
                    </div>
                    <!-- 联系信息 -->
                    <div class="text-[#9c9d9d] space-y-2">
                        <p><strong>电话：</strong>400-621-1003</p>
                        <p><strong>邮箱：</strong><a href="mailto:1534747238@QQ.COM"
                                class="hover:underline">1534747238@QQ.COM</a></p>
                        <p><strong>地址：</strong>上海杨浦区政学路88号5号楼1003室</p>
                    </div>
                </div>
            </section>

        </footer>
    </div>
</template>

<style lang="scss" scoped></style>