<script lang="ts">
    import MediaQuery from 'svelte-media-queries';
    import NewsCard from '$lib/posts/NewsCard.svelte';
    import ShowcaseNewsCard from '$lib/posts/ShowcaseNewsCard.svelte';
    import Button from '$lib/IO/Button.svelte';
    import { ButtonType } from '$lib/IO/ButtonType.ts';
    import Timeline from '../comps/timeline/timeline.svelte';
    import { Parallax, ParallaxLayer, StickyLayer } from "svelte-parallax";


    import BackgroundVideo from "$lib/videos/DeprivedDevMontage.gif"
    import FrontFold from './comps/FrontFold.svelte';

    export let data; // <- contains post data

    $: most_recent_post = data.summaries[0];

    const mobileThreshold : string = '600px'; // was 1000px. zhen testing
    let mobile : boolean;

    import { onMount } from 'svelte';

    // Function to set a cookie
    function setCookie(name: string, value: string, days: number): void {
        const date = new Date();
        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
        document.cookie = `${name}=${value};expires=${date.toUTCString()};path=/`;
    }

    // Function to get a cookie
    function getCookie(name: string): string | undefined {
        const value = `; ${document.cookie}`;
        const parts = value.split(`; ${name}=`);
        if (parts.length === 2) return parts.pop()?.split(';').shift();
        return undefined;
    }

    // Store scroll position in a cookie when the user scrolls
    function handleScroll(): void {
        setCookie('scrollPosition', window.scrollY.toString(), 1);
    }

    // Restore scroll position on mount
    onMount(() => {
        const scrollPosition = getCookie('scrollPosition');
        if (scrollPosition) {
            window.scrollTo(0, parseInt(scrollPosition, 10));
        }
        window.addEventListener('scroll', handleScroll);

        // Cleanup event listener on component unmount
        return () => {
            window.removeEventListener('scroll', handleScroll);
        };
    });
</script>


<!-- Detect mobile -->
<MediaQuery query='(max-width: {mobileThreshold})' bind:matches={mobile} />

