<?php
// Initialize session safely
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}

require_once __DIR__ . '/../config/config.php';

// Check auth state
$is_logged_in = isset($_SESSION['user_id']);
$cta_link = $is_logged_in ? 'user/billing.php' : 'login-register.php';
$cta_text = $is_logged_in ? 'Manage Subscription' : 'Unlock VIP Access';

// Fetch active subscription plans
$active_plans = [];
try {
    $stmt = $pdo->query("SELECT * FROM subscription_plans WHERE status = 'active' ORDER BY price ASC");
    $active_plans = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    $active_plans = [];
}

// Fetch exchange rate for NGN display
$rate_stmt = $pdo->query("SELECT key_value FROM payment_settings WHERE key_name = 'usd_ngn_rate'");
$rate = $rate_stmt->fetchColumn() ?: 1500.00;

$use_fallback = empty($active_plans);

require_once __DIR__ . '/includes/header.php';
?>

<!-- Neural Background -->
<div class="fixed inset-0 z-0 pointer-events-none opacity-20 bg-cover bg-center bg-no-repeat" style="background-image: url('https://images.unsplash.com/photo-1579952363873-27f3bade9f55?q=80&w=2000&auto=format&fit=crop');"></div>
<div class="fixed inset-0 z-0 bg-gradient-to-t from-[#020617] via-[#020617]/85 to-transparent pointer-events-none"></div>
<canvas id="neuralCanvas" class="fixed inset-0 w-full h-full pointer-events-none z-0 opacity-40"></canvas>

