{% load static %}
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{ meta_title|default:store_name }}</title>
  <meta name="description" content="{{ meta_description|default:project_description|default:'Moderner Schmuck- und Trauringkatalog mit persönlicher Beratung.' }}">
  {% if project_image_url %}
  <meta property="og:image" content="{{ project_image_url }}">
  <meta property="twitter:image" content="{{ project_image_url }}">
  {% endif %}
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
  <link rel="stylesheet" href="{% static 'css/custom.css' %}?v={{ deployment_timestamp }}">
  {% block head %}{% endblock %}
</head>
<body>
  <div class="site-chrome">
    <header class="site-header sticky-top">
      <nav class="navbar navbar-expand-lg">
        <div class="container py-2">
          <a class="navbar-brand" href="{% url 'home' %}">
            <span class="brand-mark">T</span>
            <span>
              <strong>{{ store_name }}</strong>
              <small>Leverkusen</small>
            </span>
          </a>
          <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Navigation umschalten">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="mainNav">
            <ul class="navbar-nav ms-auto align-items-lg-center gap-lg-2">
              <li class="nav-item"><a class="nav-link" href="{% url 'home' %}">Start</a></li>
              <li class="nav-item"><a class="nav-link" href="{% url 'catalog' %}">Katalog</a></li>
              <li class="nav-item"><a class="nav-link" href="{% url 'home' %}#services">Services</a></li>
              <li class="nav-item"><a class="nav-link" href="{% url 'contact' %}">Kontakt</a></li>
              <li class="nav-item ms-lg-2"><a class="btn btn-brand btn-sm px-3" href="/admin/">Admin</a></li>
            </ul>
          </div>
        </div>
      </nav>
    </header>

    <main>
      {% block content %}{% endblock %}
    </main>

    <footer class="site-footer">
      <div class="container py-5">
        <div class="row g-4 align-items-start">
          <div class="col-lg-5">
            <p class="eyebrow mb-2">Tradition trifft moderne Navigation</p>
            <h2 class="footer-title">Persönliche Beratung für Schmuck, Trauringe und Uhren.</h2>
          </div>
          <div class="col-sm-6 col-lg-3">
            <h3 class="footer-heading">Besuchen</h3>
            <p>{{ store_address }}</p>
            <a href="tel:{{ store_phone_link }}">{{ store_phone_display }}</a>
          </div>
          <div class="col-sm-6 col-lg-2">
            <h3 class="footer-heading">Kontakt</h3>
            <p><a href="mailto:{{ store_email }}">{{ store_email }}</a></p>
            <p><a href="{% url 'contact' %}">Anfrage senden</a></p>
          </div>
          <div class="col-lg-2">
            <h3 class="footer-heading">Verwaltung</h3>
            <p><a href="/admin/">Zum Admin</a></p>
            <p><a href="{% url 'catalog' %}">Katalog</a></p>
          </div>
        </div>
      </div>
    </footer>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js" integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q" crossorigin="anonymous"></script>
</body>
</html>
