import type { Metadata } from 'next';
import { publicApi } from '@/lib/services';
import { ContactForm } from '@/components/front/ContactForm';

export const metadata: Metadata = {
  title: '联系我们',
  description: '通过电话、邮箱或在线留言与我们取得联系。',
};

export const revalidate = 60;

export default async function ContactPage() {
  const config = await publicApi.getSiteConfig().catch(() => null);
  return (
    <div className="container-page py-12">
      <h1 className="text-3xl font-bold text-gray-900">联系我们</h1>
      <p className="mt-2 text-sm text-gray-500">
        我们期待您的来访与咨询
      </p>

      <div className="mt-10 grid gap-10 md:grid-cols-2">
        <div>
          <h2 className="text-lg font-semibold text-gray-900">联系方式</h2>
          <ul className="mt-4 space-y-4 text-sm text-gray-700">
            {config?.tel && (
              <li>
                <div className="text-gray-400">客服电话</div>
                <div className="text-base">{config.tel}</div>
              </li>
            )}
            {config?.email && (
              <li>
                <div className="text-gray-400">商务邮箱</div>
                <div className="text-base">{config.email}</div>
              </li>
            )}
            {config?.address && (
              <li>
                <div className="text-gray-400">公司地址</div>
                <div className="text-base">{config.address}</div>
              </li>
            )}
          </ul>
        </div>
        <div className="rounded-lg border border-gray-200 p-6">
          <h2 className="text-lg font-semibold text-gray-900">在线留言</h2>
          <div className="mt-4">
            <ContactForm />
          </div>
        </div>
      </div>
    </div>
  );
}