import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { ArrowRight, Box, Globe2, Landmark, PlayCircle, Rotate3d, School, Sparkles } from "lucide-react";
import { BackToTopButton } from "@/app/components/landing/BackToTopButton";
import { HeritageMarquee } from "@/app/components/landing/HeritageMarquee";
import { SiteFooter } from "@/app/components/landing/SiteFooter";
import { SiteHeader } from "@/app/components/landing/SiteHeader";
import { HeroShaderBackground } from "@/app/components/ui/hero-shader-background";
import { activeTour, heritageSites, img } from "@/app/content";

export const metadata: Metadata = {
  title: "Trang chủ | VR360 Như Quỳnh",
  description:
    "Trang chủ chính thức giới thiệu dự án số hóa di tích, không gian văn hóa và giá trị truyền thống của Xã Như Quỳnh, tỉnh Hưng Yên bằng công nghệ VR360.",
};

const availableSites = heritageSites.filter((site) => site.isAvailable);
const upcomingSites = heritageSites.filter((site) => !site.isAvailable);

const benefits = [
  {
    title: "Tham quan trực tuyến mọi lúc",
    detail: "Người xem có thể tiếp cận không gian văn hóa ngay trên điện thoại hoặc máy tính.",
    icon: Globe2,
  },
  {
    title: "Lưu giữ giá trị văn hóa",
    detail: "Ảnh 360 độ, thuyết minh và tư liệu được tổ chức thành kho dữ liệu dễ mở rộng.",
    icon: Landmark,
  },
  {
    title: "Trải nghiệm không gian 360 độ",
    detail: "Các điểm chuyển cảnh giúp người xem di chuyển mạch lạc giữa từng không gian.",
    icon: Box,
  },
  {
    title: "Hỗ trợ giáo dục địa phương",
    detail: "Tư liệu trực quan phục vụ học sinh, người dân, du khách và hoạt động truyền thông.",
    icon: School,
  },
];

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

      <HeroShaderBackground imageSrc={activeTour.heroImage}>
        <section className="public-hero-inner relative z-10 mx-auto grid min-h-[680px] max-w-7xl items-center gap-10 px-4 pb-14 pt-16 sm:px-6 lg:grid-cols-[0.92fr_0.78fr] lg:pb-18">
          <div className="public-rise min-w-0">
            <p className="public-kicker">VR360 số hóa di sản Xã Như Quỳnh</p>
            <h1 className="public-gradient-text public-heading-safe mt-5 max-w-[18ch] text-[clamp(2.85rem,5.35vw,5rem)] font-extrabold">
              Khám phá di sản văn hóa Xã Như Quỳnh qua trải nghiệm VR360
            </h1>
            <p className="mt-6 max-w-[58ch] text-base leading-8 text-[var(--foreground)]/82 sm:text-lg">
              Hành trình số hóa hệ thống di tích, không gian văn hóa và giá trị truyền thống của Xã Như Quỳnh, tỉnh Hưng Yên bằng công nghệ tham quan thực tế ảo 360 độ.
            </p>
            <div className="mt-8 flex flex-wrap items-center gap-3">
              <Link href="/di-tich" className="public-cta">
                <PlayCircle className="h-4 w-4" strokeWidth={1.8} />
                Khám phá ngay
              </Link>
              <Link href="/gioi-thieu" className="public-cta-secondary">
                Tìm hiểu dự án
              </Link>
            </div>
          </div>

          <div className="public-image-stage public-stagger-item relative hidden min-h-[31rem] lg:block">
            <Image
              src={activeTour.coverImage}
              alt="Không gian di sản Xã Như Quỳnh được số hóa VR360"
              fill
              priority
              sizes="42vw"
              className="object-cover"
            />
          </div>
        </section>
      </HeroShaderBackground>

      <HeritageMarquee />

      <section className="mx-auto grid max-w-7xl gap-10 px-4 py-14 sm:px-6 lg:grid-cols-[0.8fr_1.2fr] lg:items-center lg:py-20">
        <div className="min-w-0">
          <p className="public-kicker">Giới thiệu nhanh</p>
          <h2 className="public-heading-safe mt-3 text-[2rem] font-bold text-[var(--tour-ink)] sm:text-4xl">
            Dự án số hóa di sản Xã Như Quỳnh
          </h2>
        </div>
        <div className="grid gap-4 text-base leading-7 text-[var(--foreground)]/78">
          <p>
            Dự án VR360 Như Quỳnh đượ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 hệ thống di tích tiêu biểu của xã.
          </p>
          <p>
            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 để phục vụ lâu dài cho công tác truyền thông văn hóa và giáo dục địa phương.
          </p>
        </div>
      </section>

      <section className="border-y border-[var(--surface-border)] bg-[var(--surface-band)]">
        <div className="mx-auto max-w-7xl px-4 py-14 sm:px-6 lg:py-20">
          <div className="flex flex-col justify-between gap-4 lg:flex-row lg:items-end">
            <div className="max-w-3xl">
              <p className="public-kicker">Trải nghiệm nổi bật</p>
              <h2 className="public-display public-heading-safe mt-3 text-[2rem] font-bold text-[var(--tour-ink)] sm:text-4xl">
                Đang mở để khám phá.
              </h2>
            </div>
            <Link href="/di-tich" className="inline-flex items-center gap-2 text-sm font-extrabold text-[var(--tour-ink)] transition hover:text-[var(--primary)]">
              Xem toàn bộ di tích
              <ArrowRight className="h-4 w-4" strokeWidth={1.8} />
            </Link>
          </div>

          <div className="mt-10 grid gap-4 lg:grid-cols-2">
            {availableSites.map((site) => (
              <HomeSiteCard key={site.id} site={site} />
            ))}

            {/* Trải nghiệm cổ vật 3D */}
            <article className="public-card public-stagger-item group grid overflow-hidden rounded-[16px] md:grid-cols-[0.92fr_1.08fr]">
              <div className="relative min-h-[18rem]">
                <Image
                  src={img("20.jpg")}
                  alt="Cổ vật số hóa 3D"
                  fill
                  sizes="(max-width: 768px) 100vw, 42vw"
                  className="object-cover transition-transform duration-700 group-hover:scale-[1.025]"
                />
                <span className="absolute left-4 top-4 inline-flex items-center gap-1.5 rounded-md border border-[rgb(215_199_157_/_0.22)] bg-[rgb(18_21_16_/_0.55)] px-2.5 py-1 text-[0.7rem] font-bold uppercase tracking-[0.08em] text-[var(--tour-gold-light)] backdrop-blur-md">
                  <Rotate3d className="h-3.5 w-3.5" strokeWidth={1.8} />
                  Mô hình 3D
                </span>
              </div>
              <div className="flex min-h-[18rem] flex-col p-5 sm:p-6">
                <p className="mt-1 text-sm font-bold text-[var(--primary)]">Phòng trưng bày số</p>
                <h3 className="mt-2 text-2xl font-extrabold leading-tight text-[var(--tour-ink)]">Cổ vật & hiện vật 3D</h3>
                <p className="mt-3 text-sm leading-6 text-[var(--muted-foreground)]">
                  Chiêm ngưỡng các cổ vật tiêu biểu được dựng thành mô hình ba chiều: xoay, phóng to và quan sát từng chi tiết.
                </p>
                <Link href="/co-vat" className="mt-auto inline-flex items-center gap-2 pt-5 text-sm font-extrabold text-[var(--tour-ink)] transition hover:text-[var(--primary)]">
                  Khám phá cổ vật 3D
                  <ArrowRight className="h-4 w-4" strokeWidth={1.8} />
                </Link>
              </div>
            </article>
          </div>
        </div>
      </section>

      <section className="mx-auto max-w-7xl px-4 py-14 sm:px-6 lg:py-20">
        <div className="flex flex-col justify-between gap-4 lg:flex-row lg:items-end">
          <div className="max-w-3xl">
            <p className="public-kicker">Sắp ra mắt</p>
            <h2 className="public-display public-heading-safe mt-3 text-[2rem] font-bold text-[var(--tour-ink)] sm:text-4xl">
              Các di tích đang bổ sung tư liệu.
            </h2>
          </div>
          <Link href="/di-tich" className="inline-flex items-center gap-2 text-sm font-extrabold text-[var(--tour-ink)] transition hover:text-[var(--primary)]">
            Xem tất cả {heritageSites.length} di tích
            <ArrowRight className="h-4 w-4" strokeWidth={1.8} />
          </Link>
        </div>

        <div className="mt-10 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
          {upcomingSites.map((site) => (
            <Link
              key={site.id}
              href={site.detailUrl}
              className="public-panel public-stagger-item group flex flex-col rounded-[14px] p-5 transition hover:-translate-y-0.5"
            >
              <span className="flex items-center justify-between gap-3">
                <span className="text-sm font-bold text-[var(--primary)]">{site.type}</span>
                <span className="rounded-md border border-[rgb(200_164_106_/_0.24)] bg-[rgb(200_164_106_/_0.08)] px-2 py-0.5 text-[0.64rem] font-bold uppercase tracking-[0.06em] text-[var(--primary)]">
                  {site.level === "Cấp quốc gia" ? "Quốc gia" : "Cấp tỉnh"}
                </span>
              </span>
              <span className="mt-2 text-lg font-bold leading-snug text-[var(--tour-ink)]">{site.name}</span>
              <span className="mt-2 line-clamp-2 text-sm leading-6 text-[var(--muted-foreground)]">{site.shortDescription}</span>
              <span className="mt-auto inline-flex items-center gap-1.5 pt-4 text-sm font-bold text-[var(--tour-ink)] transition group-hover:text-[var(--primary)]">
                Xem thông tin
                <ArrowRight className="h-4 w-4" strokeWidth={1.8} />
              </span>
            </Link>
          ))}
        </div>
      </section>

      <section className="border-y border-[var(--surface-border)] bg-[var(--surface-band)]">
        <div className="mx-auto max-w-7xl px-4 py-14 sm:px-6 lg:py-20">
          <div className="max-w-3xl">
            <p className="public-kicker">Điểm nổi bật</p>
            <h2 className="public-heading-safe mt-3 text-[2rem] font-bold text-[var(--tour-ink)] sm:text-4xl">
              Giá trị của nền tảng VR360.
            </h2>
          </div>
          <div className="mt-10 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
            {benefits.map((benefit) => {
              const Icon = benefit.icon;

              return (
                <article key={benefit.title} className="public-panel public-stagger-item rounded-[16px] p-6">
                  <Icon className="h-7 w-7 text-[var(--primary)]" strokeWidth={1.8} />
                  <h3 className="mt-5 text-xl font-bold text-[var(--tour-ink)]">{benefit.title}</h3>
                  <p className="mt-3 text-sm leading-6 text-[var(--muted-foreground)]">{benefit.detail}</p>
                </article>
              );
            })}
          </div>
        </div>
      </section>

      <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-[18px] p-6 lg:grid-cols-[1fr_auto] lg:items-center lg:p-8">
          <div>
            <p className="public-kicker">Bắt đầu khám phá</p>
            <h2 className="public-heading-safe mt-2 text-3xl font-bold text-[var(--tour-ink)] sm:text-4xl">
              Bắt đầu hành trình khám phá Như Quỳnh
            </h2>
            <p className="mt-3 max-w-[66ch] text-sm leading-6 text-[var(--foreground)]/76 sm:text-base">
              Mở danh sách không gian văn hóa để tìm kiếm, lọc và lựa chọn điểm tham quan phù hợp.
            </p>
          </div>
          <Link href="/di-tich" className="public-cta w-fit">
            <Sparkles className="h-4 w-4" strokeWidth={1.8} />
            Xem không gian văn hóa
          </Link>
        </div>
      </section>

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

