{{-- Header demo-law-firm-2 — Usa componentes compartidos --}}
<header id="header" class="header-effect-shrink" data-plugin-options="{'stickyEnabled': true, 'stickyEffect': 'shrink', 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': false, 'stickyChangeLogo': true, 'stickyStartAt': 30, 'stickyHeaderContainerHeight': 70}">
    <div class="header-body header-body-bottom-border border-top-0">
        <div class="header-top">
            <div class="container">
                <div class="header-row">
                    <div class="header-column justify-content-start">
                        <div class="header-row">
                            <ul class="list list-unstyled list-inline mb-0">
                                @if(config('site.contact.phone'))
                                <li class="list-inline-item text-color-dark me-md-4 mb-0">
                                    <i class="icons icon-phone text-color-primary text-4 position-relative top-2 me-1"></i>
                                    <a href="tel:{{ config('site.contact.phone') }}" class="text-color-dark text-color-hover-primary text-decoration-none">
                                        <strong>{{ config('site.contact.phone') }}</strong>
                                    </a>
                                </li>
                                @endif
                                @if(config('site.contact.email'))
                                <li class="list-inline-item text-color-dark me-4 mb-0 d-none d-md-inline-block">
                                    <i class="icons icon-envelope text-color-primary text-4 position-relative top-4 me-1"></i>
                                    <a href="mailto:{{ config('site.contact.email') }}" class="text-color-dark text-color-hover-primary text-decoration-none text-2">
                                        {{ config('site.contact.email') }}
                                    </a>
                                </li>
                                @endif
                                @if(config('site.contact.schedule'))
                                <li class="list-inline-item text-color-dark text-2 mb-0 d-none d-lg-inline-block">
                                    <i class="icons icon-calendar text-color-primary text-3-5 position-relative top-1 me-1"></i>
                                    {{ config('site.contact.schedule') }}
                                </li>
                                @endif
                            </ul>
                        </div>
                    </div>
                    <div class="header-column justify-content-end">
                        <div class="header-row">
                            <x-header-cta classes="btn-primary btn-px-4 py-3 font-weight-bold text-2 rounded-0 ms-lg-4" wrapper-classes="" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="header-container container">
            <div class="header-row">
                <div class="header-column">
                    <div class="header-row">
                        @php
                            $logoMaxH = (int) config('site.assets.main_logo_height', 50);
                            if ($logoMaxH <= 0 || $logoMaxH > 90) { $logoMaxH = 50; }
                        @endphp
                        <div class="header-logo">
                            <a href="{{ front_homepage_url() }}">
                                <img src="{{ site_asset_url('main_logo') }}"
                                     class="img-fluid"
                                     style="max-height: {{ $logoMaxH }}px; width: auto; max-width: 260px; height: auto;"
                                     alt="{{ config('site.assets.main_logo_alt') }}" />
                            </a>
                        </div>
                    </div>
                </div>
                <div class="header-column justify-content-end">
                    <div class="header-row">
                        <div class="header-nav header-nav-links">
                            <div class="header-nav-main header-nav-main-text-capitalize header-nav-main-effect-2 header-nav-main-sub-effect-1">
                                <nav class="collapse">
                                    <ul class="nav nav-pills" id="mainNav">
                                        <x-header-nav :dropdowns="true" />
                                    </ul>
                                </nav>
                            </div>
                        </div>

                        <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>
    </div>
</header>