// 自动生成：站点首页组件（源自底座 classic 形态，品牌来自 @/site/brand）
import { siteConfig } from "@/site/brand";
import { Search, TrendingUp, Sparkles, Clock, Award, LayoutGrid, MessageSquareQuote } from "lucide-react";
import { getTranslations } from "next-intl/server";
import { ToolCard, ToolCardGrid } from "@/components/tool-card";
import { LocaleLink } from "@/components/locale-link";
import { SectionHeader } from "@/kit/section";
import { ThemeHeader } from "@/kit/theme-header";
import { ThemeFooter } from "@/kit/theme-footer";
import { getHomeDataSafe } from "@/kit/home-data";

/** Classic：专业 AI Directory（Clean / Dense / Professional） */


const navItems = [
  { label: "Discover", href: "/tools" },
  { label: "Categories", href: "/tools" },
  { label: "Use Cases", href: "/ai-tools-for" },
  { label: "Best Lists", href: "/best" },
  { label: "Rankings", href: "/rankings" },
  { label: "Blog", href: "/blog" },
  { label: "Submit", href: "/submit" },
];

const footerGroups = [
  {
    title: "Discover",
    links: [
      { label: "All Tools", href: "/tools" },
      { label: "Use Cases", href: "/ai-tools-for" },
      { label: "Best Lists", href: "/best" },
      { label: "Rankings", href: "/rankings" },
    ],
  },
  {
    title: "Community",
    links: [
      { label: "Submit a Tool", href: "/submit" },
      { label: "Blog", href: "/blog" },
      { label: "Dashboard", href: "/dashboard" },
    ],
  },
  {
    title: "Legal",
    links: [
      { label: "Terms", href: "/terms" },
      { label: "Privacy", href: "/privacy" },
      { label: "Contact", href: "/contact" },
    ],
  },
];

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

  return (
    <div className="bg-background">
      {/* Hero */}
      <section className="hero-dark border-b border-border">
        <div className="mx-auto max-w-7xl px-4 py-16 text-center sm:px-6 md:py-24">
          <h1 className="mx-auto max-w-3xl text-3xl font-bold tracking-tight text-foreground sm:text-4xl md:text-5xl">
            {th("title")}
          </h1>
          <p className="mx-auto mt-4 max-w-2xl text-sm text-muted-foreground sm:text-base">
            {th("description")}
          </p>
          <form action={`/${locale}/tools`} className="mx-auto mt-8 max-w-xl">
            <div className="relative">
              <Search className="absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <input
                name="search"
                placeholder={t("searchPlaceholder")}
                className="h-12 w-full rounded-full border border-border bg-background pl-11 pr-28 text-sm text-foreground shadow-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/30"
                aria-label="Search AI tools"
              />
              <button
                type="submit"
                className="absolute right-1.5 top-1.5 h-9 rounded-full bg-primary px-5 text-xs font-semibold text-primary-foreground transition-opacity hover:opacity-90"
              >
                {t("searchButton")}
              </button>
            </div>
          </form>

          {/* 统计条（深色 Hero 内的白色数字） */}
          <div className="mx-auto mt-10 flex max-w-lg items-center justify-center gap-10 border-t border-white/15 pt-6">
            {[
              { v: "1,000+", l: "AI tools" },
              { v: "14", l: "Categories" },
              { v: "7", l: "Rankings" },
            ].map((s) => (
              <div key={s.l} className="text-center">
                <div className="text-2xl font-bold text-white">{s.v}</div>
                <div className="text-xs text-white/60">{s.l}</div>
              </div>
            ))}
          </div>

          <div className="mt-8 flex flex-wrap items-center justify-center gap-2 text-xs">
            <span className="text-white/60">{t("popularLabel")}</span>
            {t.raw("popularSearches").map((q: string) => (
              <LocaleLink
                key={q}
                href={`/tools?search=${q}`}
                className="rounded-full bg-white/10 px-2.5 py-1 text-white/80 transition-colors hover:bg-white/20"
              >
                {q}
              </LocaleLink>
            ))}
          </div>
        </div>
      </section>

      <div className="mx-auto max-w-7xl space-y-12 px-4 py-12 sm:px-6">
        {/* Trending */}
        {data.trending.length > 0 && (
          <section>
            <SectionHeader
              title={t("trendingTitle")}
              subtitle={t("trendingSubtitle")}
              viewAllHref="/rankings?board=trending"
              viewAllLabel={t("allRankings")}
            />
            <ToolCardGrid tools={data.trending} locale={locale} ranked />
          </section>
        )}

        {/* Categories */}
        {data.categories.length > 0 && (
          <section>
            <SectionHeader
              title={t("categoriesTitle")}
              viewAllHref="/tools"
              viewAllLabel={t("categoriesViewAll")}
            />
            <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
              {data.categories.slice(0, 10).map((category) => (
                <LocaleLink
                  key={category.id}
                  href={`/category/${category.slug}`}
                  className="group rounded-xl border border-border p-4 transition-all hover:border-primary/30 hover:shadow-sm"
                >
                  <LayoutGrid className="h-4 w-4 text-primary" />
                  <h3 className="mt-2 truncate text-sm font-medium text-foreground group-hover:text-primary">
                    {locale === "zh" && category.nameZh
                      ? category.nameZh
                      : category.nameEn}
                  </h3>
                  <p className="mt-0.5 text-xs text-muted-foreground tabular-nums">
                    {category.toolCount} tools
                  </p>
                </LocaleLink>
              ))}
            </div>
          </section>
        )}

        {/* New + Editor's Choice 两列 */}
        <div className="grid gap-12 lg:grid-cols-2">
          {data.newest.length > 0 && (
            <section>
              <SectionHeader
                title={t("newTitle")}
                viewAllHref="/rankings?board=new"
              />
              <ToolCardGrid tools={data.newest.slice(0, 4)} locale={locale} />
            </section>
          )}
          {data.editorsChoice.length > 0 && (
            <section>
              <SectionHeader
                title={t("editorsTitle")}
                viewAllHref="/rankings?board=editors-choice"
              />
              <ToolCardGrid tools={data.editorsChoice.slice(0, 4)} locale={locale} />
            </section>
          )}
        </div>

        {/* Use Cases */}
        {data.useCases.length > 0 && (
          <section>
            <SectionHeader
              title={t("useCasesTitle")}
              subtitle={t("useCasesSubtitle")}
              viewAllHref="/ai-tools-for"
              viewAllLabel={t("useCasesViewAll")}
            />
            <div className="flex flex-wrap gap-2">
              {data.useCases.slice(0, 12).map((uc) => (
                <LocaleLink
                  key={uc.id}
                  href={`/ai-tools-for/${uc.slug}`}
                  className="rounded-full border border-border px-3.5 py-1.5 text-xs text-foreground transition-colors hover:border-primary/40 hover:bg-primary/5"
                >
                  {locale === "zh" && uc.nameZh ? uc.nameZh : uc.nameEn}
                  <span className="ml-1.5 text-muted-foreground tabular-nums">
                    {uc.toolCount}
                  </span>
                </LocaleLink>
              ))}
            </div>
          </section>
        )}

        {/* Best Lists */}
        {data.collections.length > 0 && (
          <section>
            <SectionHeader
              title={t("bestListsTitle")}
              subtitle={t("bestListsSubtitle")}
              viewAllHref="/best"
              viewAllLabel={t("bestListsViewAll")}
            />
            <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
              {data.collections.slice(0, 3).map((col) => (
                <LocaleLink
                  key={col.id}
                  href={`/best/${col.slug}`}
                  className="group rounded-xl border border-border p-5 transition-all hover:border-primary/30 hover:shadow-sm"
                >
                  <Award className="h-4 w-4 text-primary" />
                  <h3 className="mt-2 text-sm font-semibold text-foreground group-hover:text-primary">
                    {locale === "zh" && col.nameZh ? col.nameZh : col.nameEn}
                  </h3>
                  <p className="mt-1 line-clamp-2 text-xs text-muted-foreground">
                    {locale === "zh" && col.introZh ? col.introZh : col.introEn}
                  </p>
                  <p className="mt-2 text-xs text-muted-foreground tabular-nums">
                    {col.toolCount} tools
                  </p>
                </LocaleLink>
              ))}
            </div>
          </section>
        )}

        {/* Latest Reviews */}
        {data.latestReviews.length > 0 && (
          <section>
            <SectionHeader title={t("reviewsTitle")} />
            <div className="grid gap-3 md:grid-cols-2">
              {data.latestReviews.map((review, i) => (
                <LocaleLink
                  key={i}
                  href={`/tools/${review.toolSlug}#reviews`}
                  className="rounded-xl border border-border p-4 transition-colors hover:border-primary/30"
                >
                  <div className="flex items-center gap-2">
                    <MessageSquareQuote className="h-3.5 w-3.5 text-primary" />
                    <span className="text-xs font-medium text-foreground">
                      {review.authorName}
                    </span>
                    <span className="text-xs text-muted-foreground">
                      on {review.toolName}
                    </span>
                    <span className="ml-auto text-xs font-semibold text-amber-500 tabular-nums">
                      {review.rating}/5
                    </span>
                  </div>
                  <p className="mt-2 line-clamp-2 text-xs leading-relaxed text-muted-foreground">
                    {review.content}
                  </p>
                </LocaleLink>
              ))}
            </div>
          </section>
        )}

        {/* Submit CTA */}
        <section className="rounded-2xl border border-border bg-secondary/30 p-8 text-center">
          <Sparkles className="mx-auto h-5 w-5 text-primary" />
          <h2 className="mt-3 text-lg font-semibold text-foreground">
            Built an AI tool?
          </h2>
          <p className="mx-auto mt-1 max-w-md text-sm text-muted-foreground">
            Submit it to {siteConfig.brand.name} and get discovered by thousands of users
            looking for tools like yours.
          </p>
          <LocaleLink
            href="/submit"
            className="mt-4 inline-flex items-center gap-1.5 rounded-full bg-primary px-5 py-2 text-sm font-semibold text-primary-foreground transition-opacity hover:opacity-90"
          >
            <TrendingUp className="h-4 w-4" />
            Submit your tool
          </LocaleLink>
        </section>
      </div>
    </div>
  );
}

export { SiteHome };