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

{% block title %}About — {{ company.name }}{% endblock %}
{% block meta_description %}{{ company.intro }}{% endblock %}

{% block content %}
<section class="page-hero">
  <div class="container page-hero__inner reveal" data-reveal>
    <p class="eyebrow">About us</p>
    <h1>{{ company.tagline }}</h1>
    <p class="page-hero__lede">{{ company.motto }} {{ company.motto_line }}</p>
  </div>
</section>

<section class="section">
  <div class="container about-page">
    <div class="about-page__copy reveal" data-reveal>
      <h2 class="section__title">Who we are</h2>
      <p>{{ company.intro }}</p>
      <p>
        Based in Nairobi, we support homes, offices, shops and industrial sites with
        electrical works, solar, security systems, power backup, industrial automation
        and refrigeration — delivered by experienced technicians with a focus on quality
        workmanship and timely delivery.
      </p>
    </div>
    <figure class="about-page__figure reveal" data-reveal>
      {# Swap for a dedicated team photo when ready: images/about/team.jpg #}
      <img
        src="{% static 'images/about/technician.jpg' %}"
        alt="Sphereflux technician at an electrical panel"
        onerror="this.parentElement.classList.add('is-empty')"
      >
      <figcaption class="ph-label">images/about/technician.jpg</figcaption>
    </figure>
  </div>
</section>

<section class="section section--muted">
  <div class="container">
    <header class="section__header reveal" data-reveal>
      <h2 class="section__title">Why clients trust us</h2>
    </header>
    <ul class="value-grid">
      {% for item in why_us %}
      <li class="value-item reveal" data-reveal>
        <span class="value-item__index">{{ forloop.counter|stringformat:"02d" }}</span>
        <span>{{ item }}</span>
      </li>
      {% endfor %}
    </ul>
  </div>
</section>

<section class="section">
  <div class="container about-visuals">
    <figure class="about-visual reveal" data-reveal>
      <img
        src="{% static 'images/about/solar.jpg' %}"
        alt="Solar installation in progress"
        onerror="this.parentElement.classList.add('is-empty')"
      >
      <figcaption class="ph-label">images/about/solar.jpg</figcaption>
    </figure>
    <figure class="about-visual reveal" data-reveal>
      <img
        src="{% static 'images/services/automation.jpg' %}"
        alt="Industrial automation and control systems"
        onerror="this.parentElement.classList.add('is-empty')"
      >
      <figcaption class="ph-label">images/services/automation.jpg</figcaption>
    </figure>
  </div>
</section>

<section class="section section--cta">
  <div class="container cta-band reveal" data-reveal>
    <div>
      <h2 class="cta-band__title">Partner with Sphereflux</h2>
      <p>Tell us about your site — we’ll recommend a practical path forward.</p>
    </div>
    <a class="btn btn--accent" href="{% url 'contact' %}">Get in touch</a>
  </div>
</section>
{% endblock %}