<main class="relative z-10 flex-1 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-8 pb-20">
    
    <!-- Header -->
    <div class="text-center max-w-3xl mx-auto mb-16 md:mb-20">
        <div class="inline-flex items-center space-x-2 bg-emerald-500/10 border border-emerald-500/20 px-3 py-1 rounded-full text-[10px] font-bold tracking-widest uppercase text-emerald-400 mb-4">
            <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
            <span>Premium Access</span>
        </div>
        <h1 class="text-4xl md:text-5xl lg:text-6xl font-black text-white tracking-tight leading-tight mb-6">
            Unlock the <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-cyan-400">VIP Matrix</span>
        </h1>
        <p class="text-sm md:text-base text-slate-400 leading-relaxed font-medium max-w-2xl mx-auto">
            Choose your preferred payment method. Pay with Naira via Paystack or USD via Crypto.
        </p>
    </div>

    <!-- Pricing Cards -->
    <?php if ($use_fallback): ?>
        <div class="bg-slate-900/60 border border-slate-800 rounded-2xl p-10 text-center max-w-2xl mx-auto mb-16">
            <span class="text-slate-500 text-xs font-bold uppercase tracking-widest block mb-2">No Active Plans</span>
            <p class="text-slate-400 text-sm">Please contact support or check back later for available subscription tiers.</p>
        </div>
    <?php else: ?>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8 max-w-6xl mx-auto mb-16 md:mb-24 items-stretch">
            <?php foreach ($active_plans as $index => $plan): 
                $is_popular = ($plan['is_popular'] == 1);
                $features = explode("\n", $plan['features']);
                $features = array_filter(array_map('trim', $features));
                $duration_label = $plan['duration_days'] . 'd';
                if ($plan['duration_days'] >= 365) $duration_label = 'year';
                elseif ($plan['duration_days'] >= 30) $duration_label = 'month';
                elseif ($plan['duration_days'] >= 7) $duration_label = 'week';
                
                $price_usd = $plan['price'];
                $price_ngn = $plan['price_ngn'] ?? ($price_usd * $rate);
            ?>
                <!-- Card -->
                <div class="bg-slate-900/60 backdrop-blur-xl border <?php echo $is_popular ? 'border-2 border-emerald-400/40 shadow-[0_0_50px_rgba(16,185,129,0.12)]' : 'border-slate-800/80 hover:border-emerald-500/30 hover:-translate-y-1'; ?> rounded-3xl p-6 md:p-8 lg:p-10 flex flex-col relative transition-all duration-300 h-full <?php echo $is_popular ? 'hover:shadow-[0_0_60px_rgba(16,185,129,0.2)]' : ''; ?> <?php echo $is_popular ? 'z-10' : ''; ?>">
                    
                    <?php if ($is_popular): ?>
                        <div class="absolute top-0 right-0 w-64 h-64 bg-emerald-500/10 rounded-full blur-[70px] pointer-events-none"></div>
                        <div class="absolute -top-3 left-1/2 transform -translate-x-1/2 flex justify-center">
                            <span class="bg-gradient-to-r from-emerald-400 to-cyan-500 text-[#050b14] text-[9px] font-black uppercase tracking-[0.2em] py-1.5 px-6 rounded-full shadow-lg shadow-emerald-500/20 whitespace-nowrap">
                                Most Popular 🔥
                            </span>
                        </div>
                    <?php endif; ?>
                    
                    <h3 class="text-xs font-black <?php echo $is_popular ? 'text-emerald-400' : 'text-slate-300'; ?> uppercase tracking-widest mb-2 <?php echo $is_popular ? 'mt-4' : ''; ?>">
                        <?php echo htmlspecialchars($plan['plan_name']); ?>
                    </h3>
                    
                    <!-- USD Price -->
                    <div class="mb-2">
                        <span class="text-4xl md:text-5xl font-black text-white">$<?php echo number_format($price_usd, 2); ?></span>
                        <span class="text-[10px] text-slate-400 font-bold ml-2">/ <?php echo $duration_label; ?></span>
                    </div>
                    <!-- NGN Price -->
                    <div class="mb-6 text-sm">
                        <span class="text-amber-400 font-bold">₦<?php echo number_format($price_ngn, 0); ?></span>
                        <span class="text-[9px] text-slate-500 ml-2 uppercase tracking-[0.1em]">(NGN)</span>
                    </div>
                    <p class="text-[9px] text-slate-500 mb-8 uppercase tracking-[0.1em] font-bold">
                        <?php 
                        if ($plan['duration_days'] >= 365) echo 'Billed annually';
                        elseif ($plan['duration_days'] >= 30) echo 'Billed monthly';
                        else echo 'Billed weekly';
                        ?>
                    </p>
                    
                    <ul class="space-y-4 mb-8 flex-1 text-xs font-bold text-slate-300">
                        <?php foreach ($features as $feature): ?>
                            <li class="flex items-center">
                                <span class="text-emerald-400 mr-3 text-lg">✓</span> 
                                <?php echo htmlspecialchars($feature); ?>
                            </li>
                        <?php endforeach; ?>
                    </ul>

                    <!-- Payment Buttons -->
                    <div class="space-y-2 mt-auto">
                        <a href="<?php echo $is_logged_in ? 'user/gateways/paystack-checkout.php?plan=' . $plan['id'] : 'login-register.php'; ?>" 
                           class="w-full flex items-center justify-center gap-2 bg-gradient-to-r from-emerald-500 to-teal-500 hover:opacity-90 text-white font-black py-3 rounded-xl text-[10px] uppercase tracking-[0.15em] transition shadow-lg shadow-emerald-500/20">
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13v4.5l3.5 2.5-1.5 2.5-5-3.5V7h3z"/></svg>
                            Pay with Naira (₦)
                        </a>
                        <a href="<?php echo $is_logged_in ? 'user/gateways/crypto-checkout.php?plan=' . $plan['id'] : 'login-register.php'; ?>" 
                           class="w-full flex items-center justify-center gap-2 bg-slate-800 hover:bg-slate-700 border border-slate-700 text-white font-black py-3 rounded-xl text-[10px] uppercase tracking-[0.15em] transition">
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13v4.5l3.5 2.5-1.5 2.5-5-3.5V7h3z"/></svg>
                            Pay with Crypto (USD)
                        </a>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>

    <!-- Comparison Table -->
    <div class="max-w-5xl mx-auto mt-8 pb-8">
        <div class="bg-slate-900/60 backdrop-blur-xl border border-slate-800 rounded-3xl shadow-2xl overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-left border-collapse min-w-[600px]">
                    <thead>
                        <tr class="border-b border-slate-800/60 bg-slate-950/80">
                            <th class="py-5 px-6 md:px-8 text-[10px] font-black text-slate-500 uppercase tracking-[0.15em] w-1/2 align-middle">
                                Platform Feature
                            </th>
                            <th class="py-5 px-6 md:px-8 text-[10px] font-black text-slate-400 uppercase tracking-[0.15em] text-center w-1/4 align-middle">
                                Free Basic
                            </th>
                            <th class="py-5 px-6 md:px-8 text-center w-1/4 align-middle">
                                <span class="text-[10px] font-black text-[#050b14] uppercase tracking-[0.15em] bg-gradient-to-r from-emerald-400 to-cyan-400 px-5 py-2 rounded-full shadow-md inline-block">
                                    VIP Matrix
                                </span>
                            </th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-800/60">
                        <tr class="hover:bg-slate-800/20 transition duration-300">
                            <td class="py-5 px-6 md:px-8 align-middle">
                                <span class="text-sm font-bold text-white block">Daily Standard Predictions</span>
                            </td>
                            <td class="py-5 px-6 md:px-8 text-center text-emerald-400 text-xl font-black align-middle">✓</td>
                            <td class="py-5 px-6 md:px-8 text-center text-emerald-400 text-xl font-black align-middle">✓</td>
                        </tr>
                        <tr class="hover:bg-slate-800/20 transition duration-300">
                            <td class="py-5 px-6 md:px-8 align-middle">
                                <span class="text-sm font-bold text-white block">Basic Match Stats</span>
                            </td>
                            <td class="py-5 px-6 md:px-8 text-center text-emerald-400 text-xl font-black align-middle">✓</td>
                            <td class="py-5 px-6 md:px-8 text-center text-emerald-400 text-xl font-black align-middle">✓</td>
                        </tr>
                        <tr class="hover:bg-slate-800/20 transition duration-300">
                            <td class="py-5 px-6 md:px-8 align-middle">
                                <span class="text-sm font-bold text-white block mb-1">System Bankers &amp; Slip of the Day</span>
                                <span class="text-[10px] text-slate-500 block">High-confidence algorithm picks.</span>
                            </td>
                            <td class="py-5 px-6 md:px-8 text-center text-amber-400 text-lg align-middle">🔒</td>
                            <td class="py-5 px-6 md:px-8 text-center text-emerald-400 text-xl font-black align-middle">✓</td>
                        </tr>
                        <tr class="hover:bg-slate-800/20 transition duration-300">
                            <td class="py-5 px-6 md:px-8 align-middle">
                                <span class="text-sm font-bold text-white block mb-1">Generative AI Bet Builder</span>
                                <span class="text-[10px] text-slate-500 block">Custom multi-bet assembly.</span>
                            </td>
                            <td class="py-5 px-6 md:px-8 text-center text-amber-400 text-lg align-middle">🔒</td>
                            <td class="py-5 px-6 md:px-8 text-center text-emerald-400 text-xl font-black align-middle">✓</td>
                        </tr>
                        <tr class="hover:bg-slate-800/20 transition duration-300">
                            <td class="py-5 px-6 md:px-8 align-middle">
                                <span class="text-sm font-bold text-white block mb-1">Poisson Distribution Metrics</span>
                                <span class="text-[10px] text-slate-500 block">Deep math modeling and Expected Goals (xG).</span>
                            </td>
                            <td class="py-5 px-6 md:px-8 text-center text-amber-400 text-lg align-middle">🔒</td>
                            <td class="py-5 px-6 md:px-8 text-center text-emerald-400 text-xl font-black align-middle">✓</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Trust Badge -->
    <div class="text-center mt-12">
        <div class="flex items-center justify-center space-x-1">
            <span class="text-emerald-500 font-black text-lg">★</span>
            <span class="text-emerald-500 font-black text-lg">★</span>
            <span class="text-emerald-500 font-black text-lg">★</span>
            <span class="text-emerald-500 font-black text-lg">★</span>
            <span class="text-emerald-500 font-black text-lg">★</span>
            <span class="text-[10px] text-slate-400 font-bold ml-2">Trusted by 2,400+ users</span>
        </div>
        <p class="text-[9px] text-slate-500 mt-3 tracking-widest uppercase">14-day money-back guarantee • Cancel anytime</p>
    </div>

