{% extends "base.html" %}
{% block title %}Mobile — Clean Proxys{% endblock %}
{% block body %}
<div class="hero" style="padding:64px 0 28px">
  <h1 style="font-size:36px">Mobile <span class="grad">proxies</span>.</h1>
  <p class="lede">4G carrier, static mobile, and premium residential IPs — sourced and delivered by Clean Proxys. You pay, we provision, you connect.</p>
</div>

{% if err %}
<div class="flash warn">Mobile catalog is temporarily unavailable: {{ err }}<br><span class="muted">(The catalog below still shows what's offered.)</span></div>
{% else %}
<div class="statsbar">
  <div class="s"><div class="n grad">${{ account.balance_usd if account else '—' }}</div><div class="l">Account balance</div></div>
  <div class="s"><div class="n grad">{{ account.username if account else '—' }}</div><div class="l">Account</div></div>
</div>
{% endif %}

<div class="grid">
  {% for key, p in products.items() %}
  <div class="card plan">
    <h3>{{ p.name }}</h3>
    <p>{{ p.desc }}</p>
    <div class="price">{{ p.price_sats }} <span style="font-size:16px;color:var(--muted)">sats / {{ p.unit }}</span></div>
    <p class="muted" style="font-size:13px;margin-top:8px">Delivered by Clean Proxys — your live proxy is provisioned after payment.</p>
  </div>
  {% endfor %}
</div>

<p class="muted" style="margin-top:26px">These are fulfilled on request. For instant self-serve, see <a href="/plans">residential plans</a> and <a href="/dedicated">dedicated IPs</a>.</p>
{% endblock %}