{% extends 'base.html' %}
{% block extra_css %}
<style>
    .pricing-head { text-align: center; max-width: 40rem; margin: 0 auto 2.5rem; }
    .pricing-head h2 { font-weight: 800; }
    .pricing-head h2 i { color: var(--accent); }
    .pricing-head p { color: var(--muted); }
    .plan-card { position: relative; height: 100%; padding: 2rem 1.75rem; display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease; }
    .plan-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
    .plan-card.featured { border: 1.5px solid var(--primary); box-shadow: var(--shadow-md); }
    .plan-flag {
        position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
        background: var(--grad); color: #fff; font-size: .72rem; font-weight: 700;
        letter-spacing: .04em; text-transform: uppercase; padding: .35rem .9rem; border-radius: 999px;
        box-shadow: 0 8px 16px rgba(5,150,105,.3);
    }
    .plan-name { font-weight: 700; font-size: 1.1rem; margin-bottom: .25rem; }
    .plan-price { font-weight: 800; font-size: 2.2rem; margin: .5rem 0 .1rem; }
    .plan-price .accent { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .plan-duration { color: var(--muted); font-size: .9rem; margin-bottom: 1.25rem; }
    .plan-features { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .65rem; }
    .plan-features li { display: flex; align-items: center; gap: .6rem; font-size: .92rem; }
    .plan-features li i { color: var(--primary); }
    .plan-card form { margin-top: auto; }
    .current-plan-band { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); text-align: center; padding: 1.5rem; margin-top: 1rem; }
    .current-plan-band h5 i { color: var(--secondary); }
</style>
{% endblock %}
{% block content %}
<div class="pricing-head">
    <h2><i class="fas fa-crown"></i> Choose your plan</h2>
    <p>Unlock unlimited exam generation with premium plans &mdash; pay securely with M-Pesa.</p>
</div>
<div class="row justify-content-center g-4 mb-4">
    {% for plan in plans %}
    {% set featured = plan.type == 'institution' %}
    <div class="col-md-5 col-lg-4">
        <div class="card plan-card {{ 'featured' if featured else '' }}">
            {% if featured %}<span class="plan-flag">Most popular</span>{% endif %}
            <div class="plan-name">{{ plan.name }}</div>
            <div class="plan-price"><span class="accent">KSh {{ plan.price|int }}</span></div>
            <div class="plan-duration">{{ plan.duration }}</div>
            <ul class="plan-features">
                <li><i class="fas fa-check"></i> Unlimited exam generation</li>
                <li><i class="fas fa-check"></i> PDF &amp; Word export</li>
                <li><i class="fas fa-check"></i> AI question generation</li>
                <li><i class="fas fa-check"></i> Marking schemes</li>
                <li><i class="fas fa-check"></i> Priority support</li>
            </ul>
            <form action="{{ url_for('payments.initiate_payment', plan_type=plan.type) }}" method="POST">
                <div class="mb-3 text-start">
                    <label for="phone_{{ plan.type }}" class="form-label">M-Pesa phone number</label>
                    <input type="text" class="form-control" id="phone_{{ plan.type }}" name="phone" placeholder="e.g. 0712345678" value="{{ current_user.phone or '' }}" required>
                </div>
                <button type="submit" class="btn {{ 'btn-primary text-white' if featured else 'btn-outline-secondary' }} w-100">
                    <i class="fas fa-mobile-alt me-1"></i> Pay with M-Pesa
                </button>
            </form>
        </div>
    </div>
    {% endfor %}
</div>
<div class="current-plan-band">
    <h5 class="fw-bold mb-1"><i class="fas fa-circle-info me-1"></i> Current plan: {{ current_user.subscription_type|title }}</h5>
    <p class="text-muted mb-0">{{ current_user.exams_generated }} of {{ current_user.max_exams }} free exams used</p>
</div>
{% endblock %}