<?php
/**
 * Pricing Page
 * LandSales Pro - Subscription pricing details
 */
define('APP_RUNNING', true);
require_once 'db_connect.php';
require_once 'includes/track.php';

// Get all active plans
$plans = db_fetch_all("SELECT * FROM plans WHERE is_active = 1 ORDER BY sort_order ASC");
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pricing - <?php echo APP_NAME; ?></title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assets/font-awesome/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background: #f8fafc;
            color: #1e293b;
            line-height: 1.6;
        }

        /* Navigation */
        .navbar {
            background: white;
            padding: 1rem 0;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 1.5rem;
            font-weight: 800;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-decoration: none;
        }

        .nav-links {
            display: flex;
            gap: 2rem;
            align-items: center;
        }

        .nav-links a {
            color: #64748b;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s;
        }

        .nav-links a:hover {
            color: #667eea;
        }

        .btn {
            padding: 0.75rem 1.5rem;
            border-radius: 8px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s;
            display: inline-block;
            border: none;
            cursor: pointer;
        }

        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 40px rgba(102, 126, 234, 0.4);
        }

        .btn-outline {
            border: 2px solid #667eea;
            color: #667eea;
            background: transparent;
        }

        .btn-outline:hover {
            background: #667eea;
            color: white;
        }

        /* Hero Section */
        .hero {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 4rem 2rem;
            text-align: center;
            color: white;
        }

        .hero h1 {
            font-size: 2.5rem;
            font-weight: 800;
            margin-bottom: 1rem;
        }

        .hero p {
            font-size: 1.25rem;
            opacity: 0.9;
            max-width: 600px;
            margin: 0 auto;
        }

        /* Billing Toggle */
        .billing-toggle {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1rem;
            margin: 3rem 0;
        }

        .billing-toggle span {
            font-weight: 500;
            color: #64748b;
        }

        .billing-toggle span.active {
            color: #667eea;
            font-weight: 600;
        }

        .toggle-switch {
            width: 60px;
            height: 32px;
            background: #e2e8f0;
            border-radius: 16px;
            position: relative;
            cursor: pointer;
            transition: background 0.3s;
        }

        .toggle-switch.active {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .toggle-switch::after {
            content: '';
            position: absolute;
            width: 26px;
            height: 26px;
            background: white;
            border-radius: 50%;
            top: 3px;
            left: 3px;
            transition: transform 0.3s;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        .toggle-switch.active::after {
            transform: translateX(28px);
        }

        .save-badge {
            background: #22c55e;
            color: white;
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
        }

        /* Pricing Cards */
        .pricing-section {
            max-width: 1200px;
            margin: 0 auto;
            padding: 3rem 2rem 5rem;
        }

        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }

        .pricing-card {
            background: white;
            border-radius: 16px;
            padding: 2.5rem;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            transition: all 0.3s;
            position: relative;
            border: 2px solid transparent;
        }

        .pricing-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 60px rgba(0,0,0,0.1);
        }

        .pricing-card.popular {
            border-color: #667eea;
        }

        .popular-badge {
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 0.5rem 1.5rem;
            border-radius: 20px;
            font-size: 0.875rem;
            font-weight: 600;
        }

        .plan-name {
            font-size: 1.25rem;
            font-weight: 700;
            color: #1e293b;
            margin-bottom: 0.5rem;
        }

        .plan-description {
            color: #64748b;
            font-size: 0.9rem;
            margin-bottom: 1.5rem;
        }

        .plan-price {
            margin-bottom: 1.5rem;
        }

        .price-amount {
            font-size: 2.5rem;
            font-weight: 800;
            color: #1e293b;
        }

        .price-currency {
            font-size: 1.25rem;
            font-weight: 600;
            color: #64748b;
        }

        .price-period {
            color: #94a3b8;
            font-size: 0.9rem;
        }

        .yearly-price {
            display: none;
        }

        .yearly-price.active {
            display: block;
        }

        .monthly-price.hidden {
            display: none;
        }

        .plan-features {
            list-style: none;
            margin-bottom: 2rem;
        }

        .plan-features li {
            padding: 0.75rem 0;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            color: #475569;
            border-bottom: 1px solid #f1f5f9;
        }

        .plan-features li:last-child {
            border-bottom: none;
        }

        .plan-features i {
            color: #22c55e;
            width: 20px;
        }

        .plan-features .limit {
            color: #94a3b8;
            font-size: 0.85rem;
            margin-left: auto;
        }

        .btn-plan {
            width: 100%;
            padding: 1rem;
            font-size: 1rem;
        }

        .pricing-card.popular .btn-plan {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        /* Billing Options Table */
        .billing-options {
            margin-top: 4rem;
        }

        .billing-options h2 {
            text-align: center;
            font-size: 1.75rem;
            font-weight: 700;
            margin-bottom: 2rem;
        }

        .billing-table {
            width: 100%;
            background: white;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        }

        .billing-table table {
            width: 100%;
            border-collapse: collapse;
        }

        .billing-table th,
        .billing-table td {
            padding: 1.25rem;
            text-align: left;
            border-bottom: 1px solid #f1f5f9;
        }

        .billing-table th {
            background: #f8fafc;
            font-weight: 600;
            color: #64748b;
            font-size: 0.875rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .billing-table td {
            font-size: 0.95rem;
        }

        .billing-table tr:last-child td {
            border-bottom: none;
        }

        .discount-badge {
            background: #dcfce7;
            color: #16a34a;
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
        }

        /* FAQ Section */
        .faq-section {
            max-width: 800px;
            margin: 0 auto;
            padding: 4rem 2rem;
        }

        .faq-section h2 {
            text-align: center;
            font-size: 1.75rem;
            font-weight: 700;
            margin-bottom: 2rem;
        }

        .faq-item {
            background: white;
            border-radius: 12px;
            margin-bottom: 1rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        .faq-question {
            padding: 1.25rem;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .faq-question:hover {
            color: #667eea;
        }

        .faq-answer {
            padding: 0 1.25rem 1.25rem;
            color: #64748b;
            display: none;
        }

        .faq-item.active .faq-answer {
            display: block;
        }

        .faq-item.active .faq-question i {
            transform: rotate(180deg);
        }

        /* CTA Section */
        .cta-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 4rem 2rem;
            text-align: center;
            color: white;
        }

        .cta-section h2 {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }

        .cta-section p {
            font-size: 1.1rem;
            opacity: 0.9;
            margin-bottom: 2rem;
        }

        .cta-section .btn {
            background: white;
            color: #667eea;
            font-size: 1rem;
            padding: 1rem 2rem;
        }

        .cta-section .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
        }

        /* Footer */
        footer {
            background: #1e293b;
            color: #94a3b8;
            padding: 3rem 2rem;
            text-align: center;
        }

        footer a {
            color: #94a3b8;
            text-decoration: none;
        }

        footer a:hover {
            color: white;
        }

        /* Mobile menu */
        .mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: #64748b;
        }

        @media (max-width: 768px) {
            .nav-links {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                background: white;
                flex-direction: column;
                padding: 1rem;
                box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            }

            .nav-links.active {
                display: flex;
            }

            .mobile-menu-btn {
                display: block;
            }

            .hero h1 {
                font-size: 1.75rem;
            }

            .pricing-grid {
                grid-template-columns: 1fr;
            }

            .billing-table {
                overflow-x: auto;
            }
        }
    </style>
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar">
        <div class="nav-container">
            <a href="home.php" class="logo">LandSales Pro</a>
            <button class="mobile-menu-btn" onclick="toggleMobileMenu()">
                <i class="fas fa-bars"></i>
            </button>
            <div class="nav-links" id="navLinks">
                <a href="home.php#features">Features</a>
                <a href="pricing.php">Pricing</a>
                <a href="login.php">Login</a>
                <a href="register.php" class="btn btn-primary">Start Free Trial</a>
            </div>
        </div>
    </nav>

    <!-- Hero -->
    <section class="hero">
        <h1>Simple, Transparent Pricing</h1>
        <p>Choose the perfect plan for your land business. Start with a 14-day free trial, no credit card required.</p>
    </section>

    <!-- Pricing Section -->
    <section class="pricing-section">
        <!-- Billing Toggle -->
        <div class="billing-toggle">
            <span id="monthlyLabel" class="active">Monthly</span>
            <div class="toggle-switch" id="billingToggle" onclick="toggleBilling()"></div>
            <span id="yearlyLabel">Yearly</span>
            <span class="save-badge">Save 17%</span>
        </div>

        <!-- Pricing Cards -->
        <div class="pricing-grid">
            <?php foreach ($plans as $index => $plan):
                $features = json_decode($plan['features'], true) ?? [];
                $isPopular = $plan['slug'] === 'professional';
            ?>
            <div class="pricing-card <?php echo $isPopular ? 'popular' : ''; ?>">
                <?php if ($isPopular): ?>
                <div class="popular-badge">Most Popular</div>
                <?php endif; ?>

                <div class="plan-name"><?php echo htmlspecialchars($plan['name']); ?></div>
                <div class="plan-description"><?php echo htmlspecialchars($plan['description']); ?></div>

                <div class="plan-price">
                    <div class="monthly-price">
                        <span class="price-currency">TZS</span>
                        <span class="price-amount"><?php echo number_format($plan['price_monthly']); ?></span>
                        <span class="price-period">/month</span>
                    </div>
                    <div class="yearly-price">
                        <span class="price-currency">TZS</span>
                        <span class="price-amount"><?php echo number_format($plan['price_yearly'] / 12); ?></span>
                        <span class="price-period">/month</span>
                        <div style="font-size: 0.85rem; color: #64748b; margin-top: 0.5rem;">
                            Billed TZS <?php echo number_format($plan['price_yearly']); ?>/year
                        </div>
                    </div>
                </div>

                <ul class="plan-features">
                    <li>
                        <i class="fas fa-check"></i>
                        <span>Projects</span>
                        <span class="limit"><?php echo $plan['max_projects'] == -1 ? 'Unlimited' : $plan['max_projects']; ?></span>
                    </li>
                    <li>
                        <i class="fas fa-check"></i>
                        <span>Plots</span>
                        <span class="limit"><?php echo $plan['max_plots'] == -1 ? 'Unlimited' : number_format($plan['max_plots']); ?></span>
                    </li>
                    <li>
                        <i class="fas fa-check"></i>
                        <span>Agents</span>
                        <span class="limit"><?php echo $plan['max_agents'] == -1 ? 'Unlimited' : $plan['max_agents']; ?></span>
                    </li>
                    <?php if (isset($features['payment_tracking']) && $features['payment_tracking']): ?>
                    <li>
                        <i class="fas fa-check"></i>
                        <span>Payment Tracking</span>
                    </li>
                    <?php endif; ?>
                    <?php if (isset($features['reports']) && $features['reports']): ?>
                    <li>
                        <i class="fas fa-check"></i>
                        <span>Reports & Analytics</span>
                    </li>
                    <?php endif; ?>
                    <?php if (isset($features['receipts']) && $features['receipts']): ?>
                    <li>
                        <i class="fas fa-check"></i>
                        <span>Receipt Generation</span>
                    </li>
                    <?php endif; ?>
                    <?php if (isset($features['export']) && $features['export']): ?>
                    <li>
                        <i class="fas fa-check"></i>
                        <span>Data Export</span>
                    </li>
                    <?php endif; ?>
                    <?php if (isset($features['priority_support']) && $features['priority_support']): ?>
                    <li>
                        <i class="fas fa-check"></i>
                        <span>Priority Support</span>
                    </li>
                    <?php endif; ?>
                </ul>

                <a href="register.php?plan=<?php echo $plan['id']; ?>" class="btn <?php echo $isPopular ? 'btn-primary' : 'btn-outline'; ?> btn-plan">
                    Start Free Trial
                </a>
            </div>
            <?php endforeach; ?>
        </div>

        <!-- Billing Options Table -->
        <div class="billing-options">
            <h2>Flexible Billing Options</h2>
            <div class="billing-table">
                <table>
                    <thead>
                        <tr>
                            <th>Billing Cycle</th>
                            <th>Starter</th>
                            <th>Professional</th>
                            <th>Enterprise</th>
                            <th>Savings</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><strong>Monthly</strong></td>
                            <td>TZS 50,000</td>
                            <td>TZS 100,000</td>
                            <td>TZS 200,000</td>
                            <td>-</td>
                        </tr>
                        <tr>
                            <td><strong>Quarterly</strong> (3 months)</td>
                            <td>TZS 140,000</td>
                            <td>TZS 280,000</td>
                            <td>TZS 560,000</td>
                            <td><span class="discount-badge">~7% off</span></td>
                        </tr>
                        <tr>
                            <td><strong>Semi-Annual</strong> (6 months)</td>
                            <td>TZS 270,000</td>
                            <td>TZS 540,000</td>
                            <td>TZS 1,080,000</td>
                            <td><span class="discount-badge">~10% off</span></td>
                        </tr>
                        <tr>
                            <td><strong>Yearly</strong></td>
                            <td>TZS 500,000</td>
                            <td>TZS 1,000,000</td>
                            <td>TZS 2,000,000</td>
                            <td><span class="discount-badge">~17% off</span></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </section>

    <!-- FAQ Section -->
    <section class="faq-section">
        <h2>Frequently Asked Questions</h2>

        <div class="faq-item active">
            <div class="faq-question" onclick="toggleFaq(this)">
                How does the free trial work?
                <i class="fas fa-chevron-down"></i>
            </div>
            <div class="faq-answer">
                You get full access to all features of your chosen plan for 14 days, completely free. No credit card required to start. After the trial, you can continue by making a payment to activate your subscription.
            </div>
        </div>

        <div class="faq-item">
            <div class="faq-question" onclick="toggleFaq(this)">
                How do I make payments?
                <i class="fas fa-chevron-down"></i>
            </div>
            <div class="faq-answer">
                We accept payments via mobile money (M-Pesa, Tigo Pesa, Airtel Money), bank transfer, or cash. Contact our team to process your payment and activate your subscription immediately.
            </div>
        </div>

        <div class="faq-item">
            <div class="faq-question" onclick="toggleFaq(this)">
                Can I upgrade or downgrade my plan?
                <i class="fas fa-chevron-down"></i>
            </div>
            <div class="faq-answer">
                Yes! You can upgrade your plan at any time. When you upgrade, we'll prorate the remaining time on your current subscription. Downgrades take effect at the end of your current billing cycle.
            </div>
        </div>

        <div class="faq-item">
            <div class="faq-question" onclick="toggleFaq(this)">
                What happens when my subscription expires?
                <i class="fas fa-chevron-down"></i>
            </div>
            <div class="faq-answer">
                Your data is safely stored for 30 days after expiration. During this time, you'll have read-only access to your account. Simply renew your subscription to regain full access.
            </div>
        </div>

        <div class="faq-item">
            <div class="faq-question" onclick="toggleFaq(this)">
                Is my data secure?
                <i class="fas fa-chevron-down"></i>
            </div>
            <div class="faq-answer">
                Absolutely. We use industry-standard security practices including encrypted connections, secure password hashing, and regular backups. Your business data is safe with us.
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="cta-section">
        <h2>Ready to Transform Your Land Business?</h2>
        <p>Join hundreds of land developers using LandSales Pro to manage their sales.</p>
        <a href="register.php" class="btn">Start Your Free Trial</a>
    </section>

    <!-- Footer -->
    <footer>
        <p>&copy; <?php echo date('Y'); ?> <?php echo APP_NAME; ?>. All rights reserved.</p>
        <p style="margin-top: 0.5rem;">
            <a href="home.php">Home</a> &bull;
            <a href="pricing.php">Pricing</a> &bull;
            <a href="login.php">Login</a> &bull;
            <a href="register.php">Register</a>
        </p>
    </footer>

    <script>
        function toggleMobileMenu() {
            document.getElementById('navLinks').classList.toggle('active');
        }

        function toggleBilling() {
            const toggle = document.getElementById('billingToggle');
            const monthlyLabel = document.getElementById('monthlyLabel');
            const yearlyLabel = document.getElementById('yearlyLabel');
            const monthlyPrices = document.querySelectorAll('.monthly-price');
            const yearlyPrices = document.querySelectorAll('.yearly-price');

            toggle.classList.toggle('active');

            if (toggle.classList.contains('active')) {
                monthlyLabel.classList.remove('active');
                yearlyLabel.classList.add('active');
                monthlyPrices.forEach(el => el.classList.add('hidden'));
                yearlyPrices.forEach(el => el.classList.add('active'));
            } else {
                monthlyLabel.classList.add('active');
                yearlyLabel.classList.remove('active');
                monthlyPrices.forEach(el => el.classList.remove('hidden'));
                yearlyPrices.forEach(el => el.classList.remove('active'));
            }
        }

        function toggleFaq(element) {
            const faqItem = element.parentElement;
            faqItem.classList.toggle('active');
        }
    </script>
</body>
</html>
