{% load tailwind_tags %}
{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{{ site_settings.site_name }}{% endblock %}</title>
    <meta name="description" content="{% block meta_description %}{{ site_settings.tagline }}{% endblock %}">

    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="{% block og_title %}{{ site_settings.site_name }}{% endblock %}">
    <meta property="og:description" content="{% block og_description %}{{ site_settings.tagline }}{% endblock %}">
    {% if site_settings.logo %}
    <meta property="og:image" content="{{ request.scheme }}://{{ request.get_host }}{{ site_settings.logo.url }}">
    {% endif %}

    {% if site_settings.favicon %}
    <link rel="icon" href="{{ site_settings.favicon.url }}">
    {% endif %}

    {% tailwind_css %}

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Playfair+Display:wght@700&display=swap"
        rel="stylesheet">

    <!-- AOS CSS for scroll animations -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-family: 'Playfair Display', serif;
        }

        html.lenis,
        html.lenis body {
            height: auto;
        }

        .lenis.lenis-smooth {
            scroll-behavior: auto !important;
        }

        .lenis.lenis-smooth [data-lenis-prevent] {
            overscroll-behavior: contain;
        }

        .lenis.lenis-stopped {
            overflow: hidden;
        }

        .lenis.lenis-smooth iframe {
            pointer-events: none;
        }

        html,
        body {
            max-width: 100%;
            overflow-x: hidden;
        }

        /* Custom Scrollbar for global body */
        html::-webkit-scrollbar,
        body::-webkit-scrollbar {
            width: 10px;
        }

        html::-webkit-scrollbar-track,
        body::-webkit-scrollbar-track {
            background: #333333;
        }

        html::-webkit-scrollbar-thumb,
        body::-webkit-scrollbar-thumb {
            background: #888888;
            border-radius: 10px;
            border: 2px solid #333333;
        }

        html::-webkit-scrollbar-thumb:hover,
        body::-webkit-scrollbar-thumb:hover {
            background: #aaaaaa;
        }

        html,
        body {
            scrollbar-width: thin;
            scrollbar-color: #888888 #333333;
        }

        /* Hide scrollbars for dropdown menus/modals */
        .tc-sub-dropdown::-webkit-scrollbar,
        .tc-dropdown::-webkit-scrollbar,
        .tc-mega-menu::-webkit-scrollbar,
        .hide-scrollbar::-webkit-scrollbar {
            display: none;
        }

        .tc-sub-dropdown,
        .tc-dropdown,
        .tc-mega-menu,
        .hide-scrollbar {
            -ms-overflow-style: none;
            /* IE and Edge */
            scrollbar-width: none;
            /* Firefox */
        }

        /* Base 3D Perspective for hero */
        .perspective-1000 {
            perspective: 1000px;
        }

        .preserve-3d {
            transform-style: preserve-3d;
        }
    </style>
</head>

