---
import { Icon } from "astro-icon/components";
import AppLayout from "components/AppLayout/AppLayout.astro";
import Button from "components/Button.astro";
import LibraryGrid from "./_components/LibraryGrid.astro";
import ChronicleCard from "./_components/ChronicleCard.astro";
import LinkCard from "./_components/LinkCard.astro";
import { getI18n } from "src/i18n/i18n";
import { cache } from "src/utils/cachedPayload";

const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
---

{/* ------------------------------------------- HTML ------------------------------------------- */}

<AppLayout
  openGraph={{ title: t("home.title") }}
  backgroundImage={{
    url: "/img/background-image.webp",
    height: 2279,
    width: 1920,
  }}
  hideFooterLinks
  hideHomeButton>
  <div id="title" slot="header-title">
    <Icon name="accords" />
    <div>
      <h1 class="font-serif">{t("global.siteName")}</h1>
      <p>{t("global.siteSubtitle")}</p>
    </div>
  </div>
  <div id="description" slot="header-description">
    <p set:html={t("home.description")} class="high-contrast-text" />
    <a href={getLocalizedUrl("/about")} class="DEV_TODO">
      <Button title={t("home.aboutUsButton")} icon="material-symbols:left-click" />
    </a>
  </div>

  <div id="main">
    <section id="library" class="high-contrast-text">
      <h2>{t("home.librarySection.title")}</h2>
      <p set:html={t("home.librarySection.description")} />
      <a href={getLocalizedUrl("/search")} class="DEV_TODO">
        <Button
          class="section-button"
          title={t("home.librarySection.button")}
          icon="material-symbols:browse"
        />
      </a>
      <div class="grid">
        <LibraryGrid />
      </div>
    </section>

    <section class="DEV_TODO">
      <h2>{t("home.chroniclesSection.title")}</h2>
      <p set:html={t("home.chroniclesSection.description")} />
      <div class="flex">
        <ChronicleCard
          pretitle={"Preface"}
          title={"The Yokoverse"}
          subtitle={"Start reading the Chronicles here"}
          href={getLocalizedUrl("/chronicles/preface")}
        />
        <ChronicleCard
          pretitle={"Chapter 1"}
          title={"Drakengard 3"}
          subtitle={"A cursed world, and the girl who hated it"}
          href={getLocalizedUrl("/chronicles/drakengard-3")}
        />
        <ChronicleCard
          pretitle={"Chapter 2"}
          title={"Drakengard"}
          subtitle={"Humanity at its lowest"}
          href={getLocalizedUrl("/chronicles/drakengard")}
        />
        <ChronicleCard
          pretitle={"Chapter 3"}
          title={"NieR"}
          subtitle={"The Glory of Mankind comes to an abrupt End"}
          href={getLocalizedUrl("/chronicles/nier")}
        />
        <ChronicleCard
          pretitle={"Chapter 4"}
          title={"NieR:Automata"}
          subtitle={"Protagonists of Meaningless Stories"}
          href={getLocalizedUrl("/chronicles/nier-automata")}
        />
        <ChronicleCard
          pretitle={"Epilogue"}
          title={"Appendices"}
          subtitle={"Protagonists of Meaningless Stories"}
          href={getLocalizedUrl("/chronicles/nier-automata")}
        />
      </div>
    </section>

    <section class="DEV_TODO">
      <h2>{t("home.changesSection.title")}</h2>
      <p set:html={t("home.changesSection.description")} />
      <a href={getLocalizedUrl("/changelog")}>
        <Button
          class="section-button"
          title={t("home.changesSection.button")}
          icon="material-symbols:history"
        />
      </a>
    </section>

    <section>
      <h2>{t("home.moreSection.title")}</h2>
      <p set:html={t("home.moreSection.description")} />
      <div class="grid">
        <div class="DEV_TODO">
          <LinkCard
            icon="material-symbols:movie-outline"
            title={t("footer.links.videos.title")}
            subtitle={t("footer.links.videos.subtitle", { count: 2115 })}
            href={getLocalizedUrl("/videos")}
          />
          <LinkCard
            icon="material-symbols:folder-zip-outline"
            title={t("footer.links.webArchives.title")}
            subtitle={t("footer.links.webArchives.subtitle", { count: 20 })}
            href={getLocalizedUrl("/archives")}
          />
        </div>

        <LinkCard
          icon="material-symbols:calendar-month-outline"
          title={t("footer.links.timeline.title")}
          subtitle={t("footer.links.timeline.subtitle", {
            eraCount: cache.config.timeline.eras.length,
            eventCount: cache.config.timeline.eventCount,
          })}
          href={getLocalizedUrl("/timeline")}
        />

        <LinkCard
          icon="material-symbols:perm-media-outline"
          title={t("footer.links.gallery.title")}
          subtitle={t("footer.links.gallery.subtitle", { count: 5750 })}
          href="https://gallery.accords-library.com/posts"
        />
      </div>
    </section>

    <section>
      <h2>{t("home.linksSection.title")}</h2>
      <p set:html={t("home.linksSection.description")} />
      <div class="grid">
        <LinkCard
          icon="discord-brands"
          title={t("footer.socials.discord.title")}
          subtitle={t("footer.socials.discord.subtitle")}
          href="/discord"
        />
        <LinkCard
          icon="x-brands"
          title={t("footer.socials.twitter.title")}
          subtitle={t("footer.socials.twitter.subtitle")}
          href="https://twitter.com/AccordsLibrary"
        />
        <LinkCard
          icon="github-brands"
          title={t("footer.socials.github.title")}
          subtitle={t("footer.socials.github.subtitle")}
          href="https://github.com/Accords-Library"
        />
        <div class="DEV_TODO">
          <LinkCard
            icon="material-symbols:mail-outline"
            title={t("footer.socials.contact.title")}
            subtitle={t("footer.socials.contact.subtitle")}
            href={getLocalizedUrl("/contact")}
          />
        </div>
      </div>
    </section>
  </div>
