{{-- filepath: resources/views/components/frontend/xvar-logo.blade.php --}}
{{-- x-data="{
        showDot: true,
        showLogo: false,
        showVar: false,
        start() {
            setTimeout(() => {
                this.showDot = false;
                setTimeout(() => {
                    this.showLogo = true;
                    setTimeout(() => {
                        this.showVar = true;
                    }, 900);
                }, 200);
            }, 1100);
        }
    }"
    x-init="start()" --}}


@props([
    'xSize' => 100,
    'varSize' => 'text-3xl md:text-5xl',
    'class' => '',
])

<div {{ $attributes->merge(['class' => "relative flex items-center justify-center w-full $class"]) }} style="height: 120px;" dir="ltr">
    <div x-show="showDot" x-transition:leave="transition-opacity duration-200"
        class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" style="z-index:3">
        <div class="w-7 h-7 rounded-full"
            :class="$store.darkMode?.on ? 'bg-[#FFD700]' : 'bg-[#B8860B]'"
            style="box-shadow: none; animation: bounceDot 1.1s cubic-bezier(.68,-0.55,.27,1.55);"></div>
    </div>
    <svg
        x-show="showLogo"
        x-transition:enter="transition-opacity duration-200"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        width="{{ $xSize }}" height="{{ $xSize }}" viewBox="0 0 100 100" fill="none"
        style="z-index:2"
    >
        <defs>
            <linearGradient id="x-gold-dark" x1="0" y1="0" x2="100" y2="100">
                <stop :stop-color="$store.darkMode?.on ? '#FFD700' : '#C28811'"/>
                <stop offset="0.5" :stop-color="$store.darkMode?.on ? '#B8860B' : '#FFD700'"/>
                <stop offset="1" :stop-color="$store.darkMode?.on ? '#FFF8DC' : '#B8860B'"/>
            </linearGradient>
        </defs>
        <g>
            <line x1="20" y1="20" x2="50" y2="50"
                :class="showLogo ? 'sword-x sword-x-1' : 'x-animate-out'"
                stroke="url(#x-gold-dark)" stroke-width="16" stroke-linecap="round"/>
            <line x1="80" y1="80" x2="50" y2="50"
                :class="showLogo ? 'sword-x sword-x-2' : 'x-animate-out'"
                stroke="url(#x-gold-dark)" stroke-width="16" stroke-linecap="round"/>
            <line x1="80" y1="20" x2="50" y2="50"
                :class="showLogo ? 'sword-x sword-x-3' : 'x-animate-out'"
                stroke="url(#x-gold-dark)" stroke-width="16" stroke-linecap="round"/>
            <line x1="20" y1="80" x2="50" y2="50"
                :class="showLogo ? 'sword-x sword-x-4' : 'x-animate-out'"
                stroke="url(#x-gold-dark)" stroke-width="16" stroke-linecap="round"/>
        </g>
    </svg>
    <span
        x-show="showVar"
        x-cloak
        x-data="{ moved: false }"
        x-init="$watch('showVar', v => { if(v) setTimeout(() => moved = true, 400) })"
        :class="[
            'font-extrabold tracking-widest transition-transform duration-700 ease-out whitespace-nowrap ml-4',
            $store.darkMode?.on ? 'text-[#FFD700]' : 'text-[#B8860B]',
            '{{ $varSize }}',
            moved
                ? 'animate-var-in opacity-100'
                : 'opacity-0'
        ]"
        style="font-family: 'Montserrat', Arial, sans-serif; z-index:3;"
    >
        -Var
    </span>
</div>