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

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

{% block head %}
    <link rel="stylesheet" href="/static/css/components/pricing.css">
{% endblock %}

{% block content %}
<main>
    <section class="pricing-hero">
        <h1>Simple, Transparent Pricing</h1>
        <p>Find the perfect plan for your needs.</p>
        <div class="pricing-toggle">
            <button class="btn-toggle active" data-period="monthly">Monthly</button>
            <button class="btn-toggle" data-period="annually">Annually</button>
        </div>
    </section>

    <section class="pricing-tiers">
        <div class="pricing-card">
            <h3>Free</h3>
            <p class="price">$0<span>/month</span></p>
            <ul>
                <li>1 GB Storage</li>
                <li>Basic Sync & Share</li>
                <li>Standard Support</li>
            </ul>
            <a href="/register" class="btn-primary">Get Started</a>
        </div>

        <div class="pricing-card featured">
            <h3>Personal</h3>
            <p class="price">$9<span>/month</span></p>
            <ul>
                <li>100 GB Storage</li>
                <li>Advanced Sync & Share</li>
                <li>Priority Support</li>
                <li>Version History</li>
            </ul>
            <a href="/register" class="btn-primary">Sign Up Now</a>
        </div>

        <div class="pricing-card">
            <h3>Professional</h3>
            <p class="price">$29<span>/month</span></p>
            <ul>
                <li>1 TB Storage</li>
                <li>Team Collaboration</li>
                <li>24/7 Premium Support</li>
                <li>Advanced Security</li>
            </ul>
            <a href="/register" class="btn-primary">Sign Up Now</a>
        </div>

        <div class="pricing-card">
            <h3>Business</h3>
            <p class="price">$99<span>/month</span></p>
            <ul>
                <li>Unlimited Storage</li>
                <li>Custom Solutions</li>
                <li>Dedicated Account Manager</li>
                <li>Advanced Analytics</li>
            </ul>
            <a href="/support" class="btn-primary">Contact Sales</a>
        </div>
    </section>

    <section class="pricing-faq">
        <h2>Frequently Asked Questions</h2>
        <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>
        <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>
    </section>
</main>
{% endblock %}