<script lang="ts">
	import ProfileSpacer from './comps/ProfileSpacer.svelte';
    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 { tick } from 'svelte'


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

    import Corrobot1 from "$lib/GamePreviews/Corrobot-rebouce-title.jpg"
    import Corrobot2 from "$lib/GamePreviews/Corrobot-rebouce-gameplay1.png"
    import Corrobot3 from "$lib/GamePreviews/Corrobot-rebouce-gameplay2.png"

    import Blood1 from "$lib/GamePreviews/Blood-title.png"
    import Blood2 from "$lib/GamePreviews/Blood-preview1.png"
    import Blood3 from "$lib/GamePreviews/Blood-preview2.png"
    import Blood4 from "$lib/GamePreviews/Blood-preview3.png"
    import Blood5 from "$lib/GamePreviews/Blood-preview4.png"
    
    import Time1 from "$lib/GamePreviews/Time-1.png"
    import Time2 from "$lib/GamePreviews/time-2.png"
    import Time3 from "$lib/GamePreviews/time-3.png"
    import Time4 from "$lib/GamePreviews/time-4.png"
    import Time5 from "$lib/GamePreviews/time-5.gif"
    
    const mobileThreshold : string = '600px'; // was 1000px. zhen testing
    let mobile : boolean;
</script>


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

