{% extends 'public/base.html' %}

{% block title %}Pricing | ChatLab - AI Sales Agent{% endblock %}

{% block content %}
<main class="pricing-section">
    <h1 class="hero-title animate-enter">Simple, Transparent <span class="gradient-text glow-text">Pricing</span></h1>
    <p class="hero-subtitle animate-enter stagger-1" style="margin: 0 auto;">Choose the plan that best fits your enterprise conversational AI needs.</p>
    
    <div class="pricing-grid">
        <!-- Basic Plan -->
        <div class="pricing-card animate-enter stagger-1">
            <h3 style="color: var(--primary);">{{ settings.pricing_basic_name|default:"Starter" }}</h3>
            <div class="pricing-price">{{ settings.pricing_basic_price|default:"$49/mo" }}</div>
            <ul class="pricing-features">
                {% for feature in settings.pricing_basic_features.splitlines %}
                <li>
                    <svg width="20" height="20" fill="none" stroke="var(--primary)" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                    {{ feature }}
                </li>
                {% endfor %}
            </ul>
            <a href="{% url 'login' %}" class="btn btn-secondary" style="width: 100%;">Get Started</a>
        </div>
        
        <!-- Pro Plan -->
        <div class="pricing-card animate-enter stagger-2" style="border-color: var(--primary); box-shadow: 0 10px 40px rgba(99, 102, 241, 0.1);">
            <div style="position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--accent-gradient); color: white; padding: 2px 12px; border-radius: 12px; font-size: 0.75rem; font-weight: bold;">MOST POPULAR</div>
            <h3 style="color: var(--accent);">{{ settings.pricing_pro_name|default:"Professional" }}</h3>
            <div class="pricing-price">{{ settings.pricing_pro_price|default:"$99/mo" }}</div>
            <ul class="pricing-features">
                {% for feature in settings.pricing_pro_features.splitlines %}
                <li>
                    <svg width="20" height="20" fill="none" stroke="var(--accent)" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                    {{ feature }}
                </li>
                {% endfor %}
            </ul>
            <a href="{% url 'login' %}" class="btn btn-primary" style="width: 100%;">Get Started</a>
        </div>
        
        <!-- Enterprise Plan -->
        <div class="pricing-card animate-enter stagger-3">
            <h3 style="color: var(--success);">{{ settings.pricing_ent_name|default:"Enterprise" }}</h3>
            <div class="pricing-price">{{ settings.pricing_ent_price|default:"Custom" }}</div>
            <ul class="pricing-features">
                {% for feature in settings.pricing_ent_features.splitlines %}
                <li>
                    <svg width="20" height="20" fill="none" stroke="var(--success)" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                    {{ feature }}
                </li>
                {% endfor %}
            </ul>
            <a href="{% url 'contact' %}" class="btn btn-secondary" style="width: 100%;">Contact Us</a>
        </div>
    </div>
</main>
{% endblock %}