---
import dayjs from "dayjs";
import NavbarLayout from "@layouts/NavbarLayout.astro";
import { getCollection } from "astro:content";
import { astroI18n } from "astro-i18n";
import { Image } from "astro:assets";
import { CaretRight, Pause, Rocket, Crosshair1 } from "@astropub/icons";
import { t } from "astro-i18n";
import { l } from "@utils/util";
import PlayerCount from "@components/PlayerCount.svelte";
import "../../public/fonts/barlow-condensed/barlow-condensed.css";
import { type Player } from "../components/types/data";
import PostComponent from "../components/PostComponent.astro";
import BackgroundImage from "../components/BackgroundImage.astro";

const teamMember: { [key: string]: Player[] } = await fetch(import.meta.env.PUBLIC_API_SERVER + "/data/team").then((value) => value.json());

const posts = await getCollection("announcements", (entry) => entry.id.split("/")[0] === astroI18n.locale);

const germanPosts = await getCollection("announcements", (entry) => entry.id.split("/")[0] === astroI18n.fallbackLocale);

germanPosts.forEach((value) => {
    if (posts.find((post) => post.data.key === value.data.key)) {
        return;
    } else {
        posts.push(value);
    }
});

const latestPost = posts.sort((a, b) => dayjs(b.data.created).unix() - dayjs(a.data.created).unix()).at(0);

const prefixColors: { [key: string]: string } = {
    Admin: "#dc2626",
    Dev: "#0284c7",
    Mod: "#d97706",
    Sup: "#1d4ed8",
    Arch: "#22c55e",
};

const featClass =
    "flex flex-col items-center text-center py-10 px-8 border-b border-white/[0.04] md:border-b-0 md:border-r md:last:border-r-0 transition-[background] duration-[400ms] hover:bg-amber-500/[0.025] [&_svg]:text-amber-500 [&_svg]:mb-5 [&_svg]:transition-transform [&_svg]:duration-300 [&:hover_svg]:scale-[1.15]";
const featNum = "font-display text-[3.5rem] font-extrabold leading-none text-amber-500/10 mb-5";
const featH3 = "font-display text-[1.15rem] font-bold text-white tracking-[0.08em] uppercase mb-3";
const featP = "text-neutral-400/85 text-[0.85rem] leading-[1.65] mt-1";
---

