{{ include 'partials/head' }}

<main class="flex-1">

    {{~ # ============ Hero ============ ~}}
    {{ if content.hero_title || content.hero_subtitle || content.hero_eyebrow }}
    <section class="nx-hero-soft border-b border-[var(--color-border-soft)]">
        <div class="nx-container py-12 md:py-14">
            {{ if content.hero_eyebrow }}
            <div class="nx-chip mb-4">{{ content.hero_eyebrow }}</div>
            {{ end }}
            {{ if content.hero_title }}
            <h1 class="text-[36px] md:text-[52px] font-bold tracking-tight leading-[1.15]" style="color: var(--color-ink);">
                {{ content.hero_title }}
            </h1>
            {{ end }}
            {{ if content.hero_subtitle }}
            <p class="mt-5 text-[16px] md:text-[18px] leading-relaxed max-w-2xl" style="color: var(--color-muted);">
                {{ content.hero_subtitle }}
            </p>
            {{ end }}
            {{ if content.hero_cta_label && content.hero_cta_url }}
            <div class="mt-8">
                <a href="{{ content.hero_cta_url }}" class="nx-btn-primary">
                    {{ content.hero_cta_label }}
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                </a>
            </div>
            {{ end }}
        </div>
    </section>
    {{ end }}

    {{~ # ============ 精选文章：三张等大卡 ============ ~}}
    {{ if content.recommended_enabled && recommended_articles.size > 0 }}
    <section class="py-14 md:py-16">
        <div class="nx-container">
            <div class="flex items-end justify-between mb-8">
                <h2 class="text-[26px] md:text-[30px] font-bold tracking-tight" style="color: var(--color-ink);">
                    {{ if content.recommended_title }}{{ content.recommended_title }}{{ else }}近期值得一读{{ end }}
                </h2>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {{ for article in recommended_articles limit:3 }}
                {{ card_variant = 'featured' }}
                {{ include 'partials/article_card' }}
                {{ end }}
            </div>
        </div>
    </section>
    {{ end }}

    {{~ # ============ 最新 + 热门 双栏 ============ ~}}
    {{ if content.latest_enabled || content.hot_enabled }}
    <section id="latest" class="scroll-mt-24 pb-16 md:pb-20 {{ if !(content.recommended_enabled && recommended_articles.size > 0) }}pt-14 md:pt-16{{ end }}"
             {{ if content.latest_enabled }}x-data="nxLoadMoreList({ hasMore: {{ if has_more }}true{{ else }}false{{ end }}, apiUrl: '{{ site_base_url }}/api/articles', siteBaseUrl: '{{ site_base_url }}', listSelector: '#latest-list' })"{{ end }}>
        <div class="nx-container grid grid-cols-1 lg:grid-cols-12 gap-10">

            {{ if content.latest_enabled }}
            <div class="lg:col-span-8">
                <div class="flex items-center justify-between mb-6">
                    <h2 class="text-[22px] font-bold tracking-tight flex items-center gap-3" style="color: var(--color-ink);">
                        <span class="inline-block w-1 h-5 rounded-full nx-brand-gradient"></span>
                        {{ if content.latest_title }}{{ content.latest_title }}{{ else }}最新文章{{ end }}
                    </h2>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6" id="latest-list">
                    {{ for article in latest_articles }}
                    {{ card_variant = 'grid' }}
                    {{ include 'partials/article_card' }}
                    {{ end }}
                </div>

                {{ if latest_articles.size == 0 }}
                <div class="rounded-xl border border-dashed border-[var(--color-border)] p-12 text-center" style="background: var(--color-surface-alt);">
                    <p class="text-base font-medium" style="color: var(--color-ink);">内容持续更新中，敬请期待</p>
                    <p class="mt-1 text-sm" style="color: var(--color-muted);">第一篇文章发布后将自动展示在这里。</p>
                </div>
                {{ end }}

                <div class="mt-10 text-center" x-show="hasMore" x-cloak>
                    <button type="button" class="nx-btn-outline" @click="loadMore()" :disabled="loading" style="padding: .7rem 1.6rem;">
                        <span x-show="!loading">加载更多</span>
                        <span x-show="loading" x-cloak>加载中…</span>
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
                    </button>
                </div>
            </div>
            {{ end }}

            {{ if content.hot_enabled && hot_articles.size > 0 }}
            <aside class="lg:col-span-4">
                <div class="nx-card p-6 sticky top-24">
                    <div class="text-[15px] font-semibold mb-4 flex items-center gap-2" style="color: var(--color-ink);">
                        <span class="inline-block w-1 h-4 rounded-full nx-brand-gradient"></span>
                        {{ if content.hot_title }}{{ content.hot_title }}{{ else }}热门榜单{{ end }}
                    </div>
                    <ol class="space-y-1">
                        {{ for article in hot_articles }}
                        <li>
                            <a href="{{ site_base_url }}/a/{{ article.Id }}" class="group flex gap-3 -mx-2 px-2 py-2 rounded-lg transition-colors">
                                <span class="text-[22px] leading-none font-bold flex-shrink-0 w-6 {{ if for.index < 2 }}nx-brand-text{{ else }}text-[var(--color-muted-2)]{{ end }}" style="font-family: var(--font-mono, monospace);">{{ if (for.index | math.plus 1) < 10 }}0{{ end }}{{ for.index | math.plus 1 }}</span>
                                <div class="min-w-0">
                                    <div class="font-medium text-[15px] leading-snug line-clamp-2 text-[var(--color-ink)] group-hover:!text-[var(--color-primary)] transition-colors">{{ article.Title }}</div>
                                    <div class="mt-1 text-xs" style="color: var(--color-muted);">
                                        {{ if article.ColumnName }}{{ article.ColumnName }} · {{ end }}{{ if article.PublishedAt }}{{ article.PublishedAt | date.to_string '%Y-%m-%d' }}{{ else if article.CreatedAt }}{{ article.CreatedAt | date.to_string '%Y-%m-%d' }}{{ end }}
                                    </div>
                                </div>
                            </a>
                        </li>
                        {{ end }}
                    </ol>
                </div>
            </aside>
            {{ end }}
        </div>
    </section>
    {{ end }}

</main>

{{ include 'partials/footer' }}