<script setup>
const friends = [
  {
    name: '示例博客',
    avatar: 'https://api.dicebear.com/7.x/adventurer/svg?seed=demo1',
    url: 'https://example.com',
    description: '这是一个示例博客'
  },
  {
    name: '另一个博客',
    avatar: 'https://api.dicebear.com/7.x/adventurer/svg?seed=demo2',
    url: 'https://example2.com',
    description: '这是另一个示例博客'
  }
]
</script>

<template>
  <div class="max-w-4xl mx-auto">
    <div class="mb-8">
      <h1 class="text-3xl font-bold mb-4">友链</h1>
      <div class="text-gray-600">友情链接</div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <a v-for="friend in friends" :key="friend.name" :href="friend.url" target="_blank"
         class="block bg-white rounded-lg shadow-sm p-6 hover:shadow-md transition-all">
        <div class="flex items-center gap-4">
          <img :src="friend.avatar" :alt="friend.name" class="w-16 h-16 rounded-full" />
          <div>
            <h3 class="text-lg font-bold mb-1">{{ friend.name }}</h3>
            <p class="text-gray-600 text-sm">{{ friend.description }}</p>
          </div>
        </div>
      </a>
    </div>

    <div class="mt-12 bg-white rounded-lg shadow-sm p-6">
      <h2 class="text-xl font-bold mb-4">申请友链</h2>
      <p class="text-gray-600 mb-4">如果您想要申请友链，请确保您的网站满足以下条件：</p>
      <ul class="list-disc list-inside text-gray-600 mb-6">
        <li>网站内容合法合规</li>
        <li>网站能够正常访问</li>
        <li>网站已添加本站友链</li>
      </ul>
      <p class="text-gray-600">
        符合条件的朋友可以通过以下格式发送邮件至 
        <a href="mailto:your@email.com" class="text-blue-600 hover:underline">your@email.com</a>：
      </p>
      <pre class="bg-gray-50 p-4 rounded-lg mt-4 text-sm">
名称：您的网站名称
简介：网站简介
链接：网站链接
头像：头像链接</pre>
    </div>
  </div>
</template>
