<footer class="ds-bg-surface border-t border-gray-200 mt-auto">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">

      <div class="col-span-1">
        {% if logo.show_in_footer %}
          {% if logo.has_dark_variant %}
          <a href="/" class="inline-block mb-4">
            <img src="{{ logo.light_src }}" alt="{{ logo.alt }}" class="h-8 w-auto dark:hidden">
            <img src="{{ logo.dark_src }}" alt="{{ logo.alt }}" class="h-8 w-auto hidden dark:block">
          </a>
          {% else %}
          <a href="/" class="inline-block mb-4">
            <img src="{{ logo.light_src }}" alt="{{ logo.alt }}" class="h-8 w-auto">
          </a>
          {% endif %}
        {% endif %}
        <p class="ds-text-secondary text-sm mb-4">{{ company_desc }}</p>
        <p class="text-sm ds-text-secondary">{{ copyright_text }}</p>
      </div>

      {% for section in sections %}
      <div>
        <h4 class="font-semibold ds-text mb-3">{{ section.title }}</h4>
        <ul class="space-y-2 text-sm">
          {% for link in section.links %}
          <li>
            <a href="{{ link.href }}"
               class="ds-text-secondary hover:ds-text transition-colors no-underline"
               {% if link.is_external %}target="_blank" rel="noopener noreferrer"{% endif %}>
              {{ link.label }}
            </a>
          </li>
          {% endfor %}
        </ul>
      </div>
      {% endfor %}

      {% if social_links %}
      <div>
        <h4 class="font-semibold ds-text mb-3">{{ social_title }}</h4>
        <div class="flex flex-col space-y-3">
          {% for social in social_links %}
          <a href="{{ social.url }}"
             target="_blank"
             rel="noopener noreferrer"
             class="ds-text-secondary hover:ds-text transition-colors"
             aria-label="{{ social.name }}">{{ social.icon_html | safe }}</a>
          {% endfor %}
        </div>
      </div>
      {% endif %}

    </div>

    <div class="border-t border-base-300 mt-8 pt-5 flex justify-center items-center gap-2 text-sm ds-text-secondary">
      <span>{{ built_label }}</span>
      <a href="/rustelo" class="inline-flex items-center gap-1.5 hover:opacity-80 transition-opacity no-underline">
        <img src="/images/logos/rustelo-img.svg" alt="Rustelo" class="h-5 w-auto">
        <span class="text-gray-700 dark:text-gray-500">Rustelo</span>
      </a>
    </div>
  </div>
</footer>

<button class="fixed bottom-4 right-4 w-10 h-10 bg-gray-800 dark:bg-gray-600 text-white rounded-full shadow-lg hover:shadow-xl hover:bg-gray-700 dark:hover:bg-gray-500 transition-all duration-300 flex items-center justify-center z-50"
        onclick="window.scrollTo(0,0)"
        aria-label="Scroll to top">
  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
  </svg>
</button>