<Parallax sections={2.5}>
    <ParallaxLayer span={0.6} rate={0.2} class="pointer-events-none">
        <div class="pointer-events-auto" style="position: relative; width: 100%; height: 100%; overflow: hidden;">
            <img src="{BackgroundVideo}" style="width: 100%; height: 100%; object-fit: cover; filter: blur(5px) brightness(0.6);" alt="Background video"/>
            <div class="main-title m-auto" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; gap: 2rem; color: white; padding: 1rem;">
                <h1  style="font-size: {!mobile ? 5 : 3}rem; text-shadow: 0.2rem 0.2rem 1rem rgba(0, 0, 0, 0.9); z-index: 100;">{@html !mobile ? "Deprived Devs" : "Deprived<br/>Devs"}</h1>
                {#if mobile}
                    <div style="width: 100px; height: 100px;"></div>
                {/if}
            </div>                   
        </div>        
    </ParallaxLayer>
    <ParallaxLayer offset={0.55} rate={0.3} class="bg-base-200 pointer-events-none">
        
    </ParallaxLayer>

    <ParallaxLayer offset={0.75}>
        <div class="prose flex justify-center m-auto">
            <h1 class="main-title text-center" style="font-size: {!mobile ? 3 : 2}rem;">
                Developers!
            </h1>
        </div>
    </ParallaxLayer>

    <!-- Decorative:  -->
    <StickyLayer offset={(!mobile) ? ({ top: 0.4, bottom: 0.75 }) : ({ top: 0.4, bottom: 0.4 })} class="pointer-events-none">
        <div class="prose font-mono pointer-events-auto  h-full" style="max-width: 100%;">            
            <div class="grid place-content-center h-full">
                <div class="grid gap-4 p-4" style="{!mobile ? "max-width: 50vw;" : ""} background: linear-gradient(to bottom, transparent 0%, oklch(var(--b2)) 5%)">
                    <FrontFold Title="Alex / Zhen" Checked={true}>
                        <p>Hi, I am Alex/Zhen, I'm that chinese guy.</p>
                        <p>Here's my CV: <a href="/zhen/cv/rev2?hideOnPrint=1" style="color:lightblue;">pdf</a></p>
                    </FrontFold>
                    <FrontFold Title="Sveske / Benjamin">
                        <p>Hi, I use Arch, btw.</p>
                        <p>Here's my Linked-in: <a href="https://www.linkedin.com/in/benjamin-dreyer/" style="color:lightblue;">Linked-in</a></p>'
                    </FrontFold>
                    <FrontFold Title="Zylvester">
                        <p>Hi, I am [insert text here]</p>
                        <p>Here's a joke about recursion: <a href="" style="color:lightblue;">recursion</a></p>
                    </FrontFold>
                </div>
            </div>
        </div>
    </StickyLayer>

    <ParallaxLayer offset={1.5} rate={0.3} class="bg-base-200 pointer-events-none" style="box-shadow: 0 -1rem 10px rgba(0, 0, 0, 0.2);" >
        <div class="grid place-content-center place-items-center min-h-screen pointer-events-auto">
            <article class="pt-16 prose overflow-hidden font-mono {mobile ? "px-8" : ""}">
                <h1 class="main-title {!mobile ? "text-center m-auto" : "m-0"}" style="font-size: {!mobile ? 5 : 3}rem; ">About us</h1>
                <p>We are a small group of developers and artists who started out as classmates, united by our passion for all things technology.</p>
            </article>

            <!-- Spacer -->
            <div class="{!mobile ? "py-16" : "py-4"}"/> 

            <div class="grid grid-flow-row gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">                
                <div class="flex w-52 flex-col gap-4">
                    <div class="skeleton h-32 w-full"></div>
                    <div class="skeleton h-4 w-28"></div>
                    <div class="skeleton h-4 w-full"></div>
                    <div class="skeleton h-4 w-full"></div>
                </div>
                <div class="flex w-52 flex-col gap-4">
                    <div class="skeleton h-32 w-full"></div>
                    <div class="skeleton h-4 w-28"></div>
                    <div class="skeleton h-4 w-full"></div>
                    <div class="skeleton h-4 w-full"></div>
                </div>
                {#if !mobile}
                <div class="flex w-52 flex-col gap-4">
                    <div class="skeleton h-32 w-full"></div>
                    <div class="skeleton h-4 w-28"></div>
                    <div class="skeleton h-4 w-full"></div>
                    <div class="skeleton h-4 w-full"></div>
                </div>
                <div class="flex w-52 flex-col gap-4">
                    <div class="skeleton h-32 w-full"></div>
                    <div class="skeleton h-4 w-28"></div>
                    <div class="skeleton h-4 w-full"></div>
                    <div class="skeleton h-4 w-full"></div>
                </div>
                {/if}
            </div>

            <h6 class="prose text-base-300"><b>(These will never load)</b></h6>
        </div>
    </ParallaxLayer>

    <!-- <StickyLayer offset={{ top: 1.75, bottom: 2 }} >
        <div class="flex justify-center prose main-title overflow-hidden">
            <h1 style="font-size: {!mobile ? 5 : 3}rem;">About us</h1>
        </div>
    </StickyLayer> -->
</Parallax>

<Timeline/>

<style>
    .main-title {
        width: 80%;
        font-family: var(--title-font);
    }
</style>

{#if mobile}
    <style>
        #news-section {
            transition-duration: 500ms;
            transition-property: width;
            width: 90% !important;
        }
        .news-container {
            flex-direction: column !important;
        }

        .dummy {
            width: 0% !important;
        }

        /* #more-posts { */
        /*     flex-grow: 1 !important; */
        /* } */

    </style>
{/if}

