class YouTubePerformanceOptimizer{constructor(e={}){this.options={autoplay:e.autoplay??!0,showTitle:e.showTitle??!0,lazyThreshold:e.lazyThreshold??"50px",thumbnailQuality:e.thumbnailQuality??"hqdefault",preconnect:e.preconnect??!0,...e},this.loadedVideos=new Set,this.observers=new Set,this.init()}init(){this.options.preconnect&&this.addPreconnects(),this.replaceExistingIframes(),this.setupClickHandlers(),this.setupIntersectionObserver(),this.addStyles(),console.log("YouTube Performance Optimizer initialized")}addPreconnects(){["https://www.youtube.com","https://img.youtube.com","https://i.ytimg.com"].forEach((e=>{const t=document.createElement("link");t.rel="preconnect",t.href=e,t.crossOrigin="anonymous",document.head.appendChild(t)}))}replaceExistingIframes(){document.querySelectorAll('iframe[src*="youtube.com/embed"], iframe[src*="youtu.be"]').forEach((e=>{const t=this.extractVideoId(e.src);if(t){const o=this.createFacade(t,e);e.parentNode.replaceChild(o,e)}}))}extractVideoId(e){const t=e.match(/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/);return t&&11===t[2].length?t[2]:null}createFacade(e,t=null){const o=document.createElement("div");o.className="youtube-facade",o.dataset.videoId=e;const n=t?.width||t?.getAttribute("width")||"560",i=t?.height||t?.getAttribute("height")||"315";return o.innerHTML=`\n            <div class="youtube-container" style="width: ${n}px; height: ${i}px; max-width: 100%; position: relative; cursor: pointer; background: #000; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.15);">\n                <img class="youtube-thumbnail" \n                     src="https://img.youtube.com/vi/${e}/${this.options.thumbnailQuality}.jpg" \n                     alt="YouTube Video Thumbnail"\n                     style="width: 100%; height: 100%; object-fit: cover; transition: all 0.3s ease;"\n                     loading="lazy">\n                \n                <div class="youtube-play-overlay" \n                     style="position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.3); transition: all 0.3s ease;">\n                    <div class="youtube-play-button" \n                         style="width: 80px; height: 60px; background: rgba(255, 0, 0, 0.9); border-radius: 12px; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; box-shadow: 0 4px 20px rgba(0,0,0,0.4);">\n                        <svg width="30" height="30" viewBox="0 0 24 24" fill="white">\n                            <path d="M8 5v14l11-7z"/>\n                        </svg>\n                    </div>\n                </div>\n                \n                <div class="youtube-loading" \n                     style="position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.8);">\n                    <div style="width: 40px; height: 40px; border: 4px solid rgba(255,255,255,0.3); border-top: 4px solid #ff0000; border-radius: 50%; animation: youtube-spin 1s linear infinite;"></div>\n                </div>\n                \n                ${this.options.showTitle?'\n                <div class="youtube-title" \n                     style="position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.8)); color: white; padding: 20px 15px 15px; font-size: 14px; font-weight: 500; opacity: 0; transition: opacity 0.3s ease;">\n                    Click to play video\n                </div>':""}\n            </div>\n        `,o}setupClickHandlers(){document.addEventListener("click",(e=>{const t=e.target.closest(".youtube-facade");if(!t)return;const o=t.dataset.videoId;o&&!this.loadedVideos.has(o)&&(e.preventDefault(),this.loadVideo(t,o))}))}setupIntersectionObserver(){if(!("IntersectionObserver"in window))return;const e=new IntersectionObserver((t=>{t.forEach((t=>{const o=t.target;if(t.isIntersecting){o.style.opacity="1",o.style.transform="translateY(0)";const t=o.querySelector(".youtube-title");t&&(o.addEventListener("mouseenter",(()=>t.style.opacity="1")),o.addEventListener("mouseleave",(()=>t.style.opacity="0"))),e.unobserve(o)}}))}),{rootMargin:this.options.lazyThreshold,threshold:.1});document.querySelectorAll(".youtube-facade").forEach((t=>{e.observe(t)})),this.observers.add(e)}loadVideo(e,t){const o=e.querySelector(".youtube-container"),n=e.querySelector(".youtube-loading"),i=e.querySelector(".youtube-play-overlay");n&&(n.style.display="flex"),i&&(i.style.display="none");const a=o.style.width.replace("px","")||"560",s=o.style.height.replace("px","")||"315",r=document.createElement("iframe");r.src=`https://www.youtube.com/embed/${t}?autoplay=${this.options.autoplay?1:0}&rel=0&modestbranding=1&playsinline=1`,r.width=a,r.height=s,r.style.cssText="border: none; border-radius: 8px; width: 100%; height: 100%;",r.allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",r.allowFullscreen=!0,r.title=`YouTube video ${t}`,r.srcdoc=`\n            <style>\n                * { padding: 0; margin: 0; overflow: hidden; }\n                body, html { height: 100%; }\n                img, svg { position: absolute; width: 100%; top: 50%; transform: translateY(-50%); }\n                svg { filter: drop-shadow(1px 1px 10px hsl(206.5, 70.7%, 8%)); transition: all 250ms ease-in-out; }\n                body:hover svg { filter: drop-shadow(1px 1px 10px hsl(206.5, 0%, 10%)); transform: translateY(-50%) scale(1.2); }\n            </style>\n            <a href="${r.src}">\n                <img src="https://img.youtube.com/vi/${t}/${this.options.thumbnailQuality}.jpg" alt="YouTube Video">\n                <svg xmlns="http://www.w3.org/2000/svg" width="80" height="60" viewBox="0 0 68 48">\n                    <path d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="#f00"></path>\n                    <path d="M 45,24 27,14 27,34" fill="#fff"></path>\n                </svg>\n            </a>\n        `;const d=()=>{try{o.innerHTML="",o.appendChild(r),this.loadedVideos.add(t),this.trackVideoLoad(t),console.log(`YouTube video ${t} loaded successfully`)}catch(e){console.error("Failed to load YouTube video:",e),n&&(n.style.display="none"),i&&(i.style.display="flex")}};r.onload=d,setTimeout(d,3e3),r.onerror=()=>{console.error(`Failed to load YouTube video: ${t}`),n&&(n.style.display="none"),i&&(i.style.display="flex")}}trackVideoLoad(e){"function"==typeof gtag&&gtag("event","video_load",{video_provider:"youtube",video_id:e})}addStyles(){if(document.getElementById("youtube-optimizer-styles"))return;const e=document.createElement("style");e.id="youtube-optimizer-styles",e.textContent="\n            .youtube-facade {\n                opacity: 0;\n                transform: translateY(20px);\n                transition: all 0.6s ease;\n                display: inline-block;\n                max-width: 100%;\n            }\n            \n            .youtube-container:hover .youtube-play-button {\n                background: rgba(255, 0, 0, 1);\n                transform: scale(1.1);\n                box-shadow: 0 6px 25px rgba(0,0,0,0.6);\n            }\n            \n            .youtube-container:hover .youtube-thumbnail {\n                transform: scale(1.05);\n            }\n            \n            .youtube-container:hover .youtube-play-overlay {\n                background: rgba(0,0,0,0.5);\n            }\n            \n            @keyframes youtube-spin {\n                0% { transform: rotate(0deg); }\n                100% { transform: rotate(360deg); }\n            }\n            \n            @media (max-width: 768px) {\n                .youtube-container {\n                    width: 100% !important;\n                    height: auto !important;\n                    aspect-ratio: 16/9;\n                }\n            }\n            \n            @media (max-width: 480px) {\n                .youtube-play-button {\n                    width: 60px !important;\n                    height: 45px !important;\n                }\n            }\n        ",document.head.appendChild(e)}loadAllVideos(){document.querySelectorAll(".youtube-facade").forEach((e=>{const t=e.dataset.videoId;t&&!this.loadedVideos.has(t)&&this.loadVideo(e,t)}))}destroy(){this.observers.forEach((e=>e.disconnect())),this.observers.clear(),this.loadedVideos.clear();const e=document.getElementById("youtube-optimizer-styles");e&&e.remove(),console.log("YouTube Performance Optimizer destroyed")}}"undefined"!=typeof window&&("loading"===document.readyState?document.addEventListener("DOMContentLoaded",(()=>{window.youtubeOptimizer||(window.youtubeOptimizer=new YouTubePerformanceOptimizer)})):window.youtubeOptimizer||(window.youtubeOptimizer=new YouTubePerformanceOptimizer)),"undefined"!=typeof module&&module.exports&&(module.exports=YouTubePerformanceOptimizer);