class LogoPlayer extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
    }

    connectedCallback() {
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: inline-block;
                    width: 120px;
                    height: 40px;
                }
                
                .logo-container {
                    position: relative;
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: #000;
                    border-radius: 8px;
                    overflow: hidden;
                }
                
                video {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    display: block;
                }
                
                .fallback {
                    display: none;
                    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
                    font-size: 24px;
                    font-weight: 700;
                    color: #fff;
                    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 6px;
                }
                
                @media (max-width: 640px) {
                    :host {
                        width: 100px;
                        height: 34px;
                    }
                    
                    .fallback {
                        font-size: 20px;
                    }
                }
            </style>
            
            <div class="logo-container">
                <video autoplay loop muted playsinline preload="auto" id="logo-video">
                    <source src="https://huggingface.co/spaces/A634579/wash-dev-site/resolve/main/videos/grok-video-change%20satoshi%20to%20wash-7968b2ad-ed0b-43e0-882f-4a76de560ccb-image-edit-0_0.mp4" type="video/mp4">
                </video>
<div class="fallback">Wash</div>
            </div>
        `;
        
        // Fallback for video loading
        const video = this.shadowRoot.querySelector('#logo-video');
        const fallback = this.shadowRoot.querySelector('.fallback');
        
        video.addEventListener('error', () => {
            video.style.display = 'none';
            fallback.style.display = 'flex';
        });
        
        video.addEventListener('loadeddata', () => {
            fallback.style.display = 'none';
        });
    }
}

customElements.define('logo-player', LogoPlayer);