import type { Metadata } from "next";
import Image from "next/image";
import { Boxes, ScanLine, Sparkles } from "lucide-react";
import { AntiquityShowcase } from "@/app/components/antiquity/AntiquityShowcase";
import { BackToTopButton } from "@/app/components/landing/BackToTopButton";
import { SiteFooter } from "@/app/components/landing/SiteFooter";
import { SiteHeader } from "@/app/components/landing/SiteHeader";
import { activeTour, antiquities } 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={activeTour.shrineImage} alt="" fill priority sizes="100vw" className="public-subpage-hero-image object-cover" />
        <div className="public-subpage-hero-content mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:py-22">
          <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-gradient-text public-heading-safe mt-4 text-[clamp(2.55rem,5.8vw,5rem)] font-extrabold">
              Cổ vật & hiện vật 3D
            </h1>
            <p className="public-subpage-copy mt-6 max-w-[60ch] text-base leading-8 text-[var(--foreground)]/82 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>

      <AntiquityShowcase items={antiquities} />

      <section className="border-t border-[var(--surface-border)] bg-[var(--surface-band)]">
        <div className="mx-auto grid max-w-7xl gap-4 px-4 py-14 sm:px-6 md:grid-cols-3 lg:py-18">
          {highlights.map((item) => {
            const Icon = item.icon;
            return (
              <article key={item.title} className="public-panel public-stagger-item rounded-[14px] p-6">
                <Icon className="h-7 w-7 text-[var(--primary)]" strokeWidth={1.7} />
                <h3 className="mt-4 text-lg font-bold text-[var(--tour-ink)]">{item.title}</h3>
                <p className="mt-2 text-sm leading-6 text-[var(--muted-foreground)]">{item.detail}</p>
              </article>
            );
          })}
        </div>
      </section>

      <section className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:py-16">
        <div className="public-panel public-glow rounded-[16px] p-6 text-center sm:p-9">
          <p className="public-kicker justify-center">Mở rộng bộ sưu tập</p>
          <h2 className="public-display mt-3 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-3 max-w-[64ch] text-sm leading-7 text-[var(--foreground)]/76 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>
  );
}
