@php
    $sess = session('_sess', []);
    $isLogin = !empty($sess['_login_']);
    $name = $sess['_mname'] ?? '';
    $email = $sess['_mid'] ?? '';
    $display = $name !== '' ? $name : ($email !== '' ? $email : '내 계정');
@endphp

<header class="site-header">
    <div class="container" style="height: 100%; display: flex; align-items: center; justify-content: space-between;">

        <!-- Left: Logo & Nav -->
        <div class="header-left">
            <a href="{{ url('/') }}" class="logo" aria-label="홈으로">
                <img src="{{ asset('assets/images/common/top_logo.png') }}"
                     alt="사이트명"
                     class="logo-img">
            </a>

            <nav class="desktop-nav" aria-label="주요 메뉴">
                <a href="/" class="nav-link">HOME</a>
                <a href="/product/list" class="nav-link nav-link--exchange">SHOP</a>
{{--                <a href="/exchange" class="nav-link nav-link--exchange">상품권현금교환</a>--}}
                <a href="/mypage/info" class="nav-link">마이페이지</a>
                <a href="/cs/notice" class="nav-link">고객센터</a>
            </nav>
        </div>

        <!-- Center: Search (Desktop) -->
        <div class="search-bar">
            <form action="/product/list" method="GET">
                <input type="text" name="search" class="search-input" placeholder="상품권/브랜드 검색">
                <button type="submit" class="search-icon" aria-label="검색">
                    <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                </button>
            </form>
        </div>

        <!-- Right: Auth Buttons -->
        <div class="auth-buttons flex items-center gap-2">
            @if($isLogin)

                {{-- CTA: 핵심 행동 1개 --}}
                <a href="/product/list" class="btn btn-primary" style="padding: 8px 18px;">
                    상품권 구매
                </a>

                {{-- 알림(지금은 뱃지 0으로만) --}}
                <a href="{{ route('web.mypage.qna.index') }}" class="btn btn-ghost" aria-label="알림">
                    🔔
                    {{-- <span class="badge">3</span> --}}
                </a>

                {{-- 프로필 드롭다운 --}}
                <div class="relative group header-profile">
                    <button type="button" class="btn btn-ghost">
                        <span class="truncate max-w-[120px]">{{ $display }}</span>
                        <span class="ml-1">▾</span>
                    </button>

                    <div class="absolute right-0 mt-2 w-48 hidden group-hover:block profile-dropdown">
                        <div class="rounded-xl border bg-white shadow-lg overflow-hidden profile-card">
                            <div class="px-4 py-3 text-xs text-gray-500 profile-meta">
                                {{ $email }}
                            </div>
                            <div class="border-t profile-sep"></div>

                            <a class="block px-4 py-2 hover:bg-gray-50" href="{{ route('web.mypage.info.index') }}">내 정보</a>
                            <a class="block px-4 py-2 hover:bg-gray-50" href="{{ route('web.mypage.usage.index') }}">이용내역</a>
                            <a class="block px-4 py-2 hover:bg-gray-50" href="{{ route('web.cs.qna.index') }}">1:1 문의</a>

                            <div class="border-t profile-sep"></div>

                            {{-- 로그아웃: POST 권장(라우트는 네가 만들거나 기존거 사용) --}}
                            <form action="{{ route('web.auth.logout') }}" method="post">
                                @csrf
                                <button type="submit" class="w-full text-left px-4 py-2 hover:bg-gray-50 logout-btn">
                                    로그아웃
                                </button>
                            </form>
                        </div>
                    </div>
                </div>

            @else
                <a href="/login" class="btn btn-ghost">로그인</a>
                <a href="/register" class="btn btn-primary" style="padding: 8px 20px;">회원가입</a>

            @endif
        </div>

        <!-- Mobile Menu Toggle -->
        <button class="mobile-menu-btn" type="button" aria-label="메뉴 열기" aria-controls="mobile-drawer" aria-expanded="false">
            <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
            </svg>
        </button>

        <!-- Mobile Drawer -->
        @include('web.partials.mobile-drawer')

        <!-- Mobile Drawer Overlay -->
        <div class="mobile-drawer-overlay" data-drawer-close hidden></div>

    </div>
</header>

<!-- Mobile Breakpoint Adjustments will be handled in CSS media queries -->
<style>
    @media (max-width: 1024px) {

        /* 메뉴/로그인만 숨김 */
        .desktop-nav,
        .auth-buttons {
            display: none !important;
        }

        /* 검색은 유지 + 모바일 폭 최적화 */
        .search-bar {
            display: block !important;
            flex: 1 1 auto;
            max-width: none;
            min-width: 0;
            margin: 0 10px;
        }
        .search-bar form { width: 100%; }
        .search-input { width: 100%; }

        /* 햄버거 버튼 표시 */
        .mobile-menu-btn {
            display: block !important;
        }
    }

    @media (max-width: 480px) {
        .site-header .container{
            padding-left: 12px;
            padding-right: 12px;
        }
    }
</style>