{{template "header" .}}
<main id="main" class="relative min-h-screen bg-black text-white pb-16 overflow-hidden">
    <div class="absolute inset-0 z-0 pointer-events-none" aria-hidden="true">
        <div class="absolute inset-0 bg-black"></div>
        <div class="absolute inset-0 bg-gradient-to-br from-amber-600/10 via-transparent to-amber-900/5"></div>
        <div class="absolute top-0 right-0 w-[480px] h-[480px] bg-amber-600/12 rounded-full blur-[120px] -mr-48 -mt-48"></div>
        <div class="absolute bottom-0 left-0 w-[400px] h-[400px] bg-amber-900/10 rounded-full blur-[100px] -ml-40 -mb-40"></div>
    </div>

    {{$posts := douban_feed_hero host_user.ID}}
    <div class="relative z-10 vi-container">
        <header class="mb-8 md:mb-10">
            <h1 class="text-3xl md:text-4xl font-bold bg-gradient-to-b from-white to-gray-400 bg-clip-text text-transparent flex items-center gap-3">
                <span class="w-1.5 h-9 bg-amber-600 rounded-full shadow-[0_0_12px_rgba(201,162,39,0.45)]"></span>
                {{if .title}}{{.title}}{{else}}推荐{{end}}
            </h1>
            {{if .category.Description}}
            <p class="text-gray-400 mt-3 text-sm md:text-base max-w-3xl leading-relaxed">{{.category.Description}}</p>
            {{end}}
            {{if gt (len $posts) 0}}
            <p class="text-gray-500 text-sm mt-4">共 <span class="text-gray-300 font-semibold">{{len $posts}}</span> 部</p>
            {{end}}
        </header>

        {{if gt (len $posts) 0}}
        <div class="space-y-6 md:space-y-8">
            {{range $i, $h := $posts}}
            <article class="group">
                <a href="{{douban_feed_link host_user.ID $h.DoubanID $h.Title}}" class="block rounded-md md:rounded-md overflow-hidden border border-zinc-800/80 bg-zinc-900/40 hover:border-amber-600/40 transition-all duration-300 hover:shadow-2xl hover:shadow-amber-900/20">
                    <div class="relative w-full aspect-[3/4] sm:aspect-[16/9] lg:aspect-[12/5] overflow-hidden" data-bj-poster-wrap>
                        {{if $h.Poster}}
                        {{$proxy := douban_proxy_url $h.Poster}}
                        <img src="{{$proxy}}" alt="{{$h.Title}}" loading="{{if lt $i 2}}eager{{else}}lazy{{end}}" decoding="async" data-bj-poster data-bj-poster-hero class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-[1.02]">
                        {{else}}
                        <div class="w-full h-full bg-gradient-to-br from-gray-900 via-gray-800 to-black"></div>
                        {{end}}
                        <div class="absolute inset-0 bg-gradient-to-t from-black via-black/50 to-transparent opacity-90 sm:opacity-80"></div>
                        <div class="absolute inset-0 bg-gradient-to-r from-black/80 via-transparent to-transparent hidden sm:block"></div>
                        <div class="absolute bottom-0 left-0 right-0 p-4 sm:p-6 lg:p-8">
                            <div class="flex flex-wrap items-center gap-2 mb-2 text-xs sm:text-sm">
                                <span class="inline-flex items-center px-2 py-0.5 rounded-md bg-amber-600/90 text-white font-semibold">推荐</span>
                                {{if $h.Rate}}<span class="text-yellow-400 font-semibold">{{$h.Rate}}</span>{{end}}
                                {{if $h.Episode}}<span class="text-gray-400">{{$h.Episode}}</span>{{end}}
                            </div>
                            <h2 class="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold text-white mb-2 leading-tight line-clamp-2 [text-shadow:0_2px_12px_rgba(0,0,0,0.8)]">{{$h.Title}}</h2>
                            {{if $h.Subtitle}}
                            <p class="text-gray-300 text-sm sm:text-base max-w-2xl line-clamp-2 sm:line-clamp-3 leading-relaxed hidden sm:block">{{$h.Subtitle}}</p>
                            {{end}}
                            <div class="mt-4 flex items-center gap-3">
                                <span class="inline-flex items-center justify-center bg-amber-600 hover:bg-amber-500 text-white h-11 sm:h-12 px-6 sm:px-8 rounded-full font-bold text-sm sm:text-base shadow-lg shadow-amber-900/30 transition-colors">
                                    {{template "play_icon" (dict "class" "fill-white shrink-0 mr-2")}}
                                    立即播放
                                </span>
                            </div>
                        </div>
                    </div>
                </a>
            </article>
            {{end}}
        </div>

        {{else}}
        <div class="flex flex-col items-center justify-center py-24 text-center rounded-md border border-zinc-800/60 bg-zinc-900/30">
            <svg class="w-16 h-16 text-gray-700 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z"/>
            </svg>
            <p class="text-gray-400 text-lg font-medium">暂无封面推荐</p>
            <p class="text-gray-600 text-sm mt-2 max-w-md">请运行同步任务（<code class="text-gray-500">-hero-only</code>）或稍后再试。</p>
            <a href="{{the_permalink ``}}" class="mt-6 inline-flex items-center text-sm text-amber-400 hover:text-amber-300 transition-colors">返回首页</a>
        </div>
        {{end}}
    </div>
</main>
{{template "footer" .}}