import Image from "next/image";
import { useTranslations } from "next-intl";

import { cn } from "@/lib/utils";

import AseanBangkok from "../../../public/news/asean_bangkok.webp";
import BangkokGems from "../../../public/news/bangkok_gems.webp";
import HongKongMarch from "../../../public/news/hongkong_march.webp";
import HongKongWorld from "../../../public/news/hongkong_world.webp";
import VicenzaJan from "../../../public/news/vicenza_jan.webp";
import VicenzaSept from "../../../public/news/vicenza_sept.webp";

// Rangées alternées : copy à gauche / image à droite pour la 1re, puis on inverse.
const EVENTS = [
  { key: "vicenzaJan", img: VicenzaJan, imageRight: true },
  { key: "bangkokGemsFeb", img: AseanBangkok, imageRight: false },
  { key: "hongKongMarch", img: HongKongMarch, imageRight: true },
  // TODO: replace with a JCK Las Vegas photo from the client
  { key: "jckVegas", img: BangkokGems, imageRight: false },
  { key: "vicenzaSept", img: VicenzaSept, imageRight: true },
  { key: "bangkokGemsSept", img: BangkokGems, imageRight: false },
  { key: "hongKongWorld", img: HongKongWorld, imageRight: true },
] as const;

export default function NewsTimeline() {
  const t = useTranslations("NewsEventsPage.events");

  return (
    <section className="relative mx-auto max-w-[1440px] px-6 pb-10 lg:px-16 lg:pt-8 lg:pb-14">
      {/* Ligne centrale verticale — desktop only. */}
      <div
        aria-hidden="true"
        className="absolute inset-y-0 left-1/2 hidden w-px -translate-x-1/2 bg-outline-soft lg:block"
      />

      {EVENTS.map(({ key, img, imageRight }, index) => (
        <div
          key={key}
          className={cn(
            "reveal",
            "relative grid grid-cols-1 items-center gap-6 lg:grid-cols-2 lg:gap-24",
            index === EVENTS.length - 1 ? "mb-10" : "mb-[72px] lg:mb-[110px]",
          )}
        >
          {/* Point or central. */}
          <div
            aria-hidden="true"
            className="absolute left-1/2 top-1/2 z-[2] hidden size-3.5 -translate-x-1/2 -translate-y-1/2 rounded-full border-4 border-background bg-burnished-gold lg:block"
          />

          {/* Copy — DOM first, mais rendue sous l'image en mobile (order-2). */}
          <div
            className={cn(
              "order-2 flex flex-col items-center text-center",
              imageRight
                ? "lg:order-1 lg:items-end lg:pr-6 lg:text-right"
                : "lg:order-2 lg:items-start lg:pl-6 lg:text-left",
            )}
          >
            <span className="mb-2.5 text-[11px] font-semibold uppercase tracking-[0.24em] text-gold-text">
              {t(`${key}.dateLine`)}
            </span>
            <h2 className="font-display text-[28px] font-normal leading-[1.2] text-foreground lg:text-[34px]">
              {t(`${key}.title`)}
            </h2>
            <p className="mt-4 max-w-[420px] text-[15px] leading-[1.7] text-on-surface-variant">
              {t(`${key}.body`)}
            </p>
          </div>

          {/* Image — au-dessus en mobile (order-1). */}
          <div
            className={cn(
              "group relative order-1 aspect-[4/3] overflow-hidden border border-hairline bg-surface-container lg:aspect-video",
              imageRight ? "lg:order-2" : "lg:order-1",
            )}
          >
            <Image
              alt={t(`${key}.imageAlt`)}
              src={img}
              fill
              placeholder="blur"
              sizes="(min-width:1024px) 45vw, 100vw"
              className="object-cover grayscale transition-[filter,transform] duration-700 ease-out motion-safe:group-hover:scale-[1.03] motion-safe:group-hover:grayscale-0"
            />
          </div>
        </div>
      ))}
    </section>
  );
}