{% extends "base.html" %}
{% load static %}

{% block content %}
<section class="hero-section section-shell">
  <div class="container position-relative">
    <div class="row align-items-center gy-5">
      <div class="col-lg-7">
        <span class="eyebrow">Seit über 80 Jahren Vertrauen, Qualität und persönliche Beratung</span>
        <h1 class="hero-title">Ein moderner Schmuckkatalog für Trauringe, Uhren und Goldschmiedeservice.</h1>
        <p class="hero-copy">Entdecken Sie ausgewählte Kollektionen, lernen Sie unsere Services kennen und wechseln Sie mit einem Klick vom Stöbern zur persönlichen Beratung – telefonisch oder per E-Mail.</p>
        <form class="hero-search glass-panel" method="get" action="{% url 'catalog' %}">
          <label class="form-label" for="hero-search">Wonach suchen Sie?</label>
          <div class="d-flex flex-column flex-md-row gap-3">
            <input class="form-control form-control-lg" id="hero-search" type="search" name="q" placeholder="z. B. Trauringe, Perlen, Automatikuhr">
            <button class="btn btn-brand btn-lg" type="submit">Katalog durchsuchen</button>
          </div>
        </form>
        <div class="hero-actions d-flex flex-wrap gap-3">
          <a class="btn btn-brand btn-lg" href="{% url 'catalog' %}">Kollektion ansehen</a>
          <a class="btn btn-ghost btn-lg" href="tel:{{ store_phone_link }}">Jetzt anrufen</a>
          <a class="btn btn-ghost btn-lg" href="{% url 'contact' %}">E-Mail senden</a>
        </div>
      </div>
      <div class="col-lg-5">
        <div class="hero-showcase glass-panel">
          <div class="hero-orb hero-orb-lg"></div>
          <div class="hero-orb hero-orb-sm"></div>
          <p class="eyebrow mb-3">Store Snapshot</p>
          <div class="stat-grid">
            <article class="stat-card">
              <strong>80+</strong>
              <span>Jahre Erfahrung</span>
            </article>
            <article class="stat-card">
              <strong>4</strong>
              <span>klare Katalogbereiche</span>
            </article>
            <article class="stat-card">
              <strong>1</strong>
              <span>zentrale Anfrage pro Produkt</span>
            </article>
          </div>
          <div class="showcase-note">
            <p class="mb-1"><strong>Wiesdorfer Platz 59</strong></p>
            <p class="mb-0">51373 Leverkusen · Beratung per Telefon und E-Mail</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section-shell pt-0">
  <div class="container">
    <div class="row g-4">
      {% for category in categories %}
      <div class="col-md-6 col-xl-3">
        <a class="category-card glass-panel h-100" href="{% url 'catalog' %}?category={{ category.slug }}">
          <span class="category-chip">{{ category.product_total }} Einträge</span>
          <h2>{{ category.name }}</h2>
          <p>{{ category.description }}</p>
          <span class="text-link">Kategorie öffnen</span>
        </a>
      </div>
      {% endfor %}
    </div>
  </div>
</section>

<section class="section-shell" id="services">
  <div class="container">
    <div class="section-heading text-center mx-auto">
      <span class="eyebrow">Leistungen</span>
      <h2>Die wichtigsten Inhalte der bisherigen Website – jetzt klarer, schneller, moderner.</h2>
      <p>Die neue Startseite bündelt Trauringe, Schmuck, Uhren und Serviceleistungen in einem ruhigen, leicht navigierbaren Ablauf.</p>
    </div>
    <div class="row g-4">
      {% for item in service_highlights %}
      <div class="col-md-6 col-xl-3">
        <article class="service-card glass-panel h-100">
          <div class="service-icon">{{ forloop.counter|stringformat:"02d" }}</div>
          <h3>{{ item.title }}</h3>
          <p>{{ item.text }}</p>
        </article>
      </div>
      {% endfor %}
    </div>
  </div>
</section>

<section class="section-shell pt-0">
  <div class="container">
    <div class="section-heading d-flex flex-column flex-lg-row align-items-lg-end justify-content-between gap-3">
      <div>
        <span class="eyebrow">Auswahl</span>
        <h2>Featured Katalog</h2>
      </div>
      <a class="btn btn-ghost" href="{% url 'catalog' %}">Alle Produkte ansehen</a>
    </div>
    <div class="row g-4">
      {% for product in featured_products %}
      <div class="col-md-6 col-xl-3">
        <article class="product-card glass-panel h-100">
          <div class="product-visual">
            <span>{{ product.category.name }}</span>
          </div>
          <div class="product-body">
            <div class="d-flex justify-content-between align-items-start gap-3 mb-3">
              <div>
                <p class="product-category">{{ product.category.name }}</p>
                <h3>{{ product.name }}</h3>
              </div>
              <strong class="product-price">{{ product.price_label }}</strong>
            </div>
            <p>{{ product.short_description }}</p>
            <a class="text-link mt-auto" href="{% url 'product_detail' product.slug %}">Details & Anfrage</a>
          </div>
        </article>
      </div>
      {% empty %}
      <div class="col-12">
        <div class="empty-state glass-panel">
          <h3>Der Katalog ist bereit.</h3>
          <p>Pflegen Sie jetzt Produkte im Admin ein, damit die Startseite automatisch die ersten Highlights zeigt.</p>
          <a class="btn btn-brand" href="/admin/">Produkte im Admin anlegen</a>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</section>

<section class="section-shell">
  <div class="container">
    <div class="process-shell glass-panel">
      <div class="section-heading mb-4">
        <span class="eyebrow">Ablauf</span>
        <h2>Vom Produkt zur persönlichen Beratung in drei einfachen Schritten.</h2>
      </div>
      <div class="row g-4">
        {% for step in process_steps %}
        <div class="col-md-4">
          <article class="process-card">
            <span class="process-step">{{ step.step }}</span>
            <h3>{{ step.title }}</h3>
            <p>{{ step.text }}</p>
          </article>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
</section>

<section class="section-shell pt-0">
  <div class="container">
    <div class="contact-banner glass-panel">
      <div>
        <span class="eyebrow">Kontakt</span>
        <h2>Sie möchten lieber direkt sprechen?</h2>
        <p>Rufen Sie an oder senden Sie eine E-Mail – alle Produktseiten führen direkt in die Kontaktstrecke.</p>
      </div>
      <div class="contact-banner-actions d-flex flex-wrap gap-3">
        <a class="btn btn-brand btn-lg" href="tel:{{ store_phone_link }}">{{ store_phone_display }}</a>
        <a class="btn btn-ghost btn-lg" href="mailto:{{ store_email }}">{{ store_email }}</a>
      </div>
    </div>
  </div>
</section>
{% endblock %}