{{#
    @name Footer
    @desc Rich luxury footer with accreditation badges, contact details, opening times, and SumUp voucher link
#}}

<footer class="bg-neutral-900 text-neutral-300 mt-auto border-t border-neutral-800">

    {{# 1. Accreditation Badges & Partners Bar #}}
    <div class="border-b border-neutral-800 bg-neutral-950/70 py-8">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row items-center justify-between gap-6">
                <div class="text-center md:text-left">
                    <span class="text-xs font-bold uppercase tracking-widest text-accent">
                        Professional Accreditations &amp; Elite Brands
                    </span>
                    <p class="text-xs text-neutral-400 mt-0.5">
                        Trained by world-renowned facialists and accredited by international aesthetic bodies.
                    </p>
                </div>

                {{# Badges linking to About #qualifications #}}
                <div class="flex flex-wrap items-center justify-center gap-3">
                    <a href="/about#qualifications" class="inline-flex items-center justify-center h-9 px-3.5 rounded-full bg-white hover:bg-neutral-50 shadow-xs border border-white/30 hover:scale-105 transition-all" title="CIDESCO - Comité International d'Esthétique et de Cosmétologie">
                        <img src="/images/qualifications/cidesco.svg" alt="CIDESCO" class="h-5 w-auto max-w-[72px] object-contain" />
                    </a>
                    <a href="/about#qualifications" class="inline-flex items-center justify-center h-9 px-3.5 rounded-full bg-white hover:bg-neutral-50 shadow-xs border border-white/30 hover:scale-105 transition-all" title="BABTAC - British Association of Beauty Therapy &amp; Cosmetology">
                        <img src="/images/qualifications/babtac.png" alt="BABTAC" class="h-4 w-auto max-w-[76px] object-contain" />
                    </a>
                    <a href="/about#qualifications" class="inline-flex items-center justify-center h-9 px-3.5 rounded-full bg-white hover:bg-neutral-50 shadow-xs border border-white/30 hover:scale-105 transition-all" title="CIBTAC - Confederation of International Beauty Therapy">
                        <img src="/images/qualifications/cibtac.png" alt="CIBTAC" class="h-5.5 w-auto object-contain" />
                    </a>
                    <a href="/about#qualifications" class="inline-flex items-center justify-center h-9 px-3.5 rounded-full bg-white hover:bg-neutral-50 shadow-xs border border-white/30 hover:scale-105 transition-all" title="ITEC Diploma - International Therapy Examination Council">
                        <img src="/images/qualifications/itec.png" alt="ITEC Diploma" class="h-4.5 w-auto max-w-[72px] object-contain" />
                    </a>
                </div>
            </div>
        </div>
    </div>

    {{# 2. Main Footer Grid #}}
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 lg:gap-8">
            
            {{# Column 1: Brand & Head Therapist #}}
            <div>
                <a href="/" class="inline-block mb-4">
                    <span class="font-serif text-2xl font-bold tracking-tight text-white">
                        The Foundation
                    </span>
                    <span class="block text-xs uppercase tracking-widest text-accent font-sans mt-0.5">
                        Beauty Studio • Guildford
                    </span>
                </a>
                <p class="text-neutral-400 text-sm leading-relaxed mb-4">
                    An exclusive beauty therapy and aesthetics sanctuary on Guildford High Street, offering bespoke anti-ageing facials, CACI Synergy non-surgical toning, and relaxing wellbeing rituals.
                </p>
                <div class="text-xs text-neutral-400">
                    <span class="text-white font-medium">Head Therapist:</span> Victoria Kelson
                </div>
            </div>

            {{# Column 2: Quick Links #}}
            <div>
                <h4 class="font-serif text-lg font-semibold text-white mb-4">
                    Explore
                </h4>
                <ul class="space-y-2.5 text-sm text-neutral-300">
                    <li>
                        <a href="/about" class="hover:text-accent transition-colors">About Victoria &amp; Studio</a>
                    </li>
                    <li>
                        <a href="/services" class="hover:text-accent transition-colors">Services &amp; Price List</a>
                    </li>
                    <li>
                        <a href="/services#facials" class="hover:text-accent transition-colors">CACI &amp; Facials</a>
                    </li>
                    <li>
                        <a href="/testimonials" class="hover:text-accent transition-colors">Client Testimonials &amp; Reviews</a>
                    </li>
                    <li>
                        <a href="/news" class="hover:text-accent transition-colors">Skincare News &amp; Articles</a>
                    </li>
                    <li>
                        <a href="/contact" class="hover:text-accent transition-colors">Contact &amp; Appointments</a>
                    </li>
                </ul>
            </div>

            {{# Column 3: Contact Details & Location #}}
            <div>
                <h4 class="font-serif text-lg font-semibold text-white mb-4">
                    Contact &amp; Location
                </h4>
                <div class="space-y-3 text-sm text-neutral-300">
                    <div class="flex items-start gap-2.5">
                        <svg class="w-4 h-4 text-accent shrink-0 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                        </svg>
                        <div>
                            <span>214 High Street</span><br>
                            <span>Guildford, Surrey, GU1 3JB</span><br>
                            <a href="{{ company:google_maps_url }}" target="_blank" rel="noopener noreferrer" class="text-xs text-accent hover:underline mt-0.5 inline-block">
                                View on Google Maps &rarr;
                            </a>
                        </div>
                    </div>

                    <div class="flex items-center gap-2.5">
                        <svg class="w-4 h-4 text-accent shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                        </svg>
                        <a href="tel:{{ company:telephone_clean }}" class="hover:text-accent font-medium text-white transition-colors">
                            {{ company:telephone }}
                        </a>
                    </div>

                    <div class="flex items-center gap-2.5">
                        <svg class="w-4 h-4 text-accent shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                        </svg>
                        <a href="mailto:{{ company:email }}" class="hover:text-accent transition-colors break-all">
                            {{ company:email }}
                        </a>
                    </div>
                </div>
            </div>

            {{# Column 4: Opening Hours & Vouchers #}}
            <div>
                <h4 class="font-serif text-lg font-semibold text-white mb-4">
                    Opening Times
                </h4>
                <div class="space-y-1.5 text-xs text-neutral-300 mb-5">
                    <div class="flex justify-between py-1 border-b border-neutral-800">
                        <span>Tuesday – Saturday:</span>
                        <span class="text-white font-medium">9:30am – 6:00pm</span>
                    </div>
                    <div class="flex justify-between py-1 border-b border-neutral-800 text-neutral-400">
                        <span>Sunday &amp; Monday:</span>
                        <span>Closed</span>
                    </div>
                    <p class="text-neutral-400 text-2xs pt-1 italic">
                        Hours outside those stated above can be arranged by appointment only.
                    </p>
                </div>

                {{# SumUp Voucher Button #}}
                <div class="p-3.5 rounded-xl bg-neutral-800/80 border border-neutral-700/70">
                    <div class="text-xs font-semibold text-white mb-1">
                        Gift Vouchers Available
                    </div>
                    <p class="text-2xs text-neutral-400 mb-2.5">
                        Purchase cash vouchers instantly online via SumUp.
                    </p>
                    <a 
                        href="{{ company:voucher_url }}" 
                        target="_blank" 
                        rel="noopener noreferrer"
                        class="inline-flex items-center justify-center w-full gap-1.5 px-3 py-1.5 rounded-md bg-accent hover:bg-accent-hover text-white text-xs font-semibold transition-colors"
                    >
                        <span>Buy SumUp Gift Card</span>
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                        </svg>
                    </a>
                </div>
            </div>

        </div>
    </div>

    {{# 3. Bottom Legal Strip #}}
    <div class="border-t border-neutral-800 bg-neutral-950 py-6">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-neutral-400">
            <div>
                &copy; {{ now | format('Y') }} The Foundation Beauty Studio. All rights reserved.
            </div>

            <div class="flex flex-wrap items-center gap-5">
                <a href="/privacy-policy" class="hover:text-accent transition-colors">
                    Privacy &amp; Cookie Policy
                </a>
                <span>•</span>
                <a href="{{ company:facebook_url }}" target="_blank" rel="noopener noreferrer" class="hover:text-accent transition-colors">
                    Facebook
                </a>
                <span>•</span>
                {{# Reset Consent #}}
                {{ yield:reset_consent }}
            </div>
        </div>
    </div>

</footer>