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

{% block title %}3ncount2026 - AI-Powered Accounting Platform for Malaysian SMEs{% endblock %}

{% block extra_css %}
<style>
    /* Hero Section */
    .hero-section {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 5rem 0 4rem;
        position: relative;
        overflow: hidden;
    }
    
    .hero-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('https://images.pexels.com/photos/590041/pexels-photo-590041.jpeg?auto=compress&cs=tinysrgb&w=1920') center/cover;
        opacity: 0.1;
        z-index: 0;
    }
    
    .hero-content {
        position: relative;
        z-index: 1;
    }
    
    .hero-section h1 {
        font-size: 2.5rem;
        font-weight: 800;
        margin-bottom: 1.25rem;
        line-height: 1.2;
    }
    
    .hero-section p.lead {
        font-size: 1.125rem;
        margin-bottom: 2rem;
        opacity: 0.95;
    }
    
    .hero-cta-group {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
        align-items: center;
        margin-bottom: 2.5rem;
    }
    
    .btn-hero-primary {
        background: white;
        color: var(--primary-color);
        padding: 0.75rem 2rem;
        font-weight: 700;
        font-size: 1rem;
        border-radius: 0.5rem;
        border: none;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .btn-hero-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
        color: var(--primary-dark);
    }
    
    .btn-hero-secondary {
        background: transparent;
        color: white;
        padding: 0.75rem 2rem;
        font-weight: 600;
        font-size: 1rem;
        border-radius: 0.5rem;
        border: 2px solid white;
        transition: all 0.3s ease;
    }
    
    .btn-hero-secondary:hover {
        background: white;
        color: var(--primary-color);
        transform: translateY(-3px);
    }
    
    .hero-image {
        border-radius: 0.75rem;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }
    
    .trust-badges {
        display: flex;
        gap: 2rem;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 2rem;
        opacity: 0.95;
    }
    
    .trust-badge {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.9375rem;
        font-weight: 600;
    }
    
    .trust-badge i {
        font-size: 1.25rem;
    }
    
    /* Features Section */
    .features-section {
        padding: 5rem 0;
        background: var(--light-bg);
    }
    
    .section-header {
        text-align: center;
        margin-bottom: 4rem;
    }
    
    .section-header h2 {
        font-size: 2.25rem;
        font-weight: 800;
        color: var(--text-primary);
        margin-bottom: 1rem;
    }
    
    .section-header p {
        font-size: 1.125rem;
        color: var(--text-secondary);
        max-width: 700px;
        margin: 0 auto;
    }
    
    .feature-card {
        background: white;
        padding: 2rem;
        border-radius: 0.75rem;
        height: 100%;
        transition: all 0.3s ease;
        border: 2px solid #e2e8f0;
    }
    
    .feature-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
        border-color: var(--primary-color);
    }
    
    .feature-icon {
        width: 60px;
        height: 60px;
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1.25rem;
    }
    
    .feature-icon i {
        font-size: 1.5rem;
        color: white;
    }
    
    .feature-card h3 {
        font-size: 1.125rem;
        font-weight: 700;
        margin-bottom: 0.75rem;
        color: var(--text-primary);
    }
    
    .feature-card p {
        color: var(--text-secondary);
        margin-bottom: 0;
        font-size: 0.9375rem;
    }
    
    /* Testimonials */
    .testimonial-section {
        padding: 5rem 0;
        background: white;
    }
    
    .testimonial-card {
        background: var(--light-bg);
        padding: 2rem;
        border-radius: 0.75rem;
        height: 100%;
    }
    
    .testimonial-text {
        font-style: italic;
        color: var(--text-secondary);
        margin-bottom: 1.25rem;
        font-size: 0.9375rem;
    }
    
    .testimonial-author {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    
    .author-avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 700;
        font-size: 1.125rem;
    }
    
    .author-info h5 {
        margin: 0;
        font-size: 1rem;
        font-weight: 700;
    }
    
    .author-info p {
        margin: 0;
        font-size: 0.875rem;
        color: var(--text-secondary);
    }
    
    /* Pricing Preview */
    .pricing-preview-section {
        padding: 5rem 0;
        background: var(--light-bg);
    }
    
    .pricing-card-home {
        background: white;
        border-radius: 1rem;
        padding: 2.5rem;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
        height: 100%;
        transition: all 0.3s ease;
        border: 2px solid transparent;
        position: relative;
    }
    
    .pricing-card-home:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    }
    
    .pricing-card-home.featured {
        border-color: var(--primary-color);
        transform: scale(1.03);
    }
    
    .pricing-card-home.featured:hover {
        transform: scale(1.03) translateY(-8px);
    }
    
    .pricing-badge {
        position: absolute;
        top: -12px;
        right: 25px;
        background: var(--secondary-color);
        color: white;
        padding: 0.375rem 1.25rem;
        border-radius: 1.5rem;
        font-size: 0.8125rem;
        font-weight: 700;
        box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
    }
    
    .pricing-card-home h3 {
        font-size: 1.5rem;
        font-weight: 800;
        margin-bottom: 0.75rem;
    }
    
    .pricing-price {
        font-size: 2.5rem;
        font-weight: 900;
        color: var(--primary-color);
        margin: 1.25rem 0;
        display: flex;
        align-items: baseline;
        gap: 0.375rem;
    }
    
    .pricing-price small {
        font-size: 1rem;
        color: var(--text-secondary);
        font-weight: 500;
    }
    
    .pricing-features {
        list-style: none;
        padding: 0;
        margin: 1.5rem 0 2rem;
    }
    
    .pricing-features li {
        padding: 0.75rem 0;
        border-bottom: 1px solid #e2e8f0;
        font-size: 0.9375rem;
    }
    
    .pricing-features li:last-child {
        border-bottom: none;
    }
    
    .pricing-features i {
        color: var(--secondary-color);
        margin-right: 0.5rem;
        font-size: 1.125rem;
    }
    
    /* CTA Section */
    .cta-section {
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
        color: white;
        padding: 5rem 0;
        text-align: center;
    }
    
    .cta-section h2 {
        font-size: 2.5rem;
        font-weight: 800;
        margin-bottom: 1.25rem;
    }
    
    .cta-section p {
        font-size: 1.125rem;
        margin-bottom: 2rem;
        opacity: 0.95;
    }
    
    .cta-button-group {
        display: flex;
        gap: 1.25rem;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .btn-cta-white {
        background: white;
        color: var(--primary-color);
        padding: 0.875rem 2.5rem;
        font-weight: 700;
        font-size: 1rem;
        border-radius: 0.5rem;
        border: none;
        box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 0.625rem;
    }
    
    .btn-cta-white:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 16px rgba(255, 255, 255, 0.4);
        color: var(--primary-dark);
    }
    
    /* Responsive */
    @media (max-width: 768px) {
        .hero-section h1 {
            font-size: 1.875rem;
        }
        
        .hero-section p.lead {
            font-size: 1rem;
        }
        
        .section-header h2 {
            font-size: 1.75rem;
        }
        
        .cta-section h2 {
            font-size: 1.875rem;
        }
        
        .pricing-card-home.featured {
            transform: none;
        }
    }
