import type { Metadata } from "next";
import Image from "next/image";
import { Boxes, ScanLine, Sparkles } from "lucide-react";
import AntiquityShowcaseClient from "./AntiquityShowcaseClient";
import { BackToTopButton } from "@/app/components/landing/BackToTopButton";
import { HeritageSeal } from "@/app/components/landing/HeritageOrnament";
import { SiteFooter } from "@/app/components/landing/SiteFooter";
import { SiteHeader } from "@/app/components/landing/SiteHeader";
import { antiquities, subpageHero } from "@/app/content";

export const metadata: Metadata = {
  title: "Cổ vật 3D | VR360 Như Quỳnh",
  description:
    "Phòng trưng bày số các cổ vật, hiện vật tiêu biểu của hệ thống di tích Xã Như Quỳnh được số hóa thành mô hình 3D xem được mọi góc.",
};

const highlights = [
  { icon: ScanLine, title: "Số hóa 3D độ chi tiết cao", detail: "Hiện vật được quét và dựng mô hình ba chiều, lưu giữ hình khối và hoa văn nguyên bản." },
  { icon: Boxes, title: "Xem mọi góc, mọi lúc", detail: "Xoay, phóng to và quan sát từng chi tiết ngay trên trình duyệt, không cần tiếp xúc hiện vật gốc." },
  { icon: Sparkles, title: "Bảo tồn cho mai sau", detail: "Tư liệu số phục vụ trưng bày, giáo dục và nghiên cứu di sản lâu dài." },
];

export default function AntiquityPage() {
  return (
    <main className="public-page min-h-[100dvh] bg-[var(--background)] text-[var(--foreground)]">
      <SiteHeader />

      <section className="public-subpage-hero public-subpage-hero--compact relative isolate overflow-hidden border-b border-[var(--surface-border)]">
        <Image src={subpageHero.coVat} alt="" fill preload sizes="100vw" className="public-subpage-hero-image public-parallax-bg object-cover" />
        <div className="public-subpage-hero-content mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:py-28">
          <div className="public-rise public-hero-rule max-w-4xl">
            <p className="public-kicker">Phòng trưng bày số</p>
            <h1 className="public-hero-display public-heading-safe mt-5 text-[clamp(2.55rem,5.8vw,5rem)] font-extrabold">
              Cổ vật &amp; <span className="public-display-accent">hiện vật 3D</span>
            </h1>
            <p className="public-subpage-copy mt-6 max-w-[60ch] text-base leading-8 sm:text-lg">
              Bộ sưu tập số các cổ vật tiêu biểu thuộc hệ thống di tích Xã Như Quỳnh. Mỗi hiện vật được
              dựng thành mô hình ba chiều để chiêm ngưỡng trọn vẹn từ mọi góc nhìn.
            </p>
          </div>
        </div>
      </section>

      <AntiquityShowcaseClient items={antiquities} />

      <section className="border-t border-[var(--surface-border)] bg-[var(--surface-band)]">
        <div className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:py-20">
          <div className="mx-auto max-w-2xl text-center">
            <p className="public-kicker public-kicker--center">Vì sao số hóa 3D</p>
            <h2 className="public-display public-heading-safe mt-3 text-[2rem] font-bold text-[var(--tour-ink)] sm:text-4xl">
              Giá trị của hiện vật số
            </h2>
          </div>
          <div className="mt-12 grid gap-x-8 gap-y-12 md:grid-cols-3">
            {highlights.map((item) => {
              const Icon = item.icon;
              return (
                <article key={item.title} className="public-stagger-item flex flex-col items-center text-center">
                  <span className="relative grid h-16 w-16 place-items-center">
                    <HeritageSeal className="absolute inset-0 h-full w-full text-[var(--primary)] opacity-35" />
                    <Icon className="relative h-6 w-6 text-[var(--primary)]" strokeWidth={1.7} />
                  </span>
                  <h3 className="mt-6 text-lg font-bold text-[var(--tour-ink)]">{item.title}</h3>
                  <p className="mt-2.5 max-w-[34ch] text-sm leading-6 text-[var(--muted-foreground)]">{item.detail}</p>
                </article>
              );
            })}
          </div>
        </div>
      </section>

      <section className="mx-auto max-w-7xl px-4 py-14 sm:px-6 lg:py-20">
        <div className="public-panel public-glow rounded-[18px] p-8 text-center sm:p-12">
          <HeritageSeal className="mx-auto h-10 w-10 text-[var(--primary)] opacity-80" />
          <p className="public-kicker public-kicker--center mt-5">Mở rộng bộ sưu tập</p>
          <h2 className="public-display public-heading-safe mx-auto mt-3 max-w-[24ch] text-2xl font-bold text-[var(--tour-ink)] sm:text-3xl">
            Hiện vật từ các di tích khác đang được số hóa
          </h2>
          <p className="mx-auto mt-4 max-w-[64ch] text-sm leading-7 text-[var(--muted-foreground)] sm:text-base">
            Phòng trưng bày sẽ tiếp tục bổ sung các cổ vật, sắc phong, bia đá và đồ thờ tự tiêu biểu
            của toàn bộ hệ thống di tích Xã Như Quỳnh trong giai đoạn 2026–2030.
          </p>
        </div>
      </section>

      <SiteFooter />
      <BackToTopButton />
    </main>
  );
}