@props(['categories' => []])

@php
    $menuIcons = [
        'kitchen' => 'kitchen',
        'home' => 'sofa',
        'office' => 'office',
        'electronics' => 'electronics',
        'toys' => 'toys',
        'lighting' => 'lighting',
        'storage' => 'storage',
        'deals' => 'gift',
    ];
    $socials = [
        ['name' => 'Instagram', 'url' => config('store.instagram'), 'class' => 'bg-[linear-gradient(135deg,#f9ce34,#ee2a7b_55%,#6228d7)] text-white'],
        ['name' => 'TikTok', 'url' => config('store.tiktok'), 'class' => 'bg-black text-white'],
        ['name' => 'Facebook', 'url' => config('store.facebook'), 'class' => 'bg-[#1877F2] text-white'],
    ];
@endphp

<div id="store-menu" data-drawer="menu" hidden class="fixed inset-0 z-50" role="dialog" aria-modal="true" aria-labelledby="menu-title">
    <div data-drawer-overlay class="menu-overlay absolute inset-0 bg-[#1B2559]/45"></div>
    <div data-drawer-panel tabindex="-1" class="menu-panel absolute inset-y-0 left-0 flex w-[min(88vw,24rem)] flex-col overflow-hidden bg-white outline-none">
        <div class="pointer-events-none absolute -right-10 -top-12 h-36 w-36 rounded-full bg-[#EFEAFF]"></div>
        <div class="pointer-events-none absolute -bottom-16 -left-16 h-56 w-56 rounded-full bg-[#C4B4FF]"></div>
        <div class="relative flex items-center justify-between px-5 pb-2 pt-5">
            <span class="inline-flex items-center rounded-lg bg-brand px-2 py-1">
                <img src="{{ asset('images/beigoods-logo.png') }}" alt="BeiGoods" width="946" height="163" class="brand-logo">
            </span>
            <button type="button" data-drawer-close class="grid h-10 w-10 place-items-center rounded-full bg-[#F4F0FF] text-navy" aria-label="Close menu">
                <x-store.icon name="close" width="18" height="18" />
            </button>
        </div>
        <div class="relative min-h-0 flex-1 overflow-y-auto px-4 pb-[max(1.25rem,env(safe-area-inset-bottom))]">
            <h2 id="menu-title" class="px-2 pb-2 pt-3 text-[15px] font-bold text-navy">{{ __('ui.all_categories') }}</h2>
            <ul class="flex flex-col">
                @foreach ($categories as $category)
                    <li class="border-b border-[#F1F2F6] last:border-b-0">
                        <button
                            type="button"
                            data-filter="{{ $category['filter'] }}"
                            data-menu-filter="{{ $category['filter'] }}"
                            class="menu-row flex w-full items-center gap-3 rounded-xl px-2 py-3 text-left"
                        >
                            <x-store.icon :name="$menuIcons[$category['filter']] ?? 'grid'" class="text-brand" width="20" height="20" />
                            <span class="flex-1 text-[14px] font-medium text-navy">{{ $category['label'] }}</span>
                            <x-store.icon name="chevron-right" class="menu-chevron text-[#B0B7C6]" width="16" height="16" />
                        </button>
                    </li>
                @endforeach
            </ul>
            <div class="mx-2 mt-4 border-t border-[#EEF1F6] pt-4">
                <p class="text-[15px] font-bold text-navy">{{ __('ui.follow_us') }}</p>
                <p class="mt-1 text-[12px] text-muted">{{ __('ui.follow_caption') }}</p>
                <div class="mt-3 flex items-center gap-3">
                    @foreach ($socials as $social)
                        @if ($social['url'])
                            <a href="{{ $social['url'] }}" target="_blank" rel="noopener noreferrer" class="store-social {{ $social['class'] }}" aria-label="{{ $social['name'] }}">
                        @else
                            <span class="store-social {{ $social['class'] }}" role="img" aria-label="{{ $social['name'] }}">
                        @endif
                            @if ($social['name'] === 'Instagram')
                                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0.8" fill="currentColor" stroke="none"/></svg>
                            @elseif ($social['name'] === 'TikTok')
                                <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" aria-hidden="true"><path d="M14 4c.4 2.4 1.8 4 4.2 4.3v2.4c-1.5 0-2.9-.5-4.2-1.4v6.2a5.5 5.5 0 1 1-5.5-5.5c.3 0 .6 0 .9.1v2.6a2.9 2.9 0 1 0 2 2.8V4H14Z"/></svg>
                            @else
                                <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" aria-hidden="true"><path d="M14.5 8.5H17V5h-2.5C11.6 5 10 6.8 10 9.5V11H8v3.2h2V20h3.3v-5.8H16l.6-3.2h-3.3V9.4c0-.6.4-.9 1.2-.9Z"/></svg>
                            @endif
                        @if ($social['url'])
                            </a>
                        @else
                            </span>
                        @endif
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>

