<% include partials/head %>
<% include partials/header %>

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background: #ffffff;
        }

        /* Stats Section */
        .stats-section {
            background: white;
            padding: 60px 0 40px;
            border-bottom: 1px solid #e9ecef;
        }
        .stat-item h2 {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 5px;
            color: #000;
        }
        .stat-item p {
            color: #6c757d;
            margin: 0;
            font-size: 1rem;
        }

        /* Hero Section */
        .hero-section {
            background: linear-gradient(135deg, #000000 0%, #FBBF24 25%, #FCD34D 50%, #FBBF24 75%, #000000 100%);
            background-size: 200% 200%;
            animation: gradientShift 8s ease infinite;
            padding: 80px 0 60px;
            margin-bottom: 0;
        }
        
        @keyframes gradientShift {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }
        .hero-section h1 {
            font-size: 3.5rem;
            font-weight: 700;
            color: #000;
            margin-bottom: 20px;
        }
        .hero-section p.lead {
            color: #000;
            font-size: 1.25rem;
            margin-bottom: 30px;
        }
        .badge-pill {
            background: rgba(0,0,0,0.1);
            color: #000;
            padding: 8px 20px;
            border-radius: 25px;
            font-size: 0.9rem;
            display: inline-block;
            margin: 5px;
            font-weight: 500;
        }
        .badge-pill i {
            color: #000;
            margin-right: 5px;
        }

        /* Billing Toggle */
        .billing-toggle-wrapper {
            margin-top: -35px;
            margin-bottom: 50px;
            position: relative;
            z-index: 10;
        }
        .billing-toggle-container {
            background: white;
            border-radius: 50px;
            padding: 6px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            display: inline-flex;
            align-items: center;
        }
        .billing-toggle {
            background: transparent;
            border: none;
            padding: 10px 24px;
            border-radius: 40px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            color: #6c757d;
        }
        .billing-toggle.active {
            background: #000;
            color: #FBBF24;
        }
        .save-badge {
            background: #FBBF24;
            color: #000;
            padding: 6px 16px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
            margin-left: 10px;
        }

        /* Pricing Cards */
        .pricing-card {
            border: 2px solid #e9ecef;
            border-radius: 16px;
            padding: 40px 35px;
            height: 100%;
            transition: all 0.3s;
            background: white;
            position: relative;
        }
        .pricing-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 35px rgba(0,0,0,0.12);
        }
        .pricing-card.popular {
            border-color: #FBBF24;
            background: linear-gradient(to bottom, #fffdf5 0%, #ffffff 100%);
            box-shadow: 0 8px 30px rgba(251, 191, 36, 0.25);
        }
        .pricing-card.enterprise {
            background: #000;
            border-color: #FBBF24;
            box-shadow: 0 8px 30px rgba(251, 191, 36, 0.3);
        }
        .pricing-card.enterprise .text-muted {
            color: #FBBF24 !important;
        }
        .pricing-card.enterprise h3 {
            color: #FBBF24;
        }
        .pricing-card.enterprise .card-description {
            color: #ffffff;
        }
        .pricing-card.enterprise .price {
            color: #FBBF24;
        }
        .pricing-card.enterprise .price-period {
            color: #ffffff;
        }
        .pricing-card.enterprise .billing-note {
            color: #FBBF24;
        }
        .pricing-card.enterprise .features-title {
            color: #FBBF24;
        }
        .pricing-card.enterprise .feature-list li {
            color: #ffffff;
        }
        .pricing-card.enterprise .feature-list i {
            color: #FBBF24;
        }
        .pricing-card.enterprise .btn-primary-custom {
            background: #FBBF24;
            color: #000;
        }
        .pricing-card.enterprise .btn-primary-custom:hover {
            background: #FCD34D;
            color: #000;
        }
        .popular-badge {
            position: absolute;
            top: -16px;
            left: 50%;
            transform: translateX(-50%);
            background: #000;
            color: #FBBF24;
            padding: 6px 24px;
            border-radius: 25px;
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.5px;
        }
        .pricing-card .text-muted {
            font-size: 0.9rem;
            margin-bottom: 8px;
        }
        .pricing-card h3 {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 12px;
            color: #000;
        }
        .pricing-card .card-description {
            color: #6c757d;
            margin-bottom: 30px;
            min-height: 48px;
        }
        .price {
            font-size: 3.5rem;
            font-weight: 700;
            color: #000;
        }
        .price-period {
            font-size: 1.1rem;
            color: #6c757d;
        }
        .billing-note {
            color: #28a745;
            font-size: 0.95rem;
            margin-top: 8px;
        }
        .btn-primary-custom {
            background: #000;
            border: none;
            padding: 14px 30px;
            border-radius: 10px;
            font-weight: 600;
            color: #FBBF24;
            transition: all 0.3s;
            width: 100%;
            font-size: 1.05rem;
        }
        .btn-primary-custom:hover {
            transform: scale(1.02);
            background: #1a1a1a;
            color: #FBBF24;
            box-shadow: 0 6px 20px rgba(0,0,0,0.2);
        }
        .feature-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .feature-list li {
            padding: 12px 0;
            color: #495057;
            font-size: 0.95rem;
        }
        .feature-list i {
            color: #28a745;
            margin-right: 12px;
            font-size: 1.1rem;
        }
        .features-title {
            font-weight: 600;
            margin-top: 30px;
            margin-bottom: 20px;
            color: #000;
        }

        /* Comparison Table */
        .comparison-section {
            padding: 80px 0;
            background: #f8f9fa;
        }
        .comparison-section h2 {
            font-size: 2.5rem;
            font-weight: 700;
            color: #000;
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 0.8s ease forwards;
        }
        .table {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 0.8s ease 0.2s forwards;
        }
        
        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .table tbody tr {
            transition: all 0.3s ease;
        }
        
        .table tbody tr:hover {
            transform: translateX(5px);
            background: #f8f9fa;
        }
        .table thead th {
            background: #f8f9fa;
            font-weight: 600;
            padding: 20px;
            border: none;
            color: #000;
        }
        .table tbody td {
            padding: 18px 20px;
            vertical-align: middle;
            border-color: #e9ecef;
        }
        .table tbody tr.table-light td {
            background: #f8f9fa;
            font-weight: 600;
            color: #000;
        }
        .table .text-success {
            font-size: 1.3rem;
        }

        /* FAQ Section */
        .faq-section {
            padding: 80px 0;
            background: white;
        }
        .faq-section h2 {
            font-size: 2.5rem;
            font-weight: 700;
            color: #000;
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 0.8s ease forwards;
        }
        .faq-item {
            background: #f8f9fa;
            border-radius: 12px;
            margin-bottom: 16px;
            overflow: hidden;
            transition: all 0.3s;
            opacity: 0;
            transform: translateX(-30px);
            animation: slideInLeft 0.6s ease forwards;
        }
        
        .faq-item:nth-child(1) { animation-delay: 0.1s; }
        .faq-item:nth-child(2) { animation-delay: 0.2s; }
        .faq-item:nth-child(3) { animation-delay: 0.3s; }
        .faq-item:nth-child(4) { animation-delay: 0.4s; }
        .faq-item:nth-child(5) { animation-delay: 0.5s; }
        .faq-item:nth-child(6) { animation-delay: 0.6s; }
        
        @keyframes slideInLeft {
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        .faq-item:hover {
            box-shadow: 0 4px 15px rgba(0,0,0,0.08);
            transform: translateX(5px);
        }
        .faq-question {
            padding: 24px 28px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            user-select: none;
        }
        .faq-question h5 {
            font-weight: 600;
            color: #000;
            margin: 0;
            font-size: 1.1rem;
        }
        .faq-answer {
            padding: 0 28px;
            max-height: 0;
            overflow: hidden;
            transition: all 0.4s ease;
        }
        .faq-answer.active {
            padding: 0 28px 24px 28px;
            max-height: 300px;
        }
        .faq-answer p {
            color: #6c757d;
            margin: 0;
            line-height: 1.6;
        }
        .faq-icon {
            transition: transform 0.3s;
            font-size: 1.3rem;
            color: #000;
        }
        .faq-icon.active {
            transform: rotate(180deg);
        }

        /* CTA Section */
        .cta-section {
            background: #000;
            color: #FBBF24;
            padding: 80px 0;
        }
        .cta-section h2 {
            font-size: 2.8rem;
            font-weight: 700;
            margin-bottom: 20px;
        }
        .cta-section .lead {
            font-size: 1.2rem;
            margin-bottom: 35px;
        }
        .btn-cta-primary {
            background: #FBBF24;
            color: #000;
            font-weight: 600;
            border: none;
            padding: 14px 40px;
            border-radius: 10px;
            font-size: 1.1rem;
            transition: all 0.3s;
        }
        .btn-cta-primary:hover {
            transform: scale(1.05);
            background: #FCD34D;
            color: #000;
        }
        .btn-cta-secondary {
            background: transparent;
            color: #FBBF24;
            font-weight: 600;
            border: 2px solid #FBBF24;
            padding: 14px 40px;
            border-radius: 10px;
            font-size: 1.1rem;
            transition: all 0.3s;
        }
        .btn-cta-secondary:hover {
            background: #FBBF24;
            color: #000;
            border-color: #FBBF24;
        }

        /* Footer */
        footer {
            background: #212529;
            color: white;
            padding: 40px 0;
            text-align: center;
        }
        footer h5 {
            font-weight: 700;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <!-- Stats Section -->
    <!-- <div class="stats-section">
        <div class="container">
            <div class="row text-center">
                <div class="col-md-4 stat-item">
                    <h2>12,000+</h2>
                    <p>Active Teams</p>
                </div>
                <div class="col-md-4 stat-item">
                    <h2>150,000+</h2>
                    <p>Seats Managed</p>
                </div>
                <div class="col-md-4 stat-item">
                    <h2>99.9%</h2>
                    <p>Uptime</p>
                </div>
            </div>
        </div>
    </div> -->

    <!-- Hero Section -->
    <div class="hero-section text-center">
        <div class="container">
            <h1>Simple, transparent<br>pricing for everyone</h1>
            <p class="lead">Choose the perfect plan for your team. Scale effortlessly as you grow.<br>No hidden fees, no surprises.</p>
            <!-- <div class="d-flex justify-content-center gap-2 flex-wrap">
                <span class="badge-pill"><i class="bi bi-check-circle-fill"></i> 30-day money back</span>
                <span class="badge-pill"><i class="bi bi-check-circle-fill"></i> Cancel anytime</span>
                <span class="badge-pill"><i class="bi bi-check-circle-fill"></i> No credit card required</span>
            </div> -->
        </div>
    </div>

    <!-- Billing Toggle -->
    <div class="container text-center billing-toggle-wrapper">
        <div class="billing-toggle-container">
            <button class="billing-toggle active" onclick="toggleBilling('monthly')" id="monthlyBtn">Monthly</button>
            <button class="billing-toggle" onclick="toggleBilling('annual')" id="annualBtn">Annual</button>
            <span class="save-badge">Save 20%</span>
        </div>
    </div>

    <!-- Pricing Cards -->
    <div class="container mb-5">
        <div class="row g-4">
            <!-- Starter Plan -->
            <div class="col-lg-4">
                <div class="pricing-card">
                    <p class="text-muted">5 seats</p>
                    <h3>Starter</h3>
                    <p class="card-description">Perfect for small teams getting started</p>
                    <div class="mb-2">
                        <span class="price monthly-price">$29</span>
                        <span class="price annual-price" style="display: none;">$23</span>
                        <span class="price-period">/month</span>
                    </div>
                    <p class="billing-note monthly-note">or $23/month billed annually</p>
                    <p class="billing-note annual-note" style="display: none;">Billed annually ($276/year)</p>
                    <button class="btn btn-primary-custom mb-4">Get Started</button>
                    
                    <p class="features-title">Everything included:</p>
                    <ul class="feature-list">
                        <li><i class="bi bi-check-circle-fill"></i> Up to 5 admin seats</li>
                        <li><i class="bi bi-check-circle-fill"></i> Basic analytics dashboard</li>
                        <li><i class="bi bi-check-circle-fill"></i> Email support</li>
                        <li><i class="bi bi-check-circle-fill"></i> Monthly reports</li>
                        <li><i class="bi bi-check-circle-fill"></i> Mobile app access</li>
                    </ul>
                </div>
            </div>

            <!-- Professional Plan -->
            <div class="col-lg-4">
                <div class="pricing-card popular">
                    <span class="popular-badge">⭐ MOST POPULAR</span>
                    <p class="text-muted">15 seats</p>
                    <h3>Professional</h3>
                    <p class="card-description">For growing teams that need more power</p>
                    <div class="mb-2">
                        <span class="price monthly-price">$79</span>
                        <span class="price annual-price" style="display: none;">$63</span>
                        <span class="price-period">/month</span>
                    </div>
                    <p class="billing-note monthly-note">or $63/month billed annually</p>
                    <p class="billing-note annual-note" style="display: none;">Billed annually ($756/year)</p>
                    <button class="btn btn-primary-custom mb-4">Get Started</button>
                    
                    <p class="features-title">Everything included:</p>
                    <ul class="feature-list">
                        <li><i class="bi bi-check-circle-fill"></i> Up to 15 admin seats</li>
                        <li><i class="bi bi-check-circle-fill"></i> Advanced analytics & insights</li>
                        <li><i class="bi bi-check-circle-fill"></i> Priority support (24/7)</li>
                        <li><i class="bi bi-check-circle-fill"></i> Daily reports & alerts</li>
                        <li><i class="bi bi-check-circle-fill"></i> Full API access</li>
                    </ul>
                </div>
            </div>

            <!-- Enterprise Plan -->
            <div class="col-lg-4">
                <div class="pricing-card enterprise">
                    <p class="text-muted">50 seats</p>
                    <h3>Enterprise</h3>
                    <p class="card-description">Unlimited power for large organizations</p>
                    <div class="mb-2">
                        <span class="price monthly-price">$199</span>
                        <span class="price annual-price" style="display: none;">$159</span>
                        <span class="price-period">/month</span>
                    </div>
                    <p class="billing-note monthly-note">or $159/month billed annually</p>
                    <p class="billing-note annual-note" style="display: none;">Billed annually ($1,908/year)</p>
                    <button class="btn btn-primary-custom mb-4">Get Started</button>
                    
                    <p class="features-title">Everything included:</p>
                    <ul class="feature-list">
                        <li><i class="bi bi-check-circle-fill"></i> Up to 50 admin seats</li>
                        <li><i class="bi bi-check-circle-fill"></i> Enterprise analytics suite</li>
                        <li><i class="bi bi-check-circle-fill"></i> Dedicated account manager</li>
                        <li><i class="bi bi-check-circle-fill"></i> Real-time monitoring</li>
                        <li><i class="bi bi-check-circle-fill"></i> Unlimited API calls</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Comparison Table -->
    <div class="comparison-section">
        <div class="container">
            <h2 class="text-center mb-3">Compare all features</h2>
            <p class="text-center text-muted mb-5">See what's included in each plan</p>
            
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Features</th>
                            <th class="text-center">Starter<br><small class="text-muted">$29/mo</small></th>
                            <th class="text-center">Professional<br><small class="text-muted">$79/mo</small></th>
                            <th class="text-center">Enterprise<br><small class="text-muted">$199/mo</small></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="table-light">
                            <td colspan="4">CORE FEATURES</td>
                        </tr>
                        <tr>
                            <td>Admin Seats</td>
                            <td class="text-center">5</td>
                            <td class="text-center">15</td>
                            <td class="text-center">50</td>
                        </tr>
                        <tr>
                            <td>Mobile App Access</td>
                            <td class="text-center"><i class="bi bi-check-circle-fill text-success"></i></td>
                            <td class="text-center"><i class="bi bi-check-circle-fill text-success"></i></td>
                            <td class="text-center"><i class="bi bi-check-circle-fill text-success"></i></td>
                        </tr>
                        <tr>
                            <td>Email Support</td>
                            <td class="text-center"><i class="bi bi-check-circle-fill text-success"></i></td>
                            <td class="text-center"><i class="bi bi-check-circle-fill text-success"></i></td>
                            <td class="text-center"><i class="bi bi-check-circle-fill text-success"></i></td>
                        </tr>
                        <tr>
                            <td>Basic Analytics</td>
                            <td class="text-center"><i class="bi bi-check-circle-fill text-success"></i></td>
                            <td class="text-center"><i class="bi bi-check-circle-fill text-success"></i></td>
                            <td class="text-center"><i class="bi bi-check-circle-fill text-success"></i></td>
                        </tr>
                        <tr class="table-light">
                            <td colspan="4">ADVANCED FEATURES</td>
                        </tr>
                        <tr>
                            <td>Advanced Analytics</td>
                            <td class="text-center">—</td>
                            <td class="text-center"><i class="bi bi-check-circle-fill text-success"></i></td>
                            <td class="text-center"><i class="bi bi-check-circle-fill text-success"></i></td>
                        </tr>
                        <tr>
                            <td>API Access</td>
                            <td class="text-center">—</td>
                            <td class="text-center"><i class="bi bi-check-circle-fill text-success"></i></td>
                            <td class="text-center"><i class="bi bi-check-circle-fill text-success"></i></td>
                        </tr>
                        <tr>
                            <td>Custom Integrations</td>
                            <td class="text-center">—</td>
                            <td class="text-center">—</td>
                            <td class="text-center"><i class="bi bi-check-circle-fill text-success"></i></td>
                        </tr>
                        <tr>
                            <td>Priority Support</td>
                            <td class="text-center">—</td>
                            <td class="text-center"><i class="bi bi-check-circle-fill text-success"></i></td>
                            <td class="text-center"><i class="bi bi-check-circle-fill text-success"></i></td>
                        </tr>
                        <tr class="table-light">
                            <td colspan="4">ENTERPRISE FEATURES</td>
                        </tr>
                        <tr>
                            <td>Dedicated Account Manager</td>
                            <td class="text-center">—</td>
                            <td class="text-center">—</td>
                            <td class="text-center"><i class="bi bi-check-circle-fill text-success"></i></td>
                        </tr>
                        <tr>
                            <td>Custom Solutions</td>
                            <td class="text-center">—</td>
                            <td class="text-center">—</td>
                            <td class="text-center"><i class="bi bi-check-circle-fill text-success"></i></td>
                        </tr>
                        <tr>
                            <td>Advanced Security</td>
                            <td class="text-center">—</td>
                            <td class="text-center">—</td>
                            <td class="text-center"><i class="bi bi-check-circle-fill text-success"></i></td>
                        </tr>
                        <tr>
                            <td>SLA Guarantee</td>
                            <td class="text-center">—</td>
                            <td class="text-center">—</td>
                            <td class="text-center"><i class="bi bi-check-circle-fill text-success"></i></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- FAQ Section -->
    <div class="faq-section">
        <div class="container">
            <h2 class="text-center mb-3">Frequently Asked Questions</h2>
            <p class="text-center text-muted mb-5">Everything you need to know about billing</p>
            
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="faq-item">
                        <div class="faq-question" onclick="toggleFaq(this)">
                            <h5>What counts as an admin seat?</h5>
                            <i class="bi bi-chevron-down faq-icon"></i>
                        </div>
                        <div class="faq-answer">
                            <p>An admin seat is a user account with full administrative privileges to manage team members, billing, and system settings. Each plan includes a specific number of admin seats.</p>
                        </div>
                    </div>
                    
                    <div class="faq-item">
                        <div class="faq-question" onclick="toggleFaq(this)">
                            <h5>Can I upgrade or downgrade my plan anytime?</h5>
                            <i class="bi bi-chevron-down faq-icon"></i>
                        </div>
                        <div class="faq-answer">
                            <p>Yes! You can upgrade or downgrade your plan at any time. Changes take effect immediately, and we'll prorate the charges accordingly.</p>
                        </div>
                    </div>
                    
                    <div class="faq-item">
                        <div class="faq-question" onclick="toggleFaq(this)">
                            <h5>What happens if I exceed my seat limit?</h5>
                            <i class="bi bi-chevron-down faq-icon"></i>
                        </div>
                        <div class="faq-answer">
                            <p>If you exceed your seat limit, you'll be prompted to upgrade to the next plan tier. We'll notify you before you reach your limit so you can make an informed decision.</p>
                        </div>
                    </div>
                    
                    <div class="faq-item">
                        <div class="faq-question" onclick="toggleFaq(this)">
                            <h5>Do you offer refunds?</h5>
                            <i class="bi bi-chevron-down faq-icon"></i>
                        </div>
                        <div class="faq-answer">
                            <p>Yes, we offer a 30-day money-back guarantee. If you're not satisfied with JogaApp, contact us within 30 days for a full refund.</p>
                        </div>
                    </div>
                    
                    <div class="faq-item">
                        <div class="faq-question" onclick="toggleFaq(this)">
                            <h5>Is there a discount for annual billing?</h5>
                            <i class="bi bi-chevron-down faq-icon"></i>
                        </div>
                        <div class="faq-answer">
                            <p>Yes! When you choose annual billing, you save 20% compared to monthly billing. This applies to all plan tiers.</p>
                        </div>
                    </div>
                    
                    <div class="faq-item">
                        <div class="faq-question" onclick="toggleFaq(this)">
                            <h5>Can I get a custom enterprise plan?</h5>
                            <i class="bi bi-chevron-down faq-icon"></i>
                        </div>
                        <div class="faq-answer">
                            <p>Absolutely! We offer custom enterprise plans for organizations with specific needs. Contact our sales team to discuss your requirements and get a tailored solution.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- CTA Section -->
    <div class="cta-section text-center">
        <div class="container">
            <h2>Ready to get started?</h2>
            <p class="lead">Join thousands of teams already using JogaApp to manage their workflow efficiently</p>
            <div class="d-flex justify-content-center gap-3 flex-wrap mb-4">
                <button class="btn btn-cta-primary">Start Free Trial</button>
                <button class="btn btn-cta-secondary">Contact Sales</button>
            </div>
            <p class="mb-0"><small>No credit card required • 14-day free trial • Cancel anytime</small></p>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        function toggleBilling(type) {
            const monthlyBtn = document.getElementById('monthlyBtn');
            const annualBtn = document.getElementById('annualBtn');
            const monthlyPrices = document.querySelectorAll('.monthly-price');
            const annualPrices = document.querySelectorAll('.annual-price');
            const monthlyNotes = document.querySelectorAll('.monthly-note');
            const annualNotes = document.querySelectorAll('.annual-note');
            
            if (type === 'monthly') {
                monthlyBtn.style.background = '#000';
                monthlyBtn.style.color = '#FBBF24';
                annualBtn.style.background = 'transparent';
                annualBtn.style.color = '#000';
                
                monthlyPrices.forEach(el => el.style.display = 'inline');
                annualPrices.forEach(el => el.style.display = 'none');
                monthlyNotes.forEach(el => el.style.display = 'block');
                annualNotes.forEach(el => el.style.display = 'none');
            } else {
                annualBtn.style.background = '#000';
                annualBtn.style.color = '#FBBF24';
                monthlyBtn.style.background = 'transparent';
                monthlyBtn.style.color = '#000';
                
                monthlyPrices.forEach(el => el.style.display = 'none');
                annualPrices.forEach(el => el.style.display = 'inline');
                monthlyNotes.forEach(el => el.style.display = 'none');
                annualNotes.forEach(el => el.style.display = 'block');
            }
        }
    </script>

    <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->
    <!-- <script>
        function toggleBilling(type) {
            const monthlyBtn = document.getElementById('monthlyBtn');
            const annualBtn = document.getElementById('annualBtn');
            const monthlyPrices = document.querySelectorAll('.monthly-price');
            const annualPrices = document.querySelectorAll('.annual-price');
            const monthlyNotes = document.querySelectorAll('.monthly-note');
            const annualNotes = document.querySelectorAll('.annual-note');
            
            if (type === 'monthly') {
                monthlyBtn.classList.add('active');
                annualBtn.classList.remove('active');
                
                monthlyPrices.forEach(el => el.style.display = 'inline');
                annualPrices.forEach(el => el.style.display = 'none');
                monthlyNotes.forEach(el => el.style.display = 'block');
                annualNotes.forEach(el => el.style.display = 'none');
            } else {
                annualBtn.classList.add('active');
                monthlyBtn.classList.remove('active');
                
                monthlyPrices.forEach(el => el.style.display = 'none');
                annualPrices.forEach(el => el.style.display = 'inline');
                monthlyNotes.forEach(el => el.style.display = 'none');
                annualNotes.forEach(el => el.style.display = 'block');
            }
        }

        function toggleFaq(element) {
            const answer = element.nextElementSibling;
            const icon = element.querySelector('.faq-icon');
            
            answer.classList.toggle('active');
            icon.classList.toggle('active');
        }
    </script> -->

<% include partials/footer %>