<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pricing Plans — <?= e(APP_NAME) ?></title>
    <link rel="stylesheet" href="<?= APP_URL ?>/assets/css/landing.css">
    <link rel="stylesheet" href="<?= APP_URL ?>/assets/css/app.css">
</head>
<body style="background: var(--bg-surface);">
    <nav class="nav">
        <a href="<?= APP_URL ?>/" class="nav-brand">TellerPro</a>
        <ul class="nav-links">
            <li><a href="<?= APP_URL ?>/#features">Features</a></li>
            <li><a href="<?= APP_URL ?>/#pricing">Pricing</a></li>
        </ul>
        <div class="nav-actions" style="margin-left: auto;">
             <a href="<?= APP_URL ?>/login" class="btn-nav btn-nav-outline">Log in</a>
             <a href="<?= APP_URL ?>/register" class="btn-nav btn-nav-primary">Start Free Trial</a>
        </div>
    </nav>

    <main class="section section-center" style="min-height: 80vh; padding-top: 120px;">
        <span class="section-eyebrow">Scalable Options</span>
        <h2>Pricing built for your business size</h2>
        <p class="sub">Choose the plan that fits your current volume. You can upgrade or downgrade at any time.</p>

        <div class="pricing-grid mt-12">
            <?php foreach ($plans as $plan): 
                $features = json_decode($plan['features'], true);
            ?>
            <div class="pricing-card <?= $plan['slug'] === 'pro' ? 'popular' : '' ?>">
                <?php if ($plan['slug'] === 'pro'): ?><div class="plan-popular">MOST POPULAR</div><?php endif; ?>
                <div class="pricing-name"><?= e($plan['name']) ?></div>
                <div class="pricing-price">
                    <span class="pricing-amount"><?= setting('currency_symbol', 'GH₵') ?><?= number_format($plan['price_monthly']) ?></span>
                    <span class="pricing-period">/mo</span>
                </div>
                
                <ul class="pricing-features" style="text-align: left; margin: 2rem 0; list-style: none; padding: 0;">
                    <li class="pricing-feature"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px; margin-right:8px;"><polyline points="20 6 9 17 4 12"></polyline></svg> <?= $plan['max_products'] === -1 ? 'Unlimited' : $plan['max_products'] ?> Products</li>
                    <li class="pricing-feature"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px; margin-right:8px;"><polyline points="20 6 9 17 4 12"></polyline></svg> <?= $plan['max_users'] === -1 ? 'Unlimited' : $plan['max_users'] ?> Team Members</li>
                    <li class="pricing-feature"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px; margin-right:8px;"><polyline points="20 6 9 17 4 12"></polyline></svg> <?= $plan['max_locations'] === -1 ? 'Unlimited' : $plan['max_locations'] ?> Branch Locations</li>
                    
                    <li class="pricing-feature <?= !empty($features['batch_tracking']) ? '' : 'opacity-30' ?>"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px; margin-right:8px;"><polyline points="20 6 9 17 4 12"></polyline></svg> Batch & Expiry Management</li>
                    <li class="pricing-feature <?= !empty($features['reports_advanced']) ? '' : 'opacity-30' ?>"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px; margin-right:8px;"><polyline points="20 6 9 17 4 12"></polyline></svg> Advanced Business Intelligence</li>
                    <li class="pricing-feature <?= !empty($features['ai_analytics']) ? '' : 'opacity-30' ?>"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px; margin-right:8px;"><polyline points="20 6 9 17 4 12"></polyline></svg> AI Inventory Forecasting</li>
                </ul>
                
                <a href="<?= APP_URL ?>/register?plan=<?= $plan['slug'] ?>" class="btn-pricing <?= $plan['slug'] === 'pro' ? 'btn-pricing-primary' : 'btn-pricing-outline' ?>">
                    Select <?= $plan['name'] ?>
                </a>
            </div>
            <?php endforeach; ?>
        </div>
    </main>

    <footer style="margin-top: 100px; padding: 40px; border-top: 1px solid var(--border); text-align: center;">
        <div class="footer-copy">© <?= date('Y') ?> TellerPro. Secure Payments Powered by Stripe.</div>
    </footer>
</body>
</html>
