{% extends "public/base.html" %}
{% block title %}Pricing — {{ site.name }}{% endblock %}

{% block content %}
<div class="sec"><div class="wrap">
  <div class="sec-head">
    <div class="role">Pricing</div>
    <h1 style="font-size:clamp(32px,4.6vw,52px)">Clear prices, written down before we start</h1>
    <p class="lead" style="margin-top:16px">Half on acceptance, half on delivery. Domain and first-year hosting are included on every package.</p>
  </div>
  <div class="grid g3">{% for p in packages %}
    <div class="plan {% if p.featured %}feature{% endif %}">
      <h3>{{ p.name }}</h3>
      <p class="muted" style="font-size:15px">{{ p.audience }}</p>
      <div class="amt">{{ p.price }}</div>
      <div class="from">{{ p.price_note }}</div>
      <div class="deliv" style="margin-top:14px">{{ p.delivery_time }}</div>
      <ul>{% for f in p.feature_list %}<li>{{ f }}</li>{% endfor %}</ul>
      <a href="{% url 'start_project' %}" class="btn btn-block {% if p.featured %}btn-primary{% endif %}">Choose {{ p.name }}</a>
    </div>
  {% endfor %}</div>
</div></div>

{% if ongoing %}
<div class="sec"><div class="wrap">
  <div class="sec-head"><h2>Ongoing services</h2>
    <p class="lead">Billed monthly or yearly. Cancel any time, and I hand over everything.</p></div>
  <table>
    <tr><th>Service</th><th>What it covers</th><th>Price</th></tr>
    {% for o in ongoing %}<tr><td>{{ o.name }}</td><td>{{ o.covers }}</td><td>{{ o.price }}</td></tr>{% endfor %}
  </table>
  <p class="hint" style="margin-top:14px">Prices exclude third-party fees such as payment gateway charges and premium domains.</p>
</div></div>
{% endif %}

<div class="sec"><div class="wrap band">
  <h2>Want an exact figure?</h2>
  <p>Send your requirements and you'll get an itemised quotation — design, frontend, backend and deployment priced separately.</p>
  <a href="{% url 'start_project' %}" class="btn btn-primary">Request a quotation</a>
</div></div>
{% endblock %}