<template>
  <div>
    <!--===== Preloader =====-->
    <div id="preloader" class="preloader" v-show="showPreloader">
      <div class="animation-preloader">
        <div class="txt-loading">
          <span data-text-preloader="M" class="letters-loading"> M </span>
          <span data-text-preloader="E" class="letters-loading"> E </span>
          <span data-text-preloader="D" class="letters-loading"> D </span>
          <span data-text-preloader="I" class="letters-loading"> I </span>
          <span data-text-preloader="C" class="letters-loading"> C </span>
          <span data-text-preloader="E" class="letters-loading"> E </span>
        </div>
        <p class="text-center">Loading</p>
      </div>
      <div class="loader">
        <div class="row">
          <div class="col-3 loader-section section-left"><div class="bg"></div></div>
          <div class="col-3 loader-section section-left"><div class="bg"></div></div>
          <div class="col-3 loader-section section-right"><div class="bg"></div></div>
          <div class="col-3 loader-section section-right"><div class="bg"></div></div>
        </div>
      </div>
    </div>

    <!--===== Mouse Cursor =====-->
    <div class="mouse-cursor cursor-outer"></div>
    <div class="mouse-cursor cursor-inner"></div>

    <!--===== Back To Top =====-->
    <button id="back-top" class="back-to-top" :class="{ 'active': showBackTop }" @click="scrollToTop">
      <i class="fa-solid fa-chevron-up"></i>
    </button>

    <!--===== AI Chat Popup =====-->
    <AiChatBox 
      :isOpen="searchOpen" 
      @close="searchOpen = false" 
    />

    <!--===== Offcanvas =====-->
    <div class="fix-area" :class="{ 'info-open': offcanvasOpen }">
      <div class="offcanvas__info">
        <div class="offcanvas__wrapper">
          <div class="offcanvas__content">
            <div class="offcanvas__top mb-5 d-flex justify-content-between align-items-center">
              <div class="offcanvas__logo">
                <router-link to="/">
                  <img src="/images/logo/Logo-dark.png" alt="logo" />
                </router-link>
              </div>
              <div class="offcanvas__close">
                <button @click="toggleOffcanvas"><i class="fas fa-times"></i></button>
              </div>
            </div>

            <!-- mobile menu placeholder (if you hydrate it with a plugin) -->
            <div class="mobile-menu fix mb-3"></div>

            <div class="offcanvas__contact">
              <h4>Contact Info</h4>
              <ul>
                <li class="d-flex align-items-center">
                  <div class="offcanvas__contact-icon"><i class="fal fa-map-marker-alt"></i></div>
                  <div class="offcanvas__contact-text">
                    <a target="_blank" href="#">3517 W. Gray St. Utica, Pennsylvania 57867</a>
                  </div>
                </li>
                <li class="d-flex align-items-center">
                  <div class="offcanvas__contact-icon mr-15"><i class="fal fa-envelope"></i></div>
                  <div class="offcanvas__contact-text">
                    <a href="mailto:example@gmail.com"><span>tanya.hill@example.com</span></a>
                  </div>
                </li>
                <li class="d-flex align-items-center">
                  <div class="offcanvas__contact-icon mr-15"><i class="fal fa-clock"></i></div>
                  <div class="offcanvas__contact-text">
                    <a target="_blank" href="#">Mod-friday, 09am -05pm</a>
                  </div>
                </li>
                <li class="d-flex align-items-center">
                  <div class="offcanvas__contact-icon mr-15"><i class="far fa-phone"></i></div>
                  <div class="offcanvas__contact-text">
                    <a href="tel:+(123)456-7890">(123) 456-7890</a>
                  </div>
                </li>
              </ul>

              <div class="header-button">
                <div class="btnbox">
                  <router-link class="theme-btn" to="/contact">
                    <span>
                      <svg xmlns="http://www.w3.org/2000/svg" width="19" height="16" viewBox="0 0 19 16" fill="none">
                        <path d="M18.45 8.70711C18.8406 8.31658 18.8406 7.68342 18.45 7.29289L12.0861 0.928932C11.6955 0.538408 11.0624 0.538408 10.6719 0.928932C10.2813 1.31946 10.2813 1.95262 10.6719 2.34315L16.3287 8L10.6719 13.6569C10.2813 14.0474 10.2813 14.6805 10.6719 15.0711C11.0624 15.4616 11.6955 15.4616 12.0861 15.0711L18.45 8.70711ZM0.74292 9H17.7429V7H0.74292V9Z" fill="white"/>
                      </svg>
                    </span>
                    Get A Quote
                  </router-link>
                </div>
              </div>

              <div class="social-icon d-flex align-items-center">
                <a href="https://www.facebook.com/"><i class="fab fa-facebook-f"></i></a>
                <a href="https://x.com/?lang=en&mx=2"><i class="fab fa-twitter"></i></a>
                <a href="https://www.youtube.com/"><i class="fab fa-youtube"></i></a>
                <a href="https://www.linkedin.com/"><i class="fab fa-linkedin-in"></i></a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="offcanvas__overlay" :class="{ 'active': offcanvasOpen }" @click="toggleOffcanvas"></div>
    </div>

    <!-- USE SEPARATE HEADER COMPONENT -->
    <AppHeader 
      :sticky="sticky" 
      @toggle-search="searchOpen = true" 
      @toggle-offcanvas="toggleOffcanvas" 
    />

    <!-- Main Content with proper structure for footer -->
    <div id="smooth-wrapper" class="w-100">
      <div id="smooth-content">
        <!-- Page Content -->
        <router-view />
        
        <!-- FOOTER CAN BE HERE IN LAYOUT (Option 1) -->
        <!-- <AppFooter /> -->
      </div>
    </div>
  </div>
</template>
  
  <script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import AppHeader from './AppHeader.vue'
import AiChatBox from '../common/AiChatBox.vue'
  
  const searchOpen = ref(false)
  const offcanvasOpen = ref(false)
  const showBackTop = ref(false)
  const sticky = ref(false)
  const showPreloader = ref(true)
  
  const toggleOffcanvas = () => { offcanvasOpen.value = !offcanvasOpen.value }
  const scrollToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' })
  
  const handleScroll = () => {
    const y = window.scrollY || document.documentElement.scrollTop
    showBackTop.value = y > 300
    sticky.value = y > 100
  }
  
  onMounted(() => {
    // simple preloader hide
    setTimeout(() => { showPreloader.value = false }, 400)
  
    window.addEventListener('scroll', handleScroll, { passive: true })
  })
  
  onBeforeUnmount(() => {
    window.removeEventListener('scroll', handleScroll)
  })
  </script>
  