import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { Mail, MapPinned } from "lucide-react";
import { BackToTopButton } from "@/app/components/landing/BackToTopButton";
import { CulturalSpaceExplorer } from "@/app/components/landing/CulturalSpaceExplorer";
import { SiteFooter } from "@/app/components/landing/SiteFooter";
import { SiteHeader } from "@/app/components/landing/SiteHeader";
import { activeTour, heritageSites } from "@/app/content";

export const metadata: Metadata = {
  title: "Di tích | VR360 Như Quỳnh",
  description:
    "Danh sách toàn bộ di tích lịch sử, văn hóa và tour VR360 của Xã Như Quỳnh, tỉnh Hưng Yên.",
};

export default function HeritageListPage() {
  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.gateImage}
          alt=""
          fill
          priority
          sizes="100vw"
          className="public-subpage-hero-image object-cover"
        />

        <div className="public-subpage-hero-content mx-auto grid max-w-7xl gap-10 px-4 py-16 sm:px-6 lg:min-h-[580px] lg:grid-cols-[0.95fr_0.7fr] lg:items-center lg:py-22">
          <div className="public-rise public-hero-rule w-full min-w-0 max-w-4xl">
            <p className="public-kicker">Danh sách di tích và tour VR360</p>
            <h1 className="public-gradient-text public-heading-safe public-subpage-title mt-4 text-[clamp(2.55rem,5.8vw,5.35rem)] font-extrabold">
              Hệ thống di tích Xã Như Quỳnh
            </h1>
            <p className="public-subpage-copy mt-6 text-base leading-8 text-[var(--foreground)]/82 sm:text-lg">
              Khám phá 15 di tích lịch sử, văn hóa của Xã Như Quỳnh: 9 di tích xếp hạng cấp quốc gia và 6 di tích cấp tỉnh.
            </p>
            <div className="mt-7 flex flex-wrap gap-3">
              <span className="public-chip">
                <MapPinned className="h-4 w-4" strokeWidth={1.8} />
                {heritageSites.length} địa điểm
              </span>
              <span className="public-chip">
                <MapPinned className="h-4 w-4" strokeWidth={1.8} />
                {heritageSites.filter((site) => site.isAvailable).length} tour đang mở
              </span>
            </div>
          </div>

          <div className="public-image-stage public-hero-photo public-stagger-item hidden lg:block">
            <Image
              src={activeTour.coverImage}
              alt="Di sản văn hóa Xã Như Quỳnh"
              fill
              sizes="38vw"
              className="object-cover"
            />
          </div>
        </div>
      </section>

      <CulturalSpaceExplorer sites={heritageSites} />

      <section className="px-4 py-14 sm:px-6 lg:py-20">
        <div className="public-panel public-glow mx-auto grid max-w-7xl gap-5 rounded-[8px] p-6 lg:grid-cols-[1fr_auto] lg:items-center lg:p-8">
          <div>
            <p className="public-kicker">Đề xuất địa điểm</p>
            <h2 className="public-heading-safe mt-2 text-3xl font-bold text-[var(--tour-ink)] sm:text-4xl">
              Bạn muốn đề xuất thêm địa điểm văn hóa?
            </h2>
            <p className="mt-3 max-w-[66ch] text-sm leading-6 text-[var(--foreground)]/76 sm:text-base">
              Gửi thông tin, hình ảnh hoặc câu chuyện liên quan để cùng hoàn thiện kho tư liệu số của Xã Như Quỳnh.
            </p>
          </div>
          <Link href="/lien-he" className="public-cta w-fit">
            <Mail className="h-4 w-4" strokeWidth={1.8} />
            Liên hệ với chúng tôi
          </Link>
        </div>
      </section>

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