{% extends "base.html" %}

{% block extra_head %}
<script src="https://js.stripe.com/v3/"></script>
{% endblock %}

{% block content %}
<div style="max-width: 800px; margin: 0 auto;">
    <h2 style="text-align: center; margin-bottom: 2rem; color: #00ff88;">Upgrade to Premium</h2>

    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 3rem;">
        <div class="card">
            <h3 style="color: #fff; margin-bottom: 1rem;">Free</h3>
            <p style="font-size: 2rem; color: #00ff88; margin-bottom: 1rem;">$0<span style="font-size: 1rem; color: #666;">/month</span></p>
            <ul style="list-style: none; padding: 0;">
                <li style="padding: 0.5rem 0;">✓ Git pre-commit hook</li>
                <li style="padding: 0.5rem 0;">✓ CLI scanning</li>
                <li style="padding: 0.5rem 0;">✓ Text reports</li>
                <li style="padding: 0.5rem 0; color: #666;">✗ Web dashboard</li>
                <li style="padding: 0.5rem 0; color: #666;">✗ Corruption history</li>
                <li style="padding: 0.5rem 0; color: #666;">✗ Webhook alerts</li>
            </ul>
        </div>

        <div class="card" style="border: 2px solid #00ff88;">
            <h3 style="color: #00ff88; margin-bottom: 1rem;">Premium</h3>
            <p style="font-size: 2rem; color: #00ff88; margin-bottom: 1rem;">$19<span style="font-size: 1rem; color: #666;">/month</span></p>
            <ul style="list-style: none; padding: 0;">
                <li style="padding: 0.5rem 0;">✓ Everything in Free</li>
                <li style="padding: 0.5rem 0;">✓ Web dashboard</li>
                <li style="padding: 0.5rem 0;">✓ Corruption history</li>
                <li style="padding: 0.5rem 0;">✓ Visual diffs</li>
                <li style="padding: 0.5rem 0;">✓ Slack/Discord webhooks</li>
                <li style="padding: 0.5rem 0;">✓ PDF audit reports</li>
                <li style="padding: 0.5rem 0;">✓ Custom rules</li>
            </ul>
            <button id="checkout-button" class="btn" style="width: 100%; margin-top: 1.5rem;">
                Subscribe Now
            </button>
        </div>
    </div>

    <div class="card">
        <h3 style="color: #fff; margin-bottom: 1rem;">Why Premium?</h3>
        <p style="margin-bottom: 1rem;">
            The CLI tool catches corruption at commit time. Premium gives you the forensic tools to understand:
        </p>
        <ul style="padding-left: 2rem; line-height: 2;">
            <li>Which documents corrupt most often</li>
            <li>Which LLM (Claude vs GPT) introduces more errors</li>
            <li>Trends over time (is it getting worse?)</li>
            <li>Team-wide visibility with Slack alerts</li>
            <li>Compliance-ready audit trails</li>
        </ul>
    </div>
</div>

<script>
    var stripe = Stripe('{{ stripe_publishable_key }}');
    var checkoutButton = document.getElementById('checkout-button');

    checkoutButton.addEventListener('click', function() {
        fetch('/create-checkout-session', {
            method: 'POST',
        })
        .then(function(response) {
            return response.json();
        })
        .then(function(session) {
            return stripe.redirectToCheckout({ sessionId: session.sessionId });
        })
        .then(function(result) {
            if (result.error) {
                alert(result.error.message);
            }
        })
        .catch(function(error) {
            console.error('Error:', error);
        });
    });
</script>
{% endblock %}