---
import Button from "~/components/Button.astro"
import Description from "~/components/Description.astro"
import SocialMediaStrip from "~/components/SocialMediaStrip.astro"
import ArrowRightIcon from "~/icons/ArrowRightIcon.astro"
import Layout from "~/layouts/Layout.astro"

import whatsNewVideo from "~/assets/whats-new.mp4"
import Video from "~/components/Video.astro"
import { releaseNotes } from "~/release-notes"
import whatsNewText from "~/release-notes/whats-new.json"
import { getLocale, getUI } from "~/utils/i18n"
export { getStaticPaths } from "~/utils/i18n"

const latestVersion = releaseNotes[0]

const locale = getLocale(Astro)

const {
  routes: { whatsNew },
  layout,
} = getUI(locale)

// Just redirect to the release notes if we are in a patch version
if (latestVersion.version.split(".").length > 2 && whatsNewText[1] !== latestVersion.version) {
  return Astro.redirect(`/release-notes#${latestVersion.version}`)
}
---

<Layout title={layout.whatsNew.title.replace("{latestVersion.version}", latestVersion.version)}>
  <main
    class="xl:mt-22 container flex flex-col gap-12 py-12 xl:grid xl:min-h-[calc(100vh-12rem)] xl:grid-cols-[2fr_3fr]"
  >
    <div class="flex flex-col gap-8">
      <div>
        <Description class="text-5xl font-bold md:text-6xl"
          >{whatsNew.title.replace("{latestVersion.version}", latestVersion.version)}</Description
        >
        <Description>{latestVersion.date}</Description>
      </div>
      <div>
        <Fragment set:html={whatsNewText[0].replace(/\n/g, "<br>")} />
      </div>
      <ul class="hidden list-disc flex-col gap-2 xl:container xl:flex">
        <a href="https://github.com/zen-browser/desktop/issues/new/choose" target="_blank">
          <li>
            <Description class="text-base font-bold">
              {whatsNew.reportIssue}
            </Description>
          </li>
        </a>
        <a href="https://discord.gg/zen-browser" target="_blank">
          <li>
            <Description class="text-base font-bold">
              {whatsNew.joinDiscord}
            </Description>
          </li>
        </a>
      </ul>
      <div class="flex flex-wrap gap-8 place-self-start xl:place-self-center">
        <Button
          href={`/release-notes#${latestVersion.version}`}
          isPrimary
          class="flex w-fit items-center gap-2"
        >
          <span>{whatsNew.readFullReleaseNotes}</span>
          <ArrowRightIcon />
        </Button>
        <SocialMediaStrip gap="6" />
      </div>
    </div>

    <Video
      src={whatsNewVideo}
      autoplay
      loop
      muted
      playsinline
      preload="none"
      class="rounded-3xl object-cover shadow-lg"
    />
  </main>
</Layout>