<script setup lang="ts">
import logoImg from '@/assets/logo.png'

const currentYear = new Date().getFullYear()

const footerLinks = [
  {
    title: '产品',
    links: [
      { label: '体验端', href: '#app' },
      { label: '管理端', href: '#admin' },
      { label: '课堂监控', href: '#classroom-monitor' },
      { label: '核心技术', href: '#tech' },
      { label: '功能介绍', href: '#features' },
    ],
  },
  {
    title: '支持',
    links: [
      { label: '帮助中心', href: '#' },
      { label: '使用教程', href: '#' },
      { label: '常见问题', href: '#' },
      { label: '联系我们', href: '#' },
    ],
  },
  {
    title: '公司',
    links: [
      { label: '关于我们', href: '#about' },
      { label: '合作伙伴', href: '#' },
      { label: '加入我们', href: '#' },
      { label: '新闻动态', href: '#' },
    ],
  },
]
</script>

<template>
  <footer class="bg-[#0F0D2E] text-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-16 pb-8">
      <div class="grid grid-cols-2 lg:grid-cols-5 gap-8 lg:gap-12">
        <div class="col-span-2">
          <div class="flex items-center mb-4">
            <img :src="logoImg" alt="灵犀学" class="h-9 w-auto brightness-0 invert" />
          </div>
          <p class="text-sm text-indigo-200/50 leading-relaxed max-w-xs mb-6">
            一站式互动内容服务平台，让管理更高效，让体验更精彩。
          </p>
          <div class="flex gap-3">
            <a
              v-for="platform in ['微信', '微博', '抖音']"
              :key="platform"
              href="#"
              class="w-9 h-9 rounded-lg bg-white/8 border border-white/8 flex items-center justify-center text-xs font-medium text-indigo-200/60 hover:bg-white/15 hover:text-white transition-all duration-200 cursor-pointer"
            >
              {{ platform[0] }}
            </a>
          </div>
        </div>

        <div v-for="group in footerLinks" :key="group.title">
          <h4 class="text-sm font-semibold text-white mb-4">{{ group.title }}</h4>
          <ul class="space-y-2.5">
            <li v-for="link in group.links" :key="link.label">
              <a
                :href="link.href"
                class="text-sm text-indigo-200/50 hover:text-white transition-colors duration-200 cursor-pointer"
              >
                {{ link.label }}
              </a>
            </li>
          </ul>
        </div>
      </div>

      <div class="mt-12 pt-8 border-t border-white/8 flex flex-col sm:flex-row items-center justify-between gap-4">
        <p class="text-xs text-indigo-200/40">&copy; {{ currentYear }} 灵犀学. All rights reserved.</p>
        <div class="flex items-center gap-6">
          <a href="#" class="text-xs text-indigo-200/40 hover:text-indigo-200/70 transition-colors duration-200 cursor-pointer">隐私政策</a>
          <a href="#" class="text-xs text-indigo-200/40 hover:text-indigo-200/70 transition-colors duration-200 cursor-pointer">服务条款</a>
          <a
            href="https://beian.mps.gov.cn/#/query/webSearch"
            target="_blank"
            rel="noopener noreferrer"
            class="text-xs text-indigo-200/40 hover:text-indigo-200/70 transition-colors duration-200 cursor-pointer"
          >蜀ICP备2026014928号</a>
        </div>
      </div>
    </div>
  </footer>
</template>
