<style>
    .site-header {
        background: white;
        border-bottom: 1px solid #e5e7eb;
        position: sticky;
        top: 0;
        z-index: 100;
        box-shadow: 0 1px 6px rgba(0,0,0,0.06);
    }
    .site-header .inner {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .site-header .logo {
        font-size: 1.2em;
        font-weight: 800;
        color: #1a1a2e;
        text-decoration: none;
        letter-spacing: -0.02em;
    }
    .site-header .logo span { color: #667eea; }
    .site-header nav {
        display: flex;
        align-items: center;
        gap: 28px;
    }
    .site-header nav a {
        color: #6b7280;
        text-decoration: none;
        font-size: 0.9em;
        font-weight: 500;
        transition: color 0.2s;
    }
    .site-header nav a:hover { color: #667eea; }

    /* Auth area */
    .site-header .auth-area { display: flex; align-items: center; gap: 10px; }
    .site-header .btn-outline {
        padding: 7px 16px; border: 1.5px solid #d1d5db; border-radius: 8px;
        font-size: 0.875em; font-weight: 500; color: #374151; text-decoration: none;
        background: white; transition: border-color 0.2s, color 0.2s;
    }
    .site-header .btn-outline:hover { border-color: #667eea; color: #667eea; }
    .site-header .btn-primary {
        padding: 7px 16px; background: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
        border-radius: 8px; font-size: 0.875em; font-weight: 600; color: white;
        text-decoration: none; border: none; cursor: pointer; transition: opacity 0.2s;
    }
    .site-header .btn-primary:hover { opacity: 0.9; }

    /* Avatar dropdown */
    .avatar-wrapper { position: relative; }
    .avatar-btn {
        width: 38px; height: 38px; border-radius: 50%;
        background: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
        border: none; cursor: pointer; display: flex; align-items: center;
        justify-content: center; color: white; font-weight: 700; font-size: 0.95em;
        letter-spacing: 0.02em; transition: box-shadow 0.2s; flex-shrink: 0;
    }
    .avatar-btn:hover { box-shadow: 0 0 0 3px rgba(102,126,234,0.25); }
    .avatar-dropdown {
        display: none;
        position: absolute; right: 0; top: calc(100% + 10px);
        background: white; border: 1px solid #e5e7eb; border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.12); min-width: 220px; overflow: hidden;
        z-index: 200;
    }
    .avatar-dropdown.open { display: block; }
    .avatar-dropdown .dd-header {
        padding: 14px 16px 12px; border-bottom: 1px solid #f3f4f6;
    }
    .avatar-dropdown .dd-name { font-weight: 700; font-size: 0.95em; color: #1a1a2e; }
    .avatar-dropdown .dd-email { font-size: 0.78em; color: #9ca3af; margin-top: 2px; }
    .avatar-dropdown .dd-link {
        display: flex; align-items: center; gap: 10px;
        padding: 11px 16px; font-size: 0.875em; color: #374151;
        text-decoration: none; transition: background 0.15s;
    }
    .avatar-dropdown .dd-link:hover { background: #f9fafb; color: #667eea; }
    .avatar-dropdown .dd-link svg { width: 16px; height: 16px; flex-shrink: 0; }
    .avatar-dropdown .dd-divider { border: none; border-top: 1px solid #f3f4f6; margin: 0; }
    .avatar-dropdown .dd-logout-form { margin: 0; }
    .avatar-dropdown .dd-logout-btn {
        width: 100%; display: flex; align-items: center; gap: 10px;
        padding: 11px 16px; font-size: 0.875em; color: #dc2626;
        background: none; border: none; cursor: pointer; transition: background 0.15s;
        text-align: left;
    }
    .avatar-dropdown .dd-logout-btn:hover { background: #fef2f2; }
    .avatar-dropdown .dd-logout-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
</style>

<header class="site-header">
    <div class="inner">
        <a href="{{ url('/') }}" class="logo">Veranstaltungs<span>-App</span></a>

        <nav>
            <a href="{{ url('/') }}">Home</a>
            <a href="{{ route('events') }}">Events</a>
        </nav>

        <div class="auth-area">
            @auth
                {{-- Avatar mit Dropdown --}}
                <div class="avatar-wrapper" id="avatarWrapper">
                    <button class="avatar-btn" id="avatarBtn" title="{{ Auth::user()->name }}">
                        {{ strtoupper(substr(Auth::user()->name, 0, 1)) }}
                    </button>
                    <div class="avatar-dropdown" id="avatarDropdown">
                        <div class="dd-header">
                            <div class="dd-name">{{ Auth::user()->name }}</div>
                            <div class="dd-email">{{ Auth::user()->email }}</div>
                        </div>
                        <a href="{{ route('profile') }}" class="dd-link">
                            <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                            </svg>
                            Mein Profil
                        </a>
                        <hr class="dd-divider">
                        <form method="POST" action="{{ route('logout') }}" class="dd-logout-form">
                            @csrf
                            <button type="submit" class="dd-logout-btn">
                                <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
                                </svg>
                                Abmelden
                            </button>
                        </form>
                    </div>
                </div>
            @else
                <a href="{{ route('login') }}" class="btn-outline">Anmelden</a>
                <a href="{{ route('register') }}" class="btn-primary">Registrieren</a>
            @endauth
        </div>
    </div>
</header>

<script>
(function () {
    var btn = document.getElementById('avatarBtn');
    var dropdown = document.getElementById('avatarDropdown');
    if (!btn || !dropdown) return;

    btn.addEventListener('click', function (e) {
        e.stopPropagation();
        dropdown.classList.toggle('open');
    });

    document.addEventListener('click', function (e) {
        if (!dropdown.contains(e.target)) {
            dropdown.classList.remove('open');
        }
    });
})();
</script>
