@php
$title = $section->settings['title'] ?? 'Limited Time Offer';
$subtitle = $section->settings['subtitle'] ?? 'Get 50% off on all premium products today.';
$endDate = $section->settings['end_date'] ?? '2027-01-01T00:00';
$behavior = $section->settings['end_behavior'] ?? 'message'; // hide, message, stop
@endphp

@php
    $pt = $section->settings['padding_top'] ?? '48px';
    $pb = $section->settings['padding_bottom'] ?? '48px';
    $bg = $section->settings['bg_color'] ?? 'transparent';

    $ptStyle = "padding-top: $pt;";
    $pbStyle = "padding-bottom: $pb;";
    $bgStyle = $bg !== 'transparent' ? "background-color: $bg;" : '';
@endphp

<section 
    x-data="countdownTimer('{{ $endDate }}', '{{ $behavior }}')"
    x-init="init()"
    x-show="!isHidden"
    class="relative border-y border-border-subtle overflow-hidden"
    style="{{ $ptStyle }} {{ $pbStyle }} {{ $bgStyle }}"
    id="section-{{ $section->id }}"
>
    {{-- Ambient Pulse --}}
    <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-4xl h-full bg-brand-500/5 blur-[140px] animate-pulse"></div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="flex flex-col md:flex-row items-center justify-between gap-10 bg-surface-secondary/50 backdrop-blur-2xl border border-border-subtle p-10 md:p-14 rounded-[3rem] shadow-2xl shadow-brand-500/5">
            
            <div class="space-y-4 text-center md:text-left">
                <div class="inline-flex items-center gap-3 px-4 py-2 bg-rose-500/10 text-rose-500 font-900 uppercase tracking-[0.3em] text-[10px] rounded-xl border border-rose-500/20 mb-4 shadow-inner">
                    <span class="relative flex h-2.5 w-2.5">
                      <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-rose-400 opacity-75"></span>
                      <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-rose-500"></span>
                    </span>
                    Special Offer
                </div>
                <h3 class="text-3xl md:text-5xl font-display font-900 text-text-base uppercase tracking-tight leading-tight">{{ $title }}</h3>
                <p class="text-text-muted font-600 uppercase tracking-widest text-[13px]">{{ $subtitle }}</p>
            </div>

            <div x-show="!isExpired" class="flex gap-6">
                <template x-for="(value, unit) in time" :key="unit">
                    <div class="flex flex-col items-center justify-center p-6 bg-surface-primary border border-border-subtle rounded-[2rem] min-w-[100px] shadow-2xl group hover:border-brand-500/40 transition-all duration-500 active:scale-95">
                        <span class="text-4xl font-900 text-brand-500 font-display tabular-nums shadow-[0_0_20px_rgba(var(--primary-rgb),0.3)] transition-all group-hover:scale-110" x-text="value"></span>
                        <span class="text-[10px] uppercase tracking-[0.3em] text-text-dim/40 font-900 mt-2" x-text="unit"></span>
                    </div>
                </template>
            </div>

            <div x-show="isExpired" style="display: none;" class="px-10 py-6 bg-surface-primary rounded-[2rem] border-2 border-dashed border-border-subtle text-text-dim/50 font-900 uppercase tracking-[0.4em] text-sm text-center">
                Offer Concluded
            </div>
            
        </div>
    </div>

    <script>
        function countdownTimer(endStr, behavior) {
            return {
                endTime: new Date(endStr).getTime(),
                behavior: behavior,
                isHidden: false,
                isExpired: false,
                time: { days: '00', hours: '00', minutes: '00', seconds: '00' },
                interval: null,
                
                init() {
                    this.update();
                    this.interval = setInterval(() => this.update(), 1000);
                },
                
                update() {
                    const now = new Date().getTime();
                    const diff = this.endTime - now;
                    
                    if (diff <= 0) {
                        clearInterval(this.interval);
                        
                        if(this.behavior === 'hide') this.isHidden = true;
                        if(this.behavior === 'message') this.isExpired = true;
                        // if 'stop', time just stays at 00
                        
                        this.time = { days: '00', hours: '00', minutes: '00', seconds: '00' };
                        return;
                    }
                    
                    const d = Math.floor(diff / (1000 * 60 * 60 * 24));
                    const h = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                    const m = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
                    const s = Math.floor((diff % (1000 * 60)) / 1000);
                    
                    this.time = {
                        days: String(d).padStart(2, '0'),
                        hours: String(h).padStart(2, '0'),
                        minutes: String(m).padStart(2, '0'),
                        seconds: String(s).padStart(2, '0')
                    };
                }
            }
        }
    </script>
</sectio