{% extends "base.html" %}
{% block title %}الاشتراكات{% endblock %}
{% block content %}
<div class="max-w-7xl mx-auto px-4 py-16">
    <div class="text-center mb-16">
        <h1 class="text-4xl md:text-5xl font-serif font-bold text-white mb-6">خطط الاستثمار</h1>
        <p class="text-slate-400 max-w-2xl mx-auto text-lg">اختر الخطة التي تناسب طموحاتك. يمكنك الترقية أو الإلغاء في أي وقت.</p>
    </div>

    <!-- Toggle Monthly/Yearly -->
    <div class="flex justify-center mb-12">
        <div class="bg-white/5 p-1 rounded-full flex items-center border border-white/10">
            <button id="btn-monthly" onclick="switchPlan('monthly')" class="px-6 py-2 rounded-full bg-gold-500 text-black font-bold text-sm shadow-lg transition">شهري</button>
            <button id="btn-yearly" onclick="switchPlan('yearly')" class="px-6 py-2 rounded-full text-slate-400 hover:text-white font-medium text-sm transition">سنوي (خصم 20%)</button>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
        {% for plan in plans %}
        {% if plan.name == 'free' %}
        <!-- Free Plan -->
        <div class="glass p-8 rounded-[2rem] border border-white/5 flex flex-col relative overflow-hidden group hover:border-white/20 transition duration-500">
            <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-slate-700 to-slate-500"></div>
            <h3 class="text-2xl font-serif font-bold text-white mb-2">Starter</h3>
            <div class="flex items-baseline mb-6">
                <span class="plan-price text-4xl font-bold text-white" data-monthly="{{ plan.price_monthly|int }}" data-yearly="0">${{ plan.price_monthly|int }}</span>
                <span class="plan-period text-slate-500 ml-2">/ شهر</span>
            </div>
            <p class="text-slate-400 text-sm mb-8 min-h-[40px]">للمستكشفين والبدايات الجديدة.</p>
            
            <div class="flex-grow space-y-4 mb-8">
                <div class="flex items-center gap-3 text-sm text-slate-300">
                    <span class="w-5 h-5 rounded-full bg-white/10 flex items-center justify-center text-xs text-white">✓</span>
                    {{ plan.reports_per_month }} تقرير شهرياً
                </div>
                <div class="flex items-center gap-3 text-sm text-slate-300">
                    <span class="w-5 h-5 rounded-full bg-white/10 flex items-center justify-center text-xs text-white">✓</span>
                    تحليل السوق الأساسي
                </div>
                <div class="flex items-center gap-3 text-sm text-slate-300">
                    <span class="w-5 h-5 rounded-full bg-white/10 flex items-center justify-center text-xs text-white">✓</span>
                    AI Advisor (محدود)
                </div>
            </div>
            
            <a href="{{ url_for('auth.register') }}" class="w-full block text-center py-4 rounded-xl border border-white/10 text-white font-bold hover:bg-white/5 transition">ابدأ مجاناً</a>
        </div>

        {% elif plan.name == 'pro' %}
        <!-- Pro Plan -->
        <div class="glass p-8 rounded-[2rem] border border-gold-500/30 flex flex-col relative overflow-hidden transform md:-translate-y-4 shadow-[0_0_40px_rgba(210,175,32,0.1)] group hover:shadow-[0_0_60px_rgba(210,175,32,0.2)] transition duration-500">
            <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-gold-400 to-gold-600"></div>
            <div class="absolute top-4 right-4 bg-gold-500/20 text-gold-400 text-xs font-bold px-3 py-1 rounded-full border border-gold-500/30">POPULAR</div>
            
            <h3 class="text-2xl font-serif font-bold text-white mb-2">Professional</h3>
            <div class="flex items-baseline mb-6">
                <span class="plan-price text-5xl font-bold text-white" data-monthly="{{ plan.price_monthly|int }}" data-yearly="{{ (plan.price_monthly|int * 12 * 8 // 10) }}">${{ plan.price_monthly|int }}</span>
                <span class="plan-period text-slate-500 ml-2">/ شهر</span>
            </div>
            <p class="text-slate-400 text-sm mb-8 min-h-[40px]">لرواد الأعمال الجادين والمستشارين.</p>
            
            <div class="flex-grow space-y-4 mb-8">
                <div class="flex items-center gap-3 text-sm text-white font-medium">
                    <span class="w-5 h-5 rounded-full bg-gold-500 flex items-center justify-center text-xs text-black">✓</span>
                    {{ plan.reports_per_month }} تقريراً شهرياً
                </div>
                <div class="flex items-center gap-3 text-sm text-white font-medium">
                    <span class="w-5 h-5 rounded-full bg-gold-500 flex items-center justify-center text-xs text-black">✓</span>
                    تصدير PDF & PPTX & Excel
                </div>
                <div class="flex items-center gap-3 text-sm text-white font-medium">
                    <span class="w-5 h-5 rounded-full bg-gold-500 flex items-center justify-center text-xs text-black">✓</span>
                    AI Advisor غير محدود
                </div>
                <div class="flex items-center gap-3 text-sm text-white font-medium">
                    <span class="w-5 h-5 rounded-full bg-gold-500 flex items-center justify-center text-xs text-black">✓</span>
                    Marketplace Access (البيع والشراء)
                </div>
                <div class="flex items-center gap-3 text-sm text-white font-medium">
                    <span class="w-5 h-5 rounded-full bg-gold-500 flex items-center justify-center text-xs text-black">✓</span>
                    5 فيديوهات تسويقية / شهر
                </div>
            </div>
            
            <form action="{{ url_for('billing.checkout', plan_id=plan.id) }}" method="POST">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <button type="submit" class="w-full block text-center py-4 rounded-xl bg-gradient-to-r from-gold-400 to-gold-600 text-black font-bold shadow-lg shadow-gold-500/20 hover:shadow-gold-500/40 hover:-translate-y-1 transition duration-300">اشترك الآن</button>
            </form>
        </div>

        {% elif plan.name == 'enterprise' %}
        <!-- Enterprise Plan -->
        <div class="glass p-8 rounded-[2rem] border border-white/5 flex flex-col relative overflow-hidden group hover:border-white/20 transition duration-500">
            <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-purple-500 to-blue-500"></div>
            <h3 class="text-2xl font-serif font-bold text-white mb-2">Empire</h3>
            <div class="flex items-baseline mb-6">
                <span class="plan-price text-4xl font-bold text-white" data-monthly="{{ plan.price_monthly|int }}" data-yearly="{{ (plan.price_monthly|int * 12 * 8 // 10) }}">${{ plan.price_monthly|int }}</span>
                <span class="plan-period text-slate-500 ml-2">/ شهر</span>
            </div>
            <p class="text-slate-400 text-sm mb-8 min-h-[40px]">للشركات، الحاضنات، والمؤسسات الكبرى.</p>
            
            <div class="flex-grow space-y-4 mb-8">
                <div class="flex items-center gap-3 text-sm text-slate-300">
                    <span class="w-5 h-5 rounded-full bg-white/10 flex items-center justify-center text-xs text-white">✓</span>
                    تقارير غير محدودة
                </div>
                <div class="flex items-center gap-3 text-sm text-slate-300">
                    <span class="w-5 h-5 rounded-full bg-white/10 flex items-center justify-center text-xs text-white">✓</span>
                    API Access & Webhooks
                </div>
                <div class="flex items-center gap-3 text-sm text-slate-300">
                    <span class="w-5 h-5 rounded-full bg-white/10 flex items-center justify-center text-xs text-white">✓</span>
                    White-Label (علامتك التجارية)
                </div>
                <div class="flex items-center gap-3 text-sm text-slate-300">
                    <span class="w-5 h-5 rounded-full bg-white/10 flex items-center justify-center text-xs text-white">✓</span>
                    مدير حساب خاص
                </div>
            </div>
            
            <a href="mailto:sales@jadwaai.com" class="w-full block text-center py-4 rounded-xl border border-white/10 text-white font-bold hover:bg-white/5 transition">تواصل للمؤسسات</a>
        </div>
        {% endif %}
        {% endfor %}
    </div>
    
    <!-- Trust Badges -->
    <div class="mt-20 text-center opacity-50 grayscale hover:grayscale-0 transition duration-500">
        <p class="text-xs font-mono text-slate-500 mb-6 uppercase tracking-widest">Trusted by 500+ Founders & Investors</p>
        <div class="flex justify-center gap-12 text-2xl text-slate-400">
            <span>Stripe</span>
            <span>VISA</span>
            <span>Mastercard</span>
            <span>PayPal</span>
        </div>
    </div>
