{{-- Header demo-restaurant — Usa componentes compartidos --}}
<header id="header" class="header-effect-shrink @yield('header_classes')" data-plugin-options="{'stickyEnabled': true, 'stickyEffect': 'shrink', 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': false, 'stickyChangeLogo': true, 'stickyStartAt': 120, 'stickyHeaderContainerHeight': 85}">
    <div class="header-body border-top-0">
        <div class="header-top header-top-default header-top-borders border-bottom-0 bg-dark">
            <div class="container">
                <div class="header-row">
                    <div class="header-column justify-content-between">
                        <div class="header-row">
                            <div class="d-flex align-items-center w-100 w-sm-50pct w-md-100pct">
                                <span class="text-color-light text-2 d-sm-none d-md-block">{{ config('site.description', '') }}</span>
                                @if(config('site.contact.phone'))
                                <a class="text-color-light text-decoration-none font-weight-bold text-2-5 opacity-hover-9 ms-2" href="tel:{{ config('site.contact.phone') }}">{{ config('site.contact.phone') }}</a>
                                @endif
                            </div>
                            <div class="w-50pct w-md-50pct w-lg-100pct d-none d-sm-block">
                                <div class="d-flex align-items-center justify-content-end gap-3">
                                    <span class="d-flex align-items-center text-color-light font-weight-semibold text-2-5">
                                        <i class="icon icon-clock font-weight-bold me-2"></i>
                                        {{ config('site.contact.hours', '') }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="header-container container" style="height: 110px;">
            <div class="header-row">
                <div class="header-column">
                    <div class="header-row">
                        <div class="header-logo">
                            <a href="{{ front_homepage_url() }}">
                                <img alt="{{ config('site.assets.main_logo_alt', config('site.name')) }}" width="144" src="{{ site_asset_url('main_logo') }}">
                            </a>
                        </div>
                    </div>
                </div>
                <div class="header-column justify-content-end w-100">
                    <div class="header-row">
                        <div class="header-nav header-nav-links order-2 order-lg-1">
                            <div class="header-nav-main header-nav-main-text-capitalize header-nav-main-effect-1 header-nav-main-sub-effect-1">
                                <nav class="collapse">
                                    <ul class="nav nav-pills" id="mainNav">
                                        <x-header-nav :dropdowns="true" link-classes="" />
                                    </ul>
                                    @if(config('site.header.cta_button.active'))
                                    <div class="d-block d-lg-none mt-3 pt-3 border-top border-color-grey">
                                        <a href="{{ config('site.header.cta_button.url', '/contact') }}" target="{{ config('site.header.cta_button.target', '_blank') }}" rel="noopener noreferrer" class="btn btn-primary custom-btn-style-1 font-weight-bold w-100 d-flex align-items-center justify-content-center py-3">
                                            <span>{{ config('site.header.cta_button.title', 'Order now') }}</span>
                                        </a>
                                    </div>
                                    @endif
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="header-column header-column-search justify-content-end align-items-center d-flex w-auto flex-row">
                    <x-header-cta classes="btn-primary custom-btn-style-1 font-weight-bold ws-nowrap px-4 py-2" wrapper-classes="d-none d-lg-block ms-4" />
                    <x-social-icons theme="dark" size="md" classes="d-none d-sm-flex mb-0 ms-3" />
                    <button class="btn header-btn-collapse-nav" data-bs-toggle="collapse" data-bs-target=".header-nav-main nav">
                        <i class="fas fa-bars"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</header>