<template>
    <Hero />
    <About />
    <FeaturedTours :featured-tours="featured_tours" />
</template>

<style>

</style>

<script setup lang="ts">
import { onMounted } from 'vue';
import {usePage} from "@inertiajs/vue3";
import {Tour} from "@/types";

interface Properties {
    featured_tours: Tour[]
}

const { featured_tours } = usePage().props as unknown as Properties

import AppLayout from '../layouts/AppLayout.vue'
import Hero from "@/components/home/Hero.vue";
import About from "@/components/home/About.vue";
import FeaturedTours from "@/components/home/FeaturedTours.vue";

defineOptions({
    layout: AppLayout
})

// Types
const initSmoothScrolling = (): void => {
    const navLinks = document.querySelectorAll('a[href^="#"]') as NodeListOf<HTMLAnchorElement>;

    navLinks.forEach((link: HTMLAnchorElement) => {
        link.addEventListener('click', (e: Event) => {
            e.preventDefault();

            const targetId = link.getAttribute('href');
            const targetElement = targetId ? document.querySelector(targetId) as HTMLElement | null : null;

            if (targetElement) {
                const header = document.querySelector('.header') as HTMLElement | null;
                const headerHeight = header ? header.offsetHeight : 0;
                const targetPosition = targetElement.offsetTop - headerHeight;

                window.scrollTo({
                    top: targetPosition,
                    behavior: 'smooth'
                });

                // Close dropdown if open
                const dropdown = document.querySelector('.dropdown') as HTMLElement | null;
                if (dropdown) {
                    dropdown.classList.remove('open');
                }
            }
        });
    });
};

// Initialize all functionality when DOM is loaded
onMounted(() => {
    initSmoothScrolling();
});

// Add performance optimization
const debounce = <T extends (...args: any[]) => void>(func: T, wait: number): T => {
    let timeout: number  | undefined;
    return ((...args: Parameters<T>) => {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    }) as T;
};

// Optimize scroll events
window.addEventListener('scroll', debounce(() => {
    // Scroll-based animations can be added here
}, 16)); // ~60fps
</script>
