{% extends 'website/base.html' %}
{% load static %}

{% block title %}Services — {{ company.name }}{% endblock %}
{% block meta_description %}Electrical, solar, security, power backup, automation, refrigeration and general electrical works from Sphereflux Limited in Nairobi.{% endblock %}

{% block content %}
<section class="page-hero">
  <div class="container page-hero__inner reveal" data-reveal>
    <p class="eyebrow">Services</p>
    <h1>Solutions that keep Nairobi moving</h1>
    <p class="page-hero__lede">From solar and wiring to automation and cold rooms — one team across the full stack.</p>
  </div>
</section>

<section class="section">
  <div class="container service-list">
    {% for service in services %}
    <article class="service-row reveal" data-reveal id="{{ service.slug }}">
      <div class="service-row__media">
        <img
          src="{% static service.image %}"
          alt=""
          loading="lazy"
          onerror="this.parentElement.classList.add('is-empty')"
        >
        <span class="ph-label">{{ service.image }}</span>
      </div>
      <div class="service-row__body">
        <h2>{{ service.title }}</h2>
        <p>{{ service.short }}</p>
        <ul class="check-list">
          {% for item in service.items %}
          <li>{{ item }}</li>
          {% endfor %}
        </ul>
        <a class="btn btn--primary" href="{% url 'contact' %}?service={{ service.slug }}">Enquire about this service</a>
      </div>
    </article>
    {% endfor %}
  </div>
</section>
{% endblock %}