class CustomCountdown extends HTMLElement {
    constructor() {
        super();
        this.date = this.getAttribute('date');
    }

    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.render();
        this.startCountdown();
    }

    render() {
        this.shadowRoot.innerHTML = `
            <style>
                .countdown-container {
                    display: flex;
                    justify-content: center;
                    gap: 1rem;
                }
                .countdown-box {
                    background: rgba(255, 255, 255, 0.2);
                    border-radius: 8px;
                    padding: 1rem;
                    min-width: 80px;
                    text-align: center;
                    backdrop-filter: blur(5px);
                }
                .countdown-number {
                    font-size: 2.5rem;
                    font-weight: bold;
                    margin-bottom: 0.5rem;
                }
                .countdown-label {
                    font-size: 0.875rem;
                    text-transform: uppercase;
                    opacity: 0.8;
                }
                @media (max-width: 640px) {
                    .countdown-box {
                        min-width: 60px;
                        padding: 0.5rem;
                    }
                    .countdown-number {
                        font-size: 1.75rem;
                    }
                }
            </style>
            <div class="countdown-container">
                <div class="countdown-box">
                    <div class="countdown-number" id="days">00</div>
                    <div class="countdown-label">Days</div>
                </div>
                <div class="countdown-box">
                    <div class="countdown-number" id="hours">00</div>
                    <div class="countdown-label">Hours</div>
                </div>
                <div class="countdown-box">
                    <div class="countdown-number" id="minutes">00</div>
                    <div class="countdown-label">Minutes</div>
                </div>
                <div class="countdown-box">
                    <div class="countdown-number" id="seconds">00</div>
                    <div class="countdown-label">Seconds</div>
                </div>
            </div>
        `;
    }

    startCountdown() {
        const countdownDate = new Date(this.date).getTime();
        
        const updateCountdown = () => {
            const now = new Date().getTime();
            const distance = countdownDate - now;
            
            if (distance < 0) {
                this.shadowRoot.querySelector('#days').textContent = '00';
                this.shadowRoot.querySelector('#hours').textContent = '00';
                this.shadowRoot.querySelector('#minutes').textContent = '00';
                this.shadowRoot.querySelector('#seconds').textContent = '00';
                return;
            }
            
            const days = Math.floor(distance / (1000 * 60 * 60 * 24));
            const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((distance % (1000 * 60)) / 1000);
            
            this.shadowRoot.querySelector('#days').textContent = days.toString().padStart(2, '0');
            this.shadowRoot.querySelector('#hours').textContent = hours.toString().padStart(2, '0');
            this.shadowRoot.querySelector('#minutes').textContent = minutes.toString().padStart(2, '0');
            this.shadowRoot.querySelector('#seconds').textContent = seconds.toString().padStart(2, '0');
        };
        
        updateCountdown();
        setInterval(updateCountdown, 1000);
    }
}

customElements.define('custom-countdown', CustomCountdown);