{% extends 'base.html' %}

{% block content %}
<div class="container py-5">
    <div class="text-center mb-5">
        <h1>Our Pricing</h1>
        <p class="lead">Choose the plan that's right for you.</p>
    </div>

    <div class="row">
        <div class="col-lg-6">
            <div class="card mb-4 rounded-3 shadow-sm">
                <div class="card-header py-3">
                    <h4 class="my-0 fw-normal">Websites</h4>
                </div>
                <div class="card-body">
                    <h1 class="card-title pricing-card-title">$500 <small class="text-muted fw-light">upfront</small></h1>
                    <ul class="list-unstyled mt-3 mb-4">
                        <li>+ $100/month maintenance</li>
                        <li>Custom website design</li>
                        <li>Hosting and domain support</li>
                        <li>24/7 customer support</li>
                    </ul>
                    <a href="{% url 'payment' %}?product=website" class="w-100 btn btn-lg btn-outline-primary">Get Started</a>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card mb-4 rounded-3 shadow-sm">
                <div class="card-header py-3">
                    <h4 class="my-0 fw-normal">AI Agents</h4>
                </div>
                <div class="card-body">
                    <h1 class="card-title pricing-card-title">$1000 <small class="text-muted fw-light">upfront</small></h1>
                    <ul class="list-unstyled mt-3 mb-4">
                        <li>+ $500/month maintenance</li>
                        <li>Custom AI agent development</li>
                        <li>Integration with your systems</li>
                        <li>24/7 customer support</li>
                    </ul>
                    <a href="{% url 'payment' %}?product=agent" class="w-100 btn btn-lg btn-primary">Get Started</a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}