{% extends "base.html" %}

{% block title %}购买积分 - AI 视界{% endblock %}

{% block content %}
<div class="w-full h-full overflow-y-auto p-8 lg:p-12 custom-scrollbar">
    <div class="max-w-4xl mx-auto space-y-12">
        <div class="flex items-center gap-4">
            <div class="w-12 h-12 bg-amber-500 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-amber-200">
                <i data-lucide="shopping-cart" class="w-7 h-7"></i>
            </div>
            <div>
                <h1 class="text-3xl font-black text-slate-900 tracking-tight">充值积分</h1>
                <p class="text-slate-400 text-sm">选择适合您的积分套餐，开启无限创作空间</p>
            </div>
        </div>

        <div class="relative group">
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6 filter blur-sm grayscale opacity-60 pointer-events-none select-none">
                <!-- 套餐 1 -->
                <div class="bg-white rounded-[2.5rem] border border-slate-100 p-8 shadow-xl group">
                    <div class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4">体验测试</div>
                    <div class="flex items-baseline gap-1 mb-6">
                        <span class="text-4xl font-black text-slate-900">50</span>
                        <span class="text-sm text-slate-400 font-bold">积分</span>
                    </div>
                    <div class="space-y-4 mb-8">
                        <div class="flex items-center gap-2 text-xs font-bold text-slate-600">
                            <i data-lucide="check-circle-2" class="w-4 h-4 text-emerald-500"></i>
                            <span>快速开启 AI 体验</span>
                        </div>
                    </div>
                    <button class="w-full py-4 rounded-2xl bg-slate-900 text-white font-black text-sm">
                        ¥ 5.00 购买
                    </button>
                </div>

                <!-- 套餐 2 -->
                <div class="bg-white rounded-[2.5rem] border border-slate-100 p-8 shadow-xl relative">
                    <div class="absolute -top-3 right-6 bg-indigo-600 text-white text-[8px] font-black px-3 py-1 rounded-full shadow-lg uppercase">推荐</div>
                    <div class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4">普通创作</div>
                    <div class="flex items-baseline gap-1 mb-6">
                        <span class="text-4xl font-black text-slate-900">200</span>
                        <span class="text-sm text-slate-400 font-bold">积分</span>
                    </div>
                    <div class="space-y-4 mb-8">
                        <div class="flex items-center gap-2 text-xs font-bold text-slate-600">
                            <i data-lucide="check-circle-2" class="w-4 h-4 text-emerald-500"></i>
                            <span>满足日常生成需求</span>
                        </div>
                    </div>
                    <button class="w-full py-4 rounded-2xl bg-indigo-600 text-white font-black text-sm">
                        ¥ 20.00 购买
                    </button>
                </div>

                <!-- 套餐 3 -->
                <div class="bg-indigo-900 rounded-[2.5rem] border border-indigo-800 p-8 shadow-2xl">
                    <div class="text-[10px] font-black text-indigo-300 uppercase tracking-widest mb-4">量大管饱</div>
                    <div class="flex items-baseline gap-1 mb-6">
                        <span class="text-4xl font-black text-white">1000</span>
                        <span class="text-sm text-indigo-300 font-bold">积分</span>
                    </div>
                    <div class="space-y-4 mb-8">
                        <div class="flex items-center gap-2 text-xs font-bold text-indigo-100">
                            <i data-lucide="check-circle-2" class="w-4 h-4 text-amber-400"></i>
                            <span>创作自由，无需等待</span>
                        </div>
                    </div>
                    <button class="w-full py-4 rounded-2xl bg-white text-indigo-900 font-black text-sm">
                        ¥ 100.00 购买
                    </button>
                </div>

                <!-- 套餐 4 -->
                <div class="bg-amber-500 rounded-[2.5rem] border border-amber-400 p-8 shadow-2xl">
                    <div class="text-[10px] font-black text-amber-900 uppercase tracking-widest mb-4">豪掷千金</div>
                    <div class="flex items-baseline gap-1 mb-6">
                        <span class="text-4xl font-black text-slate-900">5000</span>
                        <span class="text-sm text-amber-900 font-bold">积分</span>
                    </div>
                    <div class="space-y-4 mb-8">
                        <div class="flex items-center gap-2 text-xs font-bold text-amber-900">
                            <i data-lucide="check-circle-2" class="w-4 h-4 text-white"></i>
                            <span>至尊权限，顶级服务</span>
                        </div>
                    </div>
                    <button class="w-full py-4 rounded-2xl bg-slate-900 text-white font-black text-sm">
                        ¥ 500.00 购买
                    </button>
                </div>
            </div>

            <!-- 敬请期待蒙版 -->
            <div class="absolute inset-0 flex items-center justify-center z-20">
                <div class="bg-white/80 backdrop-blur-md border border-slate-200 px-10 py-6 rounded-[2rem] shadow-2xl flex flex-col items-center gap-4 animate-in zoom-in-95 duration-500">
                    <div class="w-16 h-16 bg-indigo-50 text-indigo-600 rounded-full flex items-center justify-center">
                        <i data-lucide="construction" class="w-8 h-8"></i>
                    </div>
                    <div class="text-center">
                        <h3 class="text-xl font-black text-slate-900">官方充值通道接入中</h3>
                        <p class="text-slate-400 text-xs font-bold mt-1 uppercase tracking-widest italic">Coming Soon · 敬请期待</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 支付提示 -->
        <div class="bg-slate-100/50 rounded-3xl p-6 text-center">
            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">
                <i data-lucide="shield-check" class="w-3 h-3 inline-block mr-1"></i>
                支付安全保障 · 充值实时到账
            </p>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // 暂时禁用所有购买行为
    function buyPoints() {
        showToast('充值通道正在接入，请联系管理员手动充值', 'info');
    }
</script>
{% endblock %}