// 自动生成：站点首页组件（源自底座 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";

/** Minimal：极简 AI 搜索引擎（一个框，一个任务） */


const navItems = [
  { label: "Search", href: "/tools" },
  { label: "Use Cases", href: "/ai-tools-for" },
  { label: "Rankings", href: "/rankings" },
  { label: "Submit", href: "/submit" },
];

const footerGroups = [
  {
    title: "Search",
    links: [
      { label: "All Tools", href: "/tools" },
      { label: "Use Cases", href: "/ai-tools-for" },
      { label: "Rankings", href: "/rankings" },
    ],
  },
  {
    title: "About",
    links: [
      { label: "Submit a Tool", href: "/submit" },
      { label: "Privacy", href: "/privacy" },
      { label: "Terms", href: "/terms" },
    ],
  },
];

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

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

  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 text-xs uppercase tracking-[0.35em] text-muted-foreground">
          AI tool search
        </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-full border border-border bg-background pl-14 pr-6 text-base text-foreground shadow-lg shadow-black/[0.03] 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="mx-auto mt-10 max-w-md border-t border-border/60 pt-5" />
        <div className="mt-6 flex flex-wrap items-center justify-center gap-2">
          {popularSearches.map((q) => (
            <LocaleLink
              key={q}
              href={`/tools?search=${encodeURIComponent(q)}`}
              className="rounded-full px-3 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
            >
              {q}
            </LocaleLink>
          ))}
        </div>
      </section>

      {/* 搜索之下：Trending */}
      {data.trending.length > 0 && (
        <section className="mx-auto w-full max-w-3xl px-4 pb-20 sm:px-6">
          <h2 className="mb-4 text-center text-xs font-medium uppercase tracking-[0.25em] text-muted-foreground">
            Trending now
          </h2>
          <ToolCardGrid tools={data.trending.slice(0, 4)} locale={locale} />
          <div className="mt-6 text-center">
            <LocaleLink
              href="/rankings"
              className="text-xs font-medium text-muted-foreground hover:text-primary"
            >
              {t("seeRankings")}
            </LocaleLink>
          </div>
        </section>
      )}
    </div>
  );
}

export { SiteHome };