<template>
  <footer class="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
    <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
        <!-- 关于我们 -->
        <div>
          <h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">About Us</h3>
          <div class="mt-4">
            <div class="flex items-center">
              <GlobeAltIcon class="h-8 w-8 text-green-600 dark:text-green-400" />
              <span class="ml-2 text-xl font-bold text-green-600 dark:text-green-400">Travel Share</span>
            </div>
            <p class="mt-2 text-base text-gray-500 dark:text-gray-400">
              Share travel stories, explore the beauty of the world
            </p>
          </div>
        </div>

        <!-- 快速链接 -->
        <div>
          <h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">Quick Links</h3>
          <ul role="list" class="mt-4 space-y-4">
            <li>
              <router-link to="/home" class="text-base text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300">
                Home
              </router-link>
            </li>
            <li>
              <router-link to="/new-post" class="text-base text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300">
                Create Post
              </router-link>
            </li>
            <li>
              <a href="#" class="text-base text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300">
                Hot Topics
              </a>
            </li>
          </ul>
        </div>

        <!-- 社区 -->
        <div>
          <h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">Community</h3>
          <ul role="list" class="mt-4 space-y-4">
            <li>
              <a href="#" class="text-base text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300">
                Community Guidelines
              </a>
            </li>
            <li>
              <a href="#" class="text-base text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300">
                Help Center
              </a>
            </li>
            <li>
              <a href="#" class="text-base text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300">
                Feedback
              </a>
            </li>
          </ul>
        </div>

        <!-- 联系我们 -->
        <div>
          <h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">Contact Us</h3>
          <ul role="list" class="mt-4 space-y-4">
            <li class="flex items-center">
              <EnvelopeIcon class="h-5 w-5 text-gray-400" />
              <span class="ml-2 text-base text-gray-500 dark:text-gray-400">
                contact@example.com
              </span>
            </li>
            <li class="flex items-center">
              <PhoneIcon class="h-5 w-5 text-gray-400" />
              <span class="ml-2 text-base text-gray-500 dark:text-gray-400">
                +86 123 4567 8901
              </span>
            </li>
            <li class="flex items-center">
              <MapPinIcon class="h-5 w-5 text-gray-400" />
              <span class="ml-2 text-base text-gray-500 dark:text-gray-400">
                Shanghai, China
              </span>
            </li>
          </ul>
        </div>
      </div>

      <!-- 底部版权信息 -->
      <div class="mt-12 border-t border-gray-200 dark:border-gray-700 pt-8">
        <p class="text-base text-gray-400 text-center">
          &copy; {{ new Date().getFullYear() }} Travel Share. All rights reserved.
        </p>
      </div>
    </div>
  </footer>
</template>

<script setup>
import { GlobeAltIcon, EnvelopeIcon, PhoneIcon, MapPinIcon } from '@heroicons/vue/24/outline'
</script>
