<footer
  id="footer"
  class="bg-{{ sections['footer']['background']['color'] }} text-{{ sections['footer']['text']['color'] }} py-{{ sections['footer']['padding']['y'] }}"
>
  <div
    class="max-w-{{ sections['footer']['maxWidth'] }} mx-auto px-{{ sections['footer']['padding']['x'] }} sm:px-{{ sections['footer']['padding']['smX'] }} lg:px-{{ sections['footer']['padding']['lgX'] }}"
  >
    <!-- Responsive Grid -->
    <div
      class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-{{ sections['footer']['grid']['cols'] }} gap-{{ sections['footer']['grid']['gap'] }}"
    >
      <!-- Brand Column -->
      <div>
        <span class="{{ sections['footer']['brand']['textClasses'] }}">
          {{ sections['footer']['brand']['name'] }}
        </span>
        <p
          class="mt-{{ sections['footer']['brand']['description']['marginTop'] }} text-{{ sections['footer']['brand']['description']['color'] }}"
        >
          {{ sections['footer']['brand']['description']['text'] }}
        </p>

        {% if sections['footer']['brand']['socialLinks']['links'] is defined %}
        <div
          class="flex flex-wrap gap-2 sm:gap-{{ sections['footer']['brand']['socialLinks']['spacing'] }} mt-{{ sections['footer']['brand']['socialLinks']['marginTop'] }}"
        >
          {% for social in sections['footer']['brand']['socialLinks']['links']
          %}
          <a
            href="{{ social['url'] }}"
            class="text-{{ social['color'] }} hover:text-{{ social['hoverColor'] }}"
          >
            <i class="{{ social['icon'] }} text-{{ social['iconSize'] }}"></i>
          </a>
          {% endfor %}
        </div>
        {% endif %}
      </div>

      <!-- Navigation Columns -->
      {% for column in sections['footer']['navigation'] %}
      <div class="mt-8 sm:mt-0">
        <h3 class="{{ column['titleClasses'] }}">{{ column['title'] }}</h3>
        <ul
          class="space-y-{{ column['list']['spacing'] }} text-{{ column['list']['color'] }}"
        >
          {% for link in column['links'] %}
          <li>
            <a
              href="{{ link['url'] }}"
              class="hover:text-{{ link['hoverColor'] }}"
            >
              {{ link['label'] }}
            </a>
          </li>
          {% endfor %}
        </ul>
      </div>
      {% endfor %}

      <!-- Subscribe Column -->
      {% if sections['footer']['subscribe'] %}
      <div class="mt-8 sm:mt-0">
        <h3 class="{{ sections['footer']['subscribe']['titleClasses'] }}">
          {{ sections['footer']['subscribe']['title'] }}
        </h3>
        <form
          id="subscribeForm"
          class="flex flex-col sm:flex-row w-full max-w-xl gap-2 sm:gap-0"
        >
          <input
            type="email"
            placeholder="{{ sections['footer']['subscribe']['input']['placeholder'] }}"
            class="w-full flex-1 min-w-0"
          />
          <button type="submit" class="sm:ml-2">
            {{ sections['footer']['subscribe']['button']['text'] }}
          </button>
        </form>

        <p
          class="text-{{ sections['footer']['subscribe']['description']['color'] }}"
        >
          {{ sections['footer']['subscribe']['description']['text'] }}
        </p>
      </div>
      {% endif %}
    </div>

    <!-- Bottom Section -->
    <div
      class="mt-{{ sections['footer']['bottom']['marginTop'] }} pt-{{ sections['footer']['bottom']['paddingTop'] }} border-t border-{{ sections['footer']['bottom']['borderColor'] }} flex flex-col gap-4 sm:gap-0 sm:flex-row justify-between items-center text-{{ sections['footer']['bottom']['textColor'] }} text-{{ sections['footer']['bottom']['textSize'] }}"
    >
      <p class="text-center sm:text-left">
        {{ sections['footer']['bottom']['copyright'] }}
      </p>

      {% if sections['footer']['bottom']['links']['items'] is defined %}
      <div
        class="flex flex-wrap justify-center sm:justify-end space-x-{{ sections['footer']['bottom']['links']['spacing'] }} mt-{{ sections['footer']['bottom']['links']['marginTop'] }} sm:mt-0"
      >
        {% for link in sections['footer']['bottom']['links']['items'] %}
        <a href="{{ link['url'] }}" class="hover:text-{{ link['hoverColor'] }}">
          {{ link['label'] }}
        </a>
        {% if not loop.last %}
        <span>•</span>
        {% endif %} {% endfor %}
      </div>
      {% endif %}
    </div>
  </div>

  <script>
    document
      .getElementById("subscribeForm")
      ?.addEventListener("submit", function (e) {
        e.preventDefault();
        const emailInput = this.querySelector('input[type="email"]');
        const email = emailInput.value.trim();
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (email && emailRegex.test(email)) {
          document
            .getElementById("subscribeDialog")
            ?.classList.remove("hidden");
          this.reset();
        }
      });
  </script>
</footer>
