class CustomPreloader extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #0a0a0a;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            transition: opacity 0.5s ease, visibility 0.5s ease;
        }

        :host.hidden {
            opacity: 0;
            visibility: hidden;
        }

        .preloader-content {
            text-align: center;
        }

        .loader {
            width: 60px;
            height: 60px;
            border: 3px solid #262626;
            border-top-color: #EAB308;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            margin: 0 auto 1.5rem auto;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .loading-text {
            font-family: 'Fira Code', monospace;
            color: #EAB308;
            font-size: 0.9rem;
            letter-spacing: 2px;
        }

        .progress-bar {
            width: 200px;
            height: 2px;
            background: #262626;
            margin: 1rem auto 0;
            border-radius: 2px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: #EAB308;
            width: 0;
            transition: width 0.3s ease;
        }
      </style>
      
      <div class="preloader-content">
        <div class="loader"></div>
        <div class="loading-text">LOADING</div>
        <div class="progress-bar">
            <div class="progress-fill" id="progress-fill"></div>
        </div>
      </div>
    `;

    // Simulate loading progress
    const progressFill = this.shadowRoot.getElementById('progress-fill');
    let progress = 0;
    const interval = setInterval(() => {
      progress += Math.random() * 30;
      if (progress >= 100) {
        progress = 100;
        clearInterval(interval);
        setTimeout(() => {
          this.classList.add('hidden');
          document.body.style.overflow = 'auto';
        }, 300);
      }
      progressFill.style.width = `${progress}%`;
    }, 200);

    // Prevent scroll while loading
    document.body.style.overflow = 'hidden';
  }
}
customElements.define('custom-preloader', CustomPreloader);