import Overline from "@/components/ui/Overline";
import ArrowLink from "@/components/ui/ArrowLink";
import { useTranslations } from "next-intl";

import Crossfade from "@/components/ui/Crossfade";

import Slide1 from "../../../public/home/slider/az4393_r1wq6o.webp";
import Slide2 from "../../../public/home/slider/az4457_w95x9m.webp";
import Slide3 from "../../../public/home/slider/az4949_bt7ulw.webp";
import Slide4 from "../../../public/home/slider/az4964_lnak4t.webp";
import Slide5 from "../../../public/home/slider/az5056_mbtvks.webp";
import Slide6 from "../../../public/home/slider/az5274_qlx7ak.webp";
import Slide7 from "../../../public/home/slider/az4431_ihz5qv.webp";
import Slide8 from "../../../public/home/slider/az4948_ggpzcg.webp";
import Slide9 from "../../../public/home/slider/az4967_yyiicy.webp";
import Slide10 from "../../../public/home/slider/az5276_ctkxqq.webp";
import Slide11 from "../../../public/home/slider/az5279_upcjmf.webp";
import Slide12 from "../../../public/home/slider/az5327_rd74kd.webp";

// One entry per slide, in display order. To swap a photo, change the import
// above and keep the matching `IndexPage.gallery.slides.<key>.alt` message in
// sync so the alt text still describes the picture.
const SLIDES = [
  { key: "s1", src: Slide1 },
  { key: "s2", src: Slide2 },
  { key: "s3", src: Slide3 },
  { key: "s4", src: Slide4 },
  { key: "s5", src: Slide5 },
  { key: "s6", src: Slide6 },
  { key: "s7", src: Slide7 },
  { key: "s8", src: Slide8 },
  { key: "s9", src: Slide9 },
  { key: "s10", src: Slide10 },
  { key: "s11", src: Slide11 },
  { key: "s12", src: Slide12 },
] as const;

export default function GallerySection() {
  const t = useTranslations("IndexPage.gallery");
  const tCommon = useTranslations("Common");

  const slides = SLIDES.map(({ key, src }, index) => ({
    src,
    alt: t(`slides.${key}.alt`),
    goToLabel: tCommon("goToSlide", { number: String(index + 1) }),
  }));

  return (
    <section
      aria-labelledby="gallery-heading"
      className="overflow-clip border-t border-hairline bg-surface-container-low py-section-sm lg:py-section"
    >
      <div className="shell">
        <div className="reveal mb-14 text-center">
          <Overline>{t("overline")}</Overline>
          <h2
            id="gallery-heading"
            className="mt-4 mb-2 font-display text-h2 font-normal text-foreground"
          >
            {t("title")}
          </h2>
          <p className="text-base leading-body text-on-surface-variant">{t("subtitle")}</p>
        </div>

        <div className="reveal">
          <Crossfade
            slides={slides}
            className="aspect-3/2 bg-surface-dim"
            // `aspect-3/2` = the native 3000×2000 ratio of every slide, so
            // `object-cover` never crops (the 21:9 band cut the packshots).
            // The frame is `100vw` minus the `shell` gutters (24px, then 64px
            // from `lg`), capped by `max-w-editorial` — 1312px at 1440 and up.
            sizes="(min-width:1440px) 1312px, (min-width:1024px) calc(100vw - 128px), calc(100vw - 48px)"
            dwellMs={4500}
            fadeMs={1000}
            dots="below"
            arrows="always"
            tone="gold"
            labels={{
              carousel: t("title"),
              previous: tCommon("previous"),
              next: tCommon("next"),
            }}
          />
        </div>

        <div className="reveal mt-12 text-center">
          <ArrowLink href="/gallery">{t("cta")}</ArrowLink>
        </div>
      </div>
    </section>
  );
}