import Link from "next/link";
import { ArrowRight } from "@/components/icons";
import { BrandIcon } from "@/components/brand-icon";
import { PreviewNotice, SectionHeading, StatusCard } from "@/components/ui";

export const metadata = { title: "联系我们" };

export default function ContactPage() {
  return (
    <div className="container-shell py-20 sm:py-28">
      <SectionHeading eyebrow="Contact" title="让我们从真实需求开始。" description="正式联系方式尚未确认。本页先完成联系信息布局和内容边界，不展示虚构的电话、邮箱或地址。" />
      <div className="mt-12"><PreviewNotice>联系表单暂不提交数据，也不会显示“发送成功”。待联系方式和服务端处理方案确认后再启用。</PreviewNotice></div>
      <div className="mt-8 grid gap-5 md:grid-cols-3">
        <StatusCard title="业务合作" description="联系方式待确认" />
        <StatusCard title="产品咨询" description="产品资料待确认" tone="info" />
        <StatusCard title="技术交流" description="技术联系渠道待确认" tone="success" />
      </div>
      <div className="mt-12 rounded-2xl border border-line bg-panel/50 p-6 sm:p-8">
        <p className="text-sm font-semibold text-copy">需要查看当前项目能力？</p>
        <p className="mt-2 text-sm leading-7 text-muted">可以先浏览产品结构或打开 AI Lab 的 TTS 工作台预览。</p>
        <div className="mt-6 flex flex-wrap gap-3"><Link className="button-secondary" href="/products"><BrandIcon />查看产品 <ArrowRight /></Link><Link className="button-ghost" href="/tts"><BrandIcon />查看 AI Lab</Link></div>
      </div>
    </div>
  );
}