{% extends "layouts/base.html" %}

{% block title %}Pricing - Retoor's Cloud Solutions{% endblock %}

{% block content %}
<main>
    <section class="hero-intro">
        <h1 class="hero-headline">Flexible Pricing for Every Need</h1>
        <p class="hero-subheadline">Find the perfect plan for your business, team, or individual use.</p>
    </section>

    <section class="pricing-plans">
        <div class="plan-card">
            <h2>Basic Plan</h2>
            <p class="price">$9.99<span>/month</span></p>
            <ul>
                <li><i class="icon-check"></i> 100 GB Storage</li>
                <li><i class="icon-check"></i> Basic File Sharing</li>
                <li><i class="icon-check"></i> Email Support</li>
            </ul>
            <a href="/register" class="btn-primary">Get Started</a>
        </div>

        <div class="plan-card featured">
            <h2>Pro Plan</h2>
            <p class="price">$19.99<span>/month</span></p>
            <ul>
                <li><i class="icon-check"></i> 1 TB Storage</li>
                <li><i class="icon-check"></i> Advanced File Sharing</li>
                <li><i class="icon-check"></i> Priority Email Support</li>
                <li><i class="icon-check"></i> Version History</li>
            </ul>
            <a href="/register" class="btn-primary">Choose Pro</a>
        </div>

        <div class="plan-card">
            <h2>Enterprise Plan</h2>
            <p class="price">Custom</p>
            <ul>
                <li><i class="icon-check"></i> Unlimited Storage</li>
                <li><i class="icon-check"></i> Dedicated Support</li>
                <li><i class="icon-check"></i> Advanced Security Features</li>
                <li><i class="icon-check"></i> Custom Integrations</li>
            </ul>
            <a href="/support" class="btn-outline">Contact Sales</a>
        </div>
    </section>

    <section class="faq-section">
        <h2>Frequently Asked Questions</h2>
        <div class="faq-item">
            <h3>What payment methods do you accept?</h3>
            <p>We accept all major credit cards, PayPal, and bank transfers for annual plans.</p>
        </div>
        <div class="faq-item">
            <h3>Can I change my plan later?</h3>
            <p>Yes, you can upgrade or downgrade your plan at any time from your dashboard.</p>
        </div>
    </section>
</main>
{% endblock %}