---
import BaseLayout from '@/layouts/BaseLayout.astro';
import PageHeaderCard from '@/components/PageHeaderCard.astro';
import { siteConfig } from '../../site.config.mjs';

const friends = siteConfig.friends;
---

<BaseLayout title="友情链接" description={`${siteConfig.site.name} 的友情链接页面。`}>
  <section class="content-wrap native-page">
    <PageHeaderCard title="友情链接" subtitle="把仍在发光的角落放在一起。" />

    <div class="friend-link-grid" aria-label="友情链接列表">
      {friends.map((friend) => (
        <a class="friend-link-card" href={friend.url} target="_blank" rel="noreferrer">
          <img src={friend.avatar} alt="" loading="lazy" />
          <span>
            <strong>{friend.name}</strong>
            <em>{friend.description}</em>
          </span>
          <i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i>
        </a>
      ))}
    </div>

    <article class="article native-page-article link-apply-card">
      <div class="prose">
        <h2>友链申请</h2>
        <p>
          欢迎长期维护、内容原创、访问稳定的个人站点交换友链。你可以通过邮件发送站点名称、地址、头像和一句简介。
        </p>
        <ul>
          <li>站点名称：{siteConfig.site.name}</li>
          <li>站点地址：{siteConfig.site.url}/</li>
          <li>头像地址：{siteConfig.site.url}{siteConfig.assets.icon}</li>
          <li>站点简介：{siteConfig.site.slogan}</li>
        </ul>
      </div>
    </article>
  </section>
</BaseLayout>