// 自动生成：站点首页组件（源自底座 minimal 形态，品牌来自 @/site/brand）
import { siteConfig } from "@/site/brand";
import { Search } from "lucide-react";
import { getTranslations } from "next-intl/server";
import { ToolCardGrid } from "@/components/tool-card";
import { LocaleLink } from "@/components/locale-link";
import { getHomeDataSafe } from "@/kit/home-data";

async function SiteHome({ locale }: { locale: string }) {
  const t = await getTranslations("siteHome");
  const th = await getTranslations("hero");
  const data = await getHomeDataSafe(6);

  const popularSearches = [
    "write a blog post",
    "generate video",
    "code assistant",
    "make a logo",
    "edit photos",
    "transcribe meetings",
  ];

  return (
    <div className="flex min-h-screen flex-col bg-background">
      {/* 极简搜索首屏 */}
      <section className="flex flex-1 flex-col items-center justify-center px-4 pb-16 pt-24 text-center">
        <LocaleLink href="/" className="text-3xl font-bold tracking-tight text-foreground">
          {siteConfig.brand.name}
        </LocaleLink>
        <p className="mt-1.5 text-sm text-muted-foreground">
          {siteConfig.brand.tagline.replace(/\.$/, "")}
        </p>

        <form action={`/${locale}/tools`} className="mt-10 w-full max-w-xl">
          <div className="relative">
            <Search className="absolute left-5 top-1/2 h-5 w-5 -translate-y-1/2 text-muted-foreground" />
            <input
              name="search"
              autoFocus
              placeholder={t("minimalPlaceholder")}
              className="h-14 w-full rounded-xl border border-border bg-background pl-14 pr-6 text-base text-foreground shadow-sm placeholder:text-muted-foreground focus:border-primary/50 focus:outline-none focus:ring-4 focus:ring-primary/10"
              aria-label="Search AI tools"
            />
          </div>
        </form>

        <div className="mt-8 flex flex-wrap items-center justify-center gap-x-5 gap-y-2">
          {popularSearches.map((q) => (
            <LocaleLink
              key={q}
              href={`/tools?search=${encodeURIComponent(q)}`}
              className="text-xs text-muted-foreground underline-offset-4 transition-colors hover:text-foreground hover:underline"
            >
              {q}
            </LocaleLink>
          ))}
        </div>
      </section>

      {/* 搜索之下：Trending */}
      {data.trending.length > 0 && (
        <section className="site-container px-4 pb-20 sm:px-6">
          <div className="mb-4 flex items-baseline justify-between border-b border-border pb-3">
            <h2 className="text-sm font-semibold text-foreground">Trending now</h2>
            <LocaleLink
              href="/rankings"
              className="text-xs text-muted-foreground underline-offset-4 hover:text-foreground hover:underline"
            >
              {t("seeRankings")}
            </LocaleLink>
          </div>
          <ToolCardGrid tools={data.trending.slice(0, 4)} locale={locale} />
        </section>
      )}
    </div>
  );
}
export { SiteHome };