</AppLayout>

{/* ------------------------------------------- CSS -------------------------------------------- */}

<style>
  #description {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;

    margin-bottom: 128px;

    > p {
      backdrop-filter: blur(5px);
      padding: 1em;
      margin: -1em;
      width: fit-content;

      border-radius: 5em;
    }

    @media (max-width: 35rem) {
      align-items: center;

      @media (max-width: 25rem) {
        align-items: stretch;
      }
    }
  }

  #title {
    display: flex;
    place-items: center;
    gap: 1em;

    & > svg {
      width: 64px;
      height: 64px;
    }

    & > div {
      & > h1 {
        margin: 0;
        line-height: 1;
        font-size: 52px;
        font-weight: 800;
      }

      & > p {
        line-height: 1;
        margin: 0;
        margin-top: -0.5em;
        font-size: 21px;
        font-weight: 600;
      }
    }

    @media (max-width: 35rem) {
      flex-direction: column;
      width: 100%;
      place-items: center;
      --container-width: calc((100vw - 48px));

      & > svg {
        width: calc(var(--container-width) / 3);
        height: calc(var(--container-width) / 3);
      }

      & > div {
        & > h1 {
          margin: 0;
          line-height: 1;
          font-size: calc(var(--container-width) / 9);
          font-weight: 800;
        }

        & > p {
          line-height: 1;
          margin: 0;
          margin-top: -0.5em;
          font-size: calc(var(--container-width) / 21.8);
          font-weight: 700;
        }
      }
    }
  }

  #main {
    display: grid;
    gap: 64px;
    margin-top: -96px;

    & > section {
      & > h2 {
        font-family: var(--font-serif);
        font-size: 30px;
      }

      & > p {
        max-width: 35em;
        line-height: 1.5;
        margin-top: 8px;
        margin-bottom: 24px;
      }

      & > a > :global(.section-button) {
        margin-bottom: 24px;
      }

      &#library {
        & > .grid {
          & > :global(a) {
            padding: 10%;

            @media (max-width: 40rem) {
              padding: 5%;
            }

            @media (max-width: 22rem) {
              padding: 10%;
            }
          }

          @media (max-width: 40rem) {
            grid-template-columns: 1fr 1fr;
          }

          @media (max-width: 22rem) {
            grid-template-columns: 1fr;
            gap: 12px;
          }
        }
      }

      & > .grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      }

      & > .flex {
        display: flex;
        flex-wrap: wrap;

        @media (max-width: 35rem) {
          display: grid;
          grid-template-columns: 1fr;
        }
      }

      & > .grid,
      & > .flex {
        gap: clamp(6px, 2vmin, 16px);

        @media (max-width: 22rem) {
          gap: 12px;
        }
      }
    }
  }
</style>