{#
/**
 * @file
 * Header partial template.
 * Matches the design from /example page.
 * Uses Drupal blocks for navigation and language switcher.
 */
#}

<!-- Mobile Menu Overlay -->
<div id="mobile-overlay" class="mobile-overlay fixed inset-0 bg-black/30 backdrop-blur-sm z-40 lg:hidden"></div>

<!-- Mobile Menu - Full Height from Top -->
<div id="mobile-menu" class="mobile-menu fixed inset-0 bg-white/95 dark:bg-slate-900/95 backdrop-blur-xl z-50 lg:hidden flex flex-col">
    <!-- Mobile Menu Header -->
    <div class="flex items-center justify-between px-4 py-4 border-b border-gray-100 dark:border-slate-700">
        <a href="{{ path('<front>') }}" class="flex items-center gap-2">
            <svg class="w-8 h-8 dark:text-white" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M16 4L4 10v12l12 6 12-6V10L16 4z" stroke="currentColor" stroke-width="2" fill="none"/>
                <path d="M16 16l12-6M16 16v12M16 16L4 10" stroke="currentColor" stroke-width="2"/>
            </svg>
            <span class="text-xl font-bold dark:text-white">{{ site_name|default('Constructor') }}</span>
        </a>
        <button id="close-mobile-menu" class="p-2 hover:bg-gray-100 dark:hover:bg-slate-700 rounded-lg transition-colors dark:text-white">
            <svg class="w-6 h-6" 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"/>
            </svg>
        </button>
    </div>

    <!-- Mobile Menu Content (Scrollable) -->
    <div class="flex-1 overflow-y-auto px-4 py-4">
        <!-- Mobile Navigation - Uses Drupal menu block -->
        <nav class="mobile-nav space-y-1 mb-6">
            {% if page.primary_menu %}
                {{ page.primary_menu }}
            {% endif %}
        </nav>

        <!-- Mobile CTA & Language -->
        {% if header_button.show %}
        <div class="flex flex-col gap-3 pt-4 border-t border-gray-100 dark:border-slate-700">
            <button class="open-booking-modal w-full py-3 px-6 bg-blue-500 text-white text-center font-medium rounded-lg hover:bg-blue-600 transition-colors">
                {{ header_button.text|t }}
            </button>
        </div>
        {% endif %}
    </div>

    <!-- Mobile Menu Footer - Contacts -->
    <div class="border-t border-gray-200 dark:border-slate-700 bg-gray-50/80 dark:bg-slate-800/80 px-4 py-5">
        <div class="flex items-center {{ theme_settings.phone and theme_settings.email ? 'justify-between' : 'justify-center' }} gap-4 mb-4">
            {% if theme_settings.phone %}
            <a href="tel:{{ theme_settings.phone|replace({' ': '', '(': '', ')': '', '-': ''}) }}" class="flex items-center gap-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors">
                <svg class="w-5 h-5" 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>
                <span class="text-sm font-medium">{{ theme_settings.phone }}</span>
            </a>
            {% endif %}
            {% if theme_settings.email %}
            <a href="mailto:{{ theme_settings.email }}" class="flex items-center gap-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors">
                <svg class="w-5 h-5" 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>
                <span class="text-sm font-medium">{{ theme_settings.email }}</span>
            </a>
            {% endif %}
        </div>
        <!-- Social Links -->
        {% if theme_settings.twitter_url or theme_settings.github_url or theme_settings.linkedin_url or theme_settings.instagram_url %}
        <div class="flex items-center justify-center gap-4">
            {% if theme_settings.twitter_url %}
            <a href="{{ theme_settings.twitter_url }}" target="_blank" rel="noopener" class="w-10 h-10 bg-white dark:bg-slate-700 rounded-xl flex items-center justify-center text-gray-500 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:shadow-md transition-all" aria-label="X">
                <svg class="w-5 h-5" 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>
            </a>
            {% endif %}
            {% if theme_settings.github_url %}
            <a href="{{ theme_settings.github_url }}" target="_blank" rel="noopener" class="w-10 h-10 bg-white dark:bg-slate-700 rounded-xl flex items-center justify-center text-gray-500 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:shadow-md transition-all">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
            </a>
            {% endif %}
            {% if theme_settings.linkedin_url %}
            <a href="{{ theme_settings.linkedin_url }}" target="_blank" rel="noopener" class="w-10 h-10 bg-white dark:bg-slate-700 rounded-xl flex items-center justify-center text-gray-500 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:shadow-md transition-all">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path 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"/></svg>
            </a>
            {% endif %}
            {% if theme_settings.instagram_url %}
            <a href="{{ theme_settings.instagram_url }}" target="_blank" rel="noopener" class="w-10 h-10 bg-white dark:bg-slate-700 rounded-xl flex items-center justify-center text-gray-500 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:shadow-md transition-all">
                <svg class="w-5 h-5" 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>
            </a>
            {% endif %}
        </div>
        {% endif %}
    </div>
</div>

<!-- Header -->
<header class="sticky top-0 bg-white/80 dark:bg-slate-900/80 backdrop-blur-xl z-30 border-b border-gray-100/50 dark:border-slate-700/50 relative transition-colors">
    <div class="max-w-7xl 3xl:max-w-8xl 4xl:max-w-9xl mx-auto px-4 sm:px-6 lg:px-8 3xl:px-12">
        <!-- Desktop Header -->
        <div class="hidden lg:flex items-center justify-between h-20">
            <!-- Logo -->
            {% if page.header %}
                {{ page.header }}
            {% else %}
                <a href="{{ path('<front>') }}" class="flex items-center gap-2">
                    <svg class="w-8 h-8 text-gray-900 dark:text-white" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M16 4L4 10v12l12 6 12-6V10L16 4z" stroke="currentColor" stroke-width="2" fill="none"/>
                        <path d="M16 16l12-6M16 16v12M16 16L4 10" stroke="currentColor" stroke-width="2"/>
                    </svg>
                    <span class="text-xl font-bold text-gray-900 dark:text-white">{{ site_name|default('Constructor') }}</span>
                </a>
            {% endif %}

            <!-- Desktop Navigation - Uses Drupal menu block -->
            <nav class="flex items-center gap-1">
                {% if page.primary_menu %}
                    {{ page.primary_menu }}
                {% endif %}
            </nav>

            <!-- Desktop Right Section -->
            <div class="flex items-center gap-4">
                <!-- Theme Toggle (Desktop) -->
                {% if theme_settings.enable_dark_mode %}
                <button id="theme-toggle" class="theme-toggle" aria-label="{{ 'Toggle dark mode'|t }}">
                    <svg class="theme-toggle-icon sun text-amber-500" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"/>
                    </svg>
                    <svg class="theme-toggle-icon moon text-indigo-300" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/>
                    </svg>
                </button>
                {% endif %}

                <!-- Book a Demo Button -->
                {% if header_button.show %}
                <button class="open-booking-modal inline-flex items-center justify-center px-5 py-2.5 3xl:px-6 3xl:py-3 3xl:text-lg bg-blue-500 text-white font-medium rounded-lg hover:bg-blue-600 transition-colors">
                    {{ header_button.text|t }}
                </button>
                {% endif %}

                <!-- Language Switcher - Uses Drupal block -->
                {% if page.secondary_menu %}
                    <div class="flex">
                        {{ page.secondary_menu }}
                    </div>
                {% endif %}
            </div>
        </div>

        <!-- Mobile Header -->
        <div class="flex lg:hidden items-center justify-between h-16">
            <!-- Mobile Menu Button (Left) -->
            <button id="open-mobile-menu" class="p-2 hover:bg-gray-100 dark:hover:bg-slate-700 rounded-lg transition-colors text-gray-900 dark:text-white">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                </svg>
            </button>

            <!-- Logo (Center) -->
            <a href="{{ path('<front>') }}" class="absolute left-1/2 transform -translate-x-1/2 flex items-center gap-2">
                <svg class="w-8 h-8 text-gray-900 dark:text-white" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M16 4L4 10v12l12 6 12-6V10L16 4z" stroke="currentColor" stroke-width="2" fill="none"/>
                    <path d="M16 16l12-6M16 16v12M16 16L4 10" stroke="currentColor" stroke-width="2"/>
                </svg>
                <span class="text-xl font-bold text-gray-900 dark:text-white">{{ site_name|default('Constructor') }}</span>
            </a>

            <!-- Mobile Right Section (Dark mode + Language) -->
            <div class="flex items-center gap-1">
                <!-- Mobile Theme Toggle (icon only) -->
                {% if theme_settings.enable_dark_mode %}
                <button id="theme-toggle-mobile" class="mobile-theme-icon p-2 hover:bg-gray-100 dark:hover:bg-slate-700 rounded-lg transition-colors" aria-label="{{ 'Toggle dark mode'|t }}">
                    <!-- Sun icon (shown in dark mode) -->
                    <svg class="w-5 h-5 text-amber-500 dark:block hidden" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"/>
                    </svg>
                    <!-- Moon icon (shown in light mode) -->
                    <svg class="w-5 h-5 text-indigo-500 dark:hidden block" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/>
                    </svg>
                </button>
                {% endif %}

                <!-- Mobile Language Icon (globe only) -->
                <button class="open-language-drawer p-2 hover:bg-gray-100 dark:hover:bg-slate-700 rounded-lg transition-colors" aria-label="{{ 'Change language'|t }}">
                    <svg class="w-5 h-5 text-gray-700 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/>
                    </svg>
                </button>
            </div>
        </div>
    </div>
</header>
