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

import { BirthTimeReconstructionWizard } from "@/features/birth-time-reconstruction/BirthTimeReconstructionWizard";

export const metadata: Metadata = {
  title: "Gợi ý giờ sinh",
  description:
    "Khảo sát sự kiện đời để gợi ý khung giờ sinh sơ bộ — Cổ Thư Kỳ Phổ (bản thử, chưa gắn engine đầy đủ).",
};

export default function BirthTimeReconstructionPage() {
  return (
    <main className="ctkp-fade-in-slow ctkp-result-canvas relative flex flex-1 flex-col overflow-x-hidden">
      <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="relative z-[1] mx-auto max-w-2xl px-4 pb-10 pt-14 text-center sm:px-8 sm:pb-12 sm:pt-20">
          <div className="ctkp-rule mx-auto mb-7 w-24 opacity-[0.85]" aria-hidden />
          <p className="ctkp-eyebrow ctkp-eyebrow--hero">Không rõ giờ sinh</p>
          <h1 className="font-ctkp-display mt-7 text-pretty text-[clamp(1.75rem,5vw,2.5rem)] font-semibold leading-[1.08] tracking-[0.02em] text-[color:var(--ctkp-text-main)] sm:mt-8">
            Gợi ý khung giờ từ nhịp đời
          </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]">
            Trả lời vài mốc trong đời — chúng tôi ghi nhận và trả về{" "}
            <span className="text-[color:var(--ctkp-gold-bright)]/85">hai khung giờ gợi ý sơ bộ</span>. Bản v1 chưa gắn
            engine tử vi đầy đủ; kết quả mang tính thử nghiệm.
          </p>
        </div>
      </section>

      <div className="relative z-[1] mx-auto w-full min-w-0 max-w-xl flex-1 px-4 pb-16 sm:px-8 sm:pb-24 md:max-w-2xl">
        <BirthTimeReconstructionWizard />
        <p className="mt-10 text-center font-sans text-[13px] text-[color:var(--ctkp-text-secondary)]/85">
          Đã có giờ chính xác?{" "}
          <Link href="/tu-vi" className="ctkp-text-link">
            Mở lá số
          </Link>
        </p>
      </div>
    </main>
  );
}