<body class="min-h-screen flex flex-col">

    <!-- Global Toast Notifications -->
    {% if messages %}
    <div id="toast-container" class="fixed top-24 right-4 z-[100] flex flex-col gap-3 pointer-events-none">
        {% for message in messages %}
        <div
            class="toast-message transform transition-all duration-700 ease-out translate-x-full opacity-0 max-w-[calc(100vw-2rem)] sm:max-w-sm w-full bg-white border-l-4 {% if message.tags == 'success' %}border-green-500{% elif message.tags == 'error' %}border-red-500{% elif message.tags == 'warning' %}border-yellow-500{% else %}border-indigo-500{% endif %} rounded-lg shadow-xl pointer-events-auto overflow-hidden">
            <div class="p-4 flex items-start gap-3">
                {% if message.tags == 'success' %}
                <svg class="w-6 h-6 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                {% elif message.tags == 'error' %}
                <svg class="w-6 h-6 text-red-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                {% else %}
                <svg class="w-6 h-6 text-indigo-500 flex-shrink-0" fill="none" stroke="currentColor"
                    viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                {% endif %}
                <div class="flex-1 mt-0.5">
                    <p class="text-sm font-medium text-slate-800">{{ message }}</p>
                </div>
                <button onclick="this.closest('.toast-message').remove()"
                    class="text-slate-400 hover:text-slate-600 focus:outline-none">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
                        </path>
                    </svg>
                </button>
            </div>
            <!-- Progress Bar -->
            <div class="h-1 w-full bg-slate-100">
                <div
                    class="toast-progress h-full {% if message.tags == 'success' %}bg-green-500{% elif message.tags == 'error' %}bg-red-500{% elif message.tags == 'warning' %}bg-yellow-500{% else %}bg-indigo-500{% endif %} w-full origin-left">
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const toasts = document.querySelectorAll('.toast-message');
            toasts.forEach((toast, index) => {
                // Slide in slowly
                setTimeout(() => {
                    toast.classList.remove('translate-x-full', 'opacity-0')   // Animate progress bar
                    const progressBar = toast.querySelector('.toast-progress');
                    // Force reflow
                    void progressBar.offsetWidth;
                    progressBar.style.transition = 'transform 3s linear';
                    progressBar.style.transform = 'scaleX(0)';

                    // Hide after 3 seconds
                    setTimeout(() => {
                        toast.classList.add('translate-x-full', 'opacity-0');
                        setTimeout(() => {
                            toast.remove();
                        }, 700); // Wait for exit animation
                    }, 3000);
                }, index * 200 + 100); // Stagger if multiple messages
            });
        });
    </script>
    {% endif %}

    <!-- Unified Header -->
    <header class="sticky top-0 z-50 w-full shadow-md font-sans"
        style="background-color: #3f556d; font-family: 'Inter', sans-serif;">
        <div class="mx-auto flex flex-col md:flex-row w-full max-w-7xl md:h-[140px]">

            <!-- Left Side: Logo in White Box (Desktop) -->
            <div class="hidden md:flex bg-white flex-shrink-0 items-center justify-center p-2 relative z-10"
                style="width: 230px;">
                <a href="/" class="flex items-center justify-center h-full w-full">
                    {% if site_settings.logo %}
                    <img src="{{ site_settings.logo.url }}" alt="{{ site_settings.site_name }}"
                        style="max-height: 125px; max-width: 100%; object-fit: contain;">
                    {% else %}
                    <span
                        class="font-extrabold text-xl text-slate-800 uppercase tracking-tight text-center leading-tight">
                        {{ site_settings.site_name|default:"Trade California" }}
                    </span>
                    {% endif %}
                </a>
            </div>

            <!-- Mobile Header Top Bar -->
            <div class="md:hidden flex justify-between items-center w-full px-3 py-2.5 shadow-sm"
                style="background-color: #3f556d;">
                
                <!-- Left: Logo -->
                <div class="flex-shrink-0 flex items-center bg-white p-1.5 rounded shadow-sm" style="width: 65px; height: 50px; justify-content: center;">
                    {% if site_settings.logo %}
                    <img src="{{ site_settings.logo.url }}" alt="{{ site_settings.site_name }}"
                        style="max-height: 100%; max-width: 100%; object-fit: contain;">
                    {% else %}
                    <a href="/" class="text-slate-900 font-bold text-xs tracking-tight uppercase">
                        TC
                    </a>
                    {% endif %}
                </div>

                <!-- Center: Title -->
                <div class="flex-1 flex justify-center items-center px-2 truncate">
                    <span class="font-bold tracking-normal uppercase text-white text-center truncate"
                        style="font-family: 'Oswald', 'Inter', sans-serif; font-size: clamp(17px, 4.5vw, 22px); letter-spacing: 0.5px;">
                        {{ site_settings.site_name|default:"TRADE CALIFORNIA" }}
                    </span>
                </div>

                <!-- Right: Menu Button -->
                <div class="flex-shrink-0 flex justify-end" style="width: 65px;">
                    <button id="mobile-menu-button" class="text-white focus:outline-none p-2 hover:bg-white/10 rounded-lg transition-colors">
                        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M4 6h16M4 12h16M4 18h16" />
                        </svg>
                    </button>
                </div>
            </div>

            <!-- Right Side Area (Desktop) -->
            <div class="hidden md:flex flex-1 flex-col min-w-0">

                <!-- Top Row (Title + Icons) -->
                <div class="flex justify-between items-center px-6"
                    style="height: 85px; background-color: #4a627d;">
                    <!-- Empty div to balance flex layout -->
                    <div class="flex-1"></div>

                    <!-- Title & Subtitle -->
                    <div
                        class="flex-[2] flex flex-col items-center justify-center text-white mt-1.5 px-4 min-w-0">
                        <div class="font-bold tracking-normal uppercase truncate w-full text-center leading-none"
                            style="font-family: 'Oswald', 'Inter', sans-serif; font-size: clamp(22px, 2.5vw, 38px); letter-spacing: -0.5px;">
                            {{ site_settings.site_name|default:"TRADE CALIFORNIA" }}
                        </div>
                        <div class="text-[14px] md:text-[18px] font-semibold tracking-wide opacity-95 mt-1 whitespace-nowrap truncate w-full text-center"
                            style="font-family: 'Inter', sans-serif;">
                            Your Gateway to Global Trade
                        </div>
                    </div>

                    <!-- Right Actions -->
                    <div class="flex-1 flex items-center justify-end gap-6">
                        <!-- Location (Right) -->
                        <div class="flex items-center justify-end">
                            <div class="inline-flex items-center gap-3 px-3 py-1.5 rounded-full transition-all duration-300 group cursor-default"
                                style="background-color: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.2);">
                                <div class="flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-full"
                                    style="background-color: rgba(255,255,255,0.2); color: white;">
                                    <svg class="w-4 h-4" 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.243-4.243a8 8 0 1111.314 0z">
                                        </path>
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                    </svg>
                                </div>
                                <div class="flex flex-col text-left pr-2 max-w-[160px] lg:max-w-[200px]">
                                    <span class="text-[10px] md:text-[11px] font-medium text-white leading-tight">
                                        2213 Del Paso Blvd, Suite 167<br>Sacramento, CA 95815
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Bottom Row (Nav Links) -->
                <div class="flex items-stretch justify-between"
                    style="height: 55px; background-color: #39516a; border-top: 1px solid rgba(0,0,0,0.15);">
                    <nav style="display: flex; height: 100%; list-style: none; margin: 0; padding: 0;">
                        {% for link in nav_links %}
                        {% if link.label.lower == 'trade' %}
                        <!-- Trade Dropdown with Professional Nested CSS -->
                        <style>
                            /* Modern, premium dropdown animations and positioning */
                            .tc-nav-item:hover .tc-main-dropdown {
                                opacity: 1;
                                visibility: visible;
                                transform: translateY(0) scale(1);
                            }

                            .tc-sub-item:hover>.tc-sub-dropdown {
                                opacity: 1;
                                visibility: visible;
                                transform: translateX(0) scale(1);
                            }

                            .tc-sub-dropdown {
                                top: -14px;
                                left: 100%;
                                margin-left: 18px;
                                /* Ensure dropdowns do not stick together (lege na jay) */
                            }

                            /* Invisible bridge so mouse hover doesn't break when moving across the gap */
                            .tc-bridge {
                                position: absolute;
                                left: -24px;
                                top: 0;
                                width: 28px;
                                height: 100%;
                                z-index: -1;
                            }

                            /* Premium glassmorphism panel style */
                            .tc-glass-panel {
                                background: rgba(255, 255, 255, 0.98);
                                backdrop-filter: blur(16px);
                                -webkit-backdrop-filter: blur(16px);
                                border: 1px solid rgba(226, 232, 240, 0.9);
                                box-shadow: 0 20px 40px -8px rgba(15, 23, 42, 0.12), 0 0 16px -4px rgba(15, 23, 42, 0.04), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
                            }

                            /* Modern item hover effect */
                            .tc-menu-item {
                                position: relative;
                                overflow: hidden;
                            }

                            .tc-menu-item::before {
                                content: '';
                                position: absolute;
                                left: 0;
                                top: 0;
                                height: 100%;
                                width: 3px;
                                background-color: #4f46e5;
                                transform: scaleY(0);
                                transition: transform 0.2s ease;
                                transform-origin: center;
                                border-radius: 0 4px 4px 0;
                            }

                            .tc-menu-item:hover::before {
                                transform: scaleY(1);
                            }
                        </style>
                        <div class="relative h-full flex items-center tc-nav-item">
                            <a href="{{ link.url }}"
                                class="px-4 h-full flex items-center text-[13px] font-medium transition-colors duration-200 text-blue-50 hover:text-white gap-1.5 focus:outline-none">
                                {{ link.label }}
                                <svg class="w-3.5 h-3.5 opacity-70 transition-transform duration-200" fill="none"
                                    stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M19 9l-7 7-7-7"></path>
                                </svg>
                            </a>

                            <!-- Main Dropdown Menu -->
                            <div
                                class="tc-main-dropdown absolute top-full left-0 mt-2 w-[300px] rounded-2xl tc-glass-panel opacity-0 invisible transition-all duration-300 transform origin-top -translate-y-3 scale-95 z-[60]">
                                <div class="p-2 space-y-0.5">
                                    {% for main_cat in main_categories %}
                                    {% if main_cat.children.exists %}
                                    <!-- Level 1 with Children -->
                                    <div class="relative tc-sub-item rounded-xl">
                                        <div
                                            class="tc-item-content tc-menu-item flex items-center justify-between px-4 py-2.5 text-[14px] font-semibold text-slate-700 rounded-xl hover:bg-indigo-50/80 hover:text-indigo-700 transition-all duration-200 cursor-pointer group/btn">
                                            <div class="flex items-center">
                                                <span class="whitespace-nowrap">{{ main_cat.name }}</span>
                                            </div>
                                        </div>

                                        <!-- Level 2 Dropdown -->
                                        <div
                                            class="tc-sub-dropdown absolute w-[300px] rounded-2xl tc-glass-panel opacity-0 invisible transition-all duration-300 transform origin-top-left -translate-x-3 scale-95 z-[70]">
                                            <div class="tc-bridge"></div>
                                            <div class="p-2 space-y-0.5">
                                                {% for sub_cat in main_cat.children.all %}
                                                {% if sub_cat.children.exists %}
                                                <!-- Level 2 with Children -->
                                                <div class="relative tc-sub-item rounded-xl">
                                                    <div
                                                        class="tc-item-content tc-menu-item flex items-center justify-between px-4 py-2.5 text-[14px] font-semibold text-slate-700 rounded-xl hover:bg-indigo-50/80 hover:text-indigo-700 transition-all duration-200 cursor-pointer group/btn2">
                                                        <div class="flex items-center">
                                                            <span class="whitespace-nowrap">{{ sub_cat.name }}</span>
                                                        </div>
                                                    </div>

                                                    <!-- Level 3 Dropdown -->
                                                    <div
                                                        class="tc-sub-dropdown absolute w-[300px] rounded-2xl tc-glass-panel opacity-0 invisible transition-all duration-300 transform origin-top-left -translate-x-3 scale-95 z-[80]">
                                                        <div class="tc-bridge"></div>
                                                        <div class="p-2 space-y-0.5">
                                                            {% for item in sub_cat.children.all %}
                                                            <!-- Level 3 Items -->
                                                            <a href="{% url 'category_detail' item.id %}"
                                                                class="tc-menu-item flex items-center px-4 py-2.5 text-[14px] font-semibold text-slate-700 rounded-xl hover:bg-indigo-50/80 hover:text-indigo-700 transition-all duration-200 group/btn3">
                                                                <span class="whitespace-nowrap truncate">{{ item.name }}</span>
                                                            </a>
                                                            {% endfor %}
                                                        </div>
                                                    </div>
                                                </div>
                                                {% else %}
                                                <!-- Level 2 Items without children -->
                                                <a href="{% url 'category_detail' sub_cat.id %}"
                                                    class="tc-menu-item flex items-center px-4 py-2.5 text-[14px] font-semibold text-slate-700 rounded-xl hover:bg-indigo-50/80 hover:text-indigo-700 transition-all duration-200 group/btn2">
                                                    <span class="whitespace-nowrap truncate">{{ sub_cat.name }}</span>
                                                </a>
                                                {% endif %}
                                                {% endfor %}
                                            </div>
                                        </div>
                                    </div>
                                    {% else %}
                                    <!-- Level 1 Items without children -->
                                    <a href="{% url 'category_detail' main_cat.id %}"
                                        class="tc-menu-item flex items-center px-4 py-2.5 text-[14px] font-semibold text-slate-700 rounded-xl hover:bg-indigo-50/80 hover:text-indigo-700 transition-all duration-200 group/btn">
                                        <span class="whitespace-nowrap">{{ main_cat.name }}</span>
                                    </a>
                                    {% endif %}
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                        {% elif link.label.lower == 'connect' %}
                        <!-- Connect Dropdown -->
                        <div class="relative group h-full flex items-center">
                            <button
                                class="px-4 h-full flex items-center text-[13px] font-medium transition-colors duration-200 text-blue-50 hover:text-white gap-1.5 focus:outline-none">
                                {{ link.label }}
                                <svg class="w-3.5 h-3.5 opacity-70 group-hover:opacity-100 transition-transform duration-200 group-hover:rotate-180"
                                    fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M19 9l-7 7-7-7"></path>
                                </svg>
                            </button>
                            <!-- Dropdown Menu -->
                            <div
                                class="absolute top-full left-0 mt-0 w-64 bg-white rounded-b-xl shadow-2xl shadow-indigo-900/20 border border-slate-100 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform origin-top-left -translate-y-2 group-hover:translate-y-0 z-50">
                                <div class="p-2 space-y-1">
                                    <a href="{% url 'connect' 'buyer' %}"
                                        class="flex items-center gap-3 px-4 py-3 text-sm font-semibold text-slate-600 rounded-lg hover:bg-indigo-50 hover:text-indigo-700 transition-all duration-200 group/item">
                                        <span
                                            class="w-1.5 h-1.5 rounded-full bg-slate-300 group-hover/item:bg-indigo-500 group-hover/item:scale-125 transition-all duration-300 flex-shrink-0"></span>
                                        <span class="whitespace-nowrap">Buyer</span>
                                    </a>
                                    <a href="{% url 'connect' 'supplier' %}"
                                        class="flex items-center gap-3 px-4 py-3 text-sm font-semibold text-slate-600 rounded-lg hover:bg-indigo-50 hover:text-indigo-700 transition-all duration-200 group/item">
                                        <span
                                            class="w-1.5 h-1.5 rounded-full bg-slate-300 group-hover/item:bg-indigo-500 group-hover/item:scale-125 transition-all duration-300 flex-shrink-0"></span>
                                        <span class="whitespace-nowrap">U.S. Supplier</span>
                                    </a>
                                    <a href="{% url 'connect' 'partner' %}"
                                        class="flex items-center gap-3 px-4 py-3 text-sm font-semibold text-slate-600 rounded-lg hover:bg-indigo-50 hover:text-indigo-700 transition-all duration-200 group/item">
                                        <span
                                            class="w-1.5 h-1.5 rounded-full bg-slate-300 group-hover/item:bg-indigo-500 group-hover/item:scale-125 transition-all duration-300 flex-shrink-0"></span>
                                        <span class="whitespace-nowrap">Business Partnership</span>
                                    </a>
                                    <a href="{% url 'connect' 'distributor' %}"
                                        class="flex items-center gap-3 px-4 py-3 text-sm font-semibold text-slate-600 rounded-lg hover:bg-indigo-50 hover:text-indigo-700 transition-all duration-200 group/item">
                                        <span
                                            class="w-1.5 h-1.5 rounded-full bg-slate-300 group-hover/item:bg-indigo-500 group-hover/item:scale-125 transition-all duration-300 flex-shrink-0"></span>
                                        <span class="whitespace-nowrap">Distributorship</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                        {% else %}
                        <a href="{{ link.url }}"
                            class="px-4 h-full flex items-center text-[13px] font-medium transition-colors duration-200 text-blue-50 hover:text-white gap-1.5 group relative">
                            {{ link.label }}
                        </a>
                        {% endif %}
                        {% endfor %}
                    </nav>

                    <!-- Contact Info on Right Side -->
                    <div class="flex items-center gap-4 px-4 text-white text-[11px] font-medium h-full">
                        {% if primary_office or site_settings %}
                        <!-- Email -->
                        <a href="mailto:{{ primary_office.email|default:site_settings.contact_email|default:'info@tradecalifornia.com' }}"
                            class="flex items-center gap-1.5 hover:text-indigo-300 transition-colors opacity-90 hover:opacity-100">
                            <svg class="w-3.5 h-3.5 opacity-80" 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">
                                </path>
                            </svg>
                            <span>{{ primary_office.email|default:site_settings.contact_email|default:"info@tradecalifornia.com" }}</span>
                        </a>
                        <!-- Phone -->
                        <a href="tel:{{ primary_office.phone|default:site_settings.contact_phone|default:'+1 (800) 123-4567' }}"
                            class="flex items-center gap-1.5 hover:text-indigo-300 transition-colors opacity-90 hover:opacity-100">
                            <svg class="w-3.5 h-3.5 opacity-80" 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">
                                </path>
                            </svg>
                            <span>{{ primary_office.phone|default:site_settings.contact_phone|default:"+1 (800) 123-4567" }}</span>
                        </a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>


        <!-- Mobile Menu Dropdown -->
        <div id="mobile-menu" data-lenis-prevent
            class="hidden md:hidden bg-white border-t border-indigo-100 absolute top-full w-full left-0 shadow-2xl max-h-[calc(100vh-70px)] overflow-y-auto hide-scrollbar">
        <div class="px-4 pt-3 pb-6 space-y-1">
            <!-- Mobile Search -->
            <form action="/search" method="GET" class="mb-5 relative group">
                <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
                    <svg class="w-5 h-5 text-indigo-400 group-focus-within:text-indigo-600 transition-colors"
                        fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                </div>
                <input type="text" name="q" placeholder="Search..."
                    class="w-full bg-slate-50 border border-slate-200 rounded-xl py-3 pl-10 pr-4 text-slate-800 font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all shadow-sm">
            </form>

            {% for link in nav_links %}
            {% if link.label.lower == 'trade' %}
            <!-- Mobile Trade Accordion -->
            <details class="group mb-1">
                <summary
                    class="flex items-center justify-between px-4 py-3.5 text-[15px] font-bold text-slate-700 rounded-xl hover:bg-indigo-50 hover:text-indigo-700 transition-all cursor-pointer list-none [&::-webkit-details-marker]:hidden">
                    <span>{{ link.label }}</span>
                    <svg class="w-4 h-4 text-slate-400 group-open:rotate-180 transition-transform duration-300"
                        fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7">
                        </path>
                    </svg>
                </summary>
                <div class="px-2 pb-2 space-y-0.5 animate-fade-in-down">
                    {% for main_cat in main_categories %}
                    {% if main_cat.children.exists %}
                    <details class="group/sub1">
                        <summary
                            class="flex items-center justify-between px-4 py-2 text-[14px] font-semibold text-slate-600 rounded-lg hover:bg-indigo-50/80 hover:text-indigo-700 transition-colors cursor-pointer list-none [&::-webkit-details-marker]:hidden">
                            <div class="flex items-center gap-4">
                                <svg class="w-1.5 h-1.5 text-slate-300 group-hover/sub1:text-indigo-400 transition-colors flex-shrink-0"
                                    fill="currentColor" viewBox="0 0 24 24">
                                    <circle cx="12" cy="12" r="8"></circle>
                                </svg>
                                <span>{{ main_cat.name }}</span>
                            </div>
                            <svg class="w-3.5 h-3.5 text-slate-400 group-open/sub1:rotate-180 transition-transform duration-300"
                                fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M19 9l-7 7-7-7"></path>
                            </svg>
                        </summary>
                        <div class="pl-8 pr-2 space-y-0.5 py-1 border-l border-indigo-100/50 ml-5 mt-1">
                            {% for sub_cat in main_cat.children.all %}
                            {% if sub_cat.children.exists %}
                            <details class="group/sub2">
                                <summary
                                    class="flex items-center justify-between px-3 py-1.5 text-[13px] font-medium text-slate-500 rounded-lg hover:bg-indigo-50/50 hover:text-indigo-600 transition-colors cursor-pointer list-none [&::-webkit-details-marker]:hidden">
                                    <span>{{ sub_cat.name }}</span>
                                    <svg class="w-3 h-3 text-slate-400 group-open/sub2:rotate-180 transition-transform duration-300"
                                        fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M19 9l-7 7-7-7"></path>
                                    </svg>
                                </summary>
                                <div class="pl-4 space-y-0 py-0.5">
                                    {% for item in sub_cat.children.all %}
                                    <a href="{% url 'category_detail' item.id %}"
                                        class="flex items-center gap-3 px-3 py-1 text-[12px] font-medium text-slate-400 hover:text-indigo-600 rounded-md transition-colors group/sub3">
                                        <svg class="w-1 h-1 text-slate-300 group-hover/sub3:text-indigo-400 transition-colors flex-shrink-0"
                                            fill="currentColor" viewBox="0 0 24 24">
                                            <circle cx="12" cy="12" r="8"></circle>
                                        </svg>
                                        {{ item.name }}
                                    </a>
                                    {% endfor %}
                                </div>
                            </details>
                            {% else %}
                            <a href="{% url 'category_detail' sub_cat.id %}"
                                class="flex items-center gap-3 px-3 py-1.5 text-[13px] font-medium text-slate-500 rounded-lg hover:bg-indigo-50/50 hover:text-indigo-600 transition-colors group/sub2item">
                                <svg class="w-1 h-1 text-slate-300 group-hover/sub2item:text-indigo-400 transition-colors flex-shrink-0"
                                    fill="currentColor" viewBox="0 0 24 24">
                                    <circle cx="12" cy="12" r="8"></circle>
                                </svg>
                                <span>{{ sub_cat.name }}</span>
                            </a>
                            {% endif %}
                            {% endfor %}
                        </div>
                    </details>
                    {% else %}
                    <a href="{% url 'category_detail' main_cat.id %}"
                        class="flex items-center gap-4 px-4 py-2 text-[14px] font-semibold text-slate-600 rounded-lg hover:bg-indigo-50/80 hover:text-indigo-700 transition-colors group/sub1item">
                        <svg class="w-1.5 h-1.5 text-slate-300 group-hover/sub1item:text-indigo-400 transition-colors flex-shrink-0"
                            fill="currentColor" viewBox="0 0 24 24">
                            <circle cx="12" cy="12" r="8"></circle>
                        </svg>
                        <span>{{ main_cat.name }}</span>
                    </a>
                    {% endif %}
                    {% endfor %}
                </div>
            </details>
            {% elif link.label.lower == 'connect' %}
            <!-- Connect Mobile Dropdown (Simulated as nested links) -->
            <div class="px-4 py-2 mb-1 border-t border-b border-slate-100 bg-slate-50/50 rounded-xl">
                <p class="text-[12px] font-bold text-slate-400 mb-2 tracking-wider uppercase">{{ link.label }}</p>
                <div class="space-y-1">
                    <a href="{% url 'connect' 'buyer' %}"
                        class="flex items-center gap-3 px-3 py-2.5 text-[14px] font-semibold text-slate-600 rounded-lg hover:bg-indigo-50 hover:text-indigo-700 transition-colors">
                        <svg class="w-4 h-4 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z">
                            </path>
                        </svg>
                        Buyer
                    </a>
                    <a href="{% url 'connect' 'supplier' %}"
                        class="flex items-center gap-3 px-3 py-2.5 text-[14px] font-semibold text-slate-600 rounded-lg hover:bg-indigo-50 hover:text-indigo-700 transition-colors">
                        <svg class="w-4 h-4 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4">
                            </path>
                        </svg>
                        U.S. Supplier
                    </a>
                    <a href="{% url 'connect' 'partner' %}"
                        class="flex items-center gap-3 px-3 py-2.5 text-[14px] font-semibold text-slate-600 rounded-lg hover:bg-indigo-50 hover:text-indigo-700 transition-colors">
                        <svg class="w-4 h-4 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1">
                            </path>
                        </svg>
                        Business Partnership
                    </a>
                    <a href="{% url 'connect' 'distributor' %}"
                        class="flex items-center gap-3 px-3 py-2.5 text-[14px] font-semibold text-slate-600 rounded-lg hover:bg-indigo-50 hover:text-indigo-700 transition-colors">
                        <svg class="w-4 h-4 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
                            </path>
                        </svg>
                        Distributorship
                    </a>
                </div>
            </div>
            {% else %}
            <a href="{{ link.url }}"
                class="flex items-center justify-between px-4 py-3.5 text-[15px] font-bold text-slate-700 rounded-xl hover:bg-indigo-50 hover:text-indigo-700 transition-all border border-transparent hover:border-indigo-100 mb-1">
                {{ link.label }}
            </a>
            {% endif %}
            {% endfor %}

            <!-- Mobile Contact Info -->
            <div
                class="mt-6 pt-5 border-t border-slate-200 px-5 bg-gradient-to-br from-indigo-50 to-violet-50 rounded-2xl pb-5 border border-indigo-100/50">
                <p class="text-[11px] font-bold text-indigo-600 mb-1.5 tracking-wider uppercase">Visit Our Location
                </p>
                <p class="text-[14px] font-semibold text-slate-800 mb-5 flex items-start gap-2">
                    <svg class="w-4 h-4 text-indigo-500 mt-0.5 flex-shrink-0" 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.243-4.243a8 8 0 1111.314 0z">
                        </path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                    </svg>
                    {{ site_settings.address|default:"123 Trade Center, CA 95815" }}
                </p>

                <p class="text-[11px] font-bold text-indigo-600 mb-1.5 tracking-wider uppercase">Phone Number</p>
                <p class="text-[16px] font-extrabold text-indigo-700 mb-5 flex items-center gap-2">
                    <svg class="w-4 h-4 text-indigo-500" 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">
                        </path>
                    </svg>
                    {{ site_settings.contact_phone|default:"+1 (800) 123-4567" }}
                </p>

                <p class="text-[11px] font-bold text-indigo-600 mb-1.5 tracking-wider uppercase">Email</p>
                <p class="font-semibold text-[14px] text-slate-800 break-all flex items-center gap-2">
                    <svg class="w-4 h-4 text-indigo-500" 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">
                        </path>
                    </svg>
                    {{ site_settings.contact_email|default:"contact@tradecalifornia.com" }}
                </p>
            </div>
        </div>
    </div>
    </header>

    <!-- Script to remove numbering and handle responsive submenus -->
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            // 1. Remove leading numbers from category names
            function removeLeadingNumbers(element) {
                element.childNodes.forEach(node => {
                    if (node.nodeType === Node.TEXT_NODE) {
                        let text = node.textContent;
                        // Regex to match leading numbers like "1. ", "2- ", "3) ", "10 "
                        let newText = text.replace(/^\s*[0-9]+[\.\-\)\s]+\s*/, '');
                        if (text !== newText) {
                            node.textContent = newText;
                        }
                    } else if (node.nodeType === Node.ELEMENT_NODE) {
                        removeLeadingNumbers(node);
                    }
                });
            }

            // Target both desktop and mobile dropdowns
            const tradeDropdowns = document.querySelectorAll('.tc-main-dropdown, #mobile-menu details');
            tradeDropdowns.forEach(dropdown => removeLeadingNumbers(dropdown));

            // 2. Smart positioning to prevent going off-screen
            const subItems = document.querySelectorAll('.tc-sub-item');
            subItems.forEach(item => {
                item.addEventListener('mouseenter', function (e) {
                    const dropdown = this.querySelector(':scope > .tc-sub-dropdown');
                    if (!dropdown) return;

                    // Temporarily show to calculate rect correctly
                    const oldVis = dropdown.style.visibility;
                    dropdown.style.visibility = 'hidden';
                    dropdown.style.display = 'block';

                    // Reset positions for fresh calculation
                    dropdown.style.left = '100%';
                    dropdown.style.right = 'auto';
                    dropdown.style.marginLeft = '18px';
                    dropdown.style.marginRight = '0';
                    dropdown.style.top = '-14px';
                    dropdown.style.bottom = 'auto';
                    dropdown.style.maxHeight = 'none';
                    dropdown.style.overflowY = 'visible';
                    dropdown.classList.remove('origin-bottom-left', 'origin-bottom-right');
                    dropdown.classList.add('origin-top-left');

                    const rect = dropdown.getBoundingClientRect();
                    const windowWidth = window.innerWidth || document.documentElement.clientWidth;
                    const windowHeight = window.innerHeight || document.documentElement.clientHeight;

                    let isFlippedX = false;

                    // Horizontal overflow check
                    if (rect.right > windowWidth) {
                        dropdown.style.left = 'auto';
                        dropdown.style.right = '100%';
                        dropdown.style.marginLeft = '0';
                        dropdown.style.marginRight = '18px';
                        isFlippedX = true;
                        dropdown.classList.remove('origin-top-left');
                        dropdown.classList.add('origin-top-right');

                        // Fix bridge position
                        const bridge = dropdown.querySelector('.tc-bridge');
                        if (bridge) {
                            bridge.style.left = 'auto';
                            bridge.style.right = '-24px';
                        }
                    } else {
                        const bridge = dropdown.querySelector('.tc-bridge');
                        if (bridge) {
                            bridge.style.left = '-24px';
                            bridge.style.right = 'auto';
                        }
                    }

                    // Vertical overflow check
                    if (rect.bottom > windowHeight) {
                        const spaceBelow = windowHeight - rect.top - 20; // 20px padding

                        // Get the parent item's rect to know how much space we have above it
                        const itemRect = this.getBoundingClientRect();
                        const spaceAbove = itemRect.bottom - 80; // 80px for header clearance

                        if (spaceBelow > spaceAbove || spaceBelow > 250) {
                            // If there is more space below or at least a decent amount, open downwards with scrollbar
                            dropdown.style.maxHeight = `${Math.max(100, spaceBelow)}px`;
                            dropdown.style.overflowY = 'auto';
                        } else {
                            // Open upwards, but cap height so it doesn't hit the header
                            dropdown.style.top = 'auto';
                            dropdown.style.bottom = '-14px';
                            dropdown.style.maxHeight = `${Math.max(100, spaceAbove)}px`;
                            dropdown.style.overflowY = 'auto';

                            dropdown.classList.remove('origin-top-left', 'origin-top-right');
                            dropdown.classList.add(isFlippedX ? 'origin-bottom-right' : 'origin-bottom-left');
                        }
                    }

                    // Restore visibility
                    dropdown.style.visibility = oldVis;
                    dropdown.style.display = '';
                });
            });
        });
    </script>
    </header>

    <!-- Main Content -->
    <main class="flex-grow overflow-x-hidden">
        {% block content %}{% endblock %}
    </main>

    <!-- Footer -->
    <footer style="background-color: #f5f5f5; overflow-x: hidden; font-family: 'Inter', sans-serif; margin-top: auto;">
        <!-- Top Band -->
        <div style="max-width: 1400px; margin: 0 auto; padding: 2rem 2rem;">
            <div
                style="display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2rem;">

                <!-- Brand Info -->
                <div style="display: flex; align-items: center;">
                    <a href="/" style="display: flex; align-items: center; gap: 1.5rem; text-decoration: none;">
                        {% if site_settings.logo %}
                        <img src="{{ site_settings.logo.url }}" alt="Logo"
                            style="height: 7.5rem; width: auto; object-fit: contain;">
                        {% else %}
                        <div
                            style="height: 7rem; width: 7rem; background-color: #e2e8f0; display: flex; align-items: center; justify-content: center; border-radius: 9999px; color: #64748b; font-weight: bold; font-size: 1.5rem;">
                            LOGO
                        </div>
                        {% endif %}
                        <span
                            style="font-weight: 400; font-size: 1.6rem; text-transform: uppercase; letter-spacing: -0.01em; color: #555555; line-height: 1.1; font-family: 'Oswald', 'Impact', sans-serif; max-width: 420px;">
                            {{ site_settings.site_name|default:"TRADE CALIFORNIA" }}
                        </span>
                    </a>
                </div>

                <!-- Footer Links -->
                <nav style="display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2.5rem;">
                    {% for link in nav_links %}
                    <a href="{{ link.url }}"
                        style="font-size: 0.95rem; font-weight: 400; color: #555555; text-decoration: none; transition: color 0.2s;"
                        onmouseover="this.style.color='#111111'" onmouseout="this.style.color='#555555'">
                        {{ link.label }}
                    </a>
                    {% endfor %}
                </nav>
            </div>
        </div>

        <!-- Bottom Band -->
        <div style="background-color: #eeeeee; padding: 2rem 1rem;">
            <div
                style="max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0.75rem;">

                <!-- Social Icons -->
                <div style="display: flex; gap: 1.25rem;">
                    <a href="#" target="_blank"
                        style="width: 2.25rem; height: 2.25rem; border-radius: 9999px; border: 1.5px solid #aaaaaa; display: flex; align-items: center; justify-content: center; color: #999999; transition: all 0.2s; text-decoration: none;"
                        onmouseover="this.style.color='#555555'; this.style.borderColor='#555555'"
                        onmouseout="this.style.color='#999999'; this.style.borderColor='#aaaaaa'">
                        <span class="sr-only">Facebook</span>
                        <svg style="height: 1rem; width: 1rem;" fill="currentColor" viewBox="0 0 24 24">
                            <path fill-rule="evenodd"
                                d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
                                clip-rule="evenodd" />
                        </svg>
                    </a>
                    <a href="#" target="_blank"
                        style="width: 2.25rem; height: 2.25rem; border-radius: 9999px; border: 1.5px solid #aaaaaa; display: flex; align-items: center; justify-content: center; color: #999999; transition: all 0.2s; text-decoration: none;"
                        onmouseover="this.style.color='#555555'; this.style.borderColor='#555555'"
                        onmouseout="this.style.color='#999999'; this.style.borderColor='#aaaaaa'">
                        <span class="sr-only">Twitter</span>
                        <svg style="height: 1rem; width: 1rem;" fill="currentColor" viewBox="0 0 24 24">
                            <path
                                d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
                        </svg>
                    </a>
                    <a href="#" target="_blank"
                        style="width: 2.25rem; height: 2.25rem; border-radius: 9999px; border: 1.5px solid #aaaaaa; display: flex; align-items: center; justify-content: center; color: #999999; transition: all 0.2s; text-decoration: none;"
                        onmouseover="this.style.color='#555555'; this.style.borderColor='#555555'"
                        onmouseout="this.style.color='#999999'; this.style.borderColor='#aaaaaa'">
                        <span class="sr-only">LinkedIn</span>
                        <svg style="height: 1rem; width: 1rem;" fill="currentColor" viewBox="0 0 24 24">
                            <path fill-rule="evenodd"
                                d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"
                                clip-rule="evenodd" />
                        </svg>
                    </a>
                </div>

                <!-- Copyright -->
                <p style="color: #666666; font-size: 0.9rem; font-weight: 400; text-align: center; margin: 0;">
                    &copy; <span id="current-year"></span> {{ site_settings.site_name|default:"Trade California" }}. All
                    rights reserved.
                </p>
            </div>
        </div>
    </footer>

    <!-- Scripts -->
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.8.0/vanilla-tilt.min.js"></script>
    <script>
        // Set current year in footer
        document.getElementById('current-year').textContent = new Date().getFullYear();

        // Mobile menu toggle
        const btn = document.getElementById('mobile-menu-button');
        const menu = document.getElementById('mobile-menu');
        btn.addEventListener('click', () => {
            menu.classList.toggle('hidden');
            document.body.style.overflow = menu.classList.contains('hidden') ? '' : 'hidden';
        });

        // Initialize Animate On Scroll (only if no reduced motion)
        if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
            AOS.init({
                duration: 800,
                once: true,
                offset: 100,
                easing: 'ease-out-cubic',
            });

            // Initialize Vanilla Tilt for elements with data-tilt
            VanillaTilt.init(document.querySelectorAll("[data-tilt]"), {
                max: 10,
                speed: 400,
                glare: true,
                "max-glare": 0.2,
                perspective: 1000
            });
        }
    </script>

    <!-- Smooth Scrolling (Lenis) -->
    <script src="https://unpkg.com/lenis@1.1.9/dist/lenis.min.js"></script>
    <script>
        const lenis = new Lenis({
            duration: 1.2,
            easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
            direction: 'vertical',
            gestureDirection: 'vertical',
            smooth: true,
            mouseMultiplier: 1,
            smoothTouch: false,
            touchMultiplier: 2,
            infinite: false,
        });
        function raf(time) {
            lenis.raf(time);
            requestAnimationFrame(raf);
        }
        requestAnimationFrame(raf);
    </script>

    <!-- Chatbot / Analytics Integrations -->
    {% if site_settings.chatbot_embed_code %}
    {{ site_settings.chatbot_embed_code|safe }}
    {% endif %}
    {% if site_settings.analytics_script %}
    {{ site_settings.analytics_script|safe }}
    {% endif %}

</body>

</html>