<NavbarLayout title={t("home.page")} description="SteamWar.de Homepage" transparentFooter={false}>
    <section class="relative w-full h-screen overflow-hidden">
        <div class="absolute inset-0 h-[calc(100vh+1rem)]">
            <BackgroundImage />
        </div>
        <div class="absolute inset-0 z-[2] [background:linear-gradient(to_bottom,rgba(0,0,0,0.6)_0%,rgba(0,0,0,0.2)_35%,rgba(0,0,0,0.45)_65%,#080808_100%)]"></div>
        <div class="absolute inset-0 z-[3] pointer-events-none [background:repeating-linear-gradient(0deg,transparent_0px,transparent_3px,rgba(0,0,0,0.06)_3px,rgba(0,0,0,0.06)_4px)]"></div>

        <div class="relative z-10 h-full flex flex-col items-center justify-center px-4">
            <h1 class="font-display text-[clamp(4.5rem,14vw,14rem)] font-black leading-[0.85] tracking-[-0.03em] select-none animate-[scaleIn_0.9s_0.25s_ease-out_both]">
                <span class="hero-text text-transparent">{t("home.title.first")}</span><span class="text-white [text-shadow:0_0_80px_rgba(255,255,255,0.06)]">{t("home.title.second")}</span>
            </h1>

            <div class="w-0 h-0.5 bg-gradient-to-r from-transparent via-amber-500 to-transparent my-7 animate-[lineGrow_0.6s_0.7s_ease-out_both]"></div>

            <text-carousel class="h-10 sm:h-12 w-full max-w-[28rem] sm:max-w-[32rem] relative pointer-events-none">
                <h2>{t("home.subtitle.1")}</h2>
                <h2>
                    {t("home.subtitle.2")}
                    <PlayerCount client:idle />
                </h2>
                <h2>{t("home.subtitle.3")}</h2>
            </text-carousel>

            <a
                href={l("join")}
                class="inline-flex items-center gap-[0.6rem] mt-12 py-[0.8rem] px-[2.8rem] border border-amber-500/50 text-amber-400 font-display text-[0.85rem] tracking-[0.2em] uppercase bg-amber-500/[0.04] backdrop-blur-[12px] [clip-path:polygon(0_0,calc(100%-14px)_0,100%_14px,100%_100%,14px_100%,0_calc(100%-14px))] transition-all duration-[350ms] animate-[fadeUp_0.6s_1s_ease-out_both] hover:bg-amber-500/[0.12] hover:border-amber-500/85 hover:text-white hover:[box-shadow:0_0_40px_rgba(245,158,11,0.1),inset_0_0_40px_rgba(245,158,11,0.03)] hover:scale-[1.04] active:scale-[0.97]"
            >
                <span>{t("home.join")}</span>
                <CaretRight width="18" height="18" />
            </a>
        </div>

        <div class="absolute bottom-6 left-1/2 -translate-x-1/2 z-20 w-full max-w-[40rem] px-4">
            <PostComponent post={latestPost} slim={true} />
        </div>
    </section>

    <section class="relative bg-[#080808] overflow-hidden">
        <div class="absolute -top-[100px] left-1/2 -translate-x-1/2 w-[500px] h-[250px] [background:radial-gradient(ellipse,rgba(245,158,11,0.06)_0%,transparent_70%)] pointer-events-none"></div>
        <div class="relative z-[2] max-w-5xl mx-auto py-24 px-4">
            <div class="grid grid-cols-1 md:grid-cols-3">
                <article class={featClass}>
                    <span class={featNum}>01</span>
                    <Crosshair1 height="36" width="36" />
                    <h3 class={featH3}>{t("home.benefits.fights.title")}</h3>
                    <p class={featP}>{t("home.benefits.fights.description.1")}</p>
                    <p class={featP}>{t("home.benefits.fights.description.2")}</p>
                </article>

                <article class={featClass}>
                    <span class={featNum}>02</span>
                    <Rocket height="36" width="36" />
                    <h3 class={featH3}>{t("home.benefits.bau.title")}</h3>
                    <p class={featP}>{t("home.benefits.bau.description")}</p>
                </article>

                <article class={featClass}>
                    <span class={featNum}>03</span>
                    <Pause height="36" width="36" />
                    <h3 class={featH3}>{t("home.benefits.minigames.title")}</h3>
                    <p class={featP}>{t("home.benefits.minigames.description.1")}</p>
                    <p class={featP}>{t("home.benefits.minigames.description.2")}</p>
                </article>
            </div>
        </div>
    </section>

    <section class="bg-[#0c0c0c] py-20">
        <div class="max-w-5xl mx-auto px-4 flex flex-wrap gap-4">
            {
                Object.entries(teamMember).map(([prefix, players]) => (
                    <Fragment>
                        {players.map((v, i) => (
                            <div class="flex flex-col justify-end">
                                {i === 0 && (
                                    <h2 class="font-display text-[1.35rem] font-bold tracking-[0.12em] uppercase text-[var(--rc)] pb-1 inline-block" style={`--rc: ${prefixColors[prefix] || "#666"}`}>
                                        {t("home.prefix." + prefix)}
                                    </h2>
                                )}
                                <div
                                    class="flex flex-col items-center py-5 px-6 bg-white/[0.025] border-t-2 border-[var(--rc)] transition-[transform,background,box-shadow] duration-300 hover:-translate-y-1.5 hover:bg-white/5 hover:shadow-[0_12px_32px_rgba(0,0,0,0.5)] [&:hover_img]:scale-[1.08]"
                                    style={`--rc: ${prefixColors[prefix] || "#666"}`}
                                >
                                    <Image
                                        src={`${import.meta.env.PUBLIC_API_SERVER}/data/skin/${v.uuid}`}
                                        alt={v.name}
                                        width="120"
                                        height="120"
                                        class="w-[120px] h-[120px] transition-transform duration-300"
                                    />
                                    <span class="font-display mt-3 text-[0.9rem] tracking-[0.1em] text-neutral-300/90">{v.name}</span>
                                </div>
                            </div>
                        ))}
                    </Fragment>
                ))
            }
        </div>
    </section>

    <script>
        class TextCarousel extends HTMLElement {
            current = 0;

            connectedCallback() {
                this._current.classList.add("!opacity-100");

                for (let i = 0; i < this.children.length; i++) {
                    if (i !== this.current) {
                        this.children[i].classList.add("translate-y-4");
                    }
                }

                setInterval(() => this.next(), 5000);
            }

            get _current() {
                return this.children[this.current];
            }

            next() {
                this._current.classList.remove("!opacity-100");
                this._current.classList.add("translate-y-4");
                this._current.classList.remove("!delay-500");
                this.current = (this.current + 1) % this.children.length;
                this._current.classList.add("!opacity-100");
                this._current.classList.remove("translate-y-4");
                this._current.classList.add("!delay-500");
            }
        }

        customElements.define("text-carousel", TextCarousel);
    </script>
</NavbarLayout>

<style>
    .hero-text {
        background-image: linear-gradient(160deg, #fcd34d, #f59e0b);
        background-clip: text;
    }

    text-carousel > * {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        text-align: center;
        opacity: 0;
        font-family: "Barlow Condensed", sans-serif;
        font-size: 0.95rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.5);
        transform: translateY(8px);
        transition:
            transform 0.5s ease-out,
            opacity 0.5s linear;
    }

    @media (min-width: 640px) {
        text-carousel > * {
            font-size: 1.15rem;
        }
    }

    @keyframes fadeUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes scaleIn {
        from {
            opacity: 0;
            transform: scale(0.92);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    @keyframes lineGrow {
        from {
            width: 0;
            opacity: 0;
        }
        to {
            width: 6rem;
            opacity: 1;
        }
    }
</style>