{% load core_tags %}
{% get_nav_items "footer" as footer_nav_items %}
{% get_social_links as social_links %}
<footer class="border-t border-zinc-200 dark:border-zinc-800 bg-brand-light dark:bg-brand-dark mt-12 py-12 text-center md:text-left">
  <div class="max-w-7xl mx-auto px-6 grid grid-cols-1 md:grid-cols-4 gap-8">
    <div class="md:col-span-2">
      <a href="/" class="font-display font-bold text-2xl tracking-tight mb-4 inline-block">{{ site_settings.site_name|default:"NO HYPE AI" }}</a>
      <p class="text-zinc-500 font-mono text-sm max-w-sm mx-auto md:mx-0">
        {{ site_settings.footer_description|default:"In-depth reviews and benchmarks of the latest AI coding tools.\nHonest analysis for developers."|linebreaksbr }}
      </p>
    </div>
    <div>
      <h4 class="font-display font-bold mb-4 uppercase text-sm tracking-widest text-zinc-400">Navigation</h4>
      <ul class="space-y-2 font-mono text-sm text-zinc-500">
        {% for item in footer_nav_items %}
          <li><a href="{{ item.url }}" class="hover:text-brand-cyan transition-colors"{% if item.open_in_new_tab %} target="_blank" rel="noopener noreferrer"{% endif %}>{{ item.title }}</a></li>
        {% endfor %}
        {% get_legal_pages as legal_pages %}
        {% for page in legal_pages %}
          <li><a href="{{ page.url }}" class="hover:text-brand-pink transition-colors">{{ page.title }}</a></li>
        {% endfor %}
      </ul>
    </div>
    <div>
      <h4 class="font-display font-bold mb-4 uppercase text-sm tracking-widest text-zinc-400">Connect</h4>
      <ul class="space-y-2 font-mono text-sm text-zinc-500">
        {% for link in social_links %}
          <li>
            <a href="{{ link.url }}" class="hover:text-brand-cyan transition-colors flex items-center justify-center md:justify-start gap-2"{% if link.url != "/feed/" %} target="_blank" rel="noopener noreferrer"{% endif %}>
              {% include link.icon_template %}
              {{ link.display_label }}
            </a>
          </li>
        {% endfor %}
      </ul>
    </div>
  </div>
  <div class="max-w-7xl mx-auto px-6 mt-12 pt-8 border-t border-zinc-200 dark:border-zinc-800 text-center font-mono text-xs text-zinc-500 flex flex-col md:flex-row justify-between items-center gap-4">
    <p>&copy; {% now "Y" %} {{ site_settings.copyright_text|default:"No Hype AI. All rights reserved." }}</p>
    <p>{{ site_settings.tagline|default:"Honest AI tool reviews for developers." }}</p>
  </div>
</footer>