{{ include 'partials/head' }}

{{ if content.announcement_enabled && content.announcement_text }}
<div class="bg-white border-b" style="border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);">
    <div class="max-w-6xl mx-auto px-4 py-2.5 flex items-center justify-between gap-4 text-sm">
        <div class="flex items-center gap-2 min-w-0">
            <span class="inline-flex items-center justify-center w-6 h-6 rounded-full flex-shrink-0"
                  style="background: color-mix(in srgb, var(--color-accent) 15%, white); color: color-mix(in srgb, var(--color-accent) 90%, black);">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
            </span>
            <span class="truncate" style="color: var(--color-ink);">{{ content.announcement_text }}</span>
        </div>
        {{ if content.announcement_url }}
        <a href="{{ content.announcement_url }}" class="underline underline-offset-2 hover:no-underline flex-shrink-0 font-medium whitespace-nowrap" style="color: color-mix(in srgb, var(--color-accent) 90%, black);">查看详情 →</a>
        {{ end }}
    </div>
</div>
{{ end }}

<main class="flex-1 max-w-6xl mx-auto px-4 py-10 w-full">

    {{~ # ============ Hero：左对齐 + 进度条式装饰线 + 3 张统计卡 ============ ~}}
    {{ if content.hero_title || content.hero_subtitle }}
    <section class="mb-14">
        {{ if content.hero_eyebrow }}
        <div class="mb-4 inline-flex items-center gap-2 text-xs font-medium tracking-widest uppercase" style="color: var(--color-primary);">
            <span class="w-8 h-[2px]" style="background: var(--color-primary);"></span>
            {{ content.hero_eyebrow }}
        </div>
        {{ end }}
        {{ if content.hero_title }}
        <h1 class="text-4xl md:text-5xl font-bold leading-tight" style="color: var(--color-ink);">{{ content.hero_title }}</h1>
        {{ end }}
        {{ if content.hero_subtitle }}
        <p class="mt-5 text-lg max-w-2xl leading-relaxed text-gray-600">{{ content.hero_subtitle }}</p>
        {{ end }}
        {{ if content.hero_cta_label && content.hero_cta_url }}
        <div class="mt-7 flex items-center gap-3">
            <a href="{{ content.hero_cta_url }}" class="campus-btn-primary">
                {{ content.hero_cta_label }}
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
            </a>
        </div>
        {{ end }}
        {{ if vars.stat_1_value || vars.stat_2_value || vars.stat_3_value }}
        <div class="mt-10 grid grid-cols-3 gap-3 md:gap-5 max-w-3xl">
            {{ if vars.stat_1_value }}
            <div class="campus-stat">
                <div class="text-xs text-gray-500">{{ vars.stat_1_label }}</div>
                <div class="mt-1 text-2xl font-bold" style="color: var(--color-primary);">{{ vars.stat_1_value }}</div>
            </div>
            {{ end }}
            {{ if vars.stat_2_value }}
            <div class="campus-stat">
                <div class="text-xs text-gray-500">{{ vars.stat_2_label }}</div>
                <div class="mt-1 text-2xl font-bold" style="color: var(--color-secondary);">{{ vars.stat_2_value }}</div>
            </div>
            {{ end }}
            {{ if vars.stat_3_value }}
            <div class="campus-stat">
                <div class="text-xs text-gray-500">{{ vars.stat_3_label }}</div>
                <div class="mt-1 text-2xl font-bold" style="color: color-mix(in srgb, var(--color-accent) 90%, black);">{{ vars.stat_3_value }}</div>
            </div>
            {{ end }}
        </div>
        {{ end }}
    </section>
    {{ end }}

    {{~ # ============ 精选课程：3 列 ============ ~}}
    {{ if content.recommended_enabled && recommended_articles.size > 0 }}
    <section class="mb-16">
        {{ if content.recommended_title }}
        <h2 class="campus-section-title text-2xl font-bold" style="color: var(--color-ink);">{{ content.recommended_title }}</h2>
        {{ end }}
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            {{ for article in recommended_articles limit:3 }}
            <div class="campus-card flex flex-col">
                <div class="campus-card-top"></div>
                {{ if article.CoverImageUrl }}
                <a href="{{ site_base_url }}/a/{{ article.Id }}" class="block overflow-hidden">
                    <img src="{{ abs_url (article.CoverThumbnailUrl ?? article.CoverImageUrl) }}" alt="{{ article.Title }}" class="w-full h-48 object-cover">
                </a>
                {{ end }}
                <div class="p-6 flex flex-col flex-1">
                    <div class="flex items-center gap-2 mb-3">
                        {{ if article.ColumnName }}
                        <span class="campus-chip">{{ article.ColumnName }}</span>
                        {{ end }}
                        <span class="campus-chip campus-chip-amber">精选</span>
                    </div>
                    <a href="{{ site_base_url }}/a/{{ article.Id }}" class="block text-lg font-bold hover:text-[var(--color-primary)] transition-colors line-clamp-2" style="color: var(--color-ink);">{{ article.Title }}</a>
                    {{ if article.Description }}
                    <a href="{{ site_base_url }}/a/{{ article.Id }}" class="block mt-2 line-clamp-2 text-sm text-gray-500 flex-1 no-underline">{{ article.Description }}</a>
                    {{ end }}
                    <div class="mt-4 pt-4 border-t border-gray-100 text-xs flex items-center justify-between text-gray-500">
                        <div class="flex items-center gap-2">
                            {{ if article.Author }}<span>{{ article.Author }}</span><span>·</span>{{ end }}
                            <time>{{ if article.PublishedAt }}{{ article.PublishedAt | date.to_string '%Y-%m-%d' }}{{ else }}{{ article.CreatedAt | date.to_string '%Y-%m-%d' }}{{ end }}</time>
                        </div>
                        <span class="font-medium" style="color: var(--color-primary);">阅读 →</span>
                    </div>
                </div>
            </div>
            {{ end }}
        </div>
    </section>
    {{ end }}

    <div class="flex flex-col lg:flex-row gap-8">
        <div class="flex-1 min-w-0">
            {{ if content.latest_enabled }}
            <section id="latest" class="scroll-mt-24" x-data="loadMoreList({ hasMore: {{ if has_more }}true{{ else }}false{{ end }}, apiUrl: '{{ site_base_url }}/api/articles', siteBaseUrl: '{{ site_base_url }}', listSelector: '#article-list' })">
                <h2 class="campus-section-title text-2xl font-bold" style="color: var(--color-ink);">{{ if content.latest_title }}{{ content.latest_title }}{{ else }}最新学习内容{{ end }}</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6" id="article-list">
                    {{ for article in latest_articles }}
                    {{ include 'partials/article_card' }}
                    {{ end }}
                </div>
                {{~ # 无文章时的占位（学院风） ~}}
                {{ if latest_articles.size == 0 }}
                <div class="campus-card p-10 text-center">
                    <div class="campus-card-top"></div>
                    <svg class="w-12 h-12 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="color: var(--color-primary); opacity: 0.7;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
                    <p class="text-base font-bold" style="color: var(--color-ink);">好课正在筹备中</p>
                    <p class="mt-2 text-sm text-gray-500">首篇学习内容发布后，将出现在这里。</p>
                </div>
                {{ end }}
                <div class="mt-10 text-center" x-show="hasMore" x-cloak>
                    <button type="button" @click="loadMore()" :disabled="loading" class="campus-btn-ghost">
                        <span x-show="!loading">{{ if content.latest_show_more_label }}{{ content.latest_show_more_label }}{{ else }}查看更多{{ end }}</span>
                        <span x-show="loading" x-cloak>加载中…</span>
                    </button>
                </div>
            </section>
            {{ end }}
        </div>

        <aside class="lg:w-80 space-y-6">
            {{ if content.hot_enabled && hot_articles.size > 0 }}
            <div class="campus-card p-6">
                <div class="flex items-center gap-2 mb-4">
                    <span class="inline-flex items-center justify-center w-7 h-7 rounded" style="background: color-mix(in srgb, var(--color-accent) 15%, white); color: color-mix(in srgb, var(--color-accent) 90%, black);">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.24 17 6c3.665 3.066 4.657 8.556 0.657 12.657z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z"/></svg>
                    </span>
                    <h3 class="font-bold text-base" style="color: var(--color-ink);">{{ if content.hot_title }}{{ content.hot_title }}{{ else }}本周热读{{ end }}</h3>
                </div>
                <ul class="space-y-3.5">
                    {{ for article in hot_articles }}
                    <li class="flex items-start gap-3">
                        <span class="inline-flex items-center justify-center w-6 h-6 rounded text-xs font-bold flex-shrink-0 mt-0.5"
                              style="{{ if for.index == 0 }}background: var(--color-primary); color: white;{{ else if for.index == 1 }}background: var(--color-secondary); color: white;{{ else if for.index == 2 }}background: color-mix(in srgb, var(--color-accent) 90%, black); color: white;{{ else }}background: color-mix(in srgb, var(--color-primary) 8%, white); color: var(--color-primary);{{ end }}">{{ for.index | math.plus 1 }}</span>
                        <a href="{{ site_base_url }}/a/{{ article.Id }}" class="text-sm line-clamp-2 hover:text-[var(--color-primary)] transition-colors" style="color: var(--color-ink);">{{ article.Title }}</a>
                    </li>
                    {{ end }}
                </ul>
            </div>
            {{ end }}

            {{~ # 学习入口装饰卡 ~}}
            {{ if vars.cta_title }}
            <div class="campus-card p-6" style="background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 6%, white), color-mix(in srgb, var(--color-secondary) 6%, white));">
                <div class="text-xs uppercase tracking-widest font-semibold mb-2" style="color: var(--color-primary);">START LEARNING</div>
                <h3 class="text-lg font-bold mb-2" style="color: var(--color-ink);">{{ vars.cta_title }}</h3>
                {{ if vars.cta_subtitle }}
                <p class="text-sm text-gray-600 mb-4">{{ vars.cta_subtitle }}</p>
                {{ end }}
                {{ if vars.cta_btn_text && vars.cta_btn_url }}
                <a href="{{ vars.cta_btn_url }}" class="campus-btn-ghost" style="padding: 8px 16px; font-size: 13px;">{{ vars.cta_btn_text }} →</a>
                {{ end }}
            </div>
            {{ end }}
        </aside>
    </div>
</main>

{{ include 'partials/footer' }}