{% now "Y" as current_year %}
<footer class="relative mt-24 overflow-hidden border-t border-white/10 bg-ink-900 bg-noise">
  <div class="orb orb-a -left-24 -top-24 h-72 w-72"></div>
  <div class="orb orb-b -right-16 bottom-0 h-64 w-64"></div>

  <div class="relative mx-auto max-w-7xl px-5 py-14 sm:px-8">
    <div class="grid gap-10 md:grid-cols-3">

      <div class="reveal">
        <a href="{% url 'core:home' %}" class="flex items-center gap-2.5">
          <span class="grid h-9 w-9 place-items-center rounded-xl bg-gradient-to-br from-gold-400 via-brand-500 to-brand-600 font-display text-sm font-extrabold text-black">
            {{ profile.full_name|slice:":1"|upper|default:"M" }}
          </span>
          <span class="font-display text-lg font-extrabold text-neutral-100">{{ profile.full_name|default:setting.site_name }}</span>
        </a>
        <p class="mt-4 max-w-sm text-sm leading-relaxed text-neutral-500">
          {{ profile.bio|default:setting.site_tagline|default:"Personal website & portofolio." }}
        </p>
        {% if profile.is_open_to_work %}
          <span class="mt-4 inline-flex items-center gap-2 rounded-full border border-emerald-500/30 bg-emerald-500/10 px-3 py-1 text-xs font-semibold text-emerald-400">
            <span class="relative flex h-2 w-2">
              <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75"></span>
              <span class="relative inline-flex h-2 w-2 rounded-full bg-emerald-500"></span>
            </span>
            Terbuka untuk peluang baru
          </span>
        {% endif %}
      </div>

      <div class="reveal" data-delay="100">
        <h3 class="font-display text-sm font-bold uppercase tracking-[0.16em] text-neutral-400">Jelajahi</h3>
        <ul class="mt-4 space-y-2.5 text-sm">
          <li><a href="{% url 'core:about' %}" class="text-neutral-500 transition hover:text-gold-400">Tentang Saya</a></li>
          <li><a href="{% url 'careers:experience' %}" class="text-neutral-500 transition hover:text-gold-400">Pengalaman Kerja</a></li>
          <li><a href="{% url 'careers:project_list' %}" class="text-neutral-500 transition hover:text-gold-400">Proyek</a></li>
          <li><a href="{% url 'blog:list' %}" class="text-neutral-500 transition hover:text-gold-400">Blog</a></li>
          <li><a href="{% url 'core:contact' %}" class="text-neutral-500 transition hover:text-gold-400">Kontak</a></li>
          <li><a href="{% url 'rss_feed' %}" class="text-neutral-500 transition hover:text-gold-400">RSS Feed</a></li>
        </ul>
      </div>

      <div class="reveal" data-delay="200">
        <h3 class="font-display text-sm font-bold uppercase tracking-[0.16em] text-neutral-400">Terhubung</h3>
        {% if profile.email %}
          <button data-copy="{{ profile.email }}"
                  class="mt-4 block text-left text-sm text-neutral-300 transition hover:text-gold-400">
            {{ profile.email }}
          </button>
        {% endif %}
        {% if profile.location %}
          <p class="mt-1.5 text-sm text-neutral-500">{{ profile.location }}</p>
        {% endif %}

        {% if social_links %}
          <div class="mt-5 flex flex-wrap gap-2">
            {% for link in social_links %}
              <a href="{{ link.url }}" target="_blank" rel="noopener" class="chip">{{ link.display_label }}</a>
            {% endfor %}
          </div>
        {% endif %}
      </div>
    </div>

    <div class="mt-12 flex flex-col items-center justify-between gap-3 border-t border-white/10 pt-6 text-xs text-neutral-600 sm:flex-row">
      <p>&copy; {{ current_year }} {{ profile.full_name|default:setting.site_name }}. {{ setting.footer_text|default:"Dibuat dengan Django." }}</p>
      <p class="flex items-center gap-1.5">
        Dibangun dengan
        <span class="text-brand-500">&#9679;</span>
        Django &amp; MySQL
      </p>
    </div>
  </div>
</footer>