---
// /en/ 首页：与 zh 版结构逐区对齐（名片区/文章列表/最新影像/热力图/项目墙）
import { Image } from 'astro:assets';
import { getCollection } from 'astro:content';
import BaseLayout from '../../layouts/BaseLayout.astro';
import IdCard from '../../components/IdCard.astro';
import PostList from '../../components/PostList.astro';
import ProjectWall from '../../components/geek/ProjectWall.astro';
import Heatmap from '../../components/geek/Heatmap.astro';
import { t } from '../../i18n/ui';
import { homeConfig, homeTagline, pageTypography, renderMarkdown, renderRich } from '../../lib/site-content';
import SocialLinks from '../../components/SocialLinks.astro';

// 首页可配项（后台主页设置）：副标题/影像张数/区块开关/每轨条数，字段级回落
const cfg = await homeConfig('en');
const subtitleHtml = cfg.subtitle ? await renderMarkdown(cfg.subtitle) : '';
const posts = (await getCollection('posts', ({ data }) => !data.draft && !data.tags.includes('hidden'))).sort(
  (a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime(),
);
// 列表标题吃 postsEn 译题（缺译回退 zh，与 /en/archives 同策略）
const enTitle = Object.fromEntries(
  (await getCollection('postsEn')).map((e) => [e.id, e.data.title]),
);
const photos = (await getCollection('photos')).slice(0, Math.max(1, cfg.latestPhotos));
// 身份语与 zh 版同源（content/site/home.yaml 的 en 字段），缺值回落默认
const tagline = await homeTagline('en');
const taglineHtml = await renderRich(tagline, { inline: true });
const typo = await pageTypography('siteHome', 'home');
---

<BaseLayout title="wait4x" description="wait4x's blog: reading · code · photography">
  <div class={typo.className || undefined} style={typo.style || undefined}>
  <IdCard>
    <p class="tagline rich" set:html={taglineHtml} />
    {subtitleHtml && <div class="subtitle" set:html={subtitleHtml} />}
    <SocialLinks />
    </IdCard>

  {cfg.sections.tracks && <PostList {posts} locale="en" titleOverrides={enTitle} perTrack={cfg.perTrackLimit} />}

  {cfg.sections.photos && cfg.latestPhotos > 0 && (
  <section class="latest" aria-label={t('latest_photos', 'en')}>
    <div class="latest-head">
      <span class="lab">{t('latest_photos', 'en')}</span>
      <a class="tap more" href="/en/gallery/">{t('enter_gallery', 'en')}</a>
    </div>
    <div class="thumbs">
      {photos.map((photo) => (
        <a class="thumb" href="/en/gallery/" aria-label={`Gallery: ${photo.data.title}`}>
          <Image
            src={photo.data.image}
            alt={photo.data.alt ?? photo.data.title}
            widths={[180, 360]}
            sizes="(min-width: 820px) 20vw, 42vw"
          />
        </a>
      ))}
    </div>
  </section>
  )}

  {cfg.sections.heatmap && <Heatmap
    labels={{
      title: t('heatmap_title', 'en'),
      summary: t('heatmap_summary', 'en'),
      less: t('heatmap_less', 'en'),
      more: t('heatmap_more', 'en'),
      note: t('heatmap_note', 'en'),
    }}
  />}
  {cfg.sections.projects && <ProjectWall locale="en" />}
  </div>
</BaseLayout>

<style>
  .subtitle {
    font-size: 13.5px;
    color: var(--ink-4);
    margin-top: 2px;
    letter-spacing: 0.01em;
  }
  .subtitle :global(p) { margin: 0; }
  .subtitle :global(a) { color: var(--accent); }
  .tagline {
    font-size: 14px;
    color: var(--ink-3);
    margin-top: 4px;
    letter-spacing: 0.01em;
  }
  .socials {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
  }
  .social {
    color: var(--ink-3);
    border-radius: 8px;
    transition: color var(--dur) var(--ease);
  }
  .social:hover { color: var(--accent); }

  .latest { margin-top: var(--space-6); }
  .latest-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
  }
  .lab {
    font-size: 12.5px;
    color: var(--ink-4);
    letter-spacing: 0.08em;
  }
  .more {
    font-size: 13px;
    color: var(--accent);
    padding-inline: var(--space-2);
    transition: color var(--dur) var(--ease);
  }
  .more:hover { color: var(--ink-1); }
  .thumbs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
    margin-top: var(--space-3);
  }
  .thumb {
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
  }
  .thumb :global(img) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur) var(--ease);
  }
  .thumb:hover :global(img) { transform: scale(1.03); }
  @media (min-width: 820px) {
    .thumbs { grid-template-columns: repeat(4, 1fr); }
  }
</style>