@php
    $reasons = config('curioo.why_us');
    $locale = app()->getLocale();
@endphp
<div class="relative h-[132vw] lg:h-[70vw] w-full pt-6 lg:pt-16" x-data="{ choose: 'num1' }">
    <div class="absolute inset-0 bg-cover bg-center -z-50"
        style="background-image: url({{ asset('inc/images/reasons_bg.png') }}">
    </div>
    <div
        class="pb-[4vw] w-full flex justify-center subtitle bg-white bg-gradient-to-r from-curiooBlue via-curiooCyan to-curiooRed bg-clip-text text-transparent">
        8 {{ __('reasons to choose Curioo') }}
    </div>
    <img src="{{ asset('inc/images/index/reason_ball1.png') }}"
        class="w-[8vw] absolute animate-sb3 top-[20vw] left-[4vw]" />
    <img src="{{ asset('inc/images/index/reason_ball2.png') }}"
        class="w-[8vw] absolute animate-sb3 top-[10vw] right-[5vw] " />

    <button data-num="1" x-on:click="choose='num1'" x-on:mouseover="choose='num1'"
        class="absolute top-[11vw] left-[40vw] lg:top-[10vw] lg:left-[43vw] size-[20vw] lg:size-[15vw] p-1 lg:p-2 rounded-full bg-red-500 flex justify-center items-center">
        <span
            class="text-[2.5vw] lg:text-[1.5vw] font-bold text-white text-center font-light">{{ $reasons['innovation_advantage']['name'][$locale] }}</span>
    </button>
    <button data-num="2" x-on:click="choose='num2'" x-on:mouseover="choose='num2'"
        class="absolute top-[17vw] right-[16vw] lg:top-[15.5vw] lg:right-[27vw] size-[20vw] lg:size-[15vw] p-1 lg:p-2 rounded-full bg-rose-400 flex justify-center items-center">
        <span class="text-[2.5vw] lg:text-[1.5vw] font-bold text-white text-center font-light">
            {{ $reasons['secure_future']['name'][$locale] }}
        </span>
    </button>
    <button data-num="3" x-on:click="choose='num3'" x-on:mouseover="choose='num3'"
        class="absolute top-[33vw] right-[0vw] lg:top-[30vw] lg:right-[22vw] size-[20vw] lg:size-[15vw] p-1 lg:p-2 rounded-full bg-yellow-500 flex justify-center items-center">
        <span class="text-[2.5vw] lg:text-[1.5vw] font-bold text-white text-center font-light">
            {{ $reasons['subject_integration']['name'][$locale] }}
        </span>
    </button>
    <button data-num="4" x-on:click="choose='num4'" x-on:mouseover="choose='num4'"
        class="absolute top-[99vw] right-[13vw] lg:top-[44vw] lg:right-[28vw] size-[20vw] lg:size-[15vw] p-1 lg:p-2 rounded-full bg-amber-500 flex justify-center items-center">
        <span class="text-[2.5vw] lg:text-[1.5vw] font-bold text-white text-center font-light">
            {{ $reasons['learn_english']['name'][$locale] }}
        </span>
    </button>
    <button data-num="5" x-on:click="choose='num5'" x-on:mouseover="choose='num5'"
        class="absolute top-[107vw] left-[40vw] lg:top-[50vw] lg:left-[42.5vw] size-[20vw] lg:size-[15vw] p-1 lg:p-2 rounded-full bg-lime-600 mx-auto flex justify-center items-center">
        <span class="text-[2.5vw] lg:text-[1.5vw] font-bold text-white text-center font-light">
            {{ $reasons['ai_behavior_track']['name'][$locale] }}
        </span>
    </button>
    <button data-num="6" x-on:click="choose='num6'" x-on:mouseenter="choose='num6'"
        class="absolute top-[98vw] left-[13vw] lg:top-[44.5vw] lg:left-[28vw] size-[20vw] lg:size-[15vw] p-1 lg:p-2 rounded-full bg-emerald-500 mx-auto flex justify-center items-center">
        <span class="text-[2.5vw] lg:text-[1.5vw] font-bold text-white text-center font-light">
            {{ $reasons['stand_out']['name'][$locale] }}
        </span>
    </button>
    <button data-num="7" x-on:click="choose='num7'" x-on:mouseenter="choose='num7'"
        class="absolute top-[18vw] left-[16vw] lg:top-[30vw] lg:left-[23vw] size-[20vw] lg:size-[15vw] p-1 lg:p-2 rounded-full bg-cyan-500 flex justify-center items-center">
        <span class="text-[2.5vw] lg:text-[1.5vw] font-bold text-white text-center font-light">
            {{ $reasons['practical_learning']['name'][$locale] }}
        </span>
    </button>
    <button data-num="8" x-on:click="choose='num8'" x-on:mouseenter="choose='num8'"
        class="absolute top-[34vw] left-[0vw] lg:top-[15.5vw] lg:left-[28vw] size-[20vw] lg:size-[15vw] p-1 lg:p-2 rounded-full bg-blue-400 flex justify-center items-center">
        <span class="text-[2.5vw] lg:text-[1.5vw] font-bold text-white text-center font-light">
            {{ $reasons['guide_future']['name'][$locale] }}
        </span>
    </button>
    <div
        class="size-[69.5vw] lg:size-[22vw] absolute top-[34vw] left-[16.5vw] lg:left-[39.5vw] lg:top-[26.5vw] text-white font-normat font-sans text-sm sm:text-sm md:text-base lg:text-lg">
        <div x-show="choose==='num1'"
            class="rounded-full bg-red-500 w-full h-full flex items-center text-center justify-center">
            <p class="p-4 lg:p-6">
                {{ $reasons['innovation_advantage']['description'][$locale] }}
            </p>
        </div>
        <div x-show="choose==='num2'"
            class="rounded-full bg-rose-400 w-full h-full flex items-center text-center justify-center">
            <p class="p-4 lg:p-6">
                {{ $reasons['secure_future']['description'][$locale] }}
            </p>
        </div>
        <div x-show="choose==='num3'"
            class="rounded-full bg-yellow-500 w-full h-full flex items-center text-center justify-center">
            <p class="p-4 lg:p-6">
                {{ $reasons['subject_integration']['description'][$locale] }}
            </p>
        </div>
        <div x-show="choose==='num4'"
            class="rounded-full bg-amber-500 w-full h-full flex items-center text-center justify-center">
            <p class="p-4 lg:p-6">
                {{ $reasons['learn_english']['description'][$locale] }}
            </p>
        </div>
        <div x-show="choose==='num5'"
            class="rounded-full bg-lime-600 w-full h-full flex items-center text-center justify-center">
            <p class="p-4 lg:p-8 m-4">
                {{ $reasons['ai_behavior_track']['description'][$locale] }}
            </p>
        </div>
        <div x-show="choose==='num6'"
            class="rounded-full bg-emerald-500 w-full h-full flex items-center text-center justify-center">
            <p class="p-4 lg:p-6">
                {{ $reasons['stand_out']['description'][$locale] }}
            </p>
        </div>
        <div x-show="choose==='num7'"
            class="rounded-full bg-cyan-500 w-full h-full flex items-center text-center justify-center">
            <p class="p-4 lg:p-6">
                {{ $reasons['practical_learning']['description'][$locale] }}
            </p>
        </div>
        <div x-show="choose==='num8'"
            class="rounded-full bg-blue-400 w-full h-full flex items-center text-center justify-center">
            <p class="p-4 lg:p-6">
                {{ $reasons['guide_future']['description'][$locale] }}
            </p>
        </div>
    </div>
</div>