import { SectionHeading, DevPlaceholder, ProductVisual, ArrowLink } from "@/components/ui";
import { products } from "@/lib/content";

export const metadata = { title: "产品中心" };

export default function ProductsPage() {
  return (
    <div className="container-shell py-20 sm:py-28">
      <SectionHeading eyebrow="Products" title="产品中心" description="围绕蓝牙周边、音频与智能硬件的产品结构。真实产品资料入库前，页面使用明确标注的开发占位数据。" />
      <div className="mt-12 flex flex-wrap gap-2 border-y border-line py-4">
        <span className="rounded-full bg-copy px-4 py-2 text-sm font-semibold text-ink">全部</span>
        <span className="rounded-full border border-line px-4 py-2 text-sm text-muted">无线音频</span>
        <span className="rounded-full border border-line px-4 py-2 text-sm text-muted">蓝牙配件</span>
        <span className="ml-auto self-center text-xs text-subtle">分类筛选将在 CMS 接入后启用</span>
      </div>
      <div className="mt-10 grid gap-6 lg:grid-cols-2">
        {products.map((product) => (
          <article className="overflow-hidden rounded-2xl border border-line bg-panel/50" key={product.slug}>
            <ProductVisual accent={product.accent} label={product.category.toUpperCase()} />
            <div className="p-6 sm:p-8">
              <DevPlaceholder>{product.shortLabel}</DevPlaceholder>
              <p className="mt-5 text-xs font-semibold uppercase tracking-[0.18em] text-subtle">{product.category}</p>
              <h2 className="mt-3 text-2xl font-semibold tracking-[-0.03em]">{product.name}</h2>
              <p className="mt-3 max-w-lg text-sm leading-7 text-muted">{product.summary}</p>
              <div className="mt-6"><ArrowLink href={`/products/${product.slug}`}>查看产品模板</ArrowLink></div>
            </div>
          </article>
        ))}
      </div>
    </div>
  );
}