{% load static %}
<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>{{ SITE_NAME }}{% block title %}{% endblock %}</title>

  <!-- Bootstrap RTL/Normal via CDN + local fallback (works offline too) -->
  <link id="bs-css" rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
  <script>
  // Fallback to local if CDN blocked
  window.addEventListener('load', function () {
    const el = document.getElementById('bs-css');
    let needFallback = false;
    try { needFallback = !el || !el.sheet || !el.sheet.cssRules || el.sheet.cssRules.length === 0; }
    catch(e) { needFallback = true; }
    if (needFallback) {
      var l = document.createElement('link');
      l.rel = 'stylesheet';
      l.href = '{% static "vendor/bootstrap.min.css" %}';
      document.head.appendChild(l);
    }
  });
  </script>

  <!-- Site styles (orange MapleMart theme you added earlier) -->
  <link rel="stylesheet" href="{% static 'css/storefront.css' %}">

  <!-- Tiny helpers so header looks right even if CSS loads late -->
  <style>
    .mm-hero{background:linear-gradient(135deg,#f97316,#fb923c);color:#fff}
    .mm-logo{font-weight:800}
    .mm-glass{background:rgba(255,255,255,.9);backdrop-filter:saturate(160%) blur(6px)}
  </style>
</head>
<body>

  <!-- Top Bar (glass nav inside orange hero) -->
  <header class="mm-hero">
    <div class="container pt-3">
      <div class="mm-glass rounded-4 px-3 py-2 d-flex align-items-center gap-3 shadow-sm">

        <!-- Brand -->
        <a href="/" class="btn btn-sm fw-bold text-dark bg-white border-0 px-3 rounded-3">
          {{ SITE_NAME|default:"MapleMart" }}
        </a>

        <!-- Main nav -->
        <nav class="d-none d-md-flex align-items-center gap-3">
          <a class="text-dark text-decoration-none {% if request.path == '/' %}fw-bold{% endif %}" href="/">Home</a>
          <a class="text-dark text-decoration-none" href="/store/">Store</a>
          <a class="text-dark text-decoration-none" href="/about/">About</a>
          <a class="text-dark text-decoration-none" href="/blog/">Blog</a>
          <a class="text-dark text-decoration-none" href="/contact/">Contact</a>
        </nav>

        <!-- Search -->
        <form action="/" method="get" class="ms-auto d-none d-md-flex align-items-center gap-2"
              style="max-width:520px; flex:1">
          <!-- search icon -->
          <span aria-hidden="true" class="px-1 text-muted">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M21 21l-4.35-4.35M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
          </span>
          <input name="q" class="form-control border-0 bg-white" placeholder="Search fresh groceries..." />
        </form>

        <!-- Cart -->
        <a href="/cart/" class="text-dark position-relative ms-2" aria-label="Cart">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
            <path d="M6 6h15l-1.5 9h-12L6 3H3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <circle cx="9" cy="21" r="1" fill="currentColor"/>
            <circle cx="18" cy="21" r="1" fill="currentColor"/>
          </svg>
          <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-dark text-white">
            {{ cart_count|default:0 }}
          </span>
        </a>
      </div>

      <!-- Hero (only on Home) -->
      {% if request.path == '/' %}
      <div class="py-5">
        <h1 class="h3 fw-bold mb-2">Fresh groceries, fast.</h1>
        <p class="mb-4">Toronto.</p>
        <div class="d-flex gap-2">
          <a class="mm-btn px-4" href="/store/">Shop now</a>
          <a class="btn btn-light border-0 rounded-3 px-3" href="/about/">Why MapleMart?</a>
        </div>
      </div>
      {% endif %}
    </div>
  </header>

  <!-- Page content -->
  <main class="container my-4">
    {% block content %}{% endblock %}
  </main>

<!-- Footer -->
<footer class="bg-white border-top mt-5">
  <div class="container py-5">
    <div class="row g-4">

      <!-- Store info -->
      <div class="col-12 col-md-4">
        <div class="fw-bold mb-2">{{ SITE.store_title }}</div>
        <div class="text-muted small">
          {% for line in SITE.address %}
            {{ line }}<br>
          {% endfor %}
          {% if SITE.hours_text %}<div class="mt-2">Hours: {{ SITE.hours_text }}</div>{% endif %}
        </div>
      </div>

      <!-- Shop -->
      <div class="col-6 col-md-2">
        <div class="fw-bold mb-2">Shop</div>
        <ul class="list-unstyled small">
          {% for c in FOOTER_CATEGORIES %}
            <li><a class="text-decoration-none text-muted" href="{% url 'category' c.slug %}">{{ c.name }}</a></li>
          {% empty %}
            <li class="text-muted">No categories</li>
          {% endfor %}
        </ul>
      </div>

      <!-- Company -->
      <div class="col-6 col-md-2">
        <div class="fw-bold mb-2">Company</div>
        <ul class="list-unstyled small">
          <li><a class="text-decoration-none text-muted" href="/about/">About us</a></li>
          <li><a class="text-decoration-none text-muted" href="/contact/">Contact</a></li>
          <li><a class="text-decoration-none text-muted" href="/blog/">Blog</a></li>
          <li><a class="text-decoration-none text-muted" href="/sitemap.xml">Sitemap</a></li>
        </ul>
      </div>

      <!-- Newsletter -->
      <div class="col-12 col-md-4">
        <div class="fw-bold mb-2">Newsletter</div>
        <form action="{% url 'newsletter_subscribe' %}" method="post" class="d-flex gap-2">
          {% csrf_token %}
          <input class="form-control" type="email" name="email" placeholder="Your email" required>
          <button class="mm-btn">Subscribe</button>
        </form>
        <div class="text-muted small mt-2">{{ SITE.newsletter_note }}</div>
      </div>

    </div>

    <div class="text-center text-muted small pt-3">
      © {{ SITE_NAME }} — Demo site.
    </div>
  </div>
</footer>


  {% block scripts %}{% endblock %}
</body>
</html>