</style>
{% endblock %}

{% block content %}
<!-- Hero Section -->
<section class="hero-section">
    <div class="container hero-content">
        <div class="row align-items-center">
            <div class="col-lg-6 mb-4 mb-lg-0">
                <h1>AI-Powered Accounting for Malaysian Businesses</h1>
                <p class="lead">
                    Transform your accounting with intelligent automation. LHDN compliant, AI-powered, built for SMEs.
                </p>
                <div class="hero-cta-group">
                    <a href="{% url 'landing:register' %}" class="btn btn-hero-primary">
                        <i class="bi bi-rocket-takeoff-fill"></i>
                        Start Free 14-Day Trial
                    </a>
                    <a href="{% url 'landing:pricing' %}" class="btn btn-hero-secondary">
                        View Pricing
                    </a>
                </div>
                <div class="trust-badges">
                    <div class="trust-badge">
                        <i class="bi bi-shield-fill-check"></i>
                        <span>LHDN Compliant</span>
                    </div>
                    <div class="trust-badge">
                        <i class="bi bi-lock-fill"></i>
                        <span>Bank-Level Security</span>
                    </div>
                    <div class="trust-badge">
                        <i class="bi bi-award-fill"></i>
                        <span>No Credit Card Required</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <img src="https://images.pexels.com/photos/7947662/pexels-photo-7947662.jpeg?auto=compress&cs=tinysrgb&w=900" 
                     alt="AI Accounting Dashboard" 
                     class="img-fluid hero-image">
            </div>
        </div>
    </div>
