@once
@push('headScripts')
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('langCycler', () => ({
            langs: [
                { heading: 'Küçük ve orta ölçekli işletmeler için<br>verimlilik araçları', sub: 'Apper araçları, işletmenizi uçtan uca yönetmenize yardımcı olur.' },
                { heading: 'Efficiency tools for<br>small and medium businesses', sub: 'Apper tools help you manage your business end-to-end.' },
                { heading: 'Väikeste ja keskmise suurusega ettevõtete<br>tõhususvahendid', sub: 'Apper tööriistad aitavad teil oma ettevõtet läbivalt hallata.' },
                { heading: 'Hatékonysági eszközök<br>kis- és középvállalkozásoknak', sub: 'Az Apper eszközök segítenek a vállalkozása végpontig történő irányításában.' },
                { heading: 'Effizienz-Tools für<br>kleine und mittlere Unternehmen', sub: 'Apper-Tools helfen Ihnen, Ihr Unternehmen durchgängig zu verwalten.' },
                { heading: 'Outils d\'efficacité pour les<br>PME', sub: 'Les outils Apper vous aident à gérer votre entreprise de bout en bout.' },
                { heading: 'Herramientas de eficiencia para<br>pymes', sub: 'Las herramientas Apper le ayudan a gestionar su negocio de extremo a extremo.' }
            ],
            idx: 0,
            visible: true,
            init() {
                setInterval(() => {
                    this.visible = false;
                    setTimeout(() => {
                        let next;
                        do {
                            next = Math.floor(Math.random() * this.langs.length);
                        } while (next === this.idx && this.langs.length > 1);
                        this.idx = next;
                        this.visible = true;
                    }, 500);
                }, 4000);
            }
        }));
    });
</script>
@endpush
@endonce

<x-guest-layout>
    <div
        class="relative min-h-screen bg-gray-100 bg-center sm:flex sm:justify-center sm:items-center bg-dots-darker selection:bg-red-500 selection:text-white">

        <div class="p-6 mx-auto max-w-7xl lg:p-8">

            <div class="grid gap-8 p-10 border-b border-gray-300">
                <div class="antialiased">
                    <img class="w-auto h-20 mx-auto mb-4"
                        src="https://cdn.apper.com.tr/img/apper/icon-color-{{ $tool_name }}.svg" alt="">
                    <p class="flex justify-center text-5xl tracking-wide uppercase text-stone-800 font-fractul-medium">
                        {{ $tool_name }}
                    </p>
                </div>
                <div class="flex items-center justify-center mt-4 gap-x-3">
                    @auth
                    {{-- BUTTONS --}}
                    <x-a-black href="dashboard" click="" type="button" ring="emerald">
                        KONTROL PANELİ
                    </x-a-black>
                    <form method="POST" action="{{ route('logout') }}" x-data>
                        @csrf
                        <button type="submit"
                            class="inline-flex items-center px-4 py-2 text-xs font-semibold tracking-widest text-white uppercase transition duration-150 ease-in-out bg-gray-800 border border-transparent rounded-md hover:bg-gray-700 hover:ring-1 hover:ring-rose-400 hover:ring-offset-2 focus:bg-gray-700 active:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2">
                            ÇIKIŞ YAP
                        </button>
                    </form>
                    @else
                    <x-a-black href="login" click="" type="button" ring="emerald">
                        GİRİŞ YAP
                    </x-a-black>
                    @endauth
                </div>
            </div>

            <div class="grid gap-12 mt-8">

                <div x-data="langCycler" x-cloak>
                    <div class="text-center">
                        <h1 class="text-2xl font-semibold tracking-tight transition-all duration-500 ease-in-out text-stone-700 sm:text-3xl"
                            x-html="langs[idx].heading"
                            :class="visible ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-2'">
                        </h1>
                    </div>
                    <div class="text-center">
                        <p class="text-lg leading-8 transition-all duration-500 ease-in-out text-stone-500"
                            x-html="langs[idx].sub"
                            :class="visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-2'">
                        </p>
                    </div>
                </div>
                <div class="grid items-center justify-center mt-4 gap-y-1">
                    <img class="w-auto h-8 mx-auto" src="https://cdn.apper.com.tr/img/apper/logo-color-apper.svg"
                        alt="">
                    <p class="text-[11px] text-center font-semibold text-black">APPER SOFTWARE OÜ</p>
                </div>

            </div>

        </div>
    </div>
</x-guest-layout>