</div>

<script>
function switchPlan(type) {
    const btnMonthly = document.getElementById('btn-monthly');
    const btnYearly = document.getElementById('btn-yearly');
    const prices = document.querySelectorAll('.plan-price');
    const periods = document.querySelectorAll('.plan-period');

    if (type === 'yearly') {
        btnYearly.className = 'px-6 py-2 rounded-full bg-gold-500 text-black font-bold text-sm shadow-lg transition';
        btnMonthly.className = 'px-6 py-2 rounded-full text-slate-400 hover:text-white font-medium text-sm transition';
    } else {
        btnMonthly.className = 'px-6 py-2 rounded-full bg-gold-500 text-black font-bold text-sm shadow-lg transition';
        btnYearly.className = 'px-6 py-2 rounded-full text-slate-400 hover:text-white font-medium text-sm transition';
    }

    prices.forEach(function(el) {
        const monthly = el.getAttribute('data-monthly');
        const yearly = el.getAttribute('data-yearly');
        if (type === 'yearly') {
            el.textContent = '$' + yearly;
        } else {
            el.textContent = '$' + monthly;
        }
    });

    periods.forEach(function(el) {
        el.textContent = type === 'yearly' ? '/ سنة' : '/ شهر';
    });
}
</script>
{% endblock %}