{% extends "base.html" %}

{% block content %}
<section class="page-hero section-shell page-hero-compact">
  <div class="container">
    <span class="eyebrow">Kontakt</span>
    <h1 class="page-title">Schnell anfragen, persönlich beraten lassen.</h1>
    <p class="page-copy">Die Anfrage wird gespeichert, im Admin sichtbar gemacht und auf Wunsch zusätzlich per E-Mail versendet.</p>
  </div>
</section>

<section class="section-shell pt-0">
  <div class="container">
    <div class="row g-4">
      <div class="col-lg-4">
        <aside class="glass-panel contact-info h-100">
          <h2>Direkter Kontakt</h2>
          <div class="contact-method">
            <span>Telefon</span>
            <a href="tel:{{ store_phone_link }}">{{ store_phone_display }}</a>
          </div>
          <div class="contact-method">
            <span>E-Mail</span>
            <a href="mailto:{{ store_email }}">{{ store_email }}</a>
          </div>
          <div class="contact-method">
            <span>Adresse</span>
            <p>{{ store_address }}</p>
          </div>
          {% if selected_product %}
          <div class="selected-product-note">
            <p class="eyebrow mb-2">Vorgewählt</p>
            <strong>{{ selected_product.name }}</strong>
            <p class="mb-0">Ihre Anfrage startet bereits mit dem passenden Produktbezug.</p>
          </div>
          {% endif %}
        </aside>
      </div>
      <div class="col-lg-8">
        <div class="glass-panel form-panel">
          <div class="section-heading mb-4">
            <span class="eyebrow">Anfrageformular</span>
            <h2>Per E-Mail anfragen</h2>
          </div>
          <form method="post" novalidate>
            {% csrf_token %}
            {% if form.non_field_errors %}
            <div class="alert alert-danger">{{ form.non_field_errors }}</div>
            {% endif %}
            <div class="row g-3">
              {% for field in form %}
              <div class="{% if field.name == 'message' %}col-12{% else %}col-md-6{% endif %}">
                <label class="form-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
                {{ field }}
                {% if field.help_text %}<div class="form-text">{{ field.help_text }}</div>{% endif %}
                {% for error in field.errors %}
                <div class="field-error">{{ error }}</div>
                {% endfor %}
              </div>
              {% endfor %}
            </div>
            <div class="d-flex flex-column flex-md-row gap-3 align-items-md-center mt-4">
              <button class="btn btn-brand btn-lg" type="submit">Anfrage absenden</button>
              <p class="form-note mb-0">Wir melden uns zeitnah telefonisch oder per E-Mail zurück.</p>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}