{{-- GDPR cookie consent banner (Tailwind, slide-up from bottom-left) --}}
<div id="gdpr-cookie-banner" class="fixed bottom-4 left-4 right-4 sm:right-auto sm:max-w-md z-[1080] bg-white rounded-2xl shadow-2xl border border-slate-200 p-5 hidden translate-y-4 opacity-0 transition-all duration-300" role="dialog" aria-live="polite" aria-labelledby="gdpr-banner-title">
    <div class="flex items-start gap-3">
        <div class="w-11 h-11 bg-brand-50 rounded-xl grid place-items-center text-brand-600 shrink-0">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="12" r="9"/><path d="M9 9a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm6 5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm-9 1a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z"/></svg>
        </div>
        <div class="flex-1 min-w-0">
            <h2 id="gdpr-banner-title" class="font-display font-extrabold text-base">{{ __('We value your privacy') }}</h2>
            <p class="text-[13px] text-slate-600 mt-1.5 leading-relaxed">
                {{ __('We use cookies to make the site work, remember your preferences, and — with your consent — for analytics and marketing.') }}
                <a href="{{ url('/privacy') }}" class="text-brand-600 hover:underline">{{ __('Privacy policy') }}</a>
            </p>
        </div>
    </div>

    <button type="button" id="gdpr-toggle-details" class="mt-3 inline-flex items-center gap-1.5 text-[12px] font-semibold text-brand-600 hover:underline">
        <svg id="gdpr-toggle-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="transition-transform"><path d="m6 9 6 6 6-6"/></svg>
        <span id="gdpr-toggle-label">{{ __('Cookie preferences') }}</span>
    </button>

    <fieldset id="gdpr-banner-details" class="hidden mt-3 pt-3 border-t border-slate-100 space-y-1.5">
        <legend class="sr-only">{{ __('Cookie categories') }}</legend>
        @foreach(config('gdpr.cookie_categories', []) as $key => $cat)
            <label class="flex items-start gap-2 text-[12px] cursor-pointer hover:bg-slate-50 px-2 py-1.5 rounded-lg">
                <input type="checkbox" name="gdpr_cat_{{ $key }}" value="{{ $key }}" data-gdpr-cat="{{ $key }}" {{ !empty($cat['mandatory']) ? 'checked disabled' : '' }} class="w-4 h-4 mt-0.5 rounded">
                <span class="flex-1"><span class="font-semibold text-deep block">{{ $cat['label'] ?? ucfirst($key) }}</span><span class="text-slate-500">{{ $cat['description'] ?? '' }}</span></span>
            </label>
        @endforeach
    </fieldset>

    <div class="flex items-center gap-2 mt-4 flex-wrap">
        <button type="button" id="gdpr-accept-all" class="flex-1 min-w-[110px] bg-brand-500 hover:bg-brand-600 text-white font-bold text-[13px] py-2.5 rounded-lg">{{ __('Accept all') }}</button>
        <button type="button" id="gdpr-reject-optional" class="flex-1 min-w-[110px] bg-slate-100 hover:bg-slate-200 text-slate-700 font-semibold text-[13px] py-2.5 rounded-lg">{{ __('Reject optional') }}</button>
        <button type="button" id="gdpr-accept-selected" class="hidden flex-1 min-w-[110px] bg-deep hover:bg-deep/90 text-white font-bold text-[13px] py-2.5 rounded-lg">{{ __('Save choices') }}</button>
    </div>
</div>

