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

import { isBetaPublicSurfaceEnabled } from "@/lib/betaVisibility";

import { TuViForm } from "./TuViForm";

export const metadata: Metadata = {
  title: "Lá số",
  description: "Nhập họ tên, ngày giờ sinh để mở lá số — dữ liệu lưu trên trình duyệt, Cổ Thư Kỳ Phổ.",
};

export default function TuViPage() {
  const betaSurface = isBetaPublicSurfaceEnabled();
  return (
    <main className="ctkp-fade-in-slow ctkp-result-canvas ctkp-tuvi-dashboard-canvas relative flex flex-1 flex-col overflow-x-hidden">
      <div className="pointer-events-none absolute inset-0 z-0 opacity-[0.35]" aria-hidden>
        <div className="ctkp-tuvi-dash-particles !opacity-100" />
      </div>
      <section className="ctkp-hero relative z-[1] left-1/2 right-1/2 -ml-[50vw] -mr-[50vw] w-screen">
        <div className="ctkp-hero-glow" aria-hidden />
        <div className="ctkp-hero-shimmer ctkp-hero-dust" aria-hidden />
        <div className="ctkp-hero-orbit" aria-hidden />
        <div className="relative z-[1] mx-auto max-w-2xl px-4 pb-12 pt-14 text-center sm:px-8 sm:pb-16 sm:pt-24">
          <div className="ctkp-rule mx-auto mb-7 w-24 opacity-[0.85] sm:mb-9" aria-hidden />
          <p className="ctkp-eyebrow ctkp-eyebrow--hero">Lá số · thư quán tĩnh</p>
          <h1 className="font-ctkp-display mt-7 text-pretty text-[clamp(2rem,6.5vw,3.15rem)] font-semibold leading-[1.06] tracking-[0.02em] text-[color:var(--ctkp-text-main)] sm:mt-8">
            Mở lá số
          </h1>
          <p className="mx-auto mt-6 max-w-lg text-pretty font-sans text-[15px] leading-[1.9] text-[color:var(--ctkp-text-secondary)] sm:mt-7 sm:text-[15.5px]">
            Ghi lại thời khắc chào đời để khai mở lá số — như khép một nếp sách cũ. Chọn{" "}
            <span className="text-[color:var(--ctkp-gold-bright)]/80">dương lịch</span> hoặc{" "}
            <span className="text-[color:var(--ctkp-gold-bright)]/80">âm lịch</span> theo điều gia đình hay giấy tờ còn
            giữ; giờ luôn theo 24 giờ. Một mốc ngày giờ trung thực, một lá duy nhất.
          </p>
        </div>
      </section>

      <div className="relative z-[1] mx-auto w-full min-w-0 max-w-4xl flex-1 px-4 pb-12 sm:px-8 sm:pb-16">
        <Suspense fallback={null}>
          <TuViForm />
        </Suspense>
        <p className="mt-11 text-center font-sans text-[13px] text-[color:var(--ctkp-text-secondary)]/85 sm:mt-14">
          <Link href="/tu-vi/compatibility" className="ctkp-text-link">
            Đối chiếu hai lá (beta)
          </Link>
          <span className="mx-2 text-[color:var(--ctkp-text-secondary)]/50" aria-hidden>
            ·
          </span>
          <Link href="/tu-vi/da-luu" className="ctkp-text-link">
            Lá số đã lưu
          </Link>
          {!betaSurface ?
            <>
              <span className="mx-2 text-[color:var(--ctkp-text-secondary)]/50" aria-hidden>
                ·
              </span>
              <Link href="/fortune/history" className="ctkp-text-link">
                Đã ghi trước đó? Mở nhật ký
              </Link>
            </>
          : null}
        </p>
        <p className="mt-3 text-center font-sans text-[13px] text-[color:var(--ctkp-text-secondary)]/85">
          Muốn hỏi bằng quẻ trước?{" "}
          <Link href={betaSurface ? "/gieo-que" : "/fortune"} className="ctkp-text-link">
            {betaSurface ? "Sang gieo quẻ (X:Y)" : "Sang bàn gieo"}
          </Link>
        </p>
      </div>
    </main>
  );
}