@php
    $sections = config('web.drawer_sections', []);
    $isLoggedIn = auth()->check();
    $user = auth()->user();
@endphp

{{-- Overlay --}}
<div class="mobile-drawer-overlay" data-drawer-close hidden></div>

{{-- Drawer --}}
<aside class="mobile-drawer" id="mobile-drawer" aria-hidden="true">
    <div class="mobile-drawer__head">
        <div class="mobile-drawer__title">PIN FOR YOU</div>
        <button class="mobile-drawer__close" type="button" aria-label="메뉴 닫기" data-drawer-close>✕</button>
    </div>

    {{-- ✅ 트렌디한 “프로필 카드”: 로그인 전/후 UI 분기 --}}
    <div class="m-usercard">
        @if($isLoggedIn)
            <div class="m-usercard__row">
                <div class="m-avatar" aria-hidden="true">{{ mb_substr($user->name ?? 'U', 0, 1) }}</div>
                <div class="m-usercard__info">
                    <div class="m-usercard__name">{{ $user->name ?? '회원' }}</div>
                    <div class="m-usercard__meta">{{ $user->email ?? '' }}</div>
                </div>
            </div>
            <div class="m-usercard__actions">
                <a class="m-pill" href="{{ route('web.mypage.info.index') }}">내 정보</a>
                {{-- <a class="m-pill m-pill--ghost" href="{{ route('web.auth.logout') }}">로그아웃</a> --}}
            </div>
        @else
            <div class="m-usercard__row">
                <div class="m-avatar m-avatar--ghost" aria-hidden="true">🔒</div>
                <div class="m-usercard__info">
                    <div class="m-usercard__name">로그인이 필요해요</div>
                    <div class="m-usercard__meta">내역 확인/1:1문의는 로그인 후 이용 가능</div>
                </div>
            </div>
            <div class="m-usercard__actions">
                <a class="m-pill" href="{{ route('web.auth.login') }}">로그인</a>
                <a class="m-pill m-pill--ghost" href="{{ route('web.auth.register') }}">회원가입</a>
            </div>
        @endif
    </div>

    {{-- ✅ 메뉴 섹션(주메뉴/CS/정책/마이페이지) --}}
    <div class="mobile-drawer__body">
        @foreach($sections as $secKey => $sec)
            @php
                $title = $sec['title'] ?? '';
                $itemsKey = $sec['items'] ?? null;
                $rawItems = $itemsKey ? config('web.' . $itemsKey, []) : [];
                $items = collect($rawItems)->map(function($it){
                  $url = '#';
                  if (!empty($it['route'])) {
                    try { $url = route($it['route']); } catch (\Throwable $e) { $url = '#'; }
                  } elseif (!empty($it['url'])) {
                    $url = $it['url'];
                  }
                  return [
                    'label' => $it['label'] ?? '',
                    'url'   => $url,
                  ];
                })->values()->all();
            @endphp

            {{-- 마이페이지는 “로그인 전”에 섹션 자체를 살짝 줄여 보여도 됨 --}}
            @if($secKey === 'mypage' && !$isLoggedIn)
                {{-- 로그인 전에는 마이페이지 섹션은 보여주되, 안내 문구를 둠 --}}
                <section class="m-navsec">
                    <div class="m-navsec__title">{{ $title }}</div>
                    <div class="m-navsec__hint">로그인 후 이용내역/교환내역을 확인할 수 있어요.</div>

                    <div class="m-grid">
                        <a class="m-pill" href="{{ route('web.auth.login') }}">로그인</a>
                        <a class="m-pill m-pill--ghost" href="{{ route('web.auth.register') }}">회원가입</a>
                    </div>
                </section>
                @continue
            @endif

            <section class="m-navsec">
                <div class="m-navsec__title">{{ $title }}</div>
                <div class="m-grid">
                    @foreach($items as $it)
                        <a class="m-tile" href="{{ $it['url'] }}">{{ $it['label'] }}</a>
                    @endforeach
                </div>
            </section>
        @endforeach
    </div>

    {{-- Footer CTA --}}
    <div class="mobile-drawer__foot">
        <a class="mobile-drawer__cta" href="{{ route('web.cs.qna.index') }}">1:1 문의하기</a>
    </div>
</aside>