</main>

<?php require_once __DIR__ . '/includes/footer.php'; ?>

<script>
    // Neural Canvas Background (unchanged)
    const canvas = document.getElementById("neuralCanvas");
    if(canvas) {
        const ctx = canvas.getContext("2d");
        let width, height;
        let particles = [];
        let mouse = { x: null, y: null, radius: 150 };
        window.addEventListener('mousemove', function(e) {
            mouse.x = e.x;
            mouse.y = e.y;
        });

        function initCanvas() {
            width = canvas.width = window.innerWidth;
            height = canvas.height = window.innerHeight;
            particles = [];
            let particleCount = (width * height) / 12000;
            for (let i = 0; i < particleCount; i++) {
                particles.push({
                    x: Math.random() * width,
                    y: Math.random() * height,
                    vx: (Math.random() - 0.5) * 1.5,
                    vy: (Math.random() - 0.5) * 1.5,
                    radius: Math.random() * 1.5 + 0.5
                });
            }
        }

        function animateCanvas() {
            ctx.clearRect(0, 0, width, height);
            for (let i = 0; i < particles.length; i++) {
                let p = particles[i];
                p.x += p.vx;
                p.y += p.vy;
                if (p.x < 0 || p.x > width) p.vx *= -1;
                if (p.y < 0 || p.y > height) p.vy *= -1;
                ctx.beginPath();
                ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
                ctx.fillStyle = "rgba(16, 185, 129, 0.25)";
                ctx.fill();
                for (let j = i + 1; j < particles.length; j++) {
                    let p2 = particles[j];
                    let dist = Math.sqrt(Math.pow(p.x - p2.x, 2) + Math.pow(p.y - p2.y, 2));
                    if (dist < 100) {
                        ctx.beginPath();
                        ctx.moveTo(p.x, p.y);
                        ctx.lineTo(p2.x, p2.y);
                        ctx.strokeStyle = `rgba(16, 185, 129, ${0.5 - (dist/200)})`;
                        ctx.lineWidth = 0.5;
                        ctx.stroke();
                    }
                }
                if (mouse.x && mouse.y) {
                    let mouseDist = Math.sqrt(Math.pow(p.x - mouse.x, 2) + Math.pow(p.y - mouse.y, 2));
                    if (mouseDist < mouse.radius) {
                        ctx.beginPath();
                        ctx.moveTo(p.x, p.y);
                        ctx.lineTo(mouse.x, mouse.y);
                        ctx.strokeStyle = `rgba(16, 185, 129, ${0.8 - mouseDist/mouse.radius})`;
                        ctx.lineWidth = 1;
                        ctx.stroke();
                    }
                }
            }
            requestAnimationFrame(animateCanvas);
        }

        window.addEventListener("resize", initCanvas);
        initCanvas();
        animateCanvas();
    }
</script>