<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;
</script>

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

<Parallax sections={1.2}>
    <ParallaxLayer span={0.6} rate={0.2}>
        <div 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" 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.6} rate={0.3} class="bg-base-200">
        <div class="grid place-items-center prose font-mono">
            <div class="p-4 grid gap-4" style="{!mobile ? "max-width: 50vw;" : ""}">
                <FrontFold Title="Alex / Zhen">
                    <p>Hi, I am Alex/Zhen, I'm that chinese guy.</p>
                    <p>Here's my CV: <a href="/zhen/cv/rev1?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>
    </ParallaxLayer>
</Parallax>

<Timeline/>

<style>
    .main-title {
        margin: 0 auto;
        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}