<div class="pointer-events-auto" style="position: relative; width: 100%; height: 100%; overflow: hidden;">
    <img id="backgroundGif" src="{BackgroundVideo}" 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;">
            {#if !mobile}
                Deprived Devs
            {:else}
                Deprived
                <br/>
                <h1 class="-mt-6 prose" style="font-size: 2rem;">
                    Devs
                </h1>
            {/if}
        </h1>
        {#if mobile}
            <div style="width: 100px; height: 100px;"></div>
        {/if}
    </div>
</div>

<div class="flex justify-center w-full px-8 py-4">
    <div class="grid space-y-5" style="width: 100%; max-width: 21cm;">
        <h1 class="prose main-title" style="font-size: {!mobile ? 3 : 2}rem;">
            Developers
        </h1>

        
        <div class="developersProfile pl-4 font-mono">
            <h2 style="font-size: {!mobile ? 1.5 : 1.5}rem;">Alex / Zhen</h2>
            <span>
                <p>Hi, I am Alex/Zhen, {@html !mobile ? "" : "<br/>"} I'm that chinese guy.</p>
                <p>Here's my CV: <a href="/zhen/cv/rev2?hideOnPrint=1" style="color:lightblue;">pdf</a></p>
            </span>
        </div>
        
        <ProfileSpacer/>
        <div class="developersProfile pl-4 font-mono">
            <h2 style="font-size: {!mobile ? 1.5 : 1.5}rem;">Sveske / Benjamin</h2>
            <span>
                <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>
            </span>
        </div>
        
        <ProfileSpacer/>
        <div class="developersProfile pl-4 font-mono">
            <h2 style="font-size: {!mobile ? 1.5 : 1.5}rem;">Zylvester</h2>
            <span>
                <p>Hi, I am [insert text here]</p>
                <p>Here's a joke about recursion: <a href="/" target="_blank" style="color:lightblue;">recursion</a></p>
            </span>
        </div>
    </div>
</div>

<!-- space -->
<div class="py-8 flex justify-center">
    <div style="width: 50%;">
        <ProfileSpacer/>
    </div>
</div>

<div class="grid place-content-center place-items-center min-h-screen pointer-events-auto font-mono">
    <article class="pt-16 prose overflow-hidden {mobile ? "px-8" : ""}">
        <h1 class="main-title {!mobile ? "text-center m-auto" : "m-0"}" style="font-size: {!mobile ? 3 : 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 style="width: 50%;" class="{!mobile ? "py-16" : "py-4"}">
        <ProfileSpacer/>
    </div>
    
    <article class="pt-16 prose {mobile ? "px-8" : ""}">
        <h1 class="main-title {!mobile ? "text-center m-auto" : "m-0"}" style="font-size: {!mobile ? 3 : 3}rem; ">Games</h1>
        <p>Here are some of our games from various gamejams from the past. <br/>(<span class="font-bold">ONLY</span> 48 hours per game)</p>
    </article>

    <!-- Spacer -->
    <div style="width: 50%;" class="{!mobile ? "py-8" : "py-4"}">
        
    </div>

    <div class="grid grid-flow-row gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">                
        <!-- Corro rebounce -->
        <div class="games card bg-base-100 shadow-xl">
            <figure style="height: 15em;">
                <Carousel images={[
                    Corrobot1,
                    Corrobot2,
                    Corrobot3,
                    ]}/>
            </figure>
            <div class="card-body">
                <h2 class="card-title">Corrobot-rebounce</h2>
                <p>A 3D sequel to Corrobot-Takeover</p>
                <br/>
                <p>This was made during <a href="https://itch.io/jam/nordic-game-jam-2024/rate/2659665" class="underline">Nordic gamejam 2024</a></p>
                <div class="card-actions justify-end">
                <a href="https://botalex.itch.io/corrobot-rebounce" target="_blank" class="btn btn-primary">View on itch.io</a>
                </div>
            </div>
        </div>

        <!-- Blood -->
        <div class="games card bg-base-100 w-96 shadow-xl">
            <figure style="height: 15em;">
                <Carousel images={[
                    Blood1,
                    Blood2,
                    Blood3,
                    Blood4,
                    Blood5,
                    ]}/>
            </figure>
            <div class="card-body">
                <h2 class="card-title">Unnamed blood game</h2>
                <p>A game based on an unique kind of combat</p>
                <br/>
                <p>This was made during <a href="https://itch.io/jam/future-game-makers-jam-2024" class="underline">Future Game Makers</a>, and of course our team won the competition.</p>
                <div class="card-actions justify-end">
                <a href="https://botalex.itch.io/mop-of-the-dead" target="_blank" class="btn btn-primary">View on itch.io</a>
                </div>
            </div>
        </div>

        <!-- Time -->
        <div class="games card bg-base-100 w-96 shadow-xl">
            <figure style="height: 15em;">
                <Carousel images={[
                    Time1,
                    Time2,
                    Time3,
                    Time4,
                    Time5,
                    ]}/>
            </figure>
            <div class="card-body">
                <h2 class="card-title">One More Time</h2>
                <p>What if time was money? A rougelike where you need to kill for time, which you can choose to spend.</p>
                <br/>
                <p>This was made during <a href="https://itch.io/jam/dmspiljam-november-2021" class="underline">Denmark Masters jam</a>. This jam has youths allover Denmark to compete, and of course our team won the competition again.</p>
                <div class="card-actions justify-end">
                <a href="https://botalex.itch.io/one-more-time" target="_blank" class="btn btn-primary">View on itch.io</a>
                </div>
            </div>
        </div>

        

        <div class="games card bg-base-100 w-96 shadow-xl">
            <figure class="skeleton rounded-b-none" style="height: 15em;"></figure>
            <div class="card-body">
                <h2 class="card-title">What's next?</h2>
                <div class="skeleton mt-1 h-4 w-28"></div>
                <div class="skeleton h-4 w-full"></div>
                <div class="skeleton h-4 w-full"></div>
                <div class="skeleton h-4 w-28"></div>
                <div class="skeleton h-4 w-full"></div>
                <div class="flex grow"/>
                <div class="card-actions justify-end">
                    <a href="/" target="_blank" class="btn btn-primary">RECURSION!</a>
                </div>
            </div>
        </div>
    </div>
</div>


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

    .developersProfile{
        border-left: dashed oklch(var(--p));
    }

    #backgroundGif{
        width: 100%; 
        height: 100%;
        max-height: 40vh;
        object-fit: cover; 
        filter: blur(5px) brightness(0.6);
    }
</style>

{#if !mobile}
    <style>
        .games {
            width: 24rem /* 384px */;
        }
    </style>

{:else}
    <style>
        .games {
            width: 80%;
            display: flex;
            justify-self: center;
        }
    </style>
{/if}

