import Link from "next/link";
import { heritageSites } from "@/app/content";

// Dải tên di tích cuộn liên tục từ phải sang trái (vòng lặp khép kín).
// Danh sách được lặp 2 lần và track dịch -50% -> điểm nối trùng khít, không giật.
// Rê chuột để tạm dừng và bấm vào tên để mở trang chi tiết.
export function HeritageMarquee() {
  const loop = [...heritageSites, ...heritageSites];

  return (
    <section
      className="relative border-y border-[var(--surface-border)] bg-[var(--surface-band)] py-7"
      aria-label="Hệ thống di tích Xã Như Quỳnh"
    >
      <div className="heritage-marquee">
        <ul className="heritage-marquee-track">
          {loop.map((site, index) => {
            const duplicate = index >= heritageSites.length;
            return (
              <li key={index} className="flex items-center" aria-hidden={duplicate}>
                <Link
                  href={site.detailUrl}
                  tabIndex={duplicate ? -1 : 0}
                  className="public-display text-lg font-semibold text-[var(--tour-ink)]/80 transition-colors duration-500 hover:text-[var(--primary)] sm:text-xl"
                >
                  {site.name}
                </Link>
                <span
                  aria-hidden="true"
                  className="mx-7 inline-block h-1.5 w-1.5 rotate-45 bg-[var(--primary)]/70"
                />
              </li>
            );
          })}
        </ul>
      </div>
    </section>
  );
}
