export function initIntroPage() {
  const introPage = document.getElementById('intro-page')
  
  introPage.innerHTML = `
    <div class="intro-overlay">
      <div class="intro-container">
        <div class="intro-content">
          <div class="company-branding">
            <div class="company-logo-large">
              <div class="app-logo">
                  <img src="/asserts/Logo hexr -3.png" alt="App Logo" />
                </div>
              <div class="logo-text-large">
                <h1>HEXR FACTORY</h1>
                <span>IMMERSIVE TECH</span>
              </div>
            </div>
          </div>
          
          <div class="intro-title-section">
            <h2 class="intro-main-title">Internal Resource Portal</h2>
            <p class="intro-subtitle">Accessing secure internal tools and services</p>
          </div>
          
          <div class="loading-section">
            <div class="loading-container">
              <div class="loading-bar">
                <div class="loading-progress" id="introLoadingProgress"></div>
              </div>
              <p class="loading-text" id="loadingText">Initializing systems...</p>
            </div>
            
            <div class="system-status">
              <div class="status-item" id="status1">
                <span class="status-dot"></span>
                <span>Connecting to servers...</span>
              </div>
              <div class="status-item" id="status2">
                <span class="status-dot"></span>
                <span>Authenticating access...</span>
              </div>
              <div class="status-item" id="status3">
                <span class="status-dot"></span>
                <span>Loading applications...</span>
              </div>
            </div>
          </div>
        </div>
        
        <div class="intro-visual">
          <div class="floating-elements">
            <div class="floating-hex hex-1"></div>
            <div class="floating-hex hex-2"></div>
            <div class="floating-hex hex-3"></div>
            <div class="floating-hex hex-4"></div>
            <div class="floating-hex hex-5"></div>
          </div>
          
          <div class="pulse-circle">
            <div class="pulse-ring"></div>
            <div class="pulse-ring"></div>
            <div class="pulse-ring"></div>
          </div>
        </div>
      </div>
    </div>
  `
  
  // Start loading animation
  startIntroAnimation()
}

function startIntroAnimation() {
  let progress = 0
  const loadingProgress = document.getElementById('introLoadingProgress')
  const loadingText = document.getElementById('loadingText')
  const statusItems = document.querySelectorAll('.status-item')
  
  const loadingMessages = [
    'Initializing systems...',
    'Connecting to servers...',
    'Authenticating access...',
    'Loading applications...',
    'Ready to launch!'
  ]
  
  let messageIndex = 0
  let statusIndex = 0
  
  const loadingInterval = setInterval(() => {
    progress += Math.random() * 15 + 3
    
    if (progress >= 100) {
      progress = 100
      clearInterval(loadingInterval)
      loadingText.textContent = 'Ready to launch!'
      
      // Activate all status items
      statusItems.forEach(item => {
        item.classList.add('completed')
      })
    }
    
    // Update progress bar
    loadingProgress.style.width = progress + '%'
    
    // Update loading message
    if (progress > (messageIndex + 1) * 20 && messageIndex < loadingMessages.length - 1) {
      messageIndex++
      loadingText.textContent = loadingMessages[messageIndex]
    }
    
    // Activate status items progressively
    //<div class="logo-icon-large">🏭</div>
    if (progress > (statusIndex + 1) * 25 && statusIndex < statusItems.length) {
      statusItems[statusIndex].classList.add('active')
      statusIndex++
    }
  }, 180)
}