---
import Layout from "@/layouts/Layout.astro";
import Header from "@/components/Header.astro";
import Breadcrumb from "@/components/Breadcrumb.astro";
import Main from "@/components/Main.astro";
import Footer from "@/components/Footer.astro";
import config from "@/config";
import { useTranslations } from "@/i18n";

const locale = Astro.currentLocale ?? config.site.lang;
const t = useTranslations(locale);

interface FriendLink {
  name: string;
  url: string;
  avatar: string;
  desc: string;
}

const links: FriendLink[] = [
  {
    name: "落雪の自留地",
    url: "https://www.lxhtt.cn",
    avatar: "https://www.lxhtt.cn/img/avatar.webp",
    desc: "活着就是为了改变世界",
  },
  {
    name: "米露小窝",
    url: "https://milu.ink",
    avatar: "https://upy.milu.ink/avatar/1080.png",
    desc: "放弃个性,就和死了没什么区别",
  },
];
---

<Layout title={`友链 | ${config.site.title}`} description="我的朋友们的博客和网站">
  <Header />

  <Breadcrumb />

  <Main pageTitle="友链" pageDesc="我的朋友们的博客和网站" class="app-prose">
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 mb-8">
      {
        links.map((link) => (
          <a
            href={link.url}
            target="_blank"
            rel="noopener noreferrer"
            class="flex items-center gap-4 rounded-xl border border-border bg-background px-4 transition-all duration-300 hover:shadow-lg"
          >
            <img
              src={link.avatar}
              alt={`${link.name} 的头像`}
              class="h-12 w-12 flex-shrink-0 rounded-full"
              width="48"
              height="48"
              loading="lazy"
            />
            <div class="min-w-0 flex-1">
              <h3 class="truncate text-sm font-medium text-foreground">{link.name}</h3>
              <p class="mt-1 truncate text-xs text-foreground/60">{link.desc}</p>
            </div>
          </a>
        ))
      }
    </div>

    <h2>友情链接申请</h2>

    <p>如贵站符合以下条件，并希望交换友情链接，可发送邮件到 im@qihanx.cn。</p>

    <ul>
      <li>贵站在中国大陆区域能够正常访问；</li>
      <li>贵站符合中国大陆法律法规；</li>
      <li>贵站已添加本站友情链接。</li>
    </ul>

    <p>本站友链信息如下：</p>

    <ul>
      <li><strong>网站名称：</strong> 启涵的小破站</li>
      <li><strong>网站地址：</strong> https://qihanx.cn</li>
      <li><strong>网站图标：</strong> https://qihanx.cn/favicon.png</li>
      <li><strong>网站简介：</strong> 最慢的步伐不是跬步，而是徘徊；最快的脚步不是冲刺，而是坚持。</li>
    </ul>
  </Main>

  <Footer />
</Layout>