---
import { alternatePath, type Locale, t } from "@app/i18n";
import AppLayout from "~/layouts/AppLayout.astro";

export interface Props {
  locale: Locale;
}

const { locale } = Astro.props;
const tr = (key: Parameters<typeof t>[1]) => t(locale, key);
const otherLocale: Locale = locale === "zh-CN" ? "en" : "zh-CN";
const switchHref = alternatePath(Astro.url.pathname, otherLocale);
const dashHref = locale === "zh-CN" ? "/zh-CN/dashboard" : "/en/dashboard";
const loginHref = locale === "zh-CN" ? "/zh-CN/auth/login" : "/en/auth/login";
---

<AppLayout
  title={tr("home.title")}
  locale={locale}
  nav={[]}
  switchHref={switchHref}
  switchLabel={t(otherLocale, `locale.${otherLocale}` as never)}
>
  <section class="space-y-10 py-10">
    <div class="u-reveal">
      <p class="u-label u-label-edge">{tr("meta.tagline")}</p>
      <h1 class="mt-3 text-[40px] font-black tracking-tight leading-[1.05]">
        {tr("home.heroLine1")}<br />{tr("home.heroLine2")}
      </h1>
      <span class="u-edge-bar mt-5"></span>
      <p class="mt-5 max-w-xl text-[14px] leading-relaxed" style="color: var(--ink-2);">
        {tr("home.subtitle")}
      </p>
      <div class="mt-8 flex flex-wrap gap-3">
        <a href={dashHref} class="u-btn u-btn--edge">{tr("home.ctaDashboard")}</a>
        <a href={loginHref} class="u-btn u-btn--ghost">{tr("home.ctaLogin")}</a>
      </div>
    </div>

    <div class="grid gap-6 md:grid-cols-2">
      <section class="u-card p-6 u-reveal">
        <p class="u-label">{tr("home.stackTitle")}</p>
        <p class="mt-3 text-[14px] leading-relaxed" style="color: var(--ink-2);">
          {tr("home.stackBody")}
        </p>
      </section>
      <section class="u-card p-6 u-reveal">
        <p class="u-label">{tr("home.layerTitle")}</p>
        <p class="mt-3 text-[14px] leading-relaxed" style="color: var(--ink-2);">
          {tr("home.layerBody")}
        </p>
      </section>
    </div>
  </section>
</AppLayout>