{% extends "base.html" %}

{% block title %}Pricing - MyWebdav Cloud Storage{% endblock %}

{% block description %}Simple, transparent pay-as-you-go pricing. Only pay for what you use with no hidden fees.{% endblock %}

{% block extra_css %}
<style>
.content-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 2rem;
}

.page-title {
    font-size: 3rem;
    font-weight: 700;
    color: #1565c0;
    text-align: center;
    margin-bottom: 1rem;
}

.page-subtitle {
    font-size: 1.25rem;
    color: #666;
    text-align: center;
    margin-bottom: 3rem;
}

.pricing-hero {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
    color: white;
    padding: 3rem;
    border-radius: 12px;
    text-align: center;
    margin-bottom: 3rem;
}

.pricing-hero-amount {
    font-size: 5rem;
    font-weight: 700;
    color: #fff;
    margin: 1rem 0;
}

.pricing-hero-description {
    font-size: 1.5rem;
    opacity: 0.95;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.pricing-card {
    background: white;
    border-radius: 8px;
    padding: 2rem;
    border: 2px solid #e0e0e0;
    transition: all 0.3s;
}

.pricing-card.featured {
    border-color: #d32f2f;
    box-shadow: 0 8px 24px rgba(211, 47, 47, 0.2);
    transform: scale(1.05);
}

.pricing-card:hover {
    border-color: #1976d2;
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.1);
}

.pricing-tier {
    font-size: 1.75rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
}

.pricing-amount {
    font-size: 2.5rem;
    font-weight: 700;
    color: #d32f2f;
    margin: 1rem 0;
}

.pricing-period {
    font-size: 1rem;
    color: #666;
    margin-bottom: 1.5rem;
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.pricing-features li {
    padding: 0.75rem 0;
    color: #555;
    border-bottom: 1px solid #f0f0f0;
}

.pricing-features li:last-child {
    border-bottom: none;
}

.pricing-features li:before {
    content: "✓ ";
    color: #d32f2f;
    font-weight: bold;
    margin-right: 0.5rem;
}

.pricing-cta {
    margin-top: 1.5rem;
}

.calculator-section {
    background: #f5f5f5;
    padding: 3rem;
    border-radius: 12px;
    margin-top: 3rem;
}

.calculator-title {
    font-size: 2rem;
    font-weight: 600;
    color: #333;
    text-align: center;
    margin-bottom: 2rem;
}

.calculator-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.calculator-input-group {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
}

.calculator-label {
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
    display: block;
}

.calculator-input {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #e0e0e0;
    border-radius: 4px;
    font-size: 1rem;
}

.calculator-result {
    background: #1976d2;
    color: white;
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
}

.calculator-result-label {
    font-size: 1rem;
    opacity: 0.9;
    margin-bottom: 0.5rem;
}

.calculator-result-amount {
    font-size: 3rem;
    font-weight: 700;
}

.faq-section {
    margin-top: 4rem;
}

.faq-title {
    font-size: 2rem;
    font-weight: 600;
    color: #333;
    text-align: center;
    margin-bottom: 2rem;
}

.faq-item {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    border: 2px solid #e0e0e0;
    margin-bottom: 1rem;
}

.faq-question {
    font-weight: 600;
    color: #333;
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}

.faq-answer {
    color: #666;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .page-title {
        font-size: 2rem;
    }

    .pricing-hero-amount {
        font-size: 3.5rem;
    }

    .pricing-card.featured {
        transform: scale(1);
    }
}
</style>
{% endblock %}

