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

export const metadata: Metadata = {
  title: "Giới thiệu",
  description:
    "Tinh thần Cổ Thư Kỳ Phổ — không gian cho tri thức xưa, tử vi và quẻ dịch, đọc chậm và chiêm nghiệm.",
};

export default function AboutPage() {
  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ư · lời mở đầu</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]">
            Về Cổ Thư Kỳ Phổ
          </h1>
        </header>

        <div className="mt-14 space-y-9 text-[15px] leading-[1.88] text-stone-400 sm:text-base sm:leading-[1.85]">
          <p>
            <span className="text-stone-300">Cổ Thư Kỳ Phổ</span> là một khoảng yên giữa ồn ào — nơi chữ
            xưa, sao trời và quẻ dịch không được dùng để thay bạn quyết định, mà để bạn dừng lại, hỏi mình
            và lắng nghe.
          </p>
          <p>
            Chúng tôi tin vào sức mạnh của sự chậm: một bài đọc kỹ, một lá số xem như gương soi, một quẻ
            như dòng nước gợi ý — không phép màu, không lời hứa hão. Chỉ có tri thức đã được thời gian sàng
            lọc, trình bày trang trọng và khiêm nhường.
          </p>
          <p>
            Tử vi và gieo quẻ ở đây là lối vào chiêm nghiệm: gợi hướng, không phán quyết. Bài viết là những trang đã
            ấn — chọn lọc, để bạn tự nối với lời cũ theo nhịp riêng.
          </p>
        </div>

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

        <p className="text-center font-ctkp-display text-lg leading-relaxed text-stone-300 sm:text-xl">
          Im lặng cũng là một lời đáp.
        </p>
        <p className="mx-auto mt-4 max-w-md text-center text-sm leading-relaxed text-stone-500">
          Nếu bạn cảm thấy điều gì đó rung trong lòng khi lướt qua trang này — có lẽ đó đã là đủ cho hôm nay.
        </p>

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