---
// 名片头像：后台「主页设置 → 头像」上传后在 content/site/assets/ 落图，
// 经 Astro 图片管线出 60px WebP；未配置则回退内置渐变占位（历史视觉不变）
import { Image } from 'astro:assets';
import { homeAvatar } from '../lib/site-content';

const src = await homeAvatar();
---

{src ? (
  <Image
    class="avatar"
    src={src}
    alt="wait4x 头像"
    width={60}
    height={60}
    format="webp"
    quality={82}
  />
) : (
  <svg
    class="avatar"
    viewBox="0 0 60 60"
    width="60"
    height="60"
    role="img"
    aria-label="头像占位"
  >
    <defs>
      <linearGradient id="avatar-grad" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0" stop-color="var(--mood-3)"></stop>
        <stop offset="1" stop-color="var(--accent)"></stop>
      </linearGradient>
    </defs>
    <rect width="60" height="60" rx="14" fill="url(#avatar-grad)"></rect>
    <circle cx="44" cy="15" r="10" fill="#fff" opacity=".25"></circle>
    <path d="M0 46 20 28 34 40 46 32 60 46 60 60 0 60Z" fill="#000" opacity=".14"></path>
    <text
      x="30"
      y="38"
      text-anchor="middle"
      font-size="16"
      font-weight="700"
      fill="#fff"
      opacity=".92"
      font-family="var(--font-mono)"
    >
      w4
    </text>
  </svg>
)}

<style>
  .avatar {
    flex: none;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    object-fit: cover;
  }
</style>