{% extends "base.html" %}

{% block title %}{{ site.name }} - ZJPB 焦提示词{% endblock %}
{% block description %}{{ site.short_desc or site.description[:150] }}{% endblock %}
{% block keywords %}{{ site.name }},{% for tag in site.tags %}{{ tag.name }},{% endfor %}ZJPB,焦提示词,AI工具{% endblock %}

{% block content %}
<main class="flex-grow w-full max-w-[1280px] mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- Back Button -->
    <div class="mb-8">
        <a href="{{ url_for('index') }}" class="group flex items-center gap-2 text-gray-400 hover:text-primary transition-colors text-sm font-bold">
            <span class="material-symbols-outlined text-[20px] group-hover:-translate-x-1 transition-transform">arrow_back</span>
            <span>返回首页</span>
        </a>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12">
        <!-- Left Column: Main Content -->
        <div class="lg:col-span-8 flex flex-col gap-8">
            <!-- Header Section -->
            <div class="flex flex-col sm:flex-row gap-6 items-start">
                <!-- Logo Container -->
                <div class="relative shrink-0">
                    <div class="absolute -inset-1 bg-gradient-to-br from-primary via-purple-500 to-secondary rounded-2xl opacity-30 blur-md"></div>
                    {% if site.logo %}
                    <div class="relative size-[120px] rounded-xl bg-surface-dark flex items-center justify-center overflow-hidden border border-border-dark" style="background-image: url('{{ site.logo }}'); background-size: cover; background-position: center;"></div>
                    {% else %}
                    <div class="relative size-[120px] rounded-xl bg-gradient-to-br from-primary to-secondary flex items-center justify-center border border-border-dark">
                        <span class="text-5xl font-bold text-black">{{ site.name[0] }}</span>
                    </div>
                    {% endif %}
                </div>

                <!-- Title & Meta -->
                <div class="flex flex-col gap-3 flex-1">
                    <div>
                        <h1 class="text-4xl font-bold text-white tracking-tight font-display mb-1">{{ site.name }}</h1>
                        <a class="text-primary hover:text-primary-dark hover:underline text-base font-medium flex items-center gap-1" href="{{ site.url }}" target="_blank">
                            {{ site.url }}
                            <span class="material-symbols-outlined text-[16px]">open_in_new</span>
                        </a>
                    </div>

                    <!-- Tags -->
                    <div class="flex flex-wrap gap-2">
                        {% for tag in site.tags %}
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-surface-dark text-gray-300 border border-border-dark hover:border-primary/30 transition-colors cursor-default">
                            {{ tag.name }}
                        </span>
                        {% endfor %}
                    </div>

                    <!-- Stats Row -->
                    <div class="flex items-center gap-6 mt-1 text-gray-400 text-sm">
                        <div class="flex items-center gap-2">
                            <span class="material-symbols-outlined text-[18px]">visibility</span>
                            <span>{{ site.view_count }} 次浏览</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <span class="material-symbols-outlined text-[18px]">calendar_today</span>
                            <span>{{ site.created_at.strftime('%Y年%m月%d日') }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <hr class="border-border-dark/60"/>

            <!-- Main Content Body -->
            <div class="space-y-8">
                <!-- Overview -->
                {% if site.short_desc %}
                <section>
                    <h3 class="text-xl font-bold text-white mb-4 flex items-center gap-2">
                        <span class="material-symbols-outlined text-primary">info</span>
                        产品简介
                    </h3>
                    <p class="text-gray-400 leading-relaxed text-lg">
                        {{ site.short_desc }}
                    </p>
                </section>
                {% endif %}

                <!-- Detailed Description -->
                {% if site.description %}
                <section>
                    <h3 class="text-xl font-bold text-white mb-4 flex items-center gap-2">
                        <span class="material-symbols-outlined text-primary">article</span>
                        详细介绍
                    </h3>
                    <div class="text-gray-400 space-y-4 leading-relaxed whitespace-pre-wrap">
                        {{ site.description|safe }}
                    </div>
                </section>
                {% endif %}

                <!-- Features -->
                {% if site.features %}
                <section>
                    <h3 class="text-xl font-bold text-white mb-4 flex items-center gap-2">
                        <span class="material-symbols-outlined text-primary">star</span>
                        主要功能
                    </h3>
                    <div class="text-gray-400 space-y-4 leading-relaxed whitespace-pre-wrap">
                        {{ site.features|safe }}
                    </div>
                </section>
                {% endif %}
            </div>
        </div>

        <!-- Right Column: Sidebar -->
        <div class="lg:col-span-4 space-y-6">
            <!-- CTA Card -->
            <div class="rounded-2xl p-6 flex flex-col gap-4 shadow-xl shadow-black/20 sticky top-24 bg-surface-dark/60 backdrop-blur-xl border border-border-dark">
                <div class="flex items-center justify-between mb-2">
                    <span class="text-white font-bold text-lg">立即体验</span>
                </div>

                <a class="group relative flex items-center justify-center w-full overflow-hidden rounded-xl bg-primary hover:bg-primary/90 p-4 focus:outline-none transition-all hover:scale-[1.02] shadow-[0_0_20px_rgba(37,192,244,0.3)] hover:shadow-[0_0_30px_rgba(37,192,244,0.5)]" href="{{ site.url }}" target="_blank">
                    <span class="flex items-center gap-2 text-black font-bold text-base uppercase tracking-wide">
                        访问网站
                        <span class="material-symbols-outlined text-[20px] font-bold">arrow_outward</span>
                    </span>
                </a>

                <div class="pt-4 border-t border-border-dark">
                    <p class="text-gray-500 text-xs text-center">
                        {{ site.url }}
                    </p>
                </div>
            </div>
        </div>
    </div>
</main>
{% endblock %}