import './style.css'
import { initIntroPage } from './intro.js'
import { initHomePage } from './home.js'

// Initialize the application
document.querySelector('#app').innerHTML = `
  <div id="intro-page" class="intro-page active">
    <!-- Intro page content will be loaded here -->
  // </div>
  // <div id="home-page" class="home-page">
  //   <!-- Home page content will be loaded here -->
  // </div>
`

// Initialize intro page first
initIntroPage()

// Auto-transition to home page after intro completes
setTimeout(() => {
  const introPage = document.getElementById('intro-page')
  const homePage = document.getElementById('home-page')
  
  // Fade out intro page
  introPage.classList.add('fade-out')
  
  setTimeout(() => {
    introPage.classList.remove('active')
    homePage.classList.add('active')
    
    // Initialize home page
    initHomePage()
  }, 1000)
}, 4000) // 4 seconds intro duration