---
import BaseLayout from "@/layouts/BaseLayout.astro";
import PostList from "@/components/Posts/PostList.astro";
import Remark42LatestComments from "@/components/remark42-latest-comments.svelte";
import LatestComments from "@/components/LatestComments.astro";
import { getLangFromUrl, getTranslations } from "@/i18n";
import "@/styles/global.css";

export function getStaticPaths() {
  return [{ params: { lang: "zh" } }, { params: { lang: "en" } }];
}

const lang = getLangFromUrl(Astro.url);
const t = getTranslations(lang);
const headerTitle = lang === "zh" ? "Cloverta的博客" : "Cloverta's blog";
const pageTitle = t.home.title;
const rssLink = lang === "zh" ? "/rss.xml" : "/en/rss.xml"
---

<BaseLayout pageTitle=`${headerTitle} - ${t.banner.subtitle}`>
  <h1 class="page-title">
    <span>{pageTitle}</span>
    <a
      href={rssLink}
      target="_blank"
      rel="noopener noreferrer"
      aria-label="RSS Feed"
      class="rss-link"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="currentColor"
        width="33"
        height="33"
        aria-hidden="true"
        style="margin-left: 0px; margin-bottom: -5px; color:#3f50e5"
      >
        <path
          d="M6.18 17.82a1.64 1.64 0 1 1 0 3.28 1.64 1.64 0 0 1 0-3.28ZM3 10.44v2.25c4.56 0 8.27 3.71 8.27 8.27h2.25C13.52 15.16 8.84 10.44 3 10.44Zm0-4.54v2.25c7.06 0 12.81 5.75 12.81 12.81h2.25C18.06 12.66 11.3 5.9 3 5.9Z"
        ></path>
      </svg>
    </a>
  </h1>
  <div class="content">
    {t.home.content.map((line: string) => <p set:html={line} />)}
  </div>

  <div class="section-divider"></div>

  <h2>{t.home.latestTitle}</h2>

  <PostList />

  <div class="section-divider"></div>

  <!-- <Remark42LatestComments lang={lang} client:load /> -->
  <LatestComments />
</BaseLayout>

<style>
  .section-divider {
    height: 1px;
    background: #cdd2d8;
    margin: 1.5rem 0;
    opacity: 0.8;
  }

  :global(.dark) .section-divider {
    background: #7f8b97;
  }

  .page-title {
    font-weight: 700;
  }
</style>