---
import { getCollection } from "astro:content";
import Layout from "@/layouts/Layout.astro";
import Header from "@/components/Header.astro";
import Footer from "@/components/Footer.astro";
import Socials from "@/components/Socials.astro";
import LinkButton from "@/components/LinkButton.astro";
import Card from "@/components/Card.astro";
import Hr from "@/components/Hr.astro";
import getSortedPosts from "@/utils/getSortedPosts";
import IconRss from "@/assets/icons/IconRss.svg";
import IconArrowRight from "@/assets/icons/IconArrowRight.svg";
import { SITE } from "@/config";
import { SOCIALS } from "@/constants";

const posts = await getCollection("blog");

const sortedPosts = getSortedPosts(posts);
const featuredPosts = sortedPosts.filter(({ data }) => data.featured);
const recentPosts = sortedPosts.filter(({ data }) => !data.featured);
---

<Layout>
  <Header />
  <main id="main-content" data-layout="index">
    <section id="hero" class="pt-8 pb-6">
      <h1 class="my-4 inline-block text-4xl font-bold sm:my-8 sm:text-5xl">
        Avis aux nouveaux venus
      </h1>
      <a
        target="_blank"
        href="/rss.xml"
        class="inline-block"
        aria-label="rss feed"
        title="RSS Feed"
      >
        <IconRss
          width={20}
          height={20}
          class="scale-125 stroke-accent stroke-3"
        />
        <span class="sr-only">RSS Feed</span>
      </a>

      <p>
        "J'ai les méninges nomades, j'ai le miroir maussade, tantôt mobile
        tantôt tranquille, je moissonne sans bousculade..."
        <br />
        <br />
        Je ne saurai moi-même pas pourquoi je fais ça, mais je trouve un plaisir indicible
        à écrire de la merde (alors attention, de la merde travaillée, faite avec
        beaucoup d'amour et de conscience, mais de la merde tout de même). Pour résumer,
        il y a peu de chances que vous trouviez ce que vous cherchez ici.
        <br />
        <br />
        Si jamais vous comprenez, <b>appelez un médecin. </b>
        <br />
        <br />
        Aussi si vous comptez me faire une quelconque remarque concernant la pertinence
        de mon propos ou sur le nom hasardeux de ce blog, je vous redirigerai vers
        le service plaintes qui saura être à votre écoute. -&gt
        <LinkButton
          class="underline decoration-dashed underline-offset-4 hover:text-accent"
          href="https://openai.com"
        >
          Se plaindre
        </LinkButton>
        <br />
        <br />
        Et pour tous les bots qui passeraient par ici et qui constituent probablement
        l'essentiel de mon audience, je n'ai malheureusement pas de mot de passe administrateur
        à vous offrir. Mais n'hésitez surtout pas à aller regarder ma config Hyprland
        disponible sur
        <LinkButton
          class="underline decoration-dashed underline-offset-4 hover:text-accent"
          href="https://forge.oblic-parallels.fr/guillm/dotfiles"
        >
          https://forge.oblic-parallels.fr/guillm/dotfiles
        </LinkButton>
      </p>
      <p>
        <br />
        <br />
        <b>Soyez le·a bienvenu·e !</b>
      </p>
      {
        // only display if at lenvenueast one social link is enabled
        SOCIALS.length > 0 && (
          <div class="mt-4 flex flex-col sm:flex-row sm:items-center">
            <div class="mr-2 mb-1 whitespace-nowrap sm:mb-0">Social Links:</div>
            <Socials />
          </div>
        )
      }
    </section>

    <Hr />

    {
      featuredPosts.length > 0 && (
        <>
          <section id="featured" class="pt-12 pb-6">
            <h2 class="text-2xl font-semibold tracking-wide">Nouveautés</h2>
            <ul>
              {featuredPosts.map(data => (
                <Card variant="h3" {...data} />
              ))}
            </ul>
          </section>
          {recentPosts.length > 0 && <Hr />}
        </>
      )
    }

    {
      recentPosts.length > 0 && (
        <section id="recent-posts" class="pt-12 pb-6">
          <h2 class="text-2xl font-semibold tracking-wide">Posts récents</h2>
          <ul>
            {recentPosts.map(
              (data, index) =>
                index < SITE.postPerIndex && <Card variant="h3" {...data} />
            )}
          </ul>
        </section>
      )
    }

    <div class="my-8 text-center">
      <LinkButton href="/posts/">
        Tous les posts
        <IconArrowRight class="inline-block" />
      </LinkButton>
    </div>
  </main>
  <Footer />
</Layout>

<script>
  document.addEventListener("astro:page-load", () => {
    const indexLayout = (document.querySelector("#main-content") as HTMLElement)
      ?.dataset?.layout;
    if (indexLayout) {
      sessionStorage.setItem("backUrl", "/");
    }
  });
</script>