<script>
    import cards from '../data/cards.json';
    import { fly, fade } from 'svelte/transition';
    import { time, elapsed } from '../JS/time.js';

    let y;
    let visible = true;
    let hereHands = false;

    const handleMouseenter = () => (hereHands = true);
    const handleMouseleave = () => (hereHands = false);

    function typewriter(node, { speed = 1 }) {
		const valid = node.childNodes.length === 1 && node.childNodes[0].nodeType === Node.TEXT_NODE;

		if (!valid) {
			throw new Error(`This transition only works on elements with a single text node child`);
		}

		const text = node.textContent;
		const duration = text.length / (speed * 0.01);

		return {
			duration,
			tick: (t) => {
				const i = ~~(text.length * t);
				node.textContent = text.slice(0, i);
			}
		};
	}

    function scrollIntoView({ target }) {
		const el = document.querySelector(target.getAttribute('href'));
		if (!el) return;
    el.scrollIntoView({
        behavior: 'smooth'
    });
    }
    

</script>

<svelte:window bind:scrollY={y} />
<svelte:body on:mouseenter={handleMouseenter} on:mouseleave={handleMouseleave} />



<div>
    <img 
    class:curious={hereHands}
    class="hands z-0 w-screen"
    alt="logo"
    src="/src/pictures/hands.png"
    />
    <div class="h-screen bg-[url('/src/pictures/background.svg')] grid content-center">
        <div class=" mobile:mx-auto">
            <img class="mobile:object-cover mobile:w-32 mobile:h-3/5 mobile:mx-auto" src="/src/pictures/logo.svg" alt="logo">
            <h1 class="mobile:text-6xl mobile:text-center">
                Daddy
            </h1>
        </div>
        <div class="h-20">
        {#if $elapsed > 1}
            <h3 transition:typewriter class="text-center w-3/4 mx-auto">
                Application de gestion des Dossiers d’Aide à la Décision
            </h3>
        {/if}
        </div>
        <a href="#cards" on:click|preventDefault={scrollIntoView} class="bg-tahiti text-white font-bold px-2 pt-2 pb-4 rounded-full w-11 mx-auto text-6xl">
            ↓
        </a>
    </div>
    <div id="cards" class='bg-white h-screen flex z-50' style="position: relative">
        {#if y>=2}
        <div transition:fly={{ y: 200, duration: 2000 }} class="w-full flex flex-wrap justify-center">
            {#each cards.cards as { title, text, picto }, i}
                <div class="max-w-sm rounded overflow-hidden shadow-lg my-auto mx-5 w-96 mobile:h-36 bg-gradient-to-t from-tahitilight">
                    <div class="px-6 py-4">
                        <div class="p-5 bg-tahiti rounded-lg w-24 mb-4">
                            <img src="/src/pictures/{picto}" alt="{picto}">
                        </div>
                        <div class="font-bold text-xl mb-2">{title}</div>
                        <p class="mobile:hidden text-gray-700 text-base">
                            {text}
                        </p>
                    </div>
                </div>
                <!--<div class="max-w-sm rounded overflow-hidden shadow-lg my-auto mx-5 w-96 h-96 bg-gradient-to-t from-tahitilight">
                    <div class="px-6 py-4">
                        <div class="p-5 bg-tahiti rounded-lg w-24 mb-4">
                            <img src="/src/pictures/{picto}" alt="{picto}">
                        </div>
                        <div class="font-bold text-xl mb-2">{title}</div>
                        <p class="text-gray-700 text-base">
                            {text}
                        </p>
                    </div>
                </div> -->
            {/each}
        </div>
        {/if}
    </div>
</div>

<div class="h-screen h-96 bg-tahitilight">
    <div class="container mx-auto py-40 justify-evenly">
        <img src="/src/pictures/manjaro_menu.jpg" class="object-scale-down h-80" >
        

    </div>
</div>


<style lang="postcss">
:global(html) {
    background-color: theme(colors.white);
}

	.hands {
		position: absolute;
		left: 0;
		bottom: -60px;
		transform: translate(0%, 40%);
		transform-origin: 100% 100%;
		transition: transform 0.4s;
	}

	.curious {
		transform: translate(0%, 0);
	}

    .center {
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .hidden {
        display: none;
    }

</style>