{% import '/dmep-shippypro-2024/macros/i18n.html' as i18n %}
{# ============================================
   URL APPROACH — ShippyPro 2026
   All links are raw, unmodified absolute URLs
   taken directly from HubSpot module fields.
   No language prefix is injected or stripped.
   The team manages one footer module instance
   per language with its own full absolute URLs.
   Language switcher works independently via
   ?hsLang= params and translated content slugs.
   ============================================ #}

{% macro review_platform_icon(platform) %}
  {% if platform == "capterra" %}
    <svg width="24" height="24" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 7.3013L8.15202 7.30252L13.1091 7.30374V2.34229L0 7.3013Z" fill="var(--grey-300)"/>
      <path d="M13.1094 2.34244V19.858L19.3003 0L13.1094 2.34244Z" fill="var(--grey-400)"/>
      <path d="M13.1094 7.30395L8.15234 7.30273L13.1094 19.8581V7.30395Z" fill="var(--grey-500)"/>
      <path d="M0 7.30127L9.42325 10.524L8.15202 7.30249L0 7.30127Z" fill="var(--grey-300)"/>
    </svg>
  {% elif platform == "g2" %}
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24Zm.122 5.143c.45 0 .9.044 1.342.132l-1.342 2.806C9.962 8.08 8.203 9.84 8.203 12s1.76 3.92 3.92 3.92c.937 0 1.844-.338 2.553-.951l1.483 2.572A6.856 6.856 0 0 1 5.266 12a6.856 6.856 0 0 1 6.856-6.856Zm3.498.49a1.262 1.262 0 0 1 .026 0c.427 0 .792.113 1.101.34.31.229.466.546.466.946 0 .639-.36 1.03-1.035 1.376l-.377.191c-.403.204-.602.385-.657.706h2.05v.85h-3.101v-.144c0-.526.103-.96.314-1.306.211-.345.576-.65 1.102-.917l.242-.117c.427-.216.538-.401.538-.625 0-.266-.228-.458-.6-.458-.44 0-.773.228-1.004.694l-.592-.595c.13-.279.338-.502.619-.675a1.7 1.7 0 0 1 .908-.266Zm-2.094 5.388h3.394l1.697 2.937-1.697 2.94-1.697-2.94H11.83l1.696-2.937Z" fill="var(--grey-300)"/>
    </svg>
  {% elif platform == "trustpilot" %}
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M17.227 16.67l2.19 6.742-7.413-5.388 5.223-1.354zM24 9.31h-9.165L12.005.589l-2.84 8.723L0 9.3l7.422 5.397-2.84 8.714 7.422-5.388 4.583-3.326L24 9.311z" fill="var(--grey-300)"/>
    </svg>
  {% elif platform == "google" %}
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z" fill="var(--grey-300)"/>
    </svg>
  {% elif platform == "getapp" %}
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect x="2" y="6.5" width="9" height="9" rx="1.5" transform="rotate(45 6.5 12)" fill="var(--grey-300)"/>
      <path d="M10 7l5 5-5 5" stroke="var(--grey-400)" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
      <path d="M14 7l5 5-5 5" stroke="var(--grey-500)" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
    </svg>
  {% elif platform == "software_advice" %}
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M3 3.5C3 2.12 4.12 1 5.5 1h13C19.88 1 21 2.12 21 3.5v11C21 15.88 19.88 17 18.5 17H9l-5 4v-4h-.5C2.12 17 1 15.88 1 14.5v-11z" fill="var(--grey-300)"/>
    </svg>
  {% endif %}
{% endmacro %}

{% set platform_names = {
  "capterra": "Capterra",
  "g2": "G2",
  "trustpilot": "Trustpilot",
  "google": "Google",
  "getapp": "GetApp",
  "software_advice": "Software Advice"
} %}

<footer class="hp-footer" data-dark-section="true">
  <div class="hp-footer-container">

    <!-- PRIMARY NAV
         URLs: enter full absolute URLs in HubSpot (e.g. https://www.shippypro.com/it/pricing/)
         Labels: enter the i18n key suffix used in footer.* translations (e.g. "pricing")
    -->
    <div class="hp-footer-primary">
      <div class="hp-footer-primary-inner">
        <div class="hp-footer-primary-grid">
          {% for col in module.primary_columns %}
            <div class="hp-footer-col">
              <h3 class="hp-footer-col-title"></h3>
              <ul class="hp-footer-col-list">
                {% for item in col.list_element %}
                  {% if item.list_name %}
                    <li>
                      <a href="" class="hp-footer-primary-link">
                        
                      </a>
                    </li>
                  {% endif %}
                {% endfor %}
              </ul>
            </div>
          {% endfor %}
        </div>
      </div>
    </div>

    <!-- REVIEW BADGES + SOCIAL -->
    <div class="hp-footer-mid">
      <div class="hp-footer-badges">
        {% for badge in module.review_badges %}
          <div class="hp-review-badge">
            <div class="hp-badge-logo">
              
            </div>
            <div class="hp-badge-info">
              <span class="hp-badge-name"></span>
              <span class="hp-badge-dot">·</span>
              <span class="hp-badge-rating"></span>
              <div class="hp-badge-dots">
                {% set full = badge.rating|round(0, 'floor')|int %}
                {% for i in range(1, 6) %}
                  <span class="hp-dot {% if i <= full %}hp-dot--on{% endif %}"></span>
                {% endfor %}
              </div>
            </div>
          </div>
        {% endfor %}
      </div>
      <div class="hp-footer-social">
        {% for s in module.social_links %}
          {% set social_url = s.platform_url.href | default("#") %}
          <a href="" class="hp-social-btn" aria-label="" target="_blank" rel="noopener noreferrer">
            {% if s.platform_icon == "linkedin" %}
              <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
            {% elif s.platform_icon == "facebook" %}
              <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
            {% elif s.platform_icon == "instagram" %}
              <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
            {% elif s.platform_icon == "x" %}
              <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
            {% elif s.platform_icon == "reddit" %}
              <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z"/></svg>
            {% endif %}
          </a>
        {% endfor %}
      </div>
    </div>

    <!-- SEO EXPANDABLE SECTION
         URLs: enter full absolute URLs in HubSpot.
         Labels: plain text, entered directly in HubSpot (no i18n needed here).
    -->
    {% if module.seo_columns and module.seo_columns | selectattr('column_title') | list | length > 0 %}
      <div class="hp-footer-seo">
        <button class="hp-seo-toggle" aria-expanded="false" aria-controls="hp-seo-body">
          <span></span>
          <svg class="hp-seo-chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
        </button>
        <div class="hp-seo-body" id="hp-seo-body">
          <div class="hp-footer-seo-grid">
            {% for col in module.seo_columns %}
              <div class="hp-footer-seo-col">
                <h4 class="hp-footer-seo-title"></h4>
                <ul class="hp-footer-col-list">
                  {% for item in col.list_element %}
                    {% if item.list_name %}
                      <li>
                        <a href="" class="hp-footer-seo-link">
                          
                        </a>
                      </li>
                    {% endif %}
                  {% endfor %}
                </ul>
              </div>
            {% endfor %}
          </div>
        </div>
      </div>
    {% endif %}

    <!-- MOBILE ACCORDION
         Same URL rule: full absolute URLs from HubSpot.
         Primary nav labels still use i18n keys, matching desktop above.
    -->
    <div class="hp-footer-mobile">
      {% for col in module.primary_columns %}
        <div class="hp-accordion-item">
          <button class="hp-accordion-btn" aria-expanded="false">
            <span></span>
            <svg class="hp-accordion-chevron" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
          </button>
          <div class="hp-accordion-body">
            <ul class="hp-footer-col-list">
              {% for item in col.list_element %}
                {% if item.list_name %}
                  <li>
                    <a href="" class="hp-footer-primary-link">
                      
                    </a>
                  </li>
                {% endif %}
              {% endfor %}
            </ul>
          </div>
        </div>
      {% endfor %}

      {% if module.seo_columns and module.seo_columns | selectattr('column_title') | list | length > 0 %}
        <div class="hp-accordion-item">
          <button class="hp-accordion-btn hp-accordion-btn--seo" aria-expanded="false">
            <span></span>
            <svg class="hp-accordion-chevron" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
          </button>
          <div class="hp-accordion-body">
            {% for col in module.seo_columns %}
              <div class="hp-footer-seo-col hp-footer-seo-col--mobile">
                <h4 class="hp-footer-seo-title"></h4>
                <ul class="hp-footer-col-list">
                  {% for item in col.list_element %}
                    {% if item.list_name %}
                      <li>
                        <a href="" class="hp-footer-seo-link"></a>
                      </li>
                    {% endif %}
                  {% endfor %}
                </ul>
              </div>
            {% endfor %}
          </div>
        </div>
      {% endif %}

      <div class="hp-footer-badges hp-footer-badges--mobile">
        {% for badge in module.review_badges %}
          <div class="hp-review-badge">
            <div class="hp-badge-logo">
              
            </div>
            <div class="hp-badge-info">
              <span class="hp-badge-name"></span>
              <span class="hp-badge-dot">·</span>
              <span class="hp-badge-rating"></span>
              <div class="hp-badge-dots">
                {% set full = badge.rating|round(0, 'floor')|int %}
                {% for i in range(1, 6) %}
                  <span class="hp-dot {% if i <= full %}hp-dot--on{% endif %}"></span>
                {% endfor %}
              </div>
            </div>
          </div>
        {% endfor %}
      </div>
    </div>

    <!-- BOTTOM BAR -->
    <div class="hp-footer-bottom">
      <div class="hp-footer-bottom-inner">

        <!-- LANGUAGE SWITCHER
             Works independently from nav URLs.
             Uses ?hsLang= for main languages,
             translated content slugs for en-gb / en-us.
        -->
        <div class="hp-lang-selector ">
          <button class="hp-lang-btn" id="hp-lang-toggle" aria-haspopup="true" aria-expanded="false">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
            <span> ()</span>
            <svg class="hp-lang-chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
          </button>
          <div class="hp-lang-dropdown" id="hp-lang-dropdown" role="menu" aria-labelledby="hp-lang-toggle">
            <div class="hp-lang-dropdown-inner">

              <a href="?hsLang=en" class="hp-lang-option" role="menuitem">
                 (English)
              </a>

              {% set locale = "en-gb" %}
              {% set fallback_locale = "en" %}
              {% set link_text = i18n.__( languages[html_lang][locale], html_lang) ~ " (English)" %}
              {% if content.translated_content[locale] %}
                <a href="" class="hp-lang-option" role="menuitem"></a>
              {% elif content.translated_content[fallback_locale] %}
                <a href="" class="hp-lang-option" role="menuitem"></a>
              {% elif '/en/' in request.path %}
                <a href="" class="hp-lang-option" role="menuitem"></a>
              {% endif %}

              {% set locale = "en-us" %}
              {% set link_text = i18n.__( languages[html_lang][locale], html_lang) ~ " (English)" %}
              {% if content.translated_content[locale] %}
                <a href="" class="hp-lang-option" role="menuitem"></a>
              {% elif content.translated_content[fallback_locale] %}
                <a href="" class="hp-lang-option" role="menuitem"></a>
              {% elif '/en/' in request.path %}
                <a href="" class="hp-lang-option" role="menuitem"></a>
              {% endif %}

              <a href="?hsLang=it" class="hp-lang-option" role="menuitem">
                 (Italiano)
              </a>
              <a href="?hsLang=de" class="hp-lang-option" role="menuitem">
                 (Deutsch)
              </a>
              <a href="?hsLang=fr" class="hp-lang-option" role="menuitem">
                 (Français)
              </a>
              <a href="?hsLang=es" class="hp-lang-option" role="menuitem">
                 (Español)
              </a>

            </div>
          </div>
        </div>

        <!-- COMPLIANCE BADGES -->
        <div class="hp-compliance">
          {% for badge in module.compliance_badges %}
            {% if not loop.first %}<span class="hp-compliance-dot">·</span>{% endif %}
            <span class="hp-compliance-badge">
              {% if badge.badge_icon == "shield" %}
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
              {% elif badge.badge_icon == "shield-check" %}
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><polyline points="9 12 11 14 15 10"/></svg>
              {% elif badge.badge_icon == "lock" %}
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
              {% endif %}
              
            </span>
          {% endfor %}
        </div>

        <!-- LEGAL LINKS
             URLs: enter full absolute URLs in HubSpot.
             Labels: plain text, entered directly in HubSpot.
        -->
        <div class="hp-legal">
          {% for link in module.legal_links %}
            <a href="" class="hp-legal-link"></a>
          {% endfor %}
        </div>

      </div>
    </div>

    <!-- DESCRIPTION -->
    {% if module.description_primary %}
      <div class="hp-footer-desc">
        <div class="hp-footer-desc-primary"></div>
        {% if module.description_secondary %}
          <div class="hp-footer-desc-secondary"></div>
        {% endif %}
      </div>
    {% endif %}

  </div>
</footer>