{% extends "base.html" %}
{% block title %}HydraProxy — Clean Proxys{% endblock %}
{% block body %}
<div class="hero" style="padding:64px 0 28px">
  <h1 style="font-size:36px">Hydra<span class="grad">Proxy</span> tier.</h1>
  <p class="lede">Residential, 4G mobile, and static-mobile IPs — brokered and delivered by Clean Proxys. You pay us, we place the order with HydraProxy, you connect.</p>
</div>

{% if err %}
<div class="flash warn">HydraProxy link is offline right now: {{ err }}<br><span class="muted">(Usually means the broker IP isn't whitelisted at HydraProxy yet — 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">HydraProxy 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">Brokered — we place the order with HydraProxy after payment and hand you the live proxy.</p>
  </div>
  {% endfor %}
</div>

<p class="muted" style="margin-top:26px">These are broker-fulfilled (order placed manually with HydraProxy). For instant self-serve, see <a href="/plans">residential plans</a> and <a href="/dedicated">dedicated IPs</a>.</p>
{% endblock %}