import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import {
  ArrowRight,
  BookOpenText,
  Building2,
  Compass,
  FileText,
  Landmark,
  PlayCircle,
  ScanLine,
  Sparkles,
  Users,
} from "lucide-react";
import { BackToTopButton } from "@/app/components/landing/BackToTopButton";
import { SiteFooter } from "@/app/components/landing/SiteFooter";
import { SiteHeader } from "@/app/components/landing/SiteHeader";
import { activeTour, antiquities, heritageSites, img } from "@/app/content";

export const metadata: Metadata = {
  title: "Giới thiệu | VR360 Như Quỳnh",
  description:
    "Giới thiệu về Xã Như Quỳnh, tỉnh Hưng Yên: vùng đất văn hiến và hệ thống di tích lịch sử, văn hóa được số hóa bằng công nghệ VR360.",
};

const nationalCount = heritageSites.filter((s) => s.level === "Cấp quốc gia").length;
const provincialCount = heritageSites.filter((s) => s.level === "Cấp tỉnh").length;

const stats = [
  { value: String(nationalCount), label: "di tích cấp quốc gia" },
  { value: String(provincialCount), label: "di tích cấp tỉnh" },
  { value: activeTour.sceneCount, label: "điểm ảnh 360°" },
  { value: String(antiquities.length), label: "cổ vật số hóa 3D" },
];

const paragraphs = [
  "Xã Như Quỳnh, tỉnh Hưng Yên là vùng đất cổ giàu truyền thống văn hiến và khoa bảng, nơi lưu giữ một hệ thống di tích đình, chùa, đền, văn miếu phong phú trải dài nhiều thế kỷ.",
  "Dự án số hóa di sản được xây dựng nhằm bảo tồn tư liệu, quảng bá giá trị văn hóa địa phương và tạo điều kiện để người dân, học sinh, du khách tham quan trực tuyến các di tích tiêu biểu bằng công nghệ thực tế ảo VR360.",
  "Mỗi không gian được giới thiệu bằng hình ảnh thật, điểm tương tác, chú thích tiếng Việt và cấu trúc nội dung dễ theo dõi, hướng tới mục tiêu chuyển đổi số di sản giai đoạn 2026–2030.",
];

const values = [
  { icon: Landmark, title: "Không gian tín ngưỡng", detail: "Đình, chùa, đền, văn miếu, nơi gìn giữ kiến trúc và đời sống tâm linh của cộng đồng làng quê." },
  { icon: BookOpenText, title: "Vùng đất khoa bảng", detail: "Truyền thống hiếu học được tôn vinh qua hệ thống văn miếu và các bậc danh nhân của quê hương." },
  { icon: Building2, title: "Kiến trúc nghệ thuật", detail: "Những mảng chạm khắc, đồ thờ tự và hiện vật mang giá trị mỹ thuật cổ tiêu biểu." },
  { icon: Users, title: "Ký ức cộng đồng", detail: "Lễ hội, phong tục và câu chuyện dân gian gắn liền với từng di tích qua nhiều thế hệ." },
];

const steps = [
  { icon: Compass, title: "Khảo sát", detail: "Xác định danh mục di tích, tuyến tham quan và đầu mối duyệt nội dung tại địa phương." },
  { icon: ScanLine, title: "Số hóa", detail: "Ghi nhận ảnh 360°, mô hình 3D cổ vật và dữ liệu không gian độ phân giải cao." },
  { icon: FileText, title: "Biên tập", detail: "Tổ chức nội dung thành trải nghiệm dễ hiểu cho người dân, học sinh và du khách." },
  { icon: Sparkles, title: "Vận hành", detail: "Đưa lên nền tảng trực tuyến, sẵn sàng mở rộng thêm các tuyến di sản mới." },
];

