{% extends "base.html" %}
{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 animate-fade-in">
    <div class="text-center mb-12">
        <p class="font-cinzel text-xs tracking-[0.3em] text-[var(--c-gold)] mb-3">PRICING</p>
        <h1 class="text-3xl sm:text-4xl font-bold text-[var(--c-paper)]" style="font-family:var(--font-title); letter-spacing:0.1em;">Choose Your Plan</h1>
        <p class="mt-4 text-[var(--c-paper)]/60">HD wallpapers, deep interpretations, unlimited divination</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">

        <!-- Free -->
        <div class="rounded-xl p-6 sm:p-8 flex flex-col transition-all duration-500"
             style="border:1px solid rgba(216,200,168,0.1); background:rgba(15,18,34,0.4);">
            <div class="flex-1">
                <h3 class="text-xl font-bold text-[var(--c-paper)]" style="font-family:var(--font-title);">Free</h3>
                <p class="text-sm text-[var(--c-dim)] mt-1">Basic access</p>
                <div class="my-6">
                    <span class="text-3xl font-bold text-[var(--c-paper)]">$0</span>
                    <span class="text-[var(--c-dim)] text-sm">/forever</span>
                </div>
                <ul class="space-y-3 text-sm">
                    <li class="flex items-center gap-2"><i class="fa-solid fa-check text-sm" style="color:var(--c-spirit);"></i>Daily almanac data</li>
                    <li class="flex items-center gap-2"><i class="fa-solid fa-check text-sm" style="color:var(--c-spirit);"></i>Daily fortune overview</li>
                    <li class="flex items-center gap-2"><i class="fa-solid fa-check text-sm" style="color:var(--c-spirit);"></i>1 wallpaper/day · 1080p</li>
                    <li class="flex items-center gap-2 text-[var(--c-dim)]"><i class="fa-solid fa-xmark text-sm"></i>1 divination/day only</li>
                    <li class="flex items-center gap-2 text-[var(--c-dim)]"><i class="fa-solid fa-xmark text-sm"></i>Includes ads</li>
                </ul>
            </div>
            <div class="mt-6 pt-6" style="border-top:1px solid rgba(216,200,168,0.08);">
                {% if user and user.plan == 'free' %}
                <div class="text-center text-sm text-[var(--c-dim)]">Current plan</div>
                {% elif not user %}
                <button onclick="openAuthModal()" class="w-full py-2.5 rounded text-sm transition" style="border:1px solid var(--c-ink-light); color:var(--c-paper)/70;">Start Free</button>
                {% else %}
                <div class="text-center text-sm text-[var(--c-dim)]">Current plan</div>
                {% endif %}
            </div>
        </div>

        <!-- Monthly Pro -->
        <div class="rounded-xl p-6 sm:p-8 flex flex-col transition-all duration-500 relative transform scale-105 z-10"
             style="border:1px solid rgba(200,176,130,0.3); background:rgba(15,18,34,0.6);">
            <div class="absolute top-0 right-0 text-xs font-bold px-3 py-1 rounded-bl-lg"
                 style="background:var(--c-cinnabar-bright); color:white;">Most Popular</div>
            <div class="flex-1">
                <h3 class="text-xl font-bold text-[var(--c-gold-light)]" style="font-family:var(--font-title);">Monthly Pro</h3>
                <p class="text-sm text-[var(--c-dim)] mt-1">Cancel anytime</p>
                <div class="my-6">
                    <span class="text-3xl font-bold text-[var(--c-gold-light)]">$4.99</span>
                    <span class="text-[var(--c-dim)] text-sm">/month</span>
                </div>
                <ul class="space-y-3 text-sm">
                    <li class="flex items-center gap-2"><i class="fa-solid fa-check text-sm" style="color:var(--c-gold);"></i>All Free features</li>
                    <li class="flex items-center gap-2"><i class="fa-solid fa-check text-sm" style="color:var(--c-gold);"></i>HD wallpaper · 1440p</li>
                    <li class="flex items-center gap-2"><i class="fa-solid fa-check text-sm" style="color:var(--c-gold);"></i>Unlimited I-Ching</li>
                    <li class="flex items-center gap-2"><i class="fa-solid fa-check text-sm" style="color:var(--c-gold);"></i>Deep interpretations</li>
                    <li class="flex items-center gap-2"><i class="fa-solid fa-check text-sm" style="color:var(--c-gold);"></i>Full month archive</li>
                    <li class="flex items-center gap-2"><i class="fa-solid fa-check text-sm" style="color:var(--c-gold);"></i>Ad-free</li>
                </ul>
            </div>
            <div class="mt-6 pt-6" style="border-top:1px solid rgba(200,176,130,0.1);">
                {% if user and user.plan == 'pro' %}
                <div class="text-center text-sm" style="color:var(--c-spirit);">✓ Subscribed</div>
                {% elif user %}
                <button onclick="paddleCheckout('{{ price_monthly }}')" class="w-full py-2.5 rounded text-sm font-bold text-white transition"
                        style="background:var(--c-cinnabar-bright);">Subscribe $4.99</button>
                {% else %}
                <button onclick="openAuthModal()" class="w-full py-2.5 rounded text-sm font-bold text-white transition"
                        style="background:var(--c-cinnabar-bright);">Login to Subscribe</button>
                {% endif %}
            </div>
        </div>

        <!-- Yearly Pro -->
        <div class="rounded-xl p-6 sm:p-8 flex flex-col transition-all duration-500{% if selected_plan == 'yearly' %} scale-105 z-10{% endif %}"
             style="border:1px solid rgba(216,200,168,0.1); background:rgba(15,18,34,0.4);{% if selected_plan == 'yearly' %} border-color:rgba(200,176,130,0.3); background:rgba(15,18,34,0.6);{% endif %}">
            {% if selected_plan == 'yearly' %}
            <div class="absolute top-0 right-0 text-xs font-bold px-3 py-1 rounded-bl-lg"
                 style="background:var(--c-gold); color:var(--c-ink);">Recommended</div>
            {% endif %}
            <div class="flex-1">
                <h3 class="text-xl font-bold text-[var(--c-paper)]" style="font-family:var(--font-title);">Yearly Pro</h3>
                <p class="text-sm text-[var(--c-dim)] mt-1">Best value · Save 33%</p>
                <div class="my-6">
                    <span class="text-3xl font-bold text-[var(--c-paper)]">$39.99</span>
                    <span class="text-[var(--c-dim)] text-sm">/year</span>
                </div>
                <ul class="space-y-3 text-sm">
                    <li class="flex items-center gap-2"><i class="fa-solid fa-check text-sm" style="color:var(--c-spirit);"></i>All Monthly Pro features</li>
                    <li class="flex items-center gap-2"><i class="fa-solid fa-check text-sm" style="color:var(--c-spirit);"></i>Yearly destiny report</li>
                    <li class="flex items-center gap-2"><i class="fa-solid fa-check text-sm" style="color:var(--c-spirit);"></i>Custom wallpaper themes</li>
                    <li class="flex items-center gap-2"><i class="fa-solid fa-check text-sm" style="color:var(--c-spirit);"></i>Priority support</li>
                </ul>
            </div>
            <div class="mt-6 pt-6" style="border-top:1px solid rgba(216,200,168,0.08);">
                {% if user and user.plan == 'pro' %}
                <div class="text-center text-sm" style="color:var(--c-spirit);">✓ Subscribed</div>
                {% elif user %}
                <button onclick="paddleCheckout('{{ price_yearly }}')" class="w-full py-2.5 rounded text-sm transition"
                        style="border:1px solid var(--c-gold); color:var(--c-gold-light);">Subscribe $39.99</button>
                {% else %}
                <button onclick="openAuthModal()" class="w-full py-2.5 rounded text-sm transition"
                        style="border:1px solid var(--c-ink-light); color:var(--c-paper)/70;">Login to Subscribe</button>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Annual Report -->
    <div class="mt-12 max-w-lg mx-auto rounded-xl p-6 text-center"
         style="border:1px solid rgba(216,200,168,0.1);">
        <p class="font-cinzel text-xs tracking-[0.3em] text-[var(--c-gold)] mb-2">ONE-TIME</p>
        <h4 class="text-lg font-bold text-[var(--c-paper)]">Annual Destiny Report</h4>
        <p class="text-sm text-[var(--c-dim)] mt-1">Deep yearly fortune & personality analysis</p>
        <div class="my-4">
            <span class="text-2xl font-bold text-[var(--c-gold-light)]">$19.99</span>
        </div>
        <button onclick="paddleCheckout('{{ price_report }}')" class="px-6 py-2 rounded text-sm transition"
                style="border:1px solid var(--c-gold); color:var(--c-gold-light);">Buy Now</button>
    </div>
</div>

<script src="https://cdn.paddle.com/paddle/paddle.js"></script>
<script>
    Paddle.Initialize({ token: '{{ client_token }}' });
    function paddleCheckout(priceId) {
        {% if user %}
        Paddle.Checkout.open({
            items: [{ priceId: priceId, quantity: 1 }],
            customer: { email: '{{ user.email }}' },
            customData: { user_id: '{{ user.id }}' },
            settings: { displayMode: 'overlay', theme: 'dark', allowedPaymentMethods: ['card', 'apple_pay', 'google_pay'] },
            onSuccess: function(data) { showToast('Subscribed!', 'success'); setTimeout(() => location.reload(), 1500); },
            onError: function(err) { showToast('Payment failed: ' + (err.message || 'Unknown error'), 'error'); }
        });
        {% else %}
        openAuthModal();
        {% endif %}
    }

    // Auto-trigger checkout for subscribe page
    {% if selected_plan == 'subscribe' and user %}
    document.addEventListener('DOMContentLoaded', function() {
        setTimeout(function() {
            paddleCheckout('{{ price_monthly }}');
        }, 500);
    });
    {% endif %}
</script>
{% endblock %}