---
import Layout from "../layouts/Layout.astro";
import SocialNavbar from "../components/SocialNavbar.astro";
import ShapesBackground from "../components/ShapesBackground.astro";
---

<Layout title="Pinapelz">
    <div class="center-wrapper">
        <main>
            <h1 class="welcome-message">
                <span class="welcome-text-gradient">Welcome</span> 👋
            </h1>
            <p class="introduction">
                I'm <span class="text-gradient">Pinapelz</span>, a Software
                Engineering graduate passionate about open-source software and
                building fun and interesting things.
            </p>
            <p class="introduction">Some of them even work.</p>
        </main>
        <SocialNavbar />
    </div>
</Layout>
<ShapesBackground />
<script>
    const welcomeMessages = [
        'print("Hello World")',
        "Hello there",
        "Bonjour",
        "こにちは",
        "你好",
        "Ahoy!",
    ];

    let currentIndex = 0;
    const h1 = document.querySelector(
        "h1.welcome-message span.welcome-text-gradient",
    );

    function typeMessage(message) {
        let i = 0;
        h1.textContent = "";
        const interval = setInterval(() => {
            if (i < message.length) {
                h1.textContent += message[i];
                i++;
            } else {
                clearInterval(interval);
                currentIndex = (currentIndex + 1) % welcomeMessages.length;
                setTimeout(() => {
                    h1.classList.add("slide-out");
                    setTimeout(() => {
                        typeMessage(welcomeMessages[currentIndex]);
                        h1.classList.remove("slide-out");
                    }, 1000);
                }, 3000);
            }
        }, 100);
    }
    typeMessage(welcomeMessages[currentIndex]);
</script>

<style>
    @import url("https://fonts.googleapis.com/css?family=Noto:400,700");

    * {
        margin: 0px;
        padding: 0px;
    }

    body {
        font-family: "Noto", sans-serif;
        height: 100%;
    }
    main {
        margin: 0 auto;
        padding: 1rem;
        width: 800px;
        max-width: calc(100% - 2rem);
        color: white;
        font-size: 20px;
        line-height: 1.6;
    }
    .astro-a {
        position: absolute;
        top: -32px;
        left: 50%;
        transform: translatex(-50%);
        width: 220px;
        height: auto;
        z-index: -1;
    }
    h1 {
        font-size: 3.5rem;
        font-weight: 700;
        line-height: 1;
        text-align: center;
        margin-bottom: 1em;
        transition: transform 0.3s ease-in-out;
    }

    h1:hover {
        transform: scale(1.1);
    }
    .welcome-text-gradient {
        background-image: var(--accent-gradient-purp);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-size: 400%;
        background-position: 0%;
        transition: background-position 0.3s ease-in-out;
    }
    .text-gradient {
        background-image: var(--accent-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-size: 400%;
        background-position: 0%;
        transition: background-position 0.3s ease-in-out;
    }
    .slide-out {
        transform: translateX(-100%);
        transition: transform 0.5s ease-in-out;
    }
    .introduction {
        font-size: 1.5rem;
        text-align: center;
        color: #ffffffbd;
    }

    .center-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.75rem;
        min-height: 90vh;
    }
</style>