<script>
  window.gdprConfig = {
    endpoint: @json(url('/gdpr/consent')),
    policyVersion: @json(config('gdpr.policy_version', '1.0')),
    csrf: @json(csrf_token()),
  };
  (function(){
    var t = document.getElementById('gdpr-toggle-details');
    var d = document.getElementById('gdpr-banner-details');
    var s = document.getElementById('gdpr-accept-selected');
    var icon = document.getElementById('gdpr-toggle-icon');
    var label = document.getElementById('gdpr-toggle-label');
    if (t && d && s) t.addEventListener('click', function(){
      var hidden = d.classList.toggle('hidden');
      s.classList.toggle('hidden', hidden);
      if (icon) icon.style.transform = hidden ? '' : 'rotate(180deg)';
      if (label) label.textContent = hidden ? @json(__('Cookie preferences')) : @json(__('Hide preferences'));
    });
    var b = document.getElementById('gdpr-cookie-banner');
    if (b) {
      var observer = new MutationObserver(function(){
        if (!b.classList.contains('hidden') && !b.hasAttribute('hidden')) {
          requestAnimationFrame(function(){ b.classList.remove('translate-y-4','opacity-0'); });
        }
      });
      observer.observe(b, { attributes: true, attributeFilter: ['hidden','class'] });
    }
  })();
</script>

{{-- ============= PWA INSTALL PROMPT ============= --}}
@if(env('PWA_ENABLE') == 1)
<div id="pwa-install-prompt" class="fixed bottom-4 right-4 z-[1075] bg-white rounded-2xl shadow-2xl border border-slate-200 p-4 max-w-xs hidden translate-y-4 opacity-0 transition-all duration-300">
    <div class="flex items-start gap-3">
        <div class="w-12 h-12 bg-gradient-to-br from-brand-500 to-brand-700 rounded-xl grid place-items-center text-white shrink-0">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 3v12m0 0 4-4m-4 4-4-4"/><path d="M5 21h14"/></svg>
        </div>
        <div class="flex-1 min-w-0">
            <div class="font-display font-extrabold text-[14px]">{{ __('Install our app') }}</div>
            <p class="text-[12px] text-slate-500 mt-0.5 leading-snug">{{ __('Faster checkout, offline support, and home-screen access.') }}</p>
        </div>
        <button type="button" id="pwa-install-close" class="w-7 h-7 grid place-items-center rounded-full text-slate-400 hover:bg-slate-100 shrink-0" aria-label="Close">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 6l12 12M18 6 6 18"/></svg>
        </button>
    </div>
    <button type="button" id="pwa-install-btn" class="mt-3 w-full bg-brand-500 hover:bg-brand-600 text-white font-bold text-[13px] py-2.5 rounded-lg flex items-center justify-center gap-2">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3v12m0 0 4-4m-4 4-4-4"/><path d="M5 21h14"/></svg>
        {{ __('Install') }}
    </button>
</div>
<script>
(function(){
    var dismissedKey = 'pwa_install_dismissed_v1';
    var prompt = null;
    var banner = document.getElementById('pwa-install-prompt');
    var btn = document.getElementById('pwa-install-btn');
    var closeBtn = document.getElementById('pwa-install-close');
    if (!banner || !btn || !closeBtn) return;
    if (window.matchMedia && window.matchMedia('(display-mode: standalone)').matches) return; // already installed
    function show(){
        if (localStorage.getItem(dismissedKey)) return;
        banner.classList.remove('hidden');
        requestAnimationFrame(function(){ banner.classList.remove('translate-y-4','opacity-0'); });
    }
    function hide(){
        banner.classList.add('translate-y-4','opacity-0');
        setTimeout(function(){ banner.classList.add('hidden'); }, 300);
    }
    window.addEventListener('beforeinstallprompt', function(e){
        e.preventDefault();
        prompt = e;
        window.__pwaDeferred = e;
        show();
    });
    if (window.__pwaDeferred) { prompt = window.__pwaDeferred; show(); }
    btn.addEventListener('click', function(){
        if (!prompt) { hide(); return; }
        prompt.prompt();
        prompt.userChoice.then(function(choice){
            if (choice && choice.outcome === 'accepted') {
                localStorage.setItem(dismissedKey, '1');
            }
            hide();
            prompt = null;
        });
    });
    closeBtn.addEventListener('click', function(){
        localStorage.setItem(dismissedKey, '1');
        hide();
    });
    window.addEventListener('appinstalled', function(){
        localStorage.setItem(dismissedKey, '1');
        hide();
    });
})();
</script>
@endif