{% extends "base.html" %}

{% block content %}
<section class="page-hero section-shell page-hero-compact">
  <div class="container">
    <a class="back-link" href="{% url 'catalog' %}">← Zurück zum Katalog</a>
    <div class="row g-4 align-items-center mt-2">
      <div class="col-lg-7">
        <span class="eyebrow">{{ product.category.name }}</span>
        <h1 class="page-title">{{ product.name }}</h1>
        <p class="page-copy">{{ product.short_description }}</p>
      </div>
      <div class="col-lg-5">
        <div class="glass-panel detail-card">
          <p class="detail-price">{{ product.price_label }}</p>
          {% if product.material %}<p class="detail-label">Material · {{ product.material }}</p>{% endif %}
          {% if product.collection_note %}<p class="detail-label">{{ product.collection_note }}</p>{% endif %}
          <div class="d-grid gap-3 mt-4">
            <a class="btn btn-brand btn-lg" href="{% url 'contact' %}?product={{ product.slug }}">Per E-Mail anfragen</a>
            <a class="btn btn-ghost btn-lg" href="tel:{{ store_phone_link }}">{{ store_phone_display }}</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section-shell pt-0">
  <div class="container">
    <div class="row g-4">
      <div class="col-lg-8">
        <article class="glass-panel detail-copy h-100">
          <h2>Über dieses Stück</h2>
          <p>{{ product.description }}</p>
        </article>
      </div>
      <div class="col-lg-4">
        <aside class="glass-panel detail-side h-100">
          <h2>Warum diese neue Produktseite besser funktioniert</h2>
          <ul class="detail-list">
            <li>Klare Preis- und Materialhinweise.</li>
            <li>Sofort sichtbare Kontaktoptionen per Telefon und E-Mail.</li>
            <li>Direkte Verbindung in den Admin-gestützten Anfrage-Workflow.</li>
          </ul>
        </aside>
      </div>
    </div>
  </div>
</section>

{% if related_products %}
<section class="section-shell pt-0">
  <div class="container">
    <div class="section-heading">
      <span class="eyebrow">Passend dazu</span>
      <h2>Weitere Stücke aus {{ product.category.name }}</h2>
    </div>
    <div class="row g-4">
      {% for item in related_products %}
      <div class="col-md-6 col-xl-4">
        <article class="product-card glass-panel h-100">
          <div class="product-visual"><span>{{ item.category.name }}</span></div>
          <div class="product-body">
            <p class="product-category">{{ item.category.name }}</p>
            <h3>{{ item.name }}</h3>
            <p>{{ item.short_description }}</p>
            <a class="text-link mt-auto" href="{% url 'product_detail' item.slug %}">Details ansehen</a>
          </div>
        </article>
      </div>
      {% endfor %}
    </div>
  </div>
</section>
{% endif %}
{% endblock %}