{% block content %}
<div class="content-section">
    <h1 class="page-title">SIMPLE, TRANSPARENT PRICING</h1>
    <p class="page-subtitle">Pay only for what you use. No hidden fees, no surprises.</p>

    <div class="pricing-hero">
        <h2 style="font-size: 2rem; margin: 0;">Pay-As-You-Go Storage</h2>
        <div class="pricing-hero-amount">$5/TB</div>
        <p class="pricing-hero-description">Plus 15GB free tier included</p>
    </div>

    <div class="pricing-grid">
        <div class="pricing-card">
            <div class="pricing-tier">Free Tier</div>
            <div class="pricing-amount">$0</div>
            <div class="pricing-period">First 15GB included</div>
            <ul class="pricing-features">
                <li>15GB storage included</li>
                <li>15GB bandwidth per month</li>
                <li>All core features</li>
                <li>WebDAV support</li>
                <li>File versioning</li>
                <li>Two-factor authentication</li>
                <li>EU data residency</li>
            </ul>
            <div class="pricing-cta">
                <a href="/app" class="btn btn-secondary" style="width: 100%;">Get Started Free</a>
            </div>
        </div>

        <div class="pricing-card featured">
            <div class="pricing-tier">Pay-As-You-Go</div>
            <div class="pricing-amount">$5/TB</div>
            <div class="pricing-period">Billed monthly</div>
            <ul class="pricing-features">
                <li>$0.0045 per GB per month storage</li>
                <li>$0.009 per GB egress bandwidth</li>
                <li>Free ingress bandwidth</li>
                <li>All premium features</li>
                <li>99.9% uptime SLA</li>
                <li>24/7 support</li>
                <li>API access</li>
                <li>Priority support</li>
            </ul>
            <div class="pricing-cta">
                <a href="/app" class="btn btn-primary" style="width: 100%;">Start Using</a>
            </div>
        </div>

        <div class="pricing-card">
            <div class="pricing-tier">Enterprise</div>
            <div class="pricing-amount">Custom</div>
            <div class="pricing-period">Contact us for pricing</div>
            <ul class="pricing-features">
                <li>Volume discounts available</li>
                <li>Dedicated account manager</li>
                <li>Custom SLA options</li>
                <li>Priority support 24/7</li>
                <li>Custom integrations</li>
                <li>Training and onboarding</li>
                <li>Compliance assistance</li>
                <li>Dedicated infrastructure</li>
            </ul>
            <div class="pricing-cta">
                <a href="/support" class="btn btn-secondary" style="width: 100%;">Contact Sales</a>
            </div>
        </div>
    </div>

    <div class="calculator-section">
        <h2 class="calculator-title">Pricing Calculator</h2>
        <div class="calculator-grid">
            <div class="calculator-input-group">
                <label class="calculator-label">Storage (GB)</label>
                <input type="number" class="calculator-input" id="storage" value="100" min="0" oninput="calculatePrice()">
            </div>
            <div class="calculator-input-group">
                <label class="calculator-label">Bandwidth Egress (GB/month)</label>
                <input type="number" class="calculator-input" id="bandwidth" value="50" min="0" oninput="calculatePrice()">
            </div>
        </div>
        <div class="calculator-result">
            <div class="calculator-result-label">Estimated Monthly Cost</div>
            <div class="calculator-result-amount" id="result">$0.00</div>
        </div>
    </div>

    <div class="faq-section">
        <h2 class="faq-title">Frequently Asked Questions</h2>

        <div class="faq-item">
            <div class="faq-question">How is storage calculated?</div>
            <div class="faq-answer">Storage is calculated based on your average daily usage throughout the month. You're charged $0.0045 per GB per month ($5 per TB). The first 15GB is always free.</div>
        </div>

        <div class="faq-item">
            <div class="faq-question">What is bandwidth egress?</div>
            <div class="faq-answer">Bandwidth egress is data transferred out of MyWebdav (downloads). You're charged $0.009 per GB. The first 15GB per month is free. Uploads (ingress) are always free.</div>
        </div>

        <div class="faq-item">
            <div class="faq-question">Are there any hidden fees?</div>
            <div class="faq-answer">No. We believe in transparent pricing. You only pay for storage and egress bandwidth as shown. There are no setup fees, minimum charges, or surprise costs.</div>
        </div>

        <div class="faq-item">
            <div class="faq-question">Can I cancel anytime?</div>
            <div class="faq-answer">Yes. There are no long-term contracts or commitments. You can delete your account at any time and will only be charged for usage up to that point.</div>
        </div>

        <div class="faq-item">
            <div class="faq-question">What payment methods do you accept?</div>
            <div class="faq-answer">We accept all major credit cards (Visa, Mastercard, American Express) and SEPA direct debit through our payment processor Stripe.</div>
        </div>

        <div class="faq-item">
            <div class="faq-question">Do you offer volume discounts?</div>
            <div class="faq-answer">Yes. For storage over 10TB or bandwidth over 5TB per month, please contact our sales team for custom pricing.</div>
        </div>
    </div>
</div>

<script>
function calculatePrice() {
    const storage = parseFloat(document.getElementById('storage').value) || 0;
    const bandwidth = parseFloat(document.getElementById('bandwidth').value) || 0;

    const freeStorage = 15;
    const freeBandwidth = 15;

    const billableStorage = Math.max(0, storage - freeStorage);
    const billableBandwidth = Math.max(0, bandwidth - freeBandwidth);

    const storageCost = billableStorage * 0.0045;
    const bandwidthCost = billableBandwidth * 0.009;

    const total = storageCost + bandwidthCost;

    document.getElementById('result').textContent = '$' + total.toFixed(2);
}

calculatePrice();
</script>
{% endblock %}