function HomeSiteCard({ site }: { site: (typeof heritageSites)[number] }) {
  return (
    <article className="public-card public-stagger-item group grid overflow-hidden rounded-[16px] md:grid-cols-[0.92fr_1.08fr]">
      <div className="relative min-h-[18rem]">
        <Image
          src={site.image}
          alt={site.name}
          fill
          sizes="(max-width: 768px) 100vw, 42vw"
          className="object-cover transition-transform duration-700 group-hover:scale-[1.025]"
        />
      </div>
      <div className="flex min-h-[18rem] flex-col p-5 sm:p-6">
        <span
          className={`inline-flex w-fit items-center gap-1.5 rounded-md border px-2.5 py-1 text-[0.7rem] font-bold uppercase tracking-[0.08em] ${
            site.isAvailable
              ? "border-[rgb(141_146_118_/_0.4)] bg-[rgb(141_146_118_/_0.16)] text-[var(--tour-gold-light)]"
              : "border-[rgb(200_164_106_/_0.28)] bg-[rgb(200_164_106_/_0.1)] text-[var(--primary)]"
          }`}
        >
          <span className={`h-1.5 w-1.5 rounded-full ${site.isAvailable ? "bg-[var(--tour-jade)]" : "bg-[var(--primary)]"}`} />
          {site.status}
        </span>
        <p className="mt-4 text-sm font-bold text-[var(--primary)]">{site.type}</p>
        <h3 className="mt-2 text-2xl font-extrabold leading-tight text-[var(--tour-ink)]">{site.name}</h3>
        <p className="mt-3 text-sm leading-6 text-[var(--muted-foreground)]">{site.shortDescription}</p>
        <Link href={site.isAvailable ? site.vrUrl ?? site.detailUrl : site.detailUrl} className="mt-auto inline-flex items-center gap-2 pt-5 text-sm font-extrabold text-[var(--tour-ink)] transition hover:text-[var(--primary)]">
          {site.isAvailable ? "Khám phá VR360" : "Xem thông tin"}
          <ArrowRight className="h-4 w-4" strokeWidth={1.8} />
        </Link>
      </div>
    </article>
  );
}
