<script>
    import { onMount } from "svelte";
    import Header from "$lib/components/Main/Header.svelte";
    import Downloads from "$lib/components/Main/Downloads.svelte";
    import { fly, slide } from "svelte/transition";
    import Media from "$lib/components/Main/Media.svelte";
    import Contact from "$lib/components/Main/Contact.svelte";
    import TechStack from "$lib/components/Main/TechStack.svelte";
    import Tracker from "$lib/components/Common/Tracker.svelte";
    import { sectionStore } from "$lib/stores/currentSection";

    /* IMPORTANT */
    // Anything added into the page directly will likely break the page's scrolling behaviour
    // To properly add something to the main page, make it into a component and add it to the array.
    // This array is in order of how they are to be displayed, modifying their positions will modify them in page.

    let slides = [Header, Downloads, Media, TechStack, Contact];

    let { main } = sectionStore;

    if (!$main) main.set(0);

    let currentSection = $main;

    // Update the current section based on scroll position
    const handleScroll = () => {
        const sections = document.querySelectorAll(".section");
        const scrollTop = document.querySelector(".scroll-container").scrollTop;
        sections.forEach((section, index) => {
            if (section.offsetTop <= scrollTop + window.innerHeight / 2) {
                main.set(index);
            }
        });
    };
</script>

<div id="main" class="scroll-container" on:scroll={handleScroll}>
    {#each slides as content}
        <section class="section">
            <svelte:component this={content} />
        </section>
    {/each}
</div>

<!-- Tracker -->
<Tracker page="main" {slides} includeFirst={false} />

<style>
    .scroll-container {
        scroll-snap-type: y mandatory;
        overflow-y: auto;
        height: 100vh;
        width: 100vw;
        scroll-behavior: smooth;
    }

    .section {
        scroll-snap-align: start;
        min-height: 100vh; /* Full viewport height */
        width: 100vw;
    }

    /* Tracker Styles */
    .tracker {
        position: fixed;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .tracker-dot {
        width: 10px;
        height: 10px;
        @apply bg-surface-600;
        border-radius: 50%;
        transition: background-color 0.3s ease;
    }

    .tracker-dot.active {
        @apply bg-primary-600;
    }
</style>
