{# Unified 4-column responsive footer for VlahX Core 2.0 #}
<footer class="footer mt-auto bg-body-tertiary border-top py-5">
  <div class="container px-4">
    <div class="row g-4 mb-4">
      
      <!-- Col 1: Brand, Tagline & Newsletter Widget -->
      <div class="col-12 col-md-6 col-lg-3" id="footer-newsletter-widget">
        <div class="d-flex align-items-center mb-2">
          {% if site_nav_icon_abs %}
          <img class="me-2 rounded-1 flex-shrink-0" src="{{ site_nav_icon_abs|e }}" width="28" height="28" alt="" style="object-fit:contain" loading="lazy" decoding="async" />
          {% else %}
          <svg class="me-2 text-primary flex-shrink-0" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
            <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
          </svg>
          {% endif %}
          <h5 class="fw-bold mb-0 text-body">{{ site_display_name() }}</h5>
        </div>
        <p class="text-secondary small mb-3">{{ site_tagline() }}</p>

        {% if is_plugin_active and is_plugin_active('newsletter') %}
        <h6 class="fw-bold mb-2 text-body" style="font-size: 0.9rem;">📧 {{ t('newsletter.title') if t else 'Abonare 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>
        {% endif %}

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

      <!-- Col 2: Navigation -->
      <div class="col-12 col-md-6 col-lg-3">
        <h6 class="fw-bold mb-3 text-body">{{ t('footer.navigation') if t else 'Navigare' }}</h6>
        <ul class="list-unstyled mb-0 small d-flex flex-column gap-2">
          <li>
            <a href="/" class="text-secondary text-decoration-none hover-primary">🏠 {{ t('nav.home') if t else 'Acasă' }}</a>
          </li>
          {% if fixed_nav_posts %}
            {% for np in fixed_nav_posts %}
              <li>
                <a href="{{ np.href or np.url }}" class="text-secondary text-decoration-none hover-primary">{{ np.fixed_label or np.label }}</a>
              </li>
            {% endfor %}
          {% endif %}
        </ul>

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

      <!-- Col 3: Account & Management -->
      <div class="col-12 col-md-6 col-lg-3">
        <h6 class="fw-bold mb-3 text-body">{{ t('footer.management') if t else 'Cont & Admin' }}</h6>
        <ul class="list-unstyled mb-0 small d-flex flex-column gap-2">
          {% if user %}
            <li>
              <a href="/profile" class="text-secondary text-decoration-none hover-primary">👤 {{ t('profile.myAccount') if t else 'Contul Meu' }}</a>
            </li>
            {% if has_role('admin', 'editor', 'author', 'seller', 'developer') %}
              <li>
                <a href="/admin" class="text-secondary text-decoration-none hover-primary">⚡ {{ t('footer.adminPanel') if t else 'Panou Admin' }}</a>
              </li>
            {% endif %}
          {% else %}
            <li>
              <a href="/admin/login" class="text-secondary text-decoration-none hover-primary">🔑 {{ t('ui.login') if t else 'Autentificare' }}</a>
            </li>
          {% endif %}
        </ul>

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

      <!-- Col 4: Community -->
      <div class="col-12 col-md-6 col-lg-3">
        <h6 class="fw-bold mb-3 text-body">{{ t('footer.communityTitle') if t else 'Comunitate' }}</h6>
        <p class="text-secondary small mb-2">
          {{ t('footer.communityText') if t else 'Jurnal de drum, articole tehnice și povești din comunitatea pasionaților.' }}
        </p>
        <p class="text-secondary small mb-0 opacity-75">
          <strong>{{ site_display_name() }}</strong>{% if site_tagline() %} — {{ site_tagline() }}{% endif %}
        </p>

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

    <!-- Bottom Copyright Divider -->
    <div class="border-top pt-4 text-center">
      <p class="text-secondary small mb-0">
        © {{ year }} <strong>{{ site_display_name() }}</strong>. {{ t('footer.rights') if t else 'Toate drepturile rezervate.' }}
        <span class="ms-2 opacity-75">| {{ t('footer.craftedBy') if t else 'Creat cu ❤️ de' }} {{ theme_author }}.</span>
      </p>
      {% if plugin_area_footer_bottom %}
        <div class="mt-2">
          {{ plugin_area_footer_bottom | safe }}
        </div>
      {% endif %}
    </div>
  </div>
</footer>