{% extends "public/base.html" %}

{% block content %}

{% if hero.heading_line1 or hero.heading_accent or hero.description %}
<section style="padding:36px 0 28px">
  {% if hero.section_tag %}<p class="tag" style="margin:0 0 10px">{{ hero.section_tag }}</p>{% endif %}
  {% if hero.heading_line1 or hero.heading_accent %}
  <h1 style="margin:0 0 14px;font-size:2.6rem;line-height:1.2;font-weight:800;letter-spacing:-.01em">
    {{ hero.heading_line1 }}{% if hero.heading_accent %} <span style="color:var(--accent)">{{ hero.heading_accent }}</span>{% endif %}{% if hero.heading_line2 %} {{ hero.heading_line2 }}{% endif %}
  </h1>
  {% endif %}
  {% if hero.description %}<p style="margin:0 0 22px;max-width:62ch;color:var(--muted);font-size:1.05rem">{{ hero.description }}</p>{% endif %}
  {% if hero.button_label and hero.button_url %}<a class="btn" href="{{ hero.button_url }}">{{ hero.button_label }}</a>{% endif %}
</section>
{% endif %}

{% if counters %}
<section style="padding:8px 0 28px">
  <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px">
    {% for c in counters %}
    <div class="card" style="padding:16px 18px">
      <p style="margin:0;font-size:1.55rem;font-weight:800;color:var(--accent);line-height:1.2">{{ c.value }}{{ c.suffix }}</p>
      <p style="margin:4px 0 0;color:var(--muted);font-size:.82rem">{{ c.label }}</p>
    </div>
    {% endfor %}
  </div>
</section>
{% endif %}

{% if about.heading or about.body %}
<section style="padding:30px 0;border-top:1px solid var(--line)">
  {% if about.section_tag %}<p class="tag" style="margin:0 0 10px">{{ about.section_tag }}</p>{% endif %}
  {% if about.heading %}<h2 style="margin:0 0 14px;font-size:1.6rem;font-weight:800">{{ about.heading }}{% if about.heading_em %} <span style="color:var(--accent)">{{ about.heading_em }}</span>{% endif %}</h2>{% endif %}
  {% if about.body %}<div style="max-width:70ch;color:var(--muted)">{{ about.body|safe }}</div>{% endif %}
</section>
{% endif %}

{% if services %}
<section style="padding:30px 0;border-top:1px solid var(--line)">
  {% if services_header.section_tag %}<p class="tag" style="margin:0 0 10px">{{ services_header.section_tag }}</p>{% endif %}
  {% if services_header.heading %}<h2 style="margin:0 0 18px;font-size:1.6rem;font-weight:800">{{ services_header.heading }}{% if services_header.heading_em %} <span style="color:var(--accent)">{{ services_header.heading_em }}</span>{% endif %}</h2>{% endif %}
  <ul style="margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px">
    {% for service in services %}
    <li class="card">
      {% if service.icon_class %}<i class="{{ service.icon_class }}" style="color:var(--accent);font-size:1.2rem"></i>{% endif %}
      <p style="margin:10px 0 6px;font-weight:700">{% if service.service_page_active and service.slug %}<a href="/services/{{ service.slug }}/" style="text-decoration:none">{{ service.title }}</a>{% else %}{{ service.title }}{% endif %}</p>
      {% if service.description %}<p style="margin:0;color:var(--muted);font-size:.92rem">{{ service.description|truncatewords:24 }}</p>{% endif %}
    </li>
    {% endfor %}
  </ul>
</section>
{% endif %}

{% if insights %}
<section style="padding:30px 0;border-top:1px solid var(--line)">
  <h2 style="margin:0 0 18px;font-size:1.6rem;font-weight:800">Insights</h2>
  <ul style="margin:0;padding:0;list-style:none;display:grid;gap:12px">
    {% for post in insights %}
    <li class="card" style="padding:14px 18px"><a href="/insights/{{ post.slug }}/" style="text-decoration:none">{{ post.title }}</a></li>
    {% endfor %}
  </ul>
</section>
{% endif %}

{% endblock %}