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

{% block title %}{{ company.name }} — {{ company.tagline }}{% endblock %}

{% block content %}
<section class="hero">
  <!-- Image placeholders guide: static/images/PLACEHOLDERS.md -->
  <div class="hero__media" aria-hidden="true">
    <img
      src="{% static 'images/hero/hero-bg.jpg' %}"
      alt=""
      class="hero__img"
      width="1717"
      height="916"
      onerror="this.classList.add('is-missing')"
    >
    <div class="hero__placeholder">
      <span>Hero image placeholder</span>
      <code>static/images/hero/hero-bg.jpg</code>
    </div>
    <div class="hero__veil"></div>
  </div>

  <div class="hero__content">
    <p class="hero__location">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z"/></svg>
      Nairobi, Kenya
    </p>
    <h1 class="hero__brand">Sphereflux</h1>
    <p class="hero__headline">{{ company.tagline }}</p>
    <p class="hero__lede">
      Electrical, automation and refrigeration solutions for residential, commercial and industrial needs.
    </p>
    <div class="hero__actions">
      <a class="btn btn--accent" href="{% url 'contact' %}">Get in touch</a>
      <a class="btn btn--ghost" href="{% url 'services' %}">View services</a>
    </div>
  </div>
</section>

<section class="section section--about-strip">
  <div class="container about-strip">
    <div class="about-strip__copy reveal" data-reveal>
      <h2 class="section__title">Built for momentum</h2>
      <p>{{ company.intro }}</p>
      <a class="text-link" href="{% url 'about' %}">About Sphereflux →</a>
    </div>
    <div class="about-strip__mosaic reveal" data-reveal>
      <figure class="mosaic mosaic--a">
        <img
          src="{% static 'images/about/technician.jpg' %}"
          alt="Electrician testing an industrial panel"
          onerror="this.parentElement.classList.add('is-empty')"
        >
        <figcaption class="ph-label">images/about/technician.jpg</figcaption>
      </figure>
      <figure class="mosaic mosaic--b">
        <img
          src="{% static 'images/about/solar.jpg' %}"
          alt="Technician installing solar panels"
          onerror="this.parentElement.classList.add('is-empty')"
        >
        <figcaption class="ph-label">images/about/solar.jpg</figcaption>
      </figure>
      <figure class="mosaic mosaic--c">
        <img
          src="{% static 'images/about/cctv.jpg' %}"
          alt="CCTV and security system components"
          onerror="this.parentElement.classList.add('is-empty')"
        >
        <figcaption class="ph-label">images/about/cctv.jpg</figcaption>
      </figure>
    </div>
  </div>
</section>

<section class="section section--services">
  <div class="container">
    <header class="section__header reveal" data-reveal>
      <h2 class="section__title">What we deliver</h2>
      <p class="section__lede">Six service lines covering power, protection, automation and cooling.</p>
    </header>

    <div class="service-grid">
      {% for service in services %}
      <a class="service-tile reveal" data-reveal href="{% url 'service_detail' service.slug %}">
        <div class="service-tile__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-tile__body">
          <h3>{{ service.title }}</h3>
          <p>{{ service.short }}</p>
          <span class="service-tile__more">Explore</span>
        </div>
      </a>
      {% endfor %}
    </div>
  </div>
</section>

<section class="section section--why">
  <div class="container why-layout">
    <div class="why-layout__copy reveal" data-reveal>
      <h2 class="section__title">Why choose us</h2>
      <p class="section__lede">Safe. Smart. Sustainable — powering today, automating tomorrow.</p>
      <ul class="why-list">
        {% for item in why_us %}
        <li>{{ item }}</li>
        {% endfor %}
      </ul>
    </div>
    <aside class="why-layout__panel reveal" data-reveal>
      <p class="why-panel__kicker">Expert solutions</p>
      <p class="why-panel__text">Get in touch for solutions tailored to your needs — residential, commercial or industrial.</p>
      <a class="btn btn--accent" href="{% url 'contact' %}">Request a quote</a>
    </aside>
  </div>
</section>

<section class="section section--cta">
  <div class="container cta-band reveal" data-reveal>
    <div>
      <h2 class="cta-band__title">Ready to electrify your next project?</h2>
      <p>Call, WhatsApp or send a message — our technicians are ready.</p>
    </div>
    <div class="cta-band__actions">
      <a class="btn btn--accent" href="https://wa.me/{{ company.whatsapp }}" target="_blank" rel="noopener noreferrer">WhatsApp us</a>
      <a class="btn btn--outline-light" href="tel:+254718679683">0718 679 683</a>
    </div>
  </div>
</section>
{% endblock %}