{#
# Footer Component
# Navy & Gold luxury footer using Footer global set
#
# Usage: {% include 'components/footer.twig' %}
#}

{% import '_macros/images.twig' as imageMacro %}

{% set footer = craft.app.globals.getSetByHandle('footer') %}
{% set logo = footer.image|length ? footer.image.one() : null %}
{% set footerText = footer.textArea is defined and footer.textArea|length ? footer.textArea : null %}
{% set phoneNumber = footer.plainText is defined and footer.plainText|length ? footer.plainText : null %}
{% set email = footer.plainText2 is defined and footer.plainText2|length ? footer.plainText2 : null %}
{% set address = footer.textArea2 is defined and footer.textArea2|length ? footer.textArea2 : null %}
{% set googleMapsUrl = footer.buttonUrl is defined and footer.buttonUrl|length ? (footer.buttonUrl.url is defined ? footer.buttonUrl.url : footer.buttonUrl) : null %}
{% set copyrightText = footer.plainText3 is defined and footer.plainText3|length ? footer.plainText3 : null %}

{# Get footer socials #}
{% set footerSocials = footer.footerSocials ?? [] %}
{% if footerSocials and footerSocials.all is defined %}
    {% set footerSocials = footerSocials.all() %}
{% endif %}

{# Get legal/CTA buttons #}
{% set ctaButtons = footer.ctaButtons ?? [] %}
{% if ctaButtons and ctaButtons.all is defined %}
    {% set ctaButtons = ctaButtons.all() %}
{% endif %}

{# Get navigation menus #}
{% set quickLinks = craft.navigation.nodes().handle('footerMenu1').level(1).all() %}
{% set popularTreatments = craft.navigation.nodes().handle('footerMenu2').level(1).all() %}

<!-- FOOTER - Sophisticated Navy -->
<footer class="relative overflow-hidden" style="background: linear-gradient(180deg, #2c4a5c 0%, #1e3644 100%);">
    <!-- Gold accent line at top -->
    <div class="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-gold/50 to-transparent"></div>
    
    <!-- Subtle pattern overlay -->
    <div class="absolute inset-0 opacity-[0.02]" style="background-image: url('data:image/svg+xml,%3Csvg width=&quot;60&quot; height=&quot;60&quot; viewBox=&quot;0 0 60 60&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;%3E%3Cg fill=&quot;none&quot; fill-rule=&quot;evenodd&quot;%3E%3Cg fill=&quot;%23c8a882&quot; fill-opacity=&quot;1&quot;%3E%3Cpath d=&quot;M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z&quot;/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"></div>
    
    <div class="relative max-w-7xl mx-auto px-6 lg:px-12 py-20 lg:py-26">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 lg:gap-16 mb-16">
            <!-- Column 1: Brand -->
            <div>
                {% if logo %}
                    {{ imageMacro.optimizedImage(logo, {
                      alt: siteName,
                      class: 'h-14 w-auto brightness-0 invert mb-6',
                      loading: 'eager',
                      width: logo.width,
                      height: logo.height,
                      sizes: '200px'
                    }) }}
                {% else %}
                    {# Logo - optimized for footer display size #}
                    <picture>
                        <source srcset="{{ alias('@web') }}/assets/images/logob-200w.png 1x, {{ alias('@web') }}/assets/images/logob-400w.png 2x" type="image/png">
                        <img src="{{ alias('@web') }}/assets/images/logob.png" alt="{{ siteName }}" class="h-14 w-auto brightness-0 invert mb-6" width="200" height="56">
                    </picture>
                {% endif %}
                
                {% if footerText %}
                <p class="text-white/70 text-sm leading-relaxed mb-8">
                    {{ footerText }}
                </p>
                {% endif %}
                
                <!-- Social Icons -->
                    {% if footerSocials|length %}
                    <div class="flex gap-4">
                        {% for social in footerSocials %}
                            {% set socialUrl = social.url is defined and social.url|length ? (social.url.url is defined ? social.url.url : social.url) : null %}
                            {% set socialTitle = social.title ?? social.linkText ?? '' %}
                            {% if socialUrl %}
                        <a href="{{ socialUrl }}" class="w-11 h-11 rounded-full flex items-center justify-center transition-all duration-300 bg-white/10 hover:bg-gold group" target="_blank" rel="noopener noreferrer" title="{{ socialTitle }}">
                            {# Detect social media platform from URL or title #}
                            {% if 'facebook' in socialUrl|lower or 'facebook' in socialTitle|lower %}
                                {# Facebook Icon #}
                                <svg class="w-5 h-5 text-white/80 group-hover:text-navy transition-colors" 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>
                            {% elseif 'instagram' in socialUrl|lower or 'instagram' in socialTitle|lower %}
                                {# Instagram Icon #}
                                <svg class="w-5 h-5 text-white/80 group-hover:text-navy transition-colors" 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-.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-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
                                </svg>
                            {% elseif 'twitter' in socialUrl|lower or 'twitter' in socialTitle|lower or 'x.com' in socialUrl|lower %}
                                {# Twitter/X Icon #}
                                <svg class="w-5 h-5 text-white/80 group-hover:text-navy transition-colors" 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>
                            {% elseif 'linkedin' in socialUrl|lower or 'linkedin' in socialTitle|lower %}
                                {# LinkedIn Icon #}
                                <svg class="w-5 h-5 text-white/80 group-hover:text-navy transition-colors" 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>
                            {% elseif 'youtube' in socialUrl|lower or 'youtube' in socialTitle|lower %}
                                {# YouTube Icon #}
                                <svg class="w-5 h-5 text-white/80 group-hover:text-navy transition-colors" fill="currentColor" viewBox="0 0 24 24">
                                    <path 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>
                            {% elseif 'tiktok' in socialUrl|lower or 'tiktok' in socialTitle|lower %}
                                {# TikTok Icon #}
                                <svg class="w-5 h-5 text-white/80 group-hover:text-navy transition-colors" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/>
                                </svg>
                            {% else %}
                                {# Generic link icon as fallback #}
                                <svg class="w-5 h-5 text-white/80 group-hover:text-navy transition-colors" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244"/>
                                </svg>
                            {% endif %}
                        </a>
                            {% endif %}
                    {% endfor %}
                </div>
                {% endif %}
            </div>
            
            <!-- Column 2: Quick Links -->
            <div>
                <h5 class="text-gold font-bold mb-6 text-sm uppercase tracking-[0.2em]">
                    Quick Links
                </h5>
                {% if quickLinks|length %}
                <ul class="space-y-4">
                    {% for node in quickLinks %}
                    <li><a href="{{ node.url }}" class="text-white/70 text-sm transition-colors hover:text-gold flex items-center gap-3"><span class="w-1.5 h-1.5 bg-gold/60 rounded-full"></span>{{ node.title }}</a></li>
                    {% endfor %}
                </ul>
                {% endif %}
            </div>
            
            <!-- Column 3: Popular Treatments -->
            <div>
                <h5 class="text-gold font-bold mb-6 text-sm uppercase tracking-[0.2em]">
                    Popular Treatments
                </h5>
                {% if popularTreatments|length %}
                <ul class="space-y-4">
                    {% for node in popularTreatments %}
                    <li><a href="{{ node.url }}" class="text-white/70 text-sm transition-colors hover:text-gold flex items-center gap-3"><span class="w-1.5 h-1.5 bg-gold/60 rounded-full"></span>{{ node.title }}</a></li>
                    {% endfor %}
                </ul>
                {% endif %}
            </div>
            
            <!-- Column 4: Get In Touch -->
            <div>
                <h5 class="text-gold font-bold mb-6 text-sm uppercase tracking-[0.2em]">
                    Get In Touch
                </h5>
                <div class="space-y-5">
                    {% if phoneNumber %}
                    <a href="tel:{{ phoneNumber|replace({' ': '', '(': '', ')': '', '-': ''}) }}" class="flex items-center gap-4 text-white/70 transition-colors hover:text-gold group">
                        <div class="w-11 h-11 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-gold transition-colors">
                            <svg class="w-5 h-5 text-gold group-hover:text-navy" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z"/>
                            </svg>
                        </div>
                        <span class="text-sm font-medium">{{ phoneNumber }}</span>
                    </a>
                    {% endif %}
                    
                    {% if email %}
                    <a href="mailto:{{ email }}" class="flex items-center gap-4 text-white/70 transition-colors hover:text-gold group">
                        <div class="w-11 h-11 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-gold transition-colors">
                            <svg class="w-5 h-5 text-gold group-hover:text-navy" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"/>
                            </svg>
                        </div>
                        <span class="text-sm font-medium">{{ email }}</span>
                    </a>
                    {% endif %}
                    
                    {% if address %}
                    {% if googleMapsUrl %}
                    <a href="{{ googleMapsUrl }}" target="_blank" rel="noopener noreferrer" class="flex items-start gap-4 text-white/70 hover:text-gold transition-colors group">
                    {% else %}
                    <div class="flex items-start gap-4 text-white/70">
                    {% endif %}
                        <div class="w-11 h-11 rounded-full bg-white/10 flex items-center justify-center flex-shrink-0 {% if googleMapsUrl %}group-hover:bg-gold transition-colors{% endif %}">
                            <svg class="w-5 h-5 text-gold {% if googleMapsUrl %}group-hover:text-navy{% endif %}" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"/>
                                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"/>
                            </svg>
                        </div>
                        <span class="text-sm">{{ address|nl2br }}</span>
                    {% if googleMapsUrl %}</a>{% else %}</div>{% endif %}
                    {% endif %}
                </div>
            </div>
        </div>
        
        <!-- Divider -->
        <div class="h-px bg-gradient-to-r from-transparent via-gold/30 to-transparent mb-10"></div>
        
        <!-- Bottom Bar -->
        <div class="flex flex-col md:flex-row justify-between items-center gap-4">
            {% if copyrightText %}
            <p class="text-white/50 text-sm">
                {{ copyrightText }}
            </p>
            {% endif %}
            {% if ctaButtons|length %}
            <div class="flex gap-8">
                {% for button in ctaButtons %}
                    {% set btnUrl = button.url is defined and button.url|length ? (button.url.url is defined ? button.url.url : button.url) : null %}
                    {% set btnLabel = button.linkText ?? button.title ?? '' %}
                    {% if btnUrl and btnLabel %}
                <a href="{{ btnUrl }}" class="text-white/50 text-sm transition-colors hover:text-gold">{{ btnLabel }}</a>
                    {% endif %}
                {% endfor %}
            </div>
            {% endif %}
        </div>
    </div>
</footer>