@php
    $isInner = !empty($innerHeader);
    $headerClass = $isInner ? 'header bg-green js-header' : 'header bg-green js-header';
    $headerStyle = $isInner ? 'background: #051036;' : '';
    $linkClass = $isInner ? 'text-white' : 'text-white';
@endphp

<header data-add-bg="bg-dark-1" class="{{ $headerClass }}" data-x="header" data-x-toggle="is-menu-opened" @if($headerStyle) style="{{ $headerStyle }}" @endif>
    <div data-anim="fade" class="header__container px-30 sm:px-20">
        <div class="row justify-between items-center">
            <div class="col-auto">
                <div class="d-flex items-center">
                    <a href="{{ route('home') }}" class="header-logo mr-50" data-x="header-logo" data-x-toggle="is-logo-dark">
                        <img src="{{ asset('newflorida/img/general/logo-light.png') }}" alt="New Florida logo">
                        <img src="{{ asset('newflorida/img/general/logo-dark.png') }}" alt="New Florida logo">
                    </a>

                    <div class="header-menu" data-x="mobile-menu" data-x-toggle="is-menu-active">
                        <div class="mobile-overlay"></div>

                        <div class="header-menu__content">
                            <div class="mobile-bg js-mobile-bg"></div>

                            <div class="menu js-navList">
                                <ul class="menu__nav {{ $linkClass }} -is-active">
                                    <li><a href="{{ route('home') }}">Home</a></li>
                                    <li><a href="{{ route('properties.index') }}">Property Listing</a></li>
                                    <li><a href="{{ route('about') }}">About</a></li>
                                    <li><a href="{{ route('contact') }}">Contact</a></li>
                                </ul>
                            </div>

                            <div class="mobile-footer px-20 py-20 border-top-light js-mobile-footer"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-auto">
                <div class="d-flex items-center">
                    <div class="row x-gap-20 items-center xxl:d-none">
                        <div class="col-auto">
                            <button class="d-flex items-center text-14 {{ $linkClass }}" data-x-click="currency">
                                <span class="js-currencyMenu-mainTitle">USD</span>
                                <i class="icon-chevron-sm-down text-7 ml-10"></i>
                            </button>
                        </div>

                        <div class="col-auto">
                            <div class="w-1 h-20 bg-white-20"></div>
                        </div>

                        <div class="col-auto">
                            <button class="d-flex items-center text-14 {{ $linkClass }}" data-x-click="lang">
                                <img src="{{ asset('newflorida/img/general/lang.png') }}" alt="language" class="rounded-full mr-10">
                                <span class="js-language-mainTitle">Florida</span>
                                <i class="icon-chevron-sm-down text-7 ml-15"></i>
                            </button>
                        </div>
                    </div>

                    <div class="d-flex items-center ml-20 is-menu-opened-hide md:d-none">
                        <a href="{{ route('become-expert') }}" class="button px-30 fw-400 text-14 -white bg-white h-50 text-dark-1">Become An Expert</a>

                        @auth
                            <a href="{{ auth()->user()->role === 'admin' ? route('admin.dashboard') : (auth()->user()->role === 'vendor' ? route('vendor.dashboard') : route('user.dashboard')) }}" class="button px-30 fw-400 text-14 border-white -outline-white h-50 text-white ml-20">Dashboard</a>
                        @else
                            <a href="{{ route('login') }}" class="button px-30 fw-400 text-14 border-white -outline-white h-50 text-white ml-20">Sign In / Register</a>
                        @endauth
                    </div>

                    <div class="d-none xl:d-flex x-gap-20 items-center pl-30 {{ $linkClass }}" data-x="header-mobile-icons" data-x-toggle="text-white">
                        <div>
                            @auth
                                <a href="{{ auth()->user()->role === 'admin' ? route('admin.dashboard') : (auth()->user()->role === 'vendor' ? route('vendor.dashboard') : route('user.dashboard')) }}" class="d-flex items-center icon-user text-inherit text-22"></a>
                            @else
                                <a href="{{ route('login') }}" class="d-flex items-center icon-user text-inherit text-22"></a>
                            @endauth
                        </div>
                        <div><button class="d-flex items-center icon-menu text-inherit text-20" data-x-click="html, header, header-logo, header-mobile-icons, mobile-menu"></button></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>