---
import BaseLayout from '../../layouts/BaseLayout.astro';
import IdCard from '../../components/IdCard.astro';
import { t } from '../../i18n/ui';
import type { Locale } from '../../lib/locale';
import { aboutIntroMarkdown, pageTypography, renderMarkdown } from '../../lib/site-content';
import { getAboutPage } from '../../lib/page-blocks';
import BlockRenderer from '../blocks/BlockRenderer.astro';

// /en/ 侧由 T4 薄页传 locale='en'；zh 路由无人传参，默认 zh 零回归
interface Props {
  locale?: Locale;
}
const { locale = 'zh' } = Astro.props;
// 三级回落（零回归）：blocks 驱动 → intro markdown → 内置默认文案
const { blocks, showIdCard } = await getAboutPage(locale);
const introHtml =
  blocks.length === 0 ? await renderMarkdown(await aboutIntroMarkdown(locale)) : '';
const typo = await pageTypography('siteAbout', 'about');
---

<BaseLayout title={`${t('about_title', locale)} · wait4x`}>
  <h1 class="page-title">{t('about_title', locale)}</h1>

  <div class={typo.className || undefined} style={typo.style || undefined}>
  {blocks.length > 0 ? (
    <>
      {blocks.map((block) => <BlockRenderer block={block} />)}
      {showIdCard && <IdCard />}
    </>
  ) : (
    <>
      <div class="intro rich" set:html={introHtml} />

      <IdCard />

      <section class="tracks" aria-label={t('about_tracks_title', locale)}>
        <h2 class="sec-title">{t('about_tracks_title', locale)}</h2>
        <ul>
          <li class="track-row">
            <span class="track-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                <path d="M2 4h6a4 4 0 0 1 4 4v13a3 3 0 0 0-3-3H2z"></path>
                <path d="M22 4h-6a4 4 0 0 0-4 4v13a3 3 0 0 1 3-3h7z"></path>
              </svg>
            </span>
            <div>
              <strong>{t('about_track_reading_name', locale)}</strong>
              <p>{t('about_track_reading_desc', locale)}</p>
            </div>
          </li>
          <li class="track-row">
            <span class="track-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                <path d="m4 5.5 6.5 6.5L4 18.5"></path>
                <path d="M12.5 18.5H20"></path>
              </svg>
            </span>
            <div>
              <strong>{t('about_track_tech_name', locale)}</strong>
              <p>{t('about_track_tech_desc', locale)}</p>
            </div>
          </li>
          <li class="track-row">
            <span class="track-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path>
                <circle cx="12" cy="13" r="4"></circle>
              </svg>
            </span>
            <div>
              <strong>{t('about_track_photo_name', locale)}</strong>
              <p>{t('about_track_photo_desc', locale)}</p>
            </div>
          </li>
        </ul>
      </section>

      <section class="build" aria-label={t('about_build_aria', locale)}>
        <h2 class="sec-title">{t('about_build_title', locale)}</h2>
        <p>{t('about_build_desc', locale)}</p>
      </section>
    </>
  )}
  </div>
</BaseLayout>

<style>
  .page-title {
    font-size: var(--text-h1);
    line-height: var(--leading-heading);
    color: var(--ink-1);
    margin-top: var(--space-5);
    text-wrap: balance;
  }
  .intro {
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--ink-2);
    max-width: var(--measure);
    margin-top: var(--space-3);
  }
  /* markdown 正文内部元素（多段/列表/链接）与站点排版对齐 */
  .intro :global(p) { margin-block: 0 var(--space-2); }
  .intro :global(ul) {
    margin: var(--space-1) 0 var(--space-2);
    padding-left: 1.2em;
    list-style: disc;
  }
  .intro :global(li) { margin-block: 0.2em; }
  .intro :global(a) { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
  .intro :global(strong) { color: var(--ink-1); font-weight: 600; }
  .sec-title {
    font-size: 14px;
    font-family: var(--font-mono);
    color: var(--ink-3);
    letter-spacing: 0.08em;
    margin: var(--space-5) 0 var(--space-3);
  }
  .tracks ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2);
  }
  .track-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: var(--space-3) var(--space-4);
  }
  .track-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--bg-soft);
    color: var(--ink-3);
  }
  .track-row strong {
    font-size: 15px;
    color: var(--ink-1);
  }
  .track-row p {
    font-size: 14px;
    color: var(--ink-3);
    margin-top: 2px;
  }
  .build p {
    font-size: 15px;
    color: var(--ink-2);
    max-width: var(--measure);
  }
</style>