</section>

<!-- Features Section -->
<section class="features-section" id="features">
    <div class="container">
        <div class="section-header">
            <h2>Complete Accounting Solution</h2>
            <p>Everything you need to manage your business finances efficiently</p>
        </div>
        
        <div class="row g-4">
            <div class="col-lg-4 col-md-6">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="bi bi-receipt"></i>
                    </div>
                    <h3>Invoice & Bill Management</h3>
                    <p>Create professional invoices and bills. Track payments, send reminders, and manage receivables/payables with SST calculation.</p>
                </div>
            </div>
            
            <div class="col-lg-4 col-md-6">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="bi bi-calculator"></i>
                    </div>
                    <h3>Transaction Recording</h3>
                    <p>Record all financial transactions with double-entry bookkeeping. Full audit trail and journal entries tracking.</p>
                </div>
            </div>
            
            <div class="col-lg-4 col-md-6">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="bi bi-bar-chart-fill"></i>
                    </div>
                    <h3>Financial Reports</h3>
                    <p>Profit & Loss, Balance Sheet, Cash Flow, Trial Balance, General Ledger - all in real-time.</p>
                </div>
            </div>
            
            <div class="col-lg-4 col-md-6">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="bi bi-robot"></i>
                    </div>
                    <h3>AI Document Extraction</h3>
                    <p>Upload receipts, invoices, or bank statements. AI extracts data automatically with 95%+ accuracy.</p>
                </div>
            </div>
            
            <div class="col-lg-4 col-md-6">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="bi bi-chat-dots-fill"></i>
                    </div>
                    <h3>AI Accounting Chat</h3>
                    <p>Ask questions about your finances. Get instant answers about balances, transactions, and reports.</p>
                </div>
            </div>
            
            <div class="col-lg-4 col-md-6">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="bi bi-lightbulb-fill"></i>
                    </div>
                    <h3>AI Financial Advisor</h3>
                    <p>Get intelligent insights and recommendations to improve cash flow and reduce costs.</p>
                </div>
            </div>
            
            <div class="col-lg-4 col-md-6">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="bi bi-file-earmark-text-fill"></i>
                    </div>
                    <h3>LHDN Borang B Filing</h3>
                    <p>Automatic LHDN Borang B tax form generation. Fixed assets, owner equity, and tax report compliant.</p>
                </div>
            </div>
            
            <div class="col-lg-4 col-md-6">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="bi bi-bank2"></i>
                    </div>
                    <h3>Bank Reconciliation</h3>
                    <p>Upload bank statements. Match transactions automatically. Identify discrepancies instantly.</p>
                </div>
            </div>
            
            <div class="col-lg-4 col-md-6">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="bi bi-shop"></i>
                    </div>
                    <h3>POS & Inventory</h3>
                    <p>Point of Sale system with inventory management. Track stock, sales, and products in real-time.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Testimonials Section -->
<section class="testimonial-section" id="testimonials">
    <div class="container">
        <div class="section-header">
            <h2>Trusted by Malaysian Businesses</h2>
            <p>See what our customers say about their accounting transformation</p>
        </div>
        
        <div class="row g-4">
            <div class="col-lg-4 col-md-6">
                <div class="testimonial-card">
                    <div class="testimonial-text">
                        "3ncount2026 transformed our accounting. The AI document extraction saves us 10+ hours weekly. LHDN Borang B generation is a lifesaver during tax season!"
                    </div>
                    <div class="testimonial-author">
                        <div class="author-avatar">AH</div>
                        <div class="author-info">
                            <h5>Ahmad Hassan</h5>
                            <p>Owner, Hassan Trading Sdn Bhd</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4 col-md-6">
                <div class="testimonial-card">
                    <div class="testimonial-text">
                        "As an accountant, I recommend 3ncount2026 to all my SME clients. Intuitive interface, powerful features, perfectly tailored for Malaysian businesses."
                    </div>
                    <div class="testimonial-author">
                        <div class="author-avatar">LM</div>
                        <div class="author-info">
                            <h5>Lisa Mah</h5>
                            <p>Certified Accountant</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4 col-md-6">
                <div class="testimonial-card">
                    <div class="testimonial-text">
                        "The POS integration is fantastic! We manage our cafe's sales, inventory, and accounts all in one place. Customer support is responsive and helpful."
                    </div>
                    <div class="testimonial-author">
                        <div class="author-avatar">RK</div>
                        <div class="author-info">
                            <h5>Raj Kumar</h5>
                            <p>Manager, Kopitiam Corner</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Pricing Preview -->
