{# Elevate theme: modern 4-column footer with full i18n support & column plugin hooks #}
<footer class="elevate-footer mt-auto">
  <div class="container px-4">
    <div class="row g-4 mb-5">
      <!-- Col 1: Brand, Tagline, Newsletter & Col 1 Hook -->
      <div class="col-lg-4 col-md-6" id="footer-newsletter-widget">
        <div class="d-flex align-items-center gap-2 mb-3">
          {% if site_nav_icon_abs %}
          <img class="rounded-2" src="{{ site_nav_icon_abs|e }}" width="28" height="28" alt="" style="object-fit:contain" loading="lazy" decoding="async" />
          {% else %}
          <div class="rounded-2 bg-primary text-white d-flex align-items-center justify-content-center" style="width:28px; height:28px;">
            ⚡
          </div>
          {% endif %}
          <span class="fs-5 fw-bold text-body">{{ site_display_name() }}</span>
        </div>
        <p class="small text-secondary mb-3">
          {{ site_tagline() }}
        </p>

        {% if is_plugin_active and is_plugin_active('newsletter') %}
        <div class="mb-3">
          <h6 class="fw-bold mb-2 text-body" style="font-size: 0.9rem;">📧 {{ t('newsletter.title') if t else 'Newsletter' }}</h6>
          <form id="footer-newsletter-form" onsubmit="submitFooterNewsletter(event)">
            <div class="input-group input-group-sm mb-2">
              <input type="email" id="footer-newsletter-email" class="form-control" placeholder="adresa@email.com" required />
              <button type="submit" id="footer-newsletter-btn" class="btn btn-primary fw-semibold px-3">OK</button>
            </div>
            <div id="footer-newsletter-status" class="small" style="font-size: 0.8rem;"></div>
          </form>
          <script>
          async function submitFooterNewsletter(e) {
            e.preventDefault();
            const em = document.getElementById('footer-newsletter-email');
            const st = document.getElementById('footer-newsletter-status');
            const btn = document.getElementById('footer-newsletter-btn');
            if (!em || !em.value) return;
            btn.disabled = true;
            st.innerHTML = '<span class="text-secondary">Se procesează...</span>';
            const fd = new FormData();
            fd.append('email', em.value);
            try {
              const r = await fetch('/newsletter/subscribe', {
                method: 'POST',
                body: fd,
                headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }
              });
              const d = await r.json();
              if (d.ok) {
                st.innerHTML = '<span class="text-success fw-semibold">✅ ' + (d.msg || 'Abonat cu succes!') + '</span>';
                em.value = '';
              } else {
                st.innerHTML = '<span class="text-danger fw-semibold">❌ ' + (d.err || 'Eroare la abonare.') + '</span>';
              }
            } catch(err) {
              st.innerHTML = '<span class="text-danger fw-semibold">❌ Eroare de rețea. Încearcă din nou.</span>';
            } finally {
              btn.disabled = false;
            }
          }
          </script>
        </div>
        {% endif %}

        {% if plugin_area_footer_col1 %}
        <div class="mb-3">
          {{ plugin_area_footer_col1 | safe }}
        </div>
        {% endif %}

        {% set _t = active_theme_info() %}
        <span class="badge text-bg-primary rounded-pill px-3 py-2">
          Theme: {{ _t.name|e }} by {{ _t.author|e }} with ❤️
        </span>
      </div>

      <!-- Col 2: Quick Navigation & Col 2 Hook -->
      <div class="col-lg-3 col-md-6">
        <h5 class="h6 fw-bold mb-3">{{ t('footer.quickNav') }}</h5>
        <ul class="list-unstyled d-flex flex-column gap-2 small mb-3">
          <li><a href="/">{{ t('footer.home') }}</a></li>
          {% if fixed_nav_posts and fixed_nav_posts|length > 0 %}
            {% for nav_p in fixed_nav_posts %}
            <li><a href="{{ post_public_path(nav_p.slug) }}">📌 {{ nav_p.fixed_label }}</a></li>
            {% endfor %}
          {% endif %}
        </ul>

        {% if plugin_area_footer_col2 %}
        <div class="mb-3">
          {{ plugin_area_footer_col2 | safe }}
        </div>
        {% endif %}
      </div>

      <!-- Col 3: Management & Col 3 Hook -->
      <div class="col-lg-3 col-md-6">
        <h5 class="h6 fw-bold mb-3">{{ t('footer.management') }}</h5>
        <ul class="list-unstyled d-flex flex-column gap-2 small mb-3">
          {% if user %}
          <li><a href="/profile">{{ t('footer.myAccount') }}</a></li>
          {% if user.role in ['admin', 'editor'] %}
          <li><a href="/admin">{{ t('footer.adminPanel') }}</a></li>
          <li><a href="/admin/plugins">{{ t('footer.pluginsManager') }}</a></li>
          <li><a href="/admin/themes">{{ t('footer.themesManager') }}</a></li>
          {% endif %}
          {% else %}
          <li><a href="/admin/login">🔑 {{ t('ui.login') }}</a></li>
          {% endif %}
        </ul>

        {% if plugin_area_footer_col3 %}
        <div class="mb-3">
          {{ plugin_area_footer_col3 | safe }}
        </div>
        {% endif %}
      </div>

      <!-- Col 4: System Info & Col 4 Hook -->
      <div class="col-lg-2 col-md-6">
        <h5 class="h6 fw-bold mb-3">{{ t('footer.systemInfo') }}</h5>
        <p class="small text-secondary mb-2">
          {{ t('footer.systemPoweredBy') }}
        </p>

        {% if plugin_area_footer_col4 %}
        <div class="mb-3">
          {{ plugin_area_footer_col4 | safe }}
        </div>
        {% endif %}
      </div>
    </div>

    <!-- Bottom Copyright Divider & Bottom Hook -->
    <div class="border-top pt-4 text-center small text-secondary d-flex flex-column flex-sm-row justify-content-between align-items-center gap-2">
      <div>
        &copy; {{ year }} <strong>{{ site_display_name() }}</strong>. {{ t('footer.rights') }}
      </div>
      {% if plugin_area_footer_bottom %}
      <div>
        {{ plugin_area_footer_bottom | safe }}
      </div>
      {% endif %}
      <div>
        <a href="#top" class="text-decoration-none text-secondary">{{ t('footer.backToTop') }}</a>
      </div>
    </div>
  </div>
</footer>