<div class="bg-gray-900 p-16">
<div class="flex flex-col items-center justify-center w-full h-full"
     x-data="{
            countDownTime: {
                days: '00',
                hours: '00',
                minutes: '00',
                seconds: '00'
            },
            startCountDown() {
                // Define the target date
                let targetDate = localStorage.getItem('countDownDate');

                if (!targetDate) {
                    // Save target date in localStorage if not already saved
                    targetDate = new Date('2024-11-30T00:00:00').toISOString();
                    localStorage.setItem('countDownDate', targetDate);
                }

                const countDownDate = new Date(targetDate);

                setInterval(() => {
                    const currentTime = new Date().getTime();
                    const timeDifference = countDownDate.getTime() - currentTime;

                    if (timeDifference < 0) {
                        // Reset countdown to zero when the target is reached
                        this.countDownTime = {
                            days: '00',
                            hours: '00',
                            minutes: '00',
                            seconds: '00'
                        };
                        return;
                    }

                    const days = Math.floor(timeDifference / (24 * 60 * 60 * 1000));
                    const hours = Math.floor((timeDifference % (24 * 60 * 60 * 1000)) / (1000 * 60 * 60));
                    const minutes = Math.floor((timeDifference % (60 * 60 * 1000)) / (1000 * 60));
                    const seconds = Math.floor((timeDifference % (60 * 1000)) / 1000);

                    this.countDownTime = {
                        days: days >= 10 ? days : `0${days}`,
                        hours: hours >= 10 ? hours : `0${hours}`,
                        minutes: minutes >= 10 ? minutes : `0${minutes}`,
                        seconds: seconds >= 10 ? seconds : `0${seconds}`
                    };
                }, 1000);
            }
         }"
     x-init="startCountDown">
    <div class="w-fit flex justify-center gap-3  lg:gap-8">
        <!-- Days -->
        <div class="flex flex-col gap-5 relative">
            <div class="h-16 w-16 lg:w-24 lg:h-24 2xl:w-28 2xl:h-28 flex justify-between items-center bg-white rounded-lg">
                <div class="relative h-2.5 w-2.5 sm:h-3 sm:w-3 !-left-[6px] rounded-full bg-accent-green-400"></div>
                <span class="lg:text-5xl 2xl:text-7xl sm:text-4xl text-2xl font-semibold text-accent-green-400" x-text="countDownTime.days"></span>
                <div class="relative h-2.5 w-2.5 sm:h-3 sm:w-3 -right-[6px] rounded-full bg-accent-green-400"></div>
            </div>
            <span class="text-white text-base sm:text-lg xl:text-2xl text-center capitalize" x-text="countDownTime.days == 1 ? 'Jour' : 'Jours'"></span>
        </div>

        <!-- Hours -->
        <div class="flex flex-col gap-5 relative">
            <div class="h-16 w-16 lg:w-24 lg:h-24 2xl:w-28 2xl:h-28 flex justify-between items-center bg-white rounded-lg">
                <div class="relative h-2.5 w-2.5 sm:h-3 sm:w-3 !-left-[6px] rounded-full bg-accent-green-400"></div>
                <span class="lg:text-5xl 2xl:text-7xl sm:text-4xl text-2xl font-semibold text-accent-green-400" x-text="countDownTime.hours"></span>
                <div class="relative h-2.5 w-2.5 sm:h-3 sm:w-3 -right-[6px] rounded-full bg-accent-green-400"></div>
            </div>
            <span class="text-white text-base sm:text-lg xl:text-2xl text-center capitalize" x-text="countDownTime.hours == 1 ? 'Heure' : 'Heures'"></span>
        </div>

        <!-- Minutes -->
        <div class="flex flex-col gap-5 relative">
            <div class="h-16 w-16 lg:w-24 lg:h-24 2xl:w-28 2xl:h-28 flex justify-between items-center bg-white rounded-lg">
                <div class="relative h-2.5 w-2.5 sm:h-3 sm:w-3 !-left-[6px] rounded-full bg-accent-green-400"></div>
                <span class="lg:text-5xl 2xl:text-7xl sm:text-4xl text-2xl font-semibold text-accent-green-400" x-text="countDownTime.minutes"></span>
                <div class="relative h-2.5 w-2.5 sm:h-3 sm:w-3 -right-[6px] rounded-full bg-accent-green-400"></div>
            </div>
            <span class="text-white text-base sm:text-lg xl:text-2xl text-center capitalize" x-text="countDownTime.minutes == 1 ? 'Minute' : 'Minutes'"></span>
        </div>

        <!-- Seconds -->
        <div class="flex flex-col gap-5 relative">
            <div class="h-16 w-16 lg:w-24 lg:h-24 2xl:w-28 2xl:h-28 flex justify-between items-center bg-white rounded-lg">
                <div class="relative h-2.5 w-2.5 sm:h-3 sm:w-3 !-left-[6px] rounded-full bg-accent-green-400"></div>
                <span class="lg:text-5xl 2xl:text-7xl sm:text-4xl text-2xl font-semibold text-accent-green-400" x-text="countDownTime.seconds"></span>
                <div class="relative h-2.5 w-2.5 sm:h-3 sm:w-3 -right-[6px] rounded-full bg-accent-green-400"></div>
            </div>
            <span class="text-white text-base sm:text-lg xl:text-2xl text-center capitalize" x-text="countDownTime.seconds == 1 ? 'Second' : 'Seconds'"></span>
        </div>
    </div>
</div>


</div>