@php($landing = rtrim(config('zt.landing_url'), '/'))
<header class="zt-site-header">
    <div class="zt-site-header-inner">
        <a href="{{ $landing }}" class="zt-site-logo" aria-label="ZT Hosting home">
            <img src="{{ asset('layout/logo.svg') }}" alt="ZT Hosting" class="zt-site-logo-img">
        </a>

        <nav class="zt-site-main-nav" aria-label="Primary navigation">
            <a href="{{ $landing }}/web-hosting" class="zt-site-nav-link">Web Hosting</a>

            <div class="zt-site-dropdown">
                <a href="{{ $landing }}/business-web-hosting" class="zt-site-dropdown-trigger">
                    Pro Hosting
                    <svg class="zt-site-chevron" width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                </a>
                <div class="zt-site-dropdown-menu">
                    <div class="zt-site-dropdown-card">
                        <a href="{{ $landing }}/business-web-hosting" class="zt-site-dropdown-item">
                            <span class="zt-site-dropdown-icon blue">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="8.5" cy="7" r="4"/><line x1="20" y1="8" x2="20" y2="14"/><line x1="23" y1="11" x2="17" y2="11"/></svg>
                            </span>
                            <span><strong>Business Hosting</strong><small>Professional email solutions</small></span>
                        </a>
                        <a href="{{ $landing }}/best-wordpress-hosting" class="zt-site-dropdown-item">
                            <span class="zt-site-dropdown-icon blue">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" /></svg>
                            </span>
                            <span><strong>WordPress Hosting</strong><small>Optimized for performance</small></span>
                        </a>
                        <a href="{{ $landing }}/e-mail-hosting" class="zt-site-dropdown-item">
                            <span class="zt-site-dropdown-icon blue">
                               <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="5" width="18" height="14" rx="2"></rect><path d="m3 7 9 6 9-6"></path></svg>
                            </span>
                            <span><strong>E-mail Hosting</strong></span>
                        </a>
                    </div>
                </div>
            </div>

            <a href="{{ $landing }}/reseller-hosting" class="zt-site-nav-link">Reseller Hosting</a>
            <a href="{{ $landing }}/domain-registration" class="zt-site-nav-link">Domain</a>
<a href="{{ $landing }}/pricing" class="zt-site-nav-link">Pricing</a>
            <div class="zt-site-dropdown">
                <a href="{{ $landing }}/vps-hosting" class="zt-site-dropdown-trigger">
                    Servers
                    <svg class="zt-site-chevron" width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                </a>
                <div class="zt-site-dropdown-menu">
                    <div class="zt-site-dropdown-card">
                        <a href="{{ $landing }}/managed-dedicated-server" class="zt-site-dropdown-item">
                            <span class="zt-site-dropdown-icon purple">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="2" width="20" height="8" rx="2" ry="2" /><rect x="2" y="14" width="20" height="8" rx="2" ry="2" /><line x1="6" y1="6" x2="6.01" y2="6" /><line x1="6" y1="18" x2="6.01" y2="18" /></svg>
                            </span>
                            <span><strong>Managed Dedicated Servers</strong><small>Maximum power and control</small></span>
                        </a>
                        <a href="{{ $landing }}/vps-hosting" class="zt-site-dropdown-item">
                            <span class="zt-site-dropdown-icon emerald">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /></svg>
                            </span>
                            <span><strong>VPS Hosting</strong><small>Scalable virtual servers</small></span>
                        </a>
                    </div>
                </div>
            </div>


        </nav>

        <div class="zt-site-actions">
            @guest
                <a href="{{ route('login') }}" class="zt-site-client-btn">
                    Client Area
                    <span class="zt-site-btn-circle" aria-hidden="true">
                        <svg width="12" height="12" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.25 10.5L8.75 7L5.25 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg>
                    </span>
                </a>
            @else
                <a href="{{ route('client.dashboard') }}" class="zt-site-client-btn">
                    Client Area
                    <span class="zt-site-btn-circle" aria-hidden="true">
                        <svg width="12" height="12" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.25 10.5L8.75 7L5.25 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg>
                    </span>
                </a>
            @endguest

            <button class="zt-site-hamburger" type="button" data-zt-mobile-open aria-label="Open menu" aria-controls="ztMobileOverlay" aria-expanded="false">
                <span></span><span></span><span></span>
            </button>
        </div>
    </div>
</header>

<div class="zt-mobile-overlay" id="ztMobileOverlay" aria-hidden="true">
    <div class="zt-mobile-backdrop" data-zt-mobile-close></div>
    <div class="zt-mobile-drawer" role="dialog" aria-modal="true" aria-label="Mobile menu">
        <button class="zt-mobile-close" type="button" data-zt-mobile-close aria-label="Close menu">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><path d="M18 6L6 18M6 6l12 12" /></svg>
        </button>

        <nav class="zt-mobile-nav" aria-label="Mobile navigation">
            <a href="{{ $landing }}/web-hosting" class="zt-mobile-link">Web Hosting</a>

            <div class="zt-mobile-group">
                <p>Pro Hosting</p>
                <a href="{{ $landing }}/business-web-hosting">Business Hosting</a>
                <a href="{{ $landing }}/best-wordpress-hosting">WordPress Hosting</a>
            </div>

            <a href="{{ $landing }}/reseller-hosting" class="zt-mobile-link">Reseller Hosting</a>
            <a href="{{ $landing }}/domain-registration" class="zt-mobile-link">Domain</a>

            <div class="zt-mobile-group">
                <p>Servers</p>
                <a href="{{ $landing }}/managed-dedicated-server">Managed Dedicated Servers</a>
                <a href="{{ $landing }}/vps-hosting">VPS Hosting</a>
            </div>

            <a href="{{ $landing }}/e-mail-hosting" class="zt-mobile-link">Email Hosting</a>
            @auth
                <div class="zt-mobile-group">
                    <p>Client Area</p>
                    <a href="{{ route('client.dashboard') }}">Dashboard</a>
                    <a href="{{ route('client.services') }}">My Services</a>
                    <a href="{{ route('client.invoices') }}">My Invoices</a>
                    <a href="{{ route('client.support') }}">Support</a>
                </div>
            @endauth
        </nav>

        <div class="zt-mobile-drawer-footer">
            @guest
                <a href="{{ route('login') }}" class="zt-mobile-secondary-btn">Login</a>
                <a href="{{ route('register') }}" class="zt-mobile-secondary-btn">Register</a>
            @else
                <a href="{{ route('client.dashboard') }}" class="zt-mobile-secondary-btn">Client Area</a>
                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button class="zt-mobile-secondary-btn" type="submit">Logout</button>
                </form>
            @endguest
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const overlay = document.getElementById('ztMobileOverlay');
        const openBtn = document.querySelector('[data-zt-mobile-open]');
        const closeBtns = document.querySelectorAll('[data-zt-mobile-close]');

        function setMobileNav(open) {
            if (!overlay) return;
            overlay.classList.toggle('open', open);
            overlay.setAttribute('aria-hidden', open ? 'false' : 'true');
            document.body.classList.toggle('zt-mobile-nav-open', open);
            if (openBtn) openBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
        }

        if (openBtn) openBtn.addEventListener('click', () => setMobileNav(true));
        closeBtns.forEach((button) => button.addEventListener('click', () => setMobileNav(false)));
        document.addEventListener('keydown', (event) => {
            if (event.key === 'Escape') setMobileNav(false);
        });
    });
</script>