{% extends "base.html" %}
{% block title %} الفيروز للمنظفات {% endblock %}
{% block content %}

<section class="contact-section py-5">
  <div class="container">

    <div class="text-center mb-5" data-aos="fade-up">
      <h1 class="fw-bold">تواصل معنا</h1>
      <p >يسعدنا استقبال رسائلكم واستفساراتكم في أي وقت</p>
    </div>

    <div class="row g-4 align-items-stretch">

      <!-- Contact Form -->
      <div class="col-lg-6" data-aos="fade-right">
        <div class="card shadow-lg p-4 rounded-4 h-100">
          <h3 class="mb-4 text-primary fw-bold">أرسل لنا رسالة</h3>
          <form method="POST">
            {{ form.hidden_tag() }}

            <div class="mb-3">
              {{ form.name.label(class="form-label fw-semibold") }}
              {{ form.name(class="form-control rounded-3") }}
            </div>

            <div class="mb-3">
              {{ form.subject.label(class="form-label fw-semibold") }}
              {{ form.subject(class="form-control rounded-3") }}
            </div>

            <div class="mb-3">
              {{ form.body.label(class="form-label fw-semibold") }}
              {{ form.body(class="form-control rounded-3", rows=5) }}
            </div>

            {{ form.submit(class="btn btn-primary w-100 py-2 rounded-3 fw-bold") }}
          </form>
        </div>
      </div>

      <!-- Info + Map -->
      <div class="col-lg-6" data-aos="fade-left">
        <div class="card shadow-lg p-4 rounded-4 h-100 d-flex flex-column">
          <h3 class="mb-4 text-primary fw-bold">معلومات الاتصال</h3>
          <ul class="list-unstyled fs-5 mb-4">
            <li class="mb-3"><i class="bi bi-telephone-fill text-primary ms-2"></i> 📞 الهاتف: <strong dir="ltr">+964 772 209 2209 </strong></li>
            <li class="mb-3"><i class="bi bi-envelope-fill text-primary ms-2"></i> 📧 البريد: <strong>llmnzfatalfyrwz@gmail.com</strong></li>
            <li class="mb-3"><i class="bi bi-geo-alt-fill text-primary ms-2"></i> 📍 بابل _ المحاويل _ نهاية الحي الصناعي</li>
          </ul>

          <div class="rounded-4 overflow-hidden mt-auto" style="height: 300px; border: 1px solid #ddd;">
            <iframe 
              src="https://www.google.com/maps?q=32.64479487832754,44.406522&hl=ar&z=17&output=embed"
              width="100%" 
              height="100%"
              style="border:0;" 
              allowfullscreen="" 
              loading="lazy">
            </iframe>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>

{% endblock %}