import { notFound } from "next/navigation";
import { ArrowRight } from "@/components/icons";
import { BrandIcon } from "@/components/brand-icon";
import { DevPlaceholder, FeatureList, PreviewNotice, ProductVisual } from "@/components/ui";
import { getProducts } from "@/lib/content";

export async function generateStaticParams() {
  return (await getProducts()).map((product) => ({ slug: product.slug }));
}

export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const product = (await getProducts()).find((item) => item.slug === slug);
  return { title: product?.name ?? "产品详情" };
}

export const dynamic = "force-dynamic";

export default async function ProductDetailPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const product = (await getProducts()).find((item) => item.slug === slug);
  if (!product) notFound();

  return (
    <div className="container-shell py-16 sm:py-24">
      <PreviewNotice>产品详情模板已完成；当前页面不代表真实产品发布状态。</PreviewNotice>
      <div className="mt-10 grid gap-12 lg:grid-cols-[1fr_0.85fr] lg:items-center">
        <div>
          <DevPlaceholder>{product.shortLabel}</DevPlaceholder>
          <p className="mt-6 text-xs font-semibold uppercase tracking-[0.2em] text-subtle">{product.category}</p>
          <h1 className="mt-4 max-w-xl text-5xl font-semibold tracking-[-0.06em] sm:text-7xl">{product.name}</h1>
          <p className="body-copy mt-7 max-w-lg text-lg">{product.summary}</p>
          <div className="mt-8 flex flex-wrap gap-3"><a className="button-primary" href="#details"><BrandIcon />查看内容结构 <ArrowRight /></a><a className="button-ghost" href="/contact"><BrandIcon />联系内容负责人</a></div>
        </div>
        <ProductVisual accent={product.accent} label={product.category.toUpperCase()} />
      </div>
      <section className="mt-24 grid gap-10 border-t border-line pt-12 lg:grid-cols-[0.8fr_1.2fr]" id="details">
        <div><p className="eyebrow eyebrow-blue">Product template</p><h2 className="mt-5 text-3xl font-semibold tracking-[-0.04em]">内容结构已就位，事实资料待填。</h2></div>
        <div className="grid gap-8 sm:grid-cols-2">
          <div><p className="text-xs font-semibold uppercase tracking-[0.18em] text-subtle">产品介绍</p><p className="mt-3 text-sm leading-7 text-muted">正式介绍文案待产品资料确认后录入。</p></div>
          <div><p className="text-xs font-semibold uppercase tracking-[0.18em] text-subtle">核心优势</p><FeatureList items={["真实卖点待确认", "规格字段预留", "应用场景待补充"]} /></div>
          <div><p className="text-xs font-semibold uppercase tracking-[0.18em] text-subtle">规格</p><p className="mt-3 text-sm leading-7 text-muted">不展示未经核实的型号、参数或认证信息。</p></div>
          <div><p className="text-xs font-semibold uppercase tracking-[0.18em] text-subtle">媒体与 FAQ</p><p className="mt-3 text-sm leading-7 text-muted">媒体素材和问答内容将在 CMS 阶段接入。</p></div>
        </div>
      </section>
    </div>
  );
}