<section class="pricing-preview-section">
    <div class="container">
        <div class="section-header">
            <h2>Simple, Transparent Pricing</h2>
            <p>Choose the perfect plan for your business. All plans include 14-day free trial.</p>
        </div>
        
        <div class="row justify-content-center g-4">
            {% for plan in plans %}
            <div class="col-lg-4 col-md-6">
                <div class="pricing-card-home {% if forloop.counter == 2 %}featured{% endif %}">
                    {% if forloop.counter == 2 %}
                    <div class="pricing-badge">Most Popular</div>
                    {% endif %}
                    
                    <h3>{{ plan.name }}</h3>
                    <p class="text-muted">{{ plan.description|default:"Perfect for growing businesses"|truncatewords:8 }}</p>
                    
                    <div class="pricing-price">
                        <span>RM{{ plan.price_monthly }}</span>
                        <small>/month</small>
                    </div>
                    
                    <ul class="pricing-features">
                        <li><i class="bi bi-check-circle-fill"></i> <strong>{{ plan.max_users }}</strong> User{% if plan.max_users > 1 %}s{% endif %}</li>
                        <li><i class="bi bi-check-circle-fill"></i> 
                            {% if plan.max_transactions_per_month == -1 %}
                                <strong>Unlimited</strong> Transactions
                            {% else %}
                                <strong>{{ plan.max_transactions_per_month }}</strong> Transactions/month
                            {% endif %}
                        </li>
                        <li><i class="bi bi-check-circle-fill"></i> Core Accounting Features</li>
                        <li><i class="bi bi-check-circle-fill"></i> Financial Reports</li>
                        
                        {% if plan.ai_documents_enabled %}
                        <li><i class="bi bi-check-circle-fill"></i> <strong>AI Document Extraction</strong></li>
                        {% endif %}
                        
                        {% if plan.pos_enabled %}
                        <li><i class="bi bi-check-circle-fill"></i> <strong>POS & Inventory</strong></li>
                        {% endif %}
                        
                        {% if plan.lhdn_borang_b_enabled %}
                        <li><i class="bi bi-check-circle-fill"></i> <strong>LHDN Borang B</strong></li>
                        {% endif %}
                    </ul>
                    
                    <a href="{% url 'landing:register' %}?plan={{ plan.slug }}" 
                       class="btn btn-primary-custom w-100">
                        <i class="bi bi-rocket-takeoff me-2"></i>Start Free Trial
                    </a>
                </div>
            </div>
            {% endfor %}
        </div>
        
        <div class="text-center mt-4">
            <a href="{% url 'landing:pricing' %}" class="btn btn-outline-custom">
                <i class="bi bi-grid-3x3-gap me-2"></i>View All Plans & Features
            </a>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="cta-section">
    <div class="container">
        <h2>Ready to Transform Your Accounting?</h2>
        <p>Join hundreds of Malaysian businesses already using 3ncount2026</p>
        <div class="cta-button-group">
            <a href="{% url 'landing:register' %}" class="btn btn-cta-white">
                <i class="bi bi-rocket-takeoff-fill"></i>
                Start Your Free Trial Now
            </a>
            <a href="{% url 'landing:contact' %}" class="btn btn-hero-secondary">
                <i class="bi bi-chat-dots-fill"></i>
                Contact Sales
            </a>
        </div>
        <p class="mt-4 mb-0" style="font-size: 1rem; opacity: 0.95;">
            <i class="bi bi-check-circle-fill me-2"></i>No credit card required 
            <i class="bi bi-check-circle-fill mx-2"></i>14-day free trial 
            <i class="bi bi-check-circle-fill mx-2"></i>Cancel anytime
        </p>
    </div>
</section>
{% endblock %}

{% block extra_js %}
<script>
    // Smooth scrolling
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });
    
    // Scroll animations
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };
    
    const observer = new IntersectionObserver(function(entries) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
            }
        });
    }, observerOptions);
    
    document.querySelectorAll('.feature-card, .testimonial-card, .pricing-card-home').forEach(card => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(20px)';
        card.style.transition = 'all 0.5s ease';
        observer.observe(card);
    });
</script>
{% endblock %}