import type { Metadata } from "next";
import Link from "next/link";

import { ContactForm } from "./ContactForm";

export const metadata: Metadata = {
  title: "Liên hệ",
  description:
    "Liên hệ Cổ Thư Kỳ Phổ — góp ý, hợp tác, hoặc hỏi về lá số, gieo quẻ và nội dung trên trang.",
};

export default function ContactPage() {
  return (
    <main className="mx-auto max-w-[1100px] flex-1 px-4 py-16 sm:px-8 sm:py-20 lg:py-24">
      <article className="mx-auto max-w-xl">
        <header className="text-center">
          <div className="ctkp-rule mx-auto mb-8 w-20 opacity-80" aria-hidden />
          <p className="ctkp-eyebrow tracking-[0.36em]">Cổ thư · liên lạc</p>
          <h1 className="font-ctkp-display mt-5 text-[2rem] font-semibold leading-[1.12] tracking-tight text-stone-100 sm:text-[2.35rem] sm:leading-[1.08]">
            Liên hệ
          </h1>
        </header>

        <div className="mt-14 space-y-6 text-[15px] leading-[1.88] text-stone-400 sm:text-base sm:leading-[1.85]">
          <p>
            Nếu bạn có góp ý về nội dung, muốn hỏi cách dùng lá số hay gieo quẻ, hoặc chỉ muốn để lại vài dòng — chúng
            tôi luôn trân trọng. Khi đã mở kênh liên hệ thật, chúng tôi đọc chậm và trả lời có chọn lọc.
          </p>
          <p className="text-sm text-stone-500">
            Phần biểu mẫu phía dưới là <span className="font-medium text-stone-400">bản mô phỏng</span>: giúp bạn hình
            dung cách viết tin; <span className="font-medium text-stone-400">không</span> gửi dữ liệu tới máy chủ.
          </p>
        </div>

        <div className="mt-10 rounded-2xl border border-amber-950/25 bg-stone-950/35 px-5 py-6 sm:px-6 sm:py-7">
          <h2 className="font-ctkp-display text-base font-semibold text-amber-100/90 sm:text-lg">
            Liên hệ thật — đang chuẩn bị
          </h2>
          <p className="mt-2 text-sm leading-relaxed text-stone-500">
            Email và kênh chính thức sẽ được công bố trên trang khi chúng tôi sẵn sàng nhận thư. Hiện chưa có địa chỉ
            công khai; biểu mẫu dưới đây chỉ để xem trước giao diện, không thay cho gửi tin.
          </p>
        </div>

        <ContactForm />

        <div className="ctkp-rule mx-auto my-14 max-w-[10rem] opacity-50" aria-hidden />

        <p className="text-center">
          <Link href="/" className="ctkp-text-link text-sm">
            ← Về trang chủ
          </Link>
        </p>
      </article>
    </main>
  );
}