{% extends 'landing/base_landing.html' %}

{% block title %}Pricing Plans - 3ncount2026{% endblock %}

{% block extra_css %}
<style>
    .pricing-hero {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 4rem 0 2.5rem;
        text-align: center;
    }
    
    .pricing-hero h1 {
        font-size: 2.5rem;
        font-weight: 800;
        margin-bottom: 0.75rem;
    }
    
    .pricing-hero p {
        font-size: 1.125rem;
        opacity: 0.95;
        max-width: 700px;
        margin: 0 auto 1.5rem;
    }
    
    /* Billing Toggle */
    .billing-toggle {
        display: inline-flex;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 2rem;
        padding: 0.375rem;
        margin-top: 1.5rem;
    }
    
    .billing-toggle button {
        padding: 0.5rem 1.75rem;
        border: none;
        background: transparent;
        color: white;
        font-weight: 600;
        font-size: 1rem;
        border-radius: 1.75rem;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .billing-toggle button.active {
        background: white;
        color: var(--primary-color);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
    
    .savings-badge {
        display: inline-block;
        background: var(--secondary-color);
        color: white;
        padding: 0.25rem 0.875rem;
        border-radius: 1.25rem;
        font-size: 0.8125rem;
        font-weight: 700;
        margin-left: 0.5rem;
        box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
    }
    
    /* Pricing Section */
    .pricing-section {
        padding: 4rem 0;
        background: var(--light-bg);
    }
    
    .pricing-card {
        background: white;
        border-radius: 1rem;
        padding: 2rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        height: 100%;
        transition: all 0.3s ease;
        border: 2px solid transparent;
        position: relative;
        display: flex;
        flex-direction: column;
    }
    
    .pricing-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    }
    
    .pricing-card.featured {
        border-color: var(--primary-color);
        box-shadow: 0 8px 24px rgba(102, 126, 234, 0.2);
    }
    
    .pricing-card.featured:hover {
        transform: translateY(-6px);
    }
    
    .pricing-badge {
        position: absolute;
        top: -10px;
        right: 20px;
        background: var(--secondary-color);
        color: white;
        padding: 0.3125rem 1rem;
        border-radius: 1.25rem;
        font-size: 0.75rem;
        font-weight: 700;
        box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
    }
    
    .pricing-header {
        text-align: center;
        margin-bottom: 1.5rem;
    }
    
    .pricing-header h3 {
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--text-primary);
        margin-bottom: 0.5rem;
    }
    
    .pricing-header p {
        color: var(--text-secondary);
        font-size: 0.9375rem;
        min-height: 40px;
    }
    
    .pricing-price {
        text-align: center;
        margin: 1.25rem 0;
        padding: 1.25rem 0;
        border-top: 2px solid #e2e8f0;
        border-bottom: 2px solid #e2e8f0;
    }
    
    .price-amount {
        font-size: 2.5rem;
        font-weight: 900;
        color: var(--primary-color);
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: 0.375rem;
        line-height: 1;
    }
    
    .price-amount .currency {
        font-size: 1.5rem;
    }
    
    .price-amount .period {
        font-size: 1rem;
        color: var(--text-secondary);
        font-weight: 500;
    }
    
    .price-annual {
        font-size: 0.875rem;
        color: var(--text-secondary);
        margin-top: 0.5rem;
    }
    
    .pricing-features {
        list-style: none;
        padding: 0;
        margin: 1.5rem 0;
        flex-grow: 1;
    }
    
    .pricing-features li {
        padding: 0.625rem 0;
        border-bottom: 1px solid #e2e8f0;
        font-size: 0.9375rem;
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .pricing-features li:last-child {
        border-bottom: none;
    }
    
    .pricing-features i {
        color: var(--secondary-color);
        font-size: 1.125rem;
        flex-shrink: 0;
        margin-top: 0.125rem;
    }
    
    .pricing-features strong {
        color: var(--primary-color);
        font-weight: 700;
    }
    
    .pricing-features .feature-premium {
        color: var(--primary-color);
        font-weight: 700;
    }
    
    .pricing-cta {
        margin-top: 1.5rem;
    }
    
    .btn-pricing-cta {
        width: 100%;
        padding: 0.75rem;
        font-size: 1rem;
        font-weight: 700;
        border-radius: 0.5rem;
        border: none;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .btn-pricing-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    .btn-pricing-primary {
        background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
        color: white;
    }
    
    .btn-pricing-secondary {
        background: white;
        color: var(--primary-color);
        border: 2px solid var(--primary-color);
    }
    
    .btn-pricing-secondary:hover {
        background: var(--primary-color);
        color: white;
    }
    
    /* FAQ Section */
    .faq-section {
        padding: 4rem 0;
        background: white;
    }
    
    .faq-section h2 {
        text-align: center;
        font-size: 2.25rem;
        font-weight: 800;
        margin-bottom: 2.5rem;
    }
    
    .faq-item {
        background: var(--light-bg);
        padding: 1.5rem;
        border-radius: 0.75rem;
        margin-bottom: 1rem;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .faq-item:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        transform: translateY(-2px);
    }
    
    .faq-question {
        font-size: 1.0625rem;
        font-weight: 700;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .faq-answer {
        color: var(--text-secondary);
        margin-top: 0.75rem;
        line-height: 1.6;
        font-size: 0.9375rem;
    }
    
    /* CTA Section */
    .cta-section-pricing {
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
        color: white;
        padding: 4rem 0;
        text-align: center;
    }
    
    .cta-section-pricing h2 {
        font-size: 2.5rem;
        font-weight: 800;
        margin-bottom: 1rem;
    }
    
    .cta-section-pricing p {
        font-size: 1.125rem;
        margin-bottom: 2rem;
        opacity: 0.95;
    }
    
    @media (max-width: 768px) {
        .pricing-hero h1 {
            font-size: 2rem;
        }
        
        .price-amount {
            font-size: 2rem;
        }
        
        .billing-toggle button {
            padding: 0.5rem 1.25rem;
            font-size: 0.9375rem;
        }
    }
</style>
{% endblock %}

{% block content %}
<!-- Pricing Hero -->
<section class="pricing-hero">
    <div class="container">
        <h1>Choose Your Perfect Plan</h1>
        <p>Transparent pricing with no hidden fees. All plans include 14-day free trial.</p>
        
        <div class="billing-toggle">
            <button id="monthly-btn" class="active" onclick="toggleBilling('monthly')">
                Monthly
            </button>
            <button id="annual-btn" onclick="toggleBilling('annual')">
                Annual
                <span class="savings-badge">Save 20%</span>
            </button>
        </div>
    </div>
</section>

<!-- Pricing Cards -->
<section class="pricing-section">
    <div class="container">
        <div class="row g-4">
            {% for plan in plans %}
            <div class="col-lg-3 col-md-6">
                <div class="pricing-card {% if forloop.counter == 2 %}featured{% endif %}">
                    {% if forloop.counter == 2 %}
                    <div class="pricing-badge">Most Popular</div>
                    {% endif %}
                    
                    <div class="pricing-header">
                        <h3>{{ plan.name }}</h3>
                        <p>{{ plan.description|default:"Perfect for growing businesses"|truncatewords:8 }}</p>
                    </div>
                    
                    <div class="pricing-price">
                        <div class="price-amount monthly-price">
                            <span class="currency">RM</span>
                            <span>{{ plan.price_monthly }}</span>
                            <span class="period">/mo</span>
                        </div>
                        <div class="price-amount annual-price" style="display: none;">
                            <span class="currency">RM</span>
                            <span>{{ plan.price_yearly }}</span>
                            <span class="period">/yr</span>
                        </div>
                        <div class="price-annual monthly-price">
                            Billed monthly
                        </div>
                        <div class="price-annual annual-price" style="display: none;">
                            {% widthratio plan.price_yearly 12 1 as monthly_from_yearly %}
                            RM {{ monthly_from_yearly|floatformat:2 }}/month billed annually
                        </div>
                    </div>
                    
                    <ul class="pricing-features">
                        <li>
                            <i class="bi bi-check-circle-fill"></i>
                            <span><strong>{{ plan.max_users }}</strong> User{% if plan.max_users > 1 %}s{% endif %}</span>
                        </li>
                        
                        <li>
                            <i class="bi bi-check-circle-fill"></i>
                            <span>
                                {% if plan.max_transactions_per_month == -1 %}
                                    <strong>Unlimited</strong> Transactions
                                {% else %}
                                    <strong>{{ plan.max_transactions_per_month }}</strong> Transactions/mo
                                {% endif %}
                            </span>
                        </li>
                        
                        <li>
                            <i class="bi bi-check-circle-fill"></i>
                            <span>Invoice & Bill Management</span>
                        </li>
                        
                        <li>
                            <i class="bi bi-check-circle-fill"></i>
                            <span>Financial Reports</span>
                        </li>
                        
                        <li>
                            <i class="bi bi-check-circle-fill"></i>
                            <span>Bank Reconciliation</span>
                        </li>
                        
                        {% if plan.bank_statements_per_month > 0 or plan.bank_statements_per_month == -1 %}
                        <li>
                            <i class="bi bi-check-circle-fill"></i>
                            <span>
                                {% if plan.bank_statements_per_month == -1 %}
                                    <strong>Unlimited</strong> Bank Statements
                                {% else %}
                                    <strong>{{ plan.bank_statements_per_month }}</strong> Bank Statements/mo
                                {% endif %}
                            </span>
                        </li>
                        {% endif %}
                        
                        {% if plan.ai_documents_enabled %}
                        <li>
                            <i class="bi bi-stars"></i>
                            <span class="feature-premium">AI Document Extraction</span>
                        </li>
                        {% endif %}
                        
                        {% if plan.ai_accounting_enabled %}
                        <li>
                            <i class="bi bi-stars"></i>
                            <span class="feature-premium">AI Accounting Chat</span>
                        </li>
                        {% endif %}
                        
                        {% if plan.ai_advisor_enabled %}
                        <li>
                            <i class="bi bi-stars"></i>
                            <span class="feature-premium">AI Financial Advisor</span>
                        </li>
                        {% endif %}
                        
                        {% if plan.ai_tokens_per_month > 0 or plan.ai_tokens_per_month == -1 %}
                        <li>
                            <i class="bi bi-check-circle-fill"></i>
                            <span>
                                {% if plan.ai_tokens_per_month == -1 %}
                                    <strong>Unlimited</strong> AI Tokens
                                {% else %}
                                    <strong>{{ plan.ai_tokens_per_month|floatformat:0 }}</strong> AI Tokens/mo
                                {% endif %}
                            </span>
                        </li>
                        {% endif %}
                        
                        {% if plan.pos_enabled %}
                        <li>
                            <i class="bi bi-stars"></i>
                            <span class="feature-premium">POS & Inventory</span>
                        </li>
                        {% endif %}
                        
                        {% if plan.lhdn_borang_b_enabled %}
                        <li>
                            <i class="bi bi-stars"></i>
                            <span class="feature-premium">LHDN Borang B Filing</span>
                        </li>
                        {% endif %}
                        
                        <li>
                            <i class="bi bi-check-circle-fill"></i>
                            <span>Multi-Currency Support</span>
                        </li>
                        
                        <li>
                            <i class="bi bi-check-circle-fill"></i>
                            <span>Email Support</span>
                        </li>
                    </ul>
                    
                    <div class="pricing-cta">
                        <a href="{% url 'landing:register' %}?plan={{ plan.slug }}" 
                           class="btn {% if forloop.counter == 2 %}btn-pricing-primary{% else %}btn-pricing-secondary{% endif %} btn-pricing-cta">
                            <i class="bi bi-rocket-takeoff-fill"></i>
                            Start Free Trial
                        </a>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        
        <div class="text-center mt-4">
            <p class="text-muted" style="font-size: 1rem;">
                <i class="bi bi-shield-fill-check text-success me-2"></i>
                All plans include 14-day free trial • No credit card required • Cancel anytime
            </p>
        </div>
    </div>
</section>

<!-- FAQ Section -->
<section class="faq-section">
    <div class="container">
        <h2>Frequently Asked Questions</h2>
        
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="faq-item">
                    <div class="faq-question">
                        <span>Is there a free trial?</span>
                        <i class="bi bi-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        Yes! All plans come with a 14-day free trial. No credit card required. You can explore all features and decide which plan works best for your business.
                    </div>
                </div>
                
                <div class="faq-item">
                    <div class="faq-question">
                        <span>Can I change plans later?</span>
                        <i class="bi bi-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        Absolutely! You can upgrade or downgrade your plan at any time. Changes take effect immediately, and we'll prorate any charges.
                    </div>
                </div>
                
                <div class="faq-item">
                    <div class="faq-question">
                        <span>What payment methods do you accept?</span>
                        <i class="bi bi-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        We accept all major credit cards (Visa, MasterCard, American Express) through our secure payment processor, Stripe. We also support online banking and e-wallet payments.
                    </div>
                </div>
                
                <div class="faq-item">
                    <div class="faq-question">
                        <span>Is my data secure?</span>
                        <i class="bi bi-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        Yes! We use bank-level encryption (256-bit SSL) to protect your data. Your information is backed up daily and stored securely in multiple locations. We're fully GDPR compliant.
                    </div>
                </div>
                
                <div class="faq-item">
                    <div class="faq-question">
                        <span>What's included in the AI features?</span>
                        <i class="bi bi-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        AI features include: (1) Document Extraction - automatically extract data from receipts and invoices, (2) AI Accounting Chat - ask questions about your finances in natural language, (3) AI Financial Advisor - get intelligent insights and recommendations.
                    </div>
                </div>
                
                <div class="faq-item">
                    <div class="faq-question">
                        <span>Do you offer support?</span>
                        <i class="bi bi-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        Yes! All plans include email support. We typically respond within 24 hours during business days. Premium plans get priority support with faster response times.
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="cta-section-pricing">
    <div class="container">
        <h2>Ready to Get Started?</h2>
        <p>Join hundreds of Malaysian businesses already using 3ncount2026</p>
        <a href="{% url 'landing:register' %}" class="btn btn-hero-cta" style="background: white; color: var(--primary-color);">
            <i class="bi bi-rocket-takeoff-fill"></i>
            Start Your Free 14-Day Trial
        </a>
        <p class="mt-3 mb-0" style="font-size: 1rem; opacity: 0.95;">
            No credit card required • Cancel anytime • Full feature access
        </p>
    </div>
</section>
{% endblock %}

{% block extra_js %}
<script>
    function toggleBilling(type) {
        const monthlyBtn = document.getElementById('monthly-btn');
        const annualBtn = document.getElementById('annual-btn');
        const monthlyPrices = document.querySelectorAll('.monthly-price');
        const annualPrices = document.querySelectorAll('.annual-price');
        
        if (type === 'monthly') {
            monthlyBtn.classList.add('active');
            annualBtn.classList.remove('active');
            monthlyPrices.forEach(el => el.style.display = 'block');
            annualPrices.forEach(el => el.style.display = 'none');
        } else {
            annualBtn.classList.add('active');
            monthlyBtn.classList.remove('active');
            annualPrices.forEach(el => el.style.display = 'block');
            monthlyPrices.forEach(el => el.style.display = 'none');
        }
    }
    
    // FAQ toggle
    document.querySelectorAll('.faq-item').forEach(item => {
        const question = item.querySelector('.faq-question');
        const answer = item.querySelector('.faq-answer');
        const icon = question.querySelector('i');
        
        answer.style.display = 'none';
        
        question.addEventListener('click', () => {
            const isOpen = answer.style.display === 'block';
            
            if (isOpen) {
                answer.style.display = 'none';
                icon.classList.remove('bi-chevron-up');
                icon.classList.add('bi-chevron-down');
            } else {
                answer.style.display = 'block';
                icon.classList.remove('bi-chevron-down');
                icon.classList.add('bi-chevron-up');
            }
        });
    });
</script>
{% endblock %}