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

{% block title %}Contact — {{ company.name }}{% endblock %}
{% block meta_description %}Contact Sphereflux Limited in Nairobi for electrical, automation and refrigeration solutions. Call 0718 679 683 or email {{ company.email }}.{% endblock %}

{% block content %}
<section class="page-hero page-hero--compact">
  <div class="container page-hero__inner reveal" data-reveal>
    <p class="eyebrow">Contact</p>
    <h1>Get in touch for expert solutions</h1>
    <p class="page-hero__lede">Tailored to your residential, commercial or industrial needs.</p>
  </div>
</section>

<section class="section">
  <div class="container contact-layout">
    <div class="contact-layout__info reveal" data-reveal>
      <h2 class="section__title">Talk to us</h2>
      <ul class="contact-cards">
        <li>
          <span class="label">Phone / WhatsApp</span>
          <a href="tel:+254718679683">0718 679 683</a>
          <a href="tel:+254753797381">0753 797 381</a>
          <a class="text-link" href="https://wa.me/{{ company.whatsapp }}" target="_blank" rel="noopener noreferrer">Open WhatsApp →</a>
        </li>
        <li>
          <span class="label">Email</span>
          <a href="mailto:{{ company.email }}">{{ company.email }}</a>
        </li>
        <li>
          <span class="label">Location</span>
          <span>{{ company.location }}</span>
        </li>
      </ul>

      <figure class="contact-map">
        <img
          src="{% static 'images/about/cctv.jpg' %}"
          alt="Security and surveillance systems"
          onerror="this.parentElement.classList.add('is-empty')"
        >
        <figcaption class="ph-label">images/about/cctv.jpg</figcaption>
      </figure>
    </div>

    <div class="contact-layout__form reveal" data-reveal>
      <h2 class="form-title">Send a message</h2>
      <form method="post" class="contact-form" novalidate>
        {% csrf_token %}

        {% if form.non_field_errors %}
        <div class="form-alert" role="alert">{{ form.non_field_errors }}</div>
        {% endif %}

        {% for field in form %}
        <div class="field {% if field.errors %}field--error{% endif %}">
          <label for="{{ field.id_for_label }}">{{ field.label }}</label>
          {{ field }}
          {% if field.errors %}
          <p class="field__error">{{ field.errors|striptags }}</p>
          {% endif %}
        </div>
        {% endfor %}

        <button type="submit" class="btn btn--accent btn--block">Send message</button>
      </form>
    </div>
  </div>
</section>
{% endblock %}