---
import { getCollection } from "astro:content";
import PageLayout from "@layouts/PageLayout.astro";
import ArrowCard from "@components/ArrowCard";
import StackCard from "@components/StackCard.astro";
import { SITE, SOCIALS } from "@consts";
import TwinklingStars from "@components/TwinklingStars.astro";
import MeteorShower from "@components/MeteorShower.astro";

const posts = (await getCollection("blog"))
    .filter((post) => !post.data.draft)
    .sort((a, b) => b.data.date.getTime() - a.data.date.getTime())
    .slice(0, 3);

const projects = (await getCollection("projects"))
    .filter((project) => !project.data.draft)
    .sort((a, b) => b.data.date.getTime() - a.data.date.getTime())
    .slice(0, 3);

const stack = [
    {
        text: "Astro",
        icon: "astro",
        href: "https://astro.build",
    },
    {
        text: "Javascript",
        icon: "javascript",
        href: "https://www.javascript.com",
    },
    {
        text: "Typescript",
        icon: "typescript",
        href: "https://www.typescriptlang.org",
    },
    {
        text: "Tailwind",
        icon: "tailwind",
        href: "https://tailwindcss.com",
    },
];
---

<PageLayout title="Home" description={SITE.DESCRIPTION}>
    <!-- Light Mode: Particles -->
    <div class="absolute inset-0 block dark:hidden">
        <div id="particles1" class="fixed inset-0"></div>
        <div id="particles2" class="fixed inset-0"></div>
        <div id="particles3" class="fixed inset-0"></div>
    </div>

    <!-- Dark Theme: Stars -->
    <div class="absolute inset-0 bg-black hidden dark:block">
        <div id="stars1" class="fixed inset-0"></div>
        <div id="stars2" class="fixed inset-0"></div>
        <div id="stars3" class="fixed inset-0"></div>
    </div>

    <!-- Dark Theme: Twinkling Stars / Metors -->
    <div id="galaxy" class="fixed inset-0">
        <div class="hidden dark:block">
            <TwinklingStars />
            <MeteorShower />
        </div>
    </div>

    <script is:inline src="/js/bg.js"></script>

    <!-- HERO -->
    <section class="relative h-screen w-full">
        <div
            id="planetcont"
            class="animate absolute inset-0 top-1/4 overflow-hidden"
        >
            <div
                id="crescent"
                class="absolute top-0 left-1/2 -translate-x-1/2 w-[250vw] min-h-[100vh] aspect-square rounded-full p-[1px] bg-gradient-to-b from-black/25 dark:from-white/75 from-0% to-transparent to-5%"
            >
                <div
                    id="planet"
                    class="w-full h-full bg-white dark:bg-black rounded-full p-[1px] overflow-hidden flex justify-center"
                >
                    <div
                        id="blur"
                        class="w-full h-20 rounded-full bg-neutral-900/25 dark:bg-white/25 blur-3xl"
                    >
                    </div>
                </div>
            </div>
        </div>
        <div
            class="animate absolute h-full w-full flex items-center justify-center"
        >
            <div
                class="relative w-full h-full flex items-center justify-center"
            >
                <div class="p-5 text-center">
                    <p
                        class="animated text-lg md:text-xl lg:text-2xl font-semibold opacity-75"
                    >
                        Hello, I am Moritz
                    </p>
                    <p
                        class="animated text-2xl md:text-3xl lg:text-4xl font-bold uppercase text-black dark:text-white"
                    >
                        Computer Science Student
                    </p>
                    <p
                        class="animated text-sm md:text-base lg:text-lg opacity-75"
                    >
                        Currently studying at Paderborn University.
                    </p>
                    <div
                        id="ctaButtons"
                        class="animated flex flex-wrap gap-4 justify-center mt-5"
                    >
                        <a
                            href="/blog/"
                            class="py-2 px-4 rounded truncate text-xs md:text-sm lg:text-base bg-black dark:bg-white text-white dark:text-black hover:opacity-75 blend"
                        >
                            Read my blog
                        </a>
                        <a
                            href="/work/"
                            class="py-2 px-4 truncate rounded text-xs md:text-sm lg:text-base border border-black/25 dark:border-white/25 hover:bg-black/5 hover:dark:bg-white/15 blend"
                        >
                            View my work
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="relative bg-white dark:bg-black">
        <div class="mx-auto max-w-screen-sm p-5 space-y-24 pb-16">
            <!-- About Section -->
            <section class="animate">
                <article>
                    <p>
                        I love to build things, may it be front-end, back-end or
                        a cli-tool. I am motivated by challenging projects where
                        I have to research and learn new concepts.
                    </p>
                    <p>Now</p>
                    <p>
                        I currently study computer science at
                        <a
                            href="https://upb.de"
                            target="_blank"
                            rel="noopener noreferrer">Paderborn University</a
                        >
                        with economics as my minor subject, while also getting a
                        peek at electrical engineering & maths in my regular subject.
                    </p>
                </article>
            </section>

            <!-- Blog Preview Section -->
            <section class="animate">
                <div class="space-y-4">
                    <div class="flex justify-between">
                        <p class="font-semibold text-black dark:text-white">
                            Recent posts
                        </p>
                        <a
                            href="/blog/"
                            class="w-fit col-span-3 group flex gap-1 items-center underline decoration-[.5px] decoration-black/25 dark:decoration-white/50 hover:decoration-black dark:hover:decoration-white text-black dark:text-white underline-offset-2 blend"
                        >
                            <span
                                class="text-black/75 dark:text-white/75 group-hover:text-black group-hover:dark:text-white blend"
                            >
                                All posts
                            </span>
                        </a>
                    </div>
                    <ul class="space-y-4">
                        {
                            posts.map((post) => (
                                <li>
                                    <ArrowCard entry={post} />
                                </li>
                            ))
                        }
                    </ul>
                </div>
            </section>

            <!-- Tech Stack Section -->
            <section class="animate">
                <div class="space-y-4">
                    <p class="font-semibold text-black dark:text-white">
                        Website build with
                    </p>
                    <div class="flex flex-wrap items-center gap-2 mt-5">
                        {
                            stack.map((item) => (
                                <StackCard
                                    text={item.text}
                                    icon={item.icon}
                                    href={item.href}
                                />
                            ))
                        }
                    </div>
                </div>
            </section>

            <!-- Project Preview Section -->
            <section class="animate">
                <div class="space-y-4">
                    <div class="flex justify-between">
                        <p class="font-semibold text-black dark:text-white">
                            Recent projects
                        </p>
                        <a
                            href="/projects/"
                            class="w-fit col-span-3 group flex gap-1 items-center underline decoration-[.5px] decoration-black/25 dark:decoration-white/50 hover:decoration-black dark:hover:decoration-white text-black dark:text-white underline-offset-2 blend"
                        >
                            <span
                                class="text-black/75 dark:text-white/75 group-hover:text-black group-hover:dark:text-white blend"
                            >
                                All projects
                            </span>
                        </a>
                    </div>
                    <ul class="space-y-4">
                        {
                            projects.map((project) => (
                                <li>
                                    <ArrowCard entry={project} />
                                </li>
                            ))
                        }
                    </ul>
                </div>
            </section>

            <!-- Contact Section -->
            <section class="animate">
                <div>
                    <p class="font-semibold text-black dark:text-white">
                        Let's Connect
                    </p>
                    <p>Reach out to me via email or on social media.</p>
                    <div class="grid grid-cols-4 gap-y-2 mt-4 auto-cols-min">
                        {
                            SOCIALS.map((social) => (
                                <>
                                    <div class="col-span-1 flex items-center gap-1">
                                        <span class="whitespace-nowrap truncate">
                                            {social.NAME}
                                        </span>
                                    </div>
                                    <div class="col-span-3 truncate">
                                        <a
                                            href={social.HREF}
                                            target="_blank"
                                            class="w-fit col-span-3 group flex gap-1 items-center underline decoration-[.5px] decoration-black/25 dark:decoration-white/50 hover:decoration-black dark:hover:decoration-white text-black dark:text-white underline-offset-2 blend"
                                        >
                                            <span class="text-black/75 dark:text-white/75 group-hover:text-black group-hover:dark:text-white blend">
                                                {social.TEXT}
                                            </span>
                                        </a>
                                    </div>
                                </>
                            ))
                        }
                    </div>
                </div>
            </section>
        </div>
    </div>
</PageLayout>
