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

{% block content %}
<div class="sec"><div class="wrap">
  <div class="sec-head">
    <div class="role">Services</div>
    <h1 style="font-size:clamp(32px,4.6vw,52px)">Everything from the first sketch to the renewal reminder</h1>
    <p class="lead" style="margin-top:16px">Prices below are starting points. You get a fixed quote after we agree the scope.</p>
  </div>
  <div class="grid g2">{% for s in services %}
    <div class="card">
      <h3>{{ s.title }}</h3>
      <p style="margin:8px 0 16px">{{ s.summary }}</p>
      <div style="border-top:1px solid var(--line-soft);padding-top:14px">
        {% for item in s.included_list %}
        <div class="muted" style="font-size:14px;padding:4px 0 4px 16px;position:relative">
          <span style="position:absolute;left:0;top:12px;width:8px;height:2px;background:var(--gold);display:block"></span>{{ item }}</div>
        {% endfor %}
      </div>
      <div style="display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line-soft)">
        <div><div class="deliv" style="margin:0">{{ s.starting_price }}</div><div class="mono">{{ s.delivery_time }}</div></div>
        <a href="{% url 'start_project' %}" class="btn btn-sm">Request</a>
      </div>
    </div>
  {% empty %}<p class="muted">Services will appear here once they are added in the admin.</p>{% endfor %}</div>
</div></div>

<div class="sec"><div class="wrap band">
  <h2>Not sure which one you need?</h2>
  <p>Describe the problem and I'll tell you what it actually takes to solve it.</p>
  <a href="{% url 'contact' %}" class="btn btn-primary">Ask a question</a>
</div></div>
{% endblock %}