export default function AboutPage() {
  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 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">Giới thiệu</p>
            <h1 className="public-gradient-text public-heading-safe mt-4 text-[clamp(2.55rem,5.8vw,5rem)] font-extrabold">
              Di sản văn hóa Xã Như Quỳnh
            </h1>
            <p className="public-subpage-copy mt-6 max-w-[60ch] text-base leading-8 text-[var(--foreground)]/82 sm:text-lg">
              Một vùng đất văn hiến với hệ thống di tích trải dài nhiều thế kỷ, nay được gìn giữ và lan tỏa
              bằng công nghệ số.
            </p>
          </div>
        </div>
      </section>

      {/* Intro — bố cục bất đối xứng: nhãn dính bên trái, nội dung bên phải */}
      <section className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:grid lg:grid-cols-[0.42fr_0.58fr] lg:gap-12 lg:py-24">
        <div className="lg:sticky lg:top-28 lg:self-start">
          <p className="public-kicker">Về vùng đất</p>
          <h2 className="public-display public-heading-safe mt-3 text-[clamp(1.9rem,3.2vw,2.8rem)] font-bold text-[var(--tour-ink)]">
            Nơi lịch sử và tín ngưỡng cùng hội tụ
          </h2>
        </div>
        <div className="mt-6 grid max-w-[65ch] gap-5 text-base leading-8 text-[var(--foreground)]/82 lg:mt-0">
          {paragraphs.map((text, i) => (
            <p key={i} className={i === 0 ? "text-lg leading-9 text-[var(--tour-ink)]" : undefined}>
              {text}
            </p>
          ))}
        </div>
      </section>

      {/* Stats */}
      <section className="border-y 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 sm:grid-cols-2 lg:grid-cols-4 lg:py-18">
          {stats.map((s) => (
            <div key={s.label} className="public-panel public-stagger-item rounded-[14px] p-6 text-center">
              <p className="public-gradient-text font-display-vn text-[2.6rem] font-extrabold leading-none [font-variant-numeric:tabular-nums]">
                {s.value}
              </p>
              <p className="mt-3 text-sm leading-6 text-[var(--muted-foreground)]">{s.label}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Heritage values */}
      <section className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:py-24">
        <div className="max-w-3xl">
          <p className="public-kicker">Giá trị di sản</p>
          <h2 className="public-display public-heading-safe mt-3 text-[clamp(1.9rem,3.4vw,3rem)] font-bold text-[var(--tour-ink)]">
            Bốn lớp giá trị được gìn giữ
          </h2>
        </div>
        <div className="mt-10 grid gap-4 md:grid-cols-2">
          {values.map((value, index) => {
            const Icon = value.icon;
            return (
              <article
                key={value.title}
                className={`public-panel public-stagger-item rounded-[16px] p-7 ${index % 2 === 1 ? "md:mt-8" : ""}`}
              >
                <span className="grid h-12 w-12 place-items-center rounded-[12px] bg-[rgb(200_164_106_/_0.14)]">
                  <Icon className="h-6 w-6 text-[var(--primary)]" strokeWidth={1.7} />
                </span>
                <h3 className="mt-5 text-xl font-bold text-[var(--tour-ink)]">{value.title}</h3>
                <p className="mt-2.5 text-sm leading-7 text-[var(--muted-foreground)]">{value.detail}</p>
              </article>
            );
          })}
        </div>
      </section>

      {/* Digitization journey */}
      <section className="border-y border-[var(--surface-border)] bg-[var(--surface-band)]">
        <div className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:py-24">
          <div className="max-w-3xl">
            <p className="public-kicker">Hành trình số hóa</p>
            <h2 className="public-display public-heading-safe mt-3 text-[clamp(1.9rem,3.4vw,3rem)] font-bold text-[var(--tour-ink)]">
              Từ tư liệu đến trải nghiệm số
            </h2>
          </div>
          <ol className="mt-10 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
            {steps.map((step, index) => {
              const Icon = step.icon;
              return (
                <li key={step.title} className="public-panel public-stagger-item relative rounded-[16px] p-6">
                  <span className="font-display-vn text-sm font-extrabold tracking-[0.2em] text-[var(--primary)]">
                    {String(index + 1).padStart(2, "0")}
                  </span>
                  <Icon className="mt-4 h-7 w-7 text-[var(--tour-jade)]" strokeWidth={1.7} />
                  <h3 className="mt-4 text-lg font-bold text-[var(--tour-ink)]">{step.title}</h3>
                  <p className="mt-2 text-sm leading-6 text-[var(--muted-foreground)]">{step.detail}</p>
                </li>
              );
            })}
          </ol>
        </div>
      </section>

      {/* Featured tour CTA */}
      <section className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:py-20">
        <div className="public-card group grid overflow-hidden rounded-[18px] lg:grid-cols-[1.05fr_0.95fr]">
          <div className="relative min-h-[20rem]">
            <Image
              src={img("11.jpg")}
              alt="Chùa Thái Lạc (Pháp Vân tự)"
              fill
              sizes="(max-width: 1024px) 100vw, 50vw"
              className="object-cover transition-transform duration-700 group-hover:scale-[1.03]"
            />
          </div>
          <div className="flex flex-col justify-center p-7 sm:p-10">
            <p className="public-kicker">Điểm đến tiêu biểu</p>
            <h2 className="public-display public-heading-safe mt-3 text-[clamp(1.8rem,3vw,2.6rem)] font-bold text-[var(--tour-ink)]">
              {activeTour.title}
            </h2>
            <p className="mt-4 max-w-[52ch] text-sm leading-7 text-[var(--foreground)]/80 sm:text-base">
              Ngôi chùa cổ thờ Pháp Vân, nổi tiếng với mảng chạm khắc gỗ thời Trần. Đây là di tích đầu tiên
              được số hóa thành tour VR360 hoàn chỉnh.
            </p>
            <div className="mt-7 flex flex-wrap gap-3">
              <Link href={activeTour.href} className="public-cta">
                <PlayCircle className="h-4 w-4" strokeWidth={1.8} />
                Tham quan VR360
              </Link>
              <Link href="/co-vat" className="public-cta-secondary">
                Xem cổ vật 3D
                <ArrowRight className="h-4 w-4" strokeWidth={1.8} />
              </Link>
            </div>
          </div>
        </div>
      </section>

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