<footer class="body-font relative bg-transparent py-4 text-secondary border-t border-white px-3 md:px-16 lg:px-28 xl:px-36">
  <div class="md-footer__inner md-grid flex flex-col flex-wrap md:flex-row md:flex-nowrap {{ 'text-right' if i18n_page_locale == 'fa' else 'text-left' }}">

    <!-- Social media links and description (first for Farsi, last for English) -->
    <div class="md:w-64 flex-shrink-0 md:mx-0 px-4 {{ 'order-first' if i18n_page_locale == 'fa' else 'order-last' }}">
      <div class="flex flex-col sm:flex-row sm:items-center {{ 'sm:justify-end' if i18n_page_locale == 'fa' else 'sm:justify-start' }} gap-5">
        <a class="title-font flex items-center font-medium text-white {{ 'md:justify-end' if i18n_page_locale == 'fa' else 'md:justify-start' }}">
          <img src="/assets/hiddify-logo.svg" alt="Hiddify Logo" height="40" />
        </a>
        <!-- Social icons for mobile view -->
        <div class="items-end justify-start gap-5 flex md:hidden">
          <div class="flex items-center justify-center w-6 h-6 rounded-full bg-white text-white">
            <a href="https://www.youtube.com/@hiddify">
              <img src="/assets/socials/youtube.svg" alt="YouTube" class="w-6" decoding="async" loading="lazy" />
            </a>
          </div>
          <div class="flex items-center justify-center w-6 h-6 rounded-full bg-white text-white">
            <a href="https://twitter.com/hiddify_com">
              <img src="/assets/socials/x.svg" alt="X" class="w-6" decoding="async" loading="lazy" />
            </a>
          </div>
          <div class="flex items-center justify-center w-6 h-6 rounded-full bg-white text-white">
            <a href="https://t.me/hiddify">
              <img src="/assets/socials/telegram.svg" alt="Telegram" class="w-6" decoding="async" loading="lazy" />
            </a>
          </div>
          <div class="flex items-center justify-center w-6 h-6 rounded-full bg-white text-white">
            <a href="https://instagram.com/hiddify_com">
              <img src="/assets/socials/instagram.svg" alt="Instagram" class="w-6" decoding="async" loading="lazy" />
            </a>
          </div>
          <div class="flex items-center justify-center w-6 h-6 rounded-full bg-white text-white">
            <a href="https://github.com/hiddify">
              <img src="/assets/socials/github.svg" alt="GitHub" class="w-6" decoding="async" loading="lazy" />
            </a>
          </div>
        </div>
      </div>
      <p class="mt-5 mb-5 text-secondary text-sm {{ 'text-right' if i18n_page_locale == 'fa' else 'text-left' }}">
        {% if i18n_page_locale == 'fa' %}
          برای اطمینان از دسترسی آسان به اینترنت بدون محدودیت با یک ابزار قدرتمند و حرفه‌ای ضد سانسور، ما را در شبکه‌های اجتماعی دنبال کنید.
        {% else %}
          To ensure seamless access to an unrestricted internet experience with a powerful and professional anti-censorship tool, follow us on social media.
        {% endif %}
      </p>
      <!-- Desktop social icons -->
      <div class="items-end justify-start gap-5 hidden md:flex">
        <div class="flex items-center justify-center w-6 h-6 rounded-full bg-white text-white">
          <a href="https://www.youtube.com/@hiddify">
            <img src="/assets/socials/youtube.svg" alt="YouTube" class="w-6" decoding="async" loading="lazy" />
          </a>
        </div>
        <div class="flex items-center justify-center w-6 h-6 rounded-full bg-white text-white">
          <a href="https://x.com/hiddify_com">
            <img src="/assets/socials/x.svg" alt="X" class="w-6" decoding="async" loading="lazy" />
          </a>
        </div>
        <div class="flex items-center justify-center w-6 h-6 rounded-full bg-white text-white">
          <a href="https://t.me/hiddify">
            <img src="/assets/socials/telegram.svg" alt="Telegram" class="w-6" decoding="async" loading="lazy" />
          </a>
        </div>
        <div class="flex items-center justify-center w-6 h-6 rounded-full bg-white text-white">
          <a href="https://instagram.com/hiddify_com">
            <img src="/assets/socials/instagram.svg" alt="Instagram" class="w-6" decoding="async" loading="lazy" />
          </a>
        </div>
        <div class="flex items-center justify-center w-6 h-6 rounded-full bg-white text-white">
          <a href="https://github.com/hiddify/Hiddify-Manager">
            <img src="/assets/socials/github.svg" alt="GitHub" class="w-6" decoding="async" loading="lazy" />
          </a>
        </div>
      </div>
    </div>

    <!-- Download section (second in Farsi, first in English) -->
    <div class="px-4 md:w-1/2 lg:w-1/3 {{ 'order-2' if i18n_page_locale == 'fa' else 'order-1' }}">
      <h2 class="title-font mb-3 text-lg text-secondary">
        {% if i18n_page_locale == 'fa' %}
          دانلود اپ هیدیفای
        {% else %}
          Get Hiddify app
        {% endif %}
      </h2>
      <nav class="mb-10 list-none">
        {% if i18n_page_locale == 'fa' %}
          <li><a href="https://app.hiddify.com/ios" target="_blank" class="text-sm text-secondary"> 📲 iOS</a></li>
          <li><a href="https://app.hiddify.com/play" target="_blank" class="text-sm text-secondary"> 🤖 اندروید </a></li>
          <li><a href="https://app.hiddify.com/windows" target="_blank" class="text-sm text-secondary"> 🪟 ویندوز </a></li>
          <li><a href="https://app.hiddify.com/mac" target="_blank" class="text-sm text-secondary"> 🍏 مک‌اواس</a></li>
          <li><a href="https://app.hiddify.com/linux" target="_blank" class="text-sm text-secondary"> 🐧 لینوکس </a></li>
        {% else %}
          <li><a href="https://app.hiddify.com/ios" target="_blank" class="text-sm text-secondary"> 📲 iOS</a></li>
          <li><a href="https://app.hiddify.com/play" target="_blank" class="text-sm text-secondary"> 🤖 Android </a></li>
          <li><a href="https://app.hiddify.com/windows" target="_blank" class="text-sm text-secondary"> 🪟 Windows </a></li>
          <li><a href="https://app.hiddify.com/mac" target="_blank" class="text-sm text-secondary"> 🍏 macOS</a></li>
          <li><a href="https://app.hiddify.com/linux" target="_blank" class="text-sm text-secondary"> 🐧 Linux </a></li>
        {% endif %}
      </nav>
    </div>

    <!-- Installation guide section (third in Farsi, second in English) -->
    <div class="px-4 md:w-1/2 lg:w-1/3 {{ 'order-3' if i18n_page_locale == 'fa' else 'order-2' }}">
      <h2 class="title-font mb-3 text-lg text-secondary">
        {% if i18n_page_locale == 'fa' %}
          نصب هیدیفای‌منیجر
        {% else %}
          Setup HiddifyManager
        {% endif %}
      </h2>
      <nav class="mb-10 list-none">
        {% if i18n_page_locale == 'fa' %}
          <li><a href="https://hiddify.com/fa/manager/installation-and-setup/guide/" class="text-sm text-secondary"> ⚙️ راهنمای اصلی </a></li>
          <li><a class="text-sm text-secondary" href="https://hiddify.com/fa/manager/installation-and-setup/Quick-installation-on-Hetzner-Servers/"> 📦 هتزنر </a></li>
          <li><a href="https://hiddify.com/fa/manager/installation-and-setup/Quick-Installation-on-Oracle-Cloud/" class="text-sm text-secondary"> 🚀 اوراکل </a></li>
          <li><a href="https://hiddify.com/fa/manager/installation-and-setup/Quick-installation-on-Vultr-Servers/" class="text-sm text-secondary">  🗺️ والتر </a></li>
          <li><a href="https://hiddify.com/fa/manager/installation-and-setup/Quick-Installation-on-OVH-Servers/" class="text-sm text-secondary"> 🏭 OVH </a></li>
          <li><a href="https://hiddify.com/fa/manager/installation-and-setup/Quick-Installation-on-Microsoft-Azure/" class="text-sm text-secondary"> 🏢 آژور </a></li>
          <li><a href="https://hiddify.com/fa/manager/installation-and-setup/Install-Hiddify-using-Docker/" class="text-sm text-secondary"> 🚢 داکر </a></li>
        {% else %}
          <li><a href="https://hiddify.com/manager/installation-and-setup/guide/" class="text-sm text-secondary"> ⚙️ Main Guide </a></li>
          <li><a class="text-sm text-secondary" href="https://hiddify.com/manager/installation-and-setup/Quick-installation-on-Hetzner-Servers/"> 📦 Hetzner</a></li>
          <li><a href="https://hiddify.com/fa/manager/installation-and-setup/Quick-Installation-on-Oracle-Cloud/" class="text-sm text-secondary"> 🚀 Oracle</a></li>
          <li><a href="https://hiddify.com/fa/manager/installation-and-setup/Quick-installation-on-Vultr-Servers/" class="text-sm text-secondary"> 🗺️ Vultre</a></li>
          <li><a href="https://hiddify.com/fa/manager/installation-and-setup/Quick-Installation-on-OVH-Servers/" class="text-sm text-secondary"> 🏭 OVH</a></li>
          <li><a href="https://hiddify.com/fa/manager/installation-and-setup/Quick-Installation-on-Microsoft-Azure/" class="text-sm text-secondary"> 🏢 Azure</a></li>
          <li><a href="https://hiddify.com/manager/installation-and-setup/Install-Hiddify-using-Docker/" class="text-sm text-secondary"> 🚢 Docker</a></li>
        {% endif %}
      </nav>
    </div>

    <!-- Support section (last in Farsi, third in English) -->
    <div class="px-4 md:w-1/2 lg:w-1/3 {{ 'order-4' if i18n_page_locale == 'fa' else 'order-3' }}">
      <h2 class="title-font mb-3 text-lg text-secondary">
        {% if i18n_page_locale == 'fa' %}
          پشتیبانی
        {% else %}
          Support
        {% endif %}
      </h2>
      <nav class="mb-10 list-none">
        <li>
          <a class="text-sm text-secondary" href="https://t.me/hiddify">
            {% if i18n_page_locale == 'fa' %}
              👥 عضویت در گروه تلگرام
            {% else %}
              👥 Join Telegram Group
            {% endif %}
          </a>
        </li>
        <li>
          <a class="text-sm text-secondary" href="https://youtube.com/@hiddify">
            {% if i18n_page_locale == 'fa' %}
              🎬 عضویت در کانال یوتیوب
            {% else %}
              🎬 Subscribe To YouTube 
            {% endif %}
          </a>
        </li>
      </nav>
    </div>

  </div>
</footer>



