{% extends 'base.html' %}
{% block title %}Upgrade Plan — Avighna{% endblock %}

{% block content %}

<div style="max-width:780px;margin:0 auto;">

  <div class="mb-4">
    <h4 style="font-weight:700;">⬆️ Upgrade Your Plan</h4>
    <p style="color:#888;font-size:.9rem;">
      Current plan: <strong>{{ org.get_plan_display }}</strong>
      {% if org.is_trial and not org.trial_expired %}
        — <span style="color:#1a7a4a;">{{ org.trial_days_remaining }} days remaining in trial</span>
      {% endif %}
    </p>
  </div>

  {% if messages %}
    {% for message in messages %}
      <div class="alert alert-{% if message.tags == 'error' %}danger{% else %}success{% endif %} mb-3">
        {{ message }}
      </div>
    {% endfor %}
  {% endif %}

  <form method="POST" action="/upgrade/">
    {% csrf_token %}

    <div class="row g-4">

      <!-- Starter -->
      <div class="col-md-4">
        <div style="background:white;border:2px solid #e8ecf0;border-radius:16px;padding:26px 20px;height:100%;transition:.2s;">
          <div style="font-size:.78rem;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;">Starter</div>
          <div style="font-size:1.9rem;font-weight:700;color:#1a3c5e;line-height:1;margin-bottom:4px;">₹999 <span style="font-size:.9rem;font-weight:400;color:#888;">/month</span></div>
          <hr>
          <div style="font-size:.85rem;color:#444;line-height:2.2;">
            <div>✅ 100 verifications/month</div>
            <div>✅ 2 staff accounts</div>
            <div>✅ Visitor dashboard</div>
            <div style="color:#ccc;">✗ Excel export</div>
          </div>
          <button type="submit" name="plan" value="starter"
            style="display:block;width:100%;margin-top:18px;padding:11px;border-radius:24px;font-weight:600;font-size:.9rem;cursor:pointer;border:2px solid #1a3c5e;color:#1a3c5e;background:transparent;font-family:inherit;transition:.2s;"
            onmouseover="this.style.background='#1a3c5e';this.style.color='white'"
            onmouseout="this.style.background='transparent';this.style.color='#1a3c5e'"
          >
            Choose Starter
          </button>
        </div>
      </div>

      <!-- Business -->
      <div class="col-md-4">
        <div style="background:white;border:2px solid #e8a020;border-radius:16px;padding:26px 20px;height:100%;position:relative;">
          <div style="position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:#e8a020;color:white;font-size:.72rem;font-weight:700;padding:4px 16px;border-radius:20px;white-space:nowrap;">Most Popular</div>
          <div style="font-size:.78rem;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;">Business</div>
          <div style="font-size:1.9rem;font-weight:700;color:#1a3c5e;line-height:1;margin-bottom:4px;">₹2,999 <span style="font-size:.9rem;font-weight:400;color:#888;">/month</span></div>
          <hr>
          <div style="font-size:.85rem;color:#444;line-height:2.2;">
            <div>✅ 500 verifications/month</div>
            <div>✅ 5 staff accounts</div>
            <div>✅ Visitor dashboard</div>
            <div>✅ Excel export</div>
          </div>
          <button type="submit" name="plan" value="business"
            style="display:block;width:100%;margin-top:18px;padding:11px;border-radius:24px;font-weight:600;font-size:.9rem;cursor:pointer;border:none;color:white;background:#1a3c5e;font-family:inherit;"
          >
            Choose Business
          </button>
        </div>
      </div>

      <!-- Enterprise -->
      <div class="col-md-4">
        <div style="background:white;border:2px solid #e8ecf0;border-radius:16px;padding:26px 20px;height:100%;">
          <div style="font-size:.78rem;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;">Enterprise</div>
          <div style="font-size:1.9rem;font-weight:700;color:#1a3c5e;line-height:1;margin-bottom:4px;">₹7,999 <span style="font-size:.9rem;font-weight:400;color:#888;">/month</span></div>
          <hr>
          <div style="font-size:.85rem;color:#444;line-height:2.2;">
            <div>✅ Unlimited verifications</div>
            <div>✅ Unlimited staff accounts</div>
            <div>✅ Visitor dashboard</div>
            <div>✅ Excel export</div>
          </div>
          <button type="submit" name="plan" value="enterprise"
            style="display:block;width:100%;margin-top:18px;padding:11px;border-radius:24px;font-weight:600;font-size:.9rem;cursor:pointer;border:2px solid #1a3c5e;color:#1a3c5e;background:transparent;font-family:inherit;transition:.2s;"
            onmouseover="this.style.background='#1a3c5e';this.style.color='white'"
            onmouseout="this.style.background='transparent';this.style.color='#1a3c5e'"
          >
            Choose Enterprise
          </button>
        </div>
      </div>

    </div>
  </form>

  <div style="text-align:center;margin-top:20px;font-size:.84rem;color:#aaa;">
    Questions? Contact <a href="mailto:support@avighnasolution.in" style="color:#1a3c5e;">support@avighnasolution.in</a>
  </div>

</div>

{% endblock %}