<div id="store-cart" data-drawer="cart" hidden class="fixed inset-0 z-50" role="dialog" aria-modal="true" aria-labelledby="cart-title">
    <div data-drawer-overlay class="cart-overlay absolute inset-0 bg-[#1B2559]/45"></div>
    <div data-drawer-panel tabindex="-1" class="cart-panel absolute inset-y-0 right-0 flex h-[100dvh] w-full flex-col bg-white outline-none md:w-[30rem]">
        <div class="flex shrink-0 items-center justify-between gap-3 border-b border-[#F1F2F6] px-4 pb-2.5 pt-[max(0.7rem,env(safe-area-inset-top))]">
            <div class="min-w-0">
                <h2 id="cart-title" class="text-[17px] font-bold leading-tight text-navy">{{ __('ui.your_cart') }}</h2>
                <p data-cart-meta class="text-[12px] text-muted">{{ __('ui.js.cart_many', ['count' => 0]) }}</p>
            </div>
            <button type="button" data-drawer-close class="grid size-9 shrink-0 place-items-center rounded-full bg-[#F4F0FF] text-navy transition-transform duration-150 hover:scale-105" aria-label="Close cart">
                <x-store.icon name="close" width="16" height="16" />
            </button>
        </div>

        <div class="relative min-h-0 flex-1">
            <div data-cart-empty hidden class="flex h-full flex-col items-center justify-center px-6 text-center">
                <x-store.icon name="bag" class="text-brand" width="36" height="36" />
                <p class="mt-3 text-[16px] font-bold text-navy">{{ __('ui.cart_empty') }}</p>
                <p class="mt-1 text-[13px] text-muted">{{ __('ui.cart_empty_caption') }}</p>
                <button type="button" data-start-shopping class="mt-4 rounded-xl bg-brand px-4 py-2.5 text-[13px] font-semibold text-white">{{ __('ui.start_shopping') }}</button>
            </div>
            <ul data-cart-list class="cart-list h-full overflow-y-auto"></ul>
        </div>

        <div class="shrink-0 space-y-2 border-t border-[#F1F2F6] px-4 pb-[max(0.7rem,env(safe-area-inset-bottom))] pt-2.5">
            <div data-cart-shop class="space-y-2">
                <div>
                    <button type="button" data-promo-toggle class="flex w-full items-center gap-2 rounded-xl bg-[#F4F0FF] px-3 py-2.5 text-left text-[13px] font-semibold text-brand" aria-expanded="false" aria-controls="cart-promo">
                        <x-store.icon name="tag" width="15" height="15" />
                        <span class="flex-1">{{ __('ui.promo_prompt') }}</span>
                        <x-store.icon name="chevron-down" class="cart-promo-chevron" width="16" height="16" />
                    </button>
                    <div id="cart-promo" data-promo-panel>
                        <div data-promo-fields inert class="min-h-0 overflow-hidden">
                            <div class="flex items-center gap-2 pt-2">
                                <label class="sr-only" for="cart-promo-code">{{ __('ui.promo_code') }}</label>
                                <input id="cart-promo-code" data-promo-input type="text" maxlength="40" autocomplete="off" placeholder="Promo code" class="h-9 min-w-0 flex-1 rounded-lg border border-[#E6E2F6] bg-white px-3 text-[13px] text-navy outline-none focus:border-brand">
                                <button type="button" data-promo-apply class="h-9 shrink-0 rounded-lg bg-brand px-3 text-[12px] font-semibold text-white">{{ __('ui.apply') }}</button>
                                <button type="button" data-promo-clear hidden class="h-9 shrink-0 text-[12px] font-semibold text-muted">{{ __('ui.clear') }}</button>
                            </div>
                            <p data-promo-message class="min-h-4 pt-1 text-[11px] leading-snug text-muted" aria-live="polite"></p>
                        </div>
                    </div>
                </div>

                <div data-cart-summary class="rounded-xl bg-[#F7F5FF] px-3 py-2.5 text-[12.5px]">
                    <p class="flex items-center justify-between gap-3 text-navy">
                        <span data-cart-subtotal-label>Subtotal (0 items)</span>
                        <span data-cart-total class="font-semibold">$0.00</span>
                    </p>
                    <p class="mt-1 flex items-center justify-between gap-3 text-muted">
                        <span>{{ __('ui.shipping_label') }}</span>
                        <span>{{ __('ui.calculated') }}</span>
                    </p>
                    <p class="mt-2 flex items-center justify-between gap-3 border-t border-[#E6E2F6] pt-2 text-[14px] font-bold text-navy">
                        <span>{{ __('ui.total') }}</span>
                        <span data-cart-total>$0.00</span>
                    </p>
                    <p class="mt-1 text-[10px] leading-snug text-muted">{{ __('ui.merchandise_note') }}</p>
                </div>

                <a href="{{ route('checkout') }}" data-checkout class="cart-checkout flex h-14 items-center gap-2 rounded-xl bg-brand px-3.5 text-[14px] font-semibold text-white">
                    <x-store.icon name="lock" width="16" height="16" />
                    <span class="min-w-0 flex-1 truncate">{{ __('ui.proceed_checkout') }}</span>
                    <span data-cart-total>$0.00</span>
                    <x-store.icon name="arrow-right" width="16" height="16" />
                </a>
            </div>

            <button type="button" data-continue-shopping class="cart-continue flex h-11 w-full items-center justify-center gap-1.5 rounded-xl bg-[#F4F0FF] text-[13px] font-semibold text-brand">
                <x-store.icon name="chevron-left" width="16" height="16" />
                {{ __('ui.continue_shopping') }}
            </button>

            <ul class="grid grid-cols-3 gap-1 pt-0.5">
                <li class="min-w-0 text-center">
                    <x-store.icon name="truck" class="mx-auto text-brand" width="14" height="14" />
                    <p class="mt-0.5 text-[10px] font-semibold leading-tight text-navy">{{ __('catalog.benefit.fast') }}</p>
                    <p class="text-[9px] leading-tight text-muted">{{ __('catalog.benefit.fast_caption') }}</p>
                </li>
                <li class="min-w-0 text-center">
                    <x-store.icon name="shield" class="mx-auto text-brand" width="14" height="14" />
                    <p class="mt-0.5 text-[10px] font-semibold leading-tight text-navy">{{ __('catalog.benefit.secure') }}</p>
                    <p class="text-[9px] leading-tight text-muted">{{ __('catalog.benefit.secure_caption') }}</p>
                </li>
                <li class="min-w-0 text-center">
                    <x-store.icon name="headset" class="mx-auto text-brand" width="14" height="14" />
                    <p class="mt-0.5 text-[10px] font-semibold leading-tight text-navy">{{ __('catalog.benefit.support') }}</p>
                    <p class="text-[9px] leading-tight text-muted">{{ __('catalog.benefit.support_caption') }}</p>
                </li>
            </ul>
        </div>
    </div>
