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

import { GieoQueForm } from "./GieoQueForm";

export const metadata: Metadata = {
  title: "Gieo quẻ",
  description:
    "Dừng một nhịp, chọn con số hoặc thời khắc — gieo quẻ Kinh Dịch (quẻ chính, hào động, quẻ biến) trên Cổ Thư Kỳ Phổ.",
};

export default function FortunePage() {
  return (
    <main className="mx-auto min-w-0 max-w-lg px-4 py-12 sm:px-8 sm:py-20">
      <div className="ctkp-rule mb-6 w-20 opacity-80 sm:mb-8" aria-hidden />
      <p className="ctkp-eyebrow">Kinh Dịch · bàn gieo</p>
      <h1 className="font-ctkp-display mt-4 text-pretty text-[clamp(1.65rem,6vw,2.25rem)] font-semibold tracking-tight text-stone-50 sm:text-[2.25rem]">
        Gieo một quẻ
      </h1>
      <p className="mt-4 text-pretty text-sm leading-relaxed text-stone-500">
        Một nhịp nhỏ trước khi xem quẻ: nghĩ về điều bạn đang cần gợi ý — hoặc để tâm trống, chỉ muốn xem quẻ mở ra
        thế nào. Sau đó chọn <strong className="font-medium text-stone-400">một con số</strong> làm gốc, hoặc để{" "}
        <strong className="font-medium text-stone-400">thời điểm bạn nhấn gieo</strong> dẫn quẻ.
      </p>
      <p className="mt-3 text-sm leading-relaxed text-stone-500">
        Kết quả gồm <strong className="font-medium text-stone-400">quẻ chính</strong>,{" "}
        <strong className="font-medium text-stone-400">hào động</strong> và{" "}
        <strong className="font-medium text-stone-400">quẻ biến</strong>, lấy từ ba tiền và gốc bạn chọn (bản nháp;
        kinh văn từng hào sẽ bổ sung sau). Đây là công cụ chiêm nghiệm, không thay cho quyết định của bạn.
      </p>
      <GieoQueForm />
      <p className="mt-10 text-center text-sm text-stone-600">
        <Link href="/fortune/history" className="ctkp-text-link">
          Đã gieo trước đó? Mở nhật ký
        </Link>
      </p>
    </main>
  );
}