{% extends "base.html" %}
{% block body %}
<div class="hero" style="padding-bottom:20px">
  <h1>Simple <span class="glow">pricing</span>.</h1>
  <p class="lede">Pay-per-GB residential proxies. Bitcoin only. No subscriptions, no expiry traps.</p>
</div>
<div class="grid">
  {% for p in plans %}
  <div class="card plan">
    {% if p.gb >= 100 %}<span class="tag">BEST VALUE</span>{% endif %}
    <h3>{{ p.name }}</h3>
    <div class="price">{{ p.price_sats }} <span style="font-size:16px;color:var(--muted)">sats</span></div>
    <div class="per">{{ p.gb }} GB residential traffic</div>
    <ul>
      <li>{{ p.gb }} GB residential traffic</li>
      <li>All countries &amp; cities</li>
      <li>SOCKS5 + HTTP</li>
      <li>Sticky or rotating</li>
      <li>No KYC</li>
    </ul>
    {% if user %}
    <form method="post" action="/buy/{{ p.id }}"><input type="submit" value="Buy {{ p.gb }} GB"></form>
    {% else %}
    <a class="btn btn-ghost" href="/signup">Sign up to buy</a>
    {% endif %}
  </div>
  {% endfor %}
</div>
{% endblock %}