@extends('template')
@section('title', 'Maubizq')

@section('content')
<main
    class="grid min-h-full place-items-center px-6 py-24 sm:py-32 lg:px-8">
    <div class="text-center">
        <p class="text-3xl font-semibold text-sky-300">Stay tuned</p>
        <h1
            class="mt-4 text-5xl font-semibold tracking-tight text-balance text-white sm:text-7xl">
            Something Amazing is Coming Soon!
        </h1>
        <p
            class="mt-6 text-lg font-medium text-pretty text-gray-400 sm:text-xl/8">
            We're working on something incredible just for you.
        </p>
        <livewire:soon />
    </div>
</main>
@endsection

@push('scripts')
<script>
    function startCountdown() {
        const timerElement = document.getElementById("timer");
        const endTime = new Date();
        endTime.setHours(24, 0, 0, 0); // Set the countdown to reset at midnight

        function updateCountdown() {
            const now = new Date();
            let remainingTime = endTime - now;

            if (remainingTime <= 0) {
                remainingTime += 24 * 60 * 60 * 1000; // Reset countdown if it reaches 0
            }

            const hours = String(
                Math.floor((remainingTime / (1000 * 60 * 60)) % 24)
            ).padStart(2, "0");
            const minutes = String(
                Math.floor((remainingTime / (1000 * 60)) % 60)
            ).padStart(2, "0");
            const seconds = String(
                Math.floor((remainingTime / 1000) % 60)
            ).padStart(2, "0");

            timerElement.textContent = `${hours}:${minutes}:${seconds}`;
        }

        updateCountdown(); // Initial call
        setInterval(updateCountdown, 1000); // Update every second
    }

    startCountdown();
</script>
@endpush