@if ($googleConsentCollectionEnabled ?? false)
    <section
        id="vm-consent-banner"
        class="fixed inset-x-3 bottom-3 z-[100] mx-auto hidden max-w-5xl overflow-hidden rounded-3xl border border-white/10 bg-stone-950 text-white shadow-2xl shadow-stone-950/35 sm:inset-x-6 sm:bottom-6"
        aria-labelledby="vm-consent-title"
        aria-describedby="vm-consent-description"
        role="dialog"
        aria-modal="false"
    >
        <div class="grid lg:grid-cols-[1fr_auto] lg:items-center">
            <div class="p-5 sm:p-6">
                <div class="mb-3 flex items-center gap-3">
                    <span class="inline-flex h-9 w-9 items-center justify-center rounded-full bg-[#ffd400] text-stone-950" aria-hidden="true">
                        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3a9 9 0 1 0 9 9c-5 1-7-2-6-6-2 1-4 0-3-3Z"/><circle cx="8.5" cy="13" r="1" fill="currentColor"/><circle cx="13" cy="17" r="1" fill="currentColor"/></svg>
                    </span>
                    <p class="text-[11px] font-semibold uppercase tracking-[0.2em] text-emerald-300">Your privacy, your choice</p>
                </div>
                <h2 id="vm-consent-title" class="text-xl font-semibold tracking-tight">Help us measure what works</h2>
                <p id="vm-consent-description" class="mt-2 max-w-2xl text-sm leading-6 text-stone-300">
                    Analytics helps us improve the wholesale experience. Advertising cookies help us measure campaigns and show relevant Vida Mansa products. Essential store and order-processing cookies remain active; campaign identifiers follow your choices.
                </p>
                <a
                    href="{{ $googleTrackingConfig['tracking_privacy_url'] }}"
                    class="mt-2 inline-flex text-xs font-medium text-stone-300 underline decoration-stone-600 underline-offset-4 hover:text-white"
                    target="_blank"
                    rel="noopener noreferrer"
                >Privacy policy</a>
                <p data-vm-consent-status class="mt-3 hidden text-sm font-medium text-amber-300" role="status" aria-live="polite"></p>
                <div id="vm-consent-options" class="mt-5 hidden grid gap-3 sm:grid-cols-2">
                    <label class="flex cursor-pointer items-start gap-3 rounded-2xl border border-white/10 bg-white/5 p-4">
                        <input id="vm-consent-analytics" type="checkbox" class="mt-0.5 accent-emerald-500">
                        <span><span class="block text-sm font-semibold">Analytics</span><span class="mt-1 block text-xs leading-5 text-stone-400">Traffic, funnel and ecommerce performance.</span></span>
                    </label>
                    <label class="flex cursor-pointer items-start gap-3 rounded-2xl border border-white/10 bg-white/5 p-4">
                        <input id="vm-consent-ads" type="checkbox" class="mt-0.5 accent-emerald-500">
                        <span><span class="block text-sm font-semibold">Advertising</span><span class="mt-1 block text-xs leading-5 text-stone-400">Conversion measurement and relevant ads.</span></span>
                    </label>
                </div>
            </div>
            <div class="flex flex-wrap gap-2 border-t border-white/10 bg-white/[0.035] p-5 lg:max-w-sm lg:border-l lg:border-t-0 lg:p-6">
                <button type="button" data-vm-consent="accept" class="inline-flex min-h-11 flex-1 items-center justify-center rounded-xl bg-[#ffd400] px-5 text-sm font-semibold text-stone-950 transition hover:bg-yellow-300">Accept all</button>
                <button type="button" data-vm-consent="reject" class="inline-flex min-h-11 flex-1 items-center justify-center rounded-xl border border-white/20 px-5 text-sm font-semibold text-white transition hover:bg-white/10">Essential only</button>
                <button type="button" data-vm-consent="manage" class="inline-flex min-h-10 w-full items-center justify-center text-sm font-medium text-stone-300 underline decoration-stone-600 underline-offset-4 hover:text-white">Choose preferences</button>
                <button type="button" data-vm-consent="save" class="hidden min-h-11 w-full items-center justify-center rounded-xl bg-emerald-600 px-5 text-sm font-semibold text-white transition hover:bg-emerald-500">Save preferences</button>
            </div>
        </div>
    </section>
@endif