{# Complete Footer Module with Built-in Social Links #}

<footer class="site-footer {{ module.advanced.custom_class }} {{ module.layout.layout_type }}" role="contentinfo">
  
  {# Newsletter Section - Only rendered if enabled and form is selected #}
  <!-- Newsletter Debug: show_newsletter={{ module.newsletter.show_newsletter }}, form_id={{ module.newsletter.form_id.form_id }} -->
  {% if module.newsletter.show_newsletter and module.newsletter.form_id.form_id %}
    <div class="footer-newsletter" data-form-id="{{ module.newsletter.form_id.form_id }}" data-hs-ignore="true">
      <div class="container ">
        <div class="newsletter-content">
          <h2>{{ module.newsletter.newsletter_title }}</h2>
          <p>{{ module.newsletter.newsletter_description }}</p>
          <div class="newsletter-form-container" id="footer-newsletter-form">
            {# Form will be lazy-loaded here via JavaScript #}
            <script>
              // Immediate execution to set up lazy loading before HubSpot loads
              (function() {
                function loadFooterFormScript() {
                  const script = document.createElement('script');
                  script.charset = 'utf-8';
                  script.type = 'text/javascript';
                  script.src = '//js.hsforms.net/forms/v2.js';
                  script.onload = initFooterForm;
                  document.body.appendChild(script);
                }

                function initFooterForm() {
                  if (window.hbspt && window.hbspt.forms) {
                    hbspt.forms.create({
                      portalId: "{{ get_portal_id() }}",
                      formId: "{{ module.newsletter.form_id.form_id }}",
                      target: '#footer-newsletter-form',
                      css: '',
                      cssClass: 'footer-hubspot-form'
                    });
                  }
                }

                // Check if forms script is already loaded
                if (window.hbspt && window.hbspt.forms) {
                  initFooterForm();
                } else {
                  // Set up IntersectionObserver for lazy loading
                  if ('IntersectionObserver' in window) {
                    const observer = new IntersectionObserver((entries, observer) => {
                      entries.forEach((entry) => {
                        if (entry.isIntersecting) {
                          loadFooterFormScript();
                          observer.unobserve(entry.target);
                        }
                      });
                    }, { 
                      rootMargin: '100px',
                      threshold: 0 
                    });

                    const targetElement = document.getElementById("footer-newsletter-form");
                    if (targetElement) {
                      observer.observe(targetElement);
                    }
                  } else {
                    // Fallback for browsers without IntersectionObserver
                    setTimeout(loadFooterFormScript, 2000);
                  }
                }
              })();
            </script>
            {# The real HubSpot form lazy-loads into #footer-newsletter-form above.
               No fake placeholder form here — the old one accepted an email, said
               "Thank you for subscribing!" and discarded it (never submitted). #}
          </div>
        </div>
      </div>
    </div>
  {% endif %}
  
  {# Main Footer Content #}
  <div class="footer-main">
    <div class="container ">
      <div class="footer-grid columns-{{ module.layout.columns }}">
        
        {# Column 1 #}
        {% if module.layout.columns >= 1 %}
          <div class="footer-column">
            {% if module.column_content.column_1.col1_title %}
              <h3>{{ module.column_content.column_1.col1_title }}</h3>
            {% endif %}
            
            {% if module.column_content.column_1.col1_content_type == 'logo_text' %}
              <div class="footer-brand">
                {# Logo - Using HubSpot's logo field type which auto-inherits from brand kit #}
                {% set logo_height = module.logo_group.logo_height or 40 %}

                {# Determine logo source - check override first, then brand kit #}
                {# Brand kit structure: primaryLogo = normal, logo = white/dark variant #}
                {% if module.logo.override_inherited_src and module.logo.src %}
                  {% set logo_src = module.logo.src %}
                  {% set logo_alt = module.logo.alt or site_settings.company_name ~ " logo" %}
                  {% set logo_dark_src = "" %}
                {% else %}
                  {% set logo_src = brand_settings.primaryLogo.src %}
                  {% set logo_alt = brand_settings.primaryLogo.alt or site_settings.company_name ~ " logo" %}
                  {# brand_settings.logo is the white/dark mode variant #}
                  {% set logo_dark_src = brand_settings.logo.src %}
                {% endif %}

                {# Render logo if we have a source #}
                {% if logo_src %}
                  {# Light mode logo #}
                  <img class="footer-logo logo-light"
                       src="{{ logo_src }}"
                       alt="{{ logo_alt }}"
                       loading="lazy"
                       decoding="async"
                       style="height: {{ logo_height }}px; width: auto;">

                  {# Dark mode logo (only if different from light) #}
                  {% if logo_dark_src and logo_dark_src != logo_src %}
                    <img class="footer-logo logo-dark"
                         src="{{ logo_dark_src }}"
                         alt="{{ logo_alt }}"
                         loading="lazy"
                         decoding="async"
                         style="height: {{ logo_height }}px; width: auto;">
                  {% endif %}
                {% else %}
                  {# Fallback to text if no logo #}
                  <div class="footer-logo-text">{{ module.content.company_name or site_settings.company_name or "Company" }}</div>
                {% endif %}

                {% if module.column_content.column_1.rich_text %}
                  <div class="footer-description">
                    {{ module.column_content.column_1.rich_text }}
                  </div>
                {% endif %}
              </div>
            {% elif module.column_content.column_1.col1_content_type == 'menu' and module.column_content.column_1.col1_menu %}
              {% menu 
                id="{{ module.column_content.column_1.col1_menu }}", 
                site_map_name="{{ module.column_content.column_1.col1_menu }}", 
                overrideable=False, 
                root_type="site_root", 
                flyouts="false", 
                max_levels="1", 
                flow="vertical"
              %}
            {% elif module.column_content.column_1.col1_content_type == 'rich_text' %}
              <div class="footer-richtext">
                {{ module.column_content.column_1.rich_text }}
              </div>
            {% elif module.column_content.column_1.col1_content_type == 'contact_info' %}
              <div class="footer-contact">
                {% if module.contact_info.address %}
                  <div class="contact-item">
                    <svg class="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                      <circle cx="12" cy="10" r="3"></circle>
                    </svg>
                    <span>{{ module.contact_info.address }}</span>
                  </div>
                {% endif %}
                {% if module.contact_info.phone %}
                  <div class="contact-item">
                    <svg class="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
                    </svg>
                    <a href="tel:{{ module.contact_info.phone }}">{{ module.contact_info.phone }}</a>
                  </div>
                {% endif %}
                {% if module.contact_info.email %}
                  <div class="contact-item">
                    <svg class="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                      <polyline points="22,6 12,13 2,6"></polyline>
                    </svg>
                    <a href="mailto:{{ module.contact_info.email }}">{{ module.contact_info.email }}</a>
                  </div>
                {% endif %}
              </div>
            {% elif module.column_content.column_1.col1_content_type == 'custom_html' %}
              {{ module.column_content.column_1.custom_html }}
            {% endif %}
          </div>
        {% endif %}
        
        {# Column 2 #}
        {% if module.layout.columns >= 2 %}
          <div class="footer-column">
            {% if module.column_content.column_2.col2_title %}
              <h3>{{ module.column_content.column_2.col2_title }}</h3>
            {% endif %}
            
            {% if module.column_content.column_2.col2_content_type == 'menu' and module.column_content.column_2.col2_menu %}
              {% menu 
                id="{{ module.column_content.column_2.col2_menu }}", 
                site_map_name="{{ module.column_content.column_2.col2_menu }}", 
                overrideable=False, 
                root_type="site_root", 
                flyouts="false", 
                max_levels="1", 
                flow="vertical"
              %}
            {% elif module.column_content.column_2.col2_content_type == 'recent_posts' %}
              <div class="recent-posts">
                {% set recent_posts = blog_recent_posts('default', 3) %}
                {% for post in recent_posts %}
                  <article class="recent-post">
                    <a href="{{ post.absolute_url }}">{{ post.name }}</a>
                    <time>{{ post.publish_date|datetimeformat('%B %d, %Y') }}</time>
                  </article>
                {% endfor %}
              </div>
            {% endif %}
          </div>
        {% endif %}
        
        {# Column 3 #}
        {% if module.layout.columns >= 3 %}
          <div class="footer-column">
            {% if module.column_content.column_3.col3_title %}
              <h3>{{ module.column_content.column_3.col3_title }}</h3>
            {% endif %}
            
            {% if module.column_content.column_3.col3_content_type == 'menu' and module.column_content.column_3.col3_menu %}
              {% menu 
                id="{{ module.column_content.column_3.col3_menu }}", 
                site_map_name="{{ module.column_content.column_3.col3_menu }}", 
                overrideable=False, 
                root_type="site_root", 
                flyouts="false", 
                max_levels="1", 
                flow="vertical"
              %}
            {% elif module.column_content.column_3.col3_content_type == 'newsletter' %}
              {# Renders nothing: there is no real form backend for a column-3
                 newsletter. The previous inline form faked a "Thank you for
                 subscribing!" message and discarded the email. Use the dedicated
                 Newsletter section (a real HubSpot form) for signups. #}
            {% endif %}
          </div>
        {% endif %}
        
        {# Column 4 #}
        {% if module.layout.columns >= 4 %}
          <div class="footer-column">
            {% if module.column_content.column_4.col4_title %}
              <h3>{{ module.column_content.column_4.col4_title }}</h3>
            {% endif %}
            
            {% if module.column_content.column_4.col4_content_type == 'social_follow' %}
              {% if module.social.show_social %}
                <div class="social-links">
                  {% if module.social.social_links.facebook.href %}
                    <a href="{{ module.social.social_links.facebook.href }}" aria-label="Facebook" target="_blank" rel="noopener">
                      <svg class="social-icon" viewBox="0 0 24 24" width="20" height="20">
                        <path fill="currentColor" 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>
                    </a>
                  {% endif %}
                  {% if module.social.social_links.twitter.href %}
                    <a href="{{ module.social.social_links.twitter.href }}" aria-label="Twitter/X" target="_blank" rel="noopener">
                      <svg class="social-icon" viewBox="0 0 24 24" width="20" height="20">
                        <path fill="currentColor" d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
                      </svg>
                    </a>
                  {% endif %}
                  {% if module.social.social_links.linkedin.href %}
                    <a href="{{ module.social.social_links.linkedin.href }}" aria-label="LinkedIn" target="_blank" rel="noopener">
                      <svg class="social-icon" viewBox="0 0 24 24" width="20" height="20">
                        <path fill="currentColor" 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>
                    </a>
                  {% endif %}
                  {% if module.social.social_links.instagram.href %}
                    <a href="{{ module.social.social_links.instagram.href }}" aria-label="Instagram" target="_blank" rel="noopener">
                      <svg class="social-icon" viewBox="0 0 24 24" width="20" height="20">
                        <path fill="currentColor" 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-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.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.98-1.281-.059-1.69-.073-4.949-.073zM5.838 12a6.162 6.162 0 1112.324 0 6.162 6.162 0 01-12.324 0zM12 16a4 4 0 110-8 4 4 0 010 8zm4.965-10.405a1.44 1.44 0 112.881.001 1.44 1.44 0 01-2.881-.001z"/>
                      </svg>
                    </a>
                  {% endif %}
                  {% if module.social.social_links.youtube.href %}
                    <a href="{{ module.social.social_links.youtube.href }}" aria-label="YouTube" target="_blank" rel="noopener">
                      <svg class="social-icon" viewBox="0 0 24 24" width="20" height="20">
                        <path fill="currentColor" d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
                      </svg>
                    </a>
                  {% endif %}
                  {% if module.social.social_links.github.href %}
                    <a href="{{ module.social.social_links.github.href }}" aria-label="GitHub" target="_blank" rel="noopener">
                      <svg class="social-icon" viewBox="0 0 24 24" width="20" height="20">
                        <path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                      </svg>
                    </a>
                  {% endif %}
                </div>
              {% endif %}
            {% elif module.column_content.column_4.col4_content_type == 'menu' and module.column_content.column_4.col4_menu %}
              {% menu
                id="{{ module.column_content.column_4.col4_menu }}",
                site_map_name="{{ module.column_content.column_4.col4_menu }}",
                overrideable=False, 
                root_type="site_root", 
                flyouts="false", 
                max_levels="1", 
                flow="vertical"
              %}
            {% endif %}
          </div>
        {% endif %}
        
      </div>
    </div>
  </div>
  
  {# Bottom Bar #}
  {% if module.bottom_bar.show_bottom_bar %}
    {# Set variables for copyright text rendering #}
    {% set year = local_dt|datetimeformat('%Y') %}
    {% set company_name = module.content.company_name %}
    <div class="footer-bottom">
      <div class="container ">
        <div class="bottom-bar">
          <div class="copyright">
            {{ module.bottom_bar.copyright_text|render }}
          </div>
          
          {% if module.bottom_bar.bottom_menu %}
            <nav class="legal-menu" aria-label="Legal navigation">
              {% menu 
                id="{{ module.bottom_bar.bottom_menu }}", 
                site_map_name="{{ module.bottom_bar.bottom_menu }}", 
                overrideable=False, 
                root_type="site_root", 
                flyouts="false", 
                max_levels="1", 
                flow="horizontal"
              %}
            </nav>
          {% endif %}
          
          {% if module.bottom_bar.show_language_selector %}
            <div class="footer-language">
              <select class="language-select" onchange="window.location.href=this.value">
                <option value="">🌐 English</option>
                <option value="/es">🌐 Español</option>
                <option value="/fr">🌐 Français</option>
              </select>
            </div>
          {% endif %}
        </div>
      </div>
    </div>
  {% endif %}
  
</footer>

{# Critical Logo CSS - Unscoped to match header pattern #}
<style>
  /* Footer logo visibility - Light mode default (matches header) */
  .footer-logo.logo-light {
    display: block;
  }
  .footer-logo.logo-dark {
    display: none;
  }

  {% if theme.dark_mode.enabled %}
  /* Dark mode logo switching - only if theme has dark mode enabled */
  @media (prefers-color-scheme: dark) {
    {# Only swap logos when a DISTINCT dark logo exists — otherwise the single
       logo would be hidden in dark mode with nothing to replace it. #}
    {% if logo_dark_src and logo_dark_src != logo_src %}
    .footer-logo.logo-light {
      display: none !important;
    }
    .footer-logo.logo-dark {
      display: block !important;
    }
    {% endif %}

    /* Footer background and text */
    .site-footer {
      background: var(--color-bg-secondary) !important;
      color: var(--color-text) !important;
    }
    .site-footer a {
      color: var(--color-text-secondary) !important;
    }
    .footer-logo-text {
      color: var(--color-text) !important;
    }
    .footer-bottom {
      border-top-color: var(--color-border) !important;
    }
  }
  {% endif %}
</style>

{# Module Styles #}
{% require_css %}
<style>
  {% scope_css %}
    /* Critical footer layout styles to prevent CLS */
    .site-footer {
      background: {{ module.style.background_color.color or 'var(--color-bg-secondary)' }};
      color: {{ module.style.text_color.color or 'var(--color-text)' }};
      padding-top: {{ module.style.padding_top }}px;
      padding-bottom: {{ module.style.padding_bottom }}px;
      margin-top: auto;
      position: relative;
    }

    .site-footer .container {
      max-width: {{ theme.core.layout.container_width or 1200 }}px;
      margin: 0 auto;
      padding: 0 16px;
      width: 100%;
    }

    .footer-main {
      padding: 2rem 0;
    }

    .footer-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
      margin-bottom: 2rem;
    }

    .footer-grid.columns-1 .footer-column { flex: 1 1 100%; }
    .footer-grid.columns-2 .footer-column { flex: 1 1 calc(50% - 1rem); }
    .footer-grid.columns-3 .footer-column { flex: 1 1 calc(33.333% - 1.333rem); }
    .footer-grid.columns-4 .footer-column { flex: 1 1 calc(25% - 1.5rem); }

    @media (max-width: {{ theme.core.layout.mobile_breakpoint or 992 }}px) {
      .footer-grid .footer-column {
        flex: 1 1 100%;
      }
    }

    .footer-column h3 {
      margin-bottom: 1rem;
      font-size: 1.125rem;
      font-weight: 600;
    }

    .site-footer a {
      color: {{ module.style.link_color.color or 'var(--color-primary)' }};
      text-decoration: none;
    }

    .footer-logo {
      max-width: 150px;
      height: auto;
      margin-bottom: 1rem;
      object-fit: contain;
      width: auto;
    }

    .footer-logo-text {
      color: {{ module.style.text_color.color or 'var(--color-text)' }};
      font-size: 1.5rem;
      font-weight: bold;
      margin-bottom: 1rem;
      display: inline-block;
    }

    .footer-bottom {
      border-top: 1px solid {{ module.style.border_color.color or 'var(--color-border)' }};
      padding: 1.5rem 0;
    }

    .bottom-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 1rem;
    }

    @media (max-width: {{ theme.core.layout.mobile_breakpoint or 992 }}px) {
      .bottom-bar {
        flex-direction: column;
        align-items: flex-start;
      }
    }

    {% if module.advanced.custom_css %}
      {{ module.advanced.custom_css }}
    {% endif %}
  {% end_scope_css %}
</style>
{% end_require_css %}

{# No footer JS needed — the only handler here faked newsletter submissions
   (showed "Thank you for subscribing!" and discarded the email). The real
   HubSpot newsletter form lazy-loads via the inline script in the Newsletter
   section above. #}