</div>

<template id="drawer-row-template">
    <li data-line-id class="flex items-center gap-3 border-b border-[#EEF1F6] px-4 py-3">
        <x-store.image-placeholder class="h-14 w-14 shrink-0 rounded-lg" />
        <div class="min-w-0 flex-1">
            <p data-row-name class="truncate text-sm font-semibold text-navy"></p>
            <p data-row-price class="text-sm font-bold text-navy"></p>
            <div data-row-qty class="mt-1 inline-flex items-center gap-1">
                <button type="button" data-qty-dec class="grid h-7 w-7 place-items-center rounded-full border border-[#E4E7EE] text-sm" aria-label="Decrease quantity">−</button>
                <span data-qty-value class="w-6 text-center text-sm">1</span>
                <button type="button" data-qty-inc class="grid h-7 w-7 place-items-center rounded-full border border-[#E4E7EE] text-sm" aria-label="Increase quantity">+</button>
            </div>
            <button type="button" data-row-cart class="mt-1 text-xs font-semibold text-brand">{{ __('ui.add_to_cart') }}</button>
        </div>
        <button type="button" data-row-remove class="text-xs font-semibold text-muted">{{ __('ui.remove') }}</button>
    </li>
</template>

<template id="cart-row-template">
    <li data-line-id class="cart-row flex items-center gap-3 border-b border-[#F1F2F6] px-4 py-2.5">
        <x-store.image-placeholder class="size-[4.75rem] shrink-0 rounded-xl" />
        <div class="min-w-0 flex-1">
            <p data-row-name class="line-clamp-2 text-[13px] font-semibold leading-tight text-navy"></p>
            <p data-row-category class="mt-0.5 truncate text-[11px] text-muted"></p>
            <div class="mt-1.5 flex items-center justify-between gap-2">
                <p data-row-price class="text-[13px] font-bold text-navy"></p>
                <div data-row-qty class="cart-qty inline-flex h-7 items-center rounded-full bg-[#F3EEFF] p-0.5">
                    <button type="button" data-qty-dec class="grid size-6 place-items-center rounded-full bg-white text-[14px] font-semibold text-brand" aria-label="Decrease quantity">−</button>
                    <span data-qty-value class="w-6 text-center text-[12px] font-bold text-navy">1</span>
                    <button type="button" data-qty-inc class="grid size-6 place-items-center rounded-full bg-white text-[14px] font-semibold text-brand" aria-label="Increase quantity">+</button>
                </div>
            </div>
        </div>
        <button type="button" data-row-remove class="grid size-8 shrink-0 place-items-center rounded-full text-[#8B93A7]" aria-label="Remove item">
            <x-store.icon name="trash" width="15" height="15" />
        </button>
    </li>
</template>