hms-licht-ton/frontend/pages/referenzen.vue

<template>
  <div>
    <h1 class="text-3xl font-bold text-text mb-2">Referenzen</h1>
    <p class="text-text-muted mb-8">Ein Auszug aus unseren Projekten und Veranstaltungen.</p>

    <!-- Filter Chips -->
    <div class="flex flex-wrap gap-3 mb-8" data-testid="filter-chips">
      <button
        v-for="cat in categories"
        :key="cat"
        :class="[
          'px-4 py-2 rounded-full text-sm font-medium border transition-colors duration-fast',
          activeFilter === cat
            ? 'bg-accent text-white border-accent'
            : 'bg-panel text-text-muted border-border-default hover:border-accent-border'
        ]"
        :data-testid="'filter-' + cat.toLowerCase()"
        @click="activeFilter = cat"
      >
        {{ cat }}
      </button>
    </div>

    <!-- Gallery Grid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6" data-testid="gallery-grid">
      <div
        v-for="item in filteredImages"
        :key="item.id"
        class="relative group cursor-pointer rounded-lg overflow-hidden bg-panel border border-border-default hover:border-accent-border transition-colors duration-fast"
        :data-testid="'gallery-item-' + item.id"
        @click="openLightbox(item)"
      >
        <div class="aspect-w-4 aspect-h-3 w-full">
          <img
            :src="item.src"
            :alt="item.alt"
            class="w-full h-48 object-cover group-hover:opacity-80 transition-opacity duration-fast"
            loading="lazy"
          />
        </div>
        <div class="p-4">
          <p class="text-accent text-sm font-bold mb-1">{{ item.title }}</p>
          <p class="text-text-muted text-xs">{{ item.category }}</p>
        </div>
      </div>
    </div>

    <!-- Lightbox -->
    <Lightbox
      :is-open="lightboxOpen"
      :image="currentImage"
      @close="closeLightbox"
      @prev="prevImage"
      @next="nextImage"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";

useHead({
  title: "Referenzen – HMS Licht & Ton",
  meta: [{ name: "robots", content: "noindex, nofollow, noarchive, nosnippet" }],
});

interface GalleryItem {
  id: number;
  src: string;
  alt: string;
  title: string;
  category: string;
  caption: string;
}

const categories = ["Alle", "Open-Air", "Indoor", "Rigging"] as const;
const activeFilter = ref<string>("Alle");

const images: GalleryItem[] = [
  { id: 1, src: "https://picsum.photos/seed/hms1/600/400", alt: "Open-Air Konzert", title: "Stadtfest Leipheim", category: "Open-Air", caption: "Stadtfest Leipheim – Beschallung und Lichttechnik" },
  { id: 2, src: "https://picsum.photos/seed/hms2/600/400", alt: "Indoor Firmenevent", title: "Firmenevent Augsburg", category: "Indoor", caption: "Firmenevent in Augsburg – Komplett-Setup" },
  { id: 3, src: "https://picsum.photos/seed/hms3/600/400", alt: "Rigging Aufbau", title: "Traversen-Rigging", category: "Rigging", caption: "Traversen-Rigging in einer Mehrzweckhalle" },
  { id: 4, src: "https://picsum.photos/seed/hms4/600/400", alt: "Open-Air Festival", title: "Sommerfest Günzburg", category: "Open-Air", caption: "Sommerfest Günzburg – Line-Array Beschallung" },
  { id: 5, src: "https://picsum.photos/seed/hms5/600/400", alt: "Indoor Konferenz", title: "Konferenz Neu-Ulm", category: "Indoor", caption: "Konferenz in Neu-Ulm – Mikrofonie und Mischtechnik" },
  { id: 6, src: "https://picsum.photos/seed/hms6/600/400", alt: "Rigging Motorzug", title: "Motorzug-System", category: "Rigging", caption: "Motorzug-System für Bühnenbeleuchtung" },
  { id: 7, src: "https://picsum.photos/seed/hms7/600/400", alt: "Open-Air Bühne", title: "Kirchweih Festzelt", category: "Open-Air", caption: "Kirchweih Festzelt – Beschallung und Beleuchtung" },
  { id: 8, src: "https://picsum.photos/seed/hms8/600/400", alt: "Indoor Gala", title: "Gala Leipheim", category: "Indoor", caption: "Gala-Abend in Leipheim – Licht- und Tontechnik" },
  { id: 9, src: "https://picsum.photos/seed/hms9/600/400", alt: "Rigging Seilzug", title: "Punkt-Rigging", category: "Rigging", caption: "Punkt-Rigging für Moving Heads" },
];

const filteredImages = computed(() => {
  if (activeFilter.value === "Alle") return images;
  return images.filter((img) => img.category === activeFilter.value);
});

const lightboxOpen = ref(false);
const currentIndex = ref(0);

const currentImage = computed<GalleryItem>(() => {
  const item = filteredImages.value[currentIndex.value];
  return item
    ? { src: item.src, alt: item.alt, caption: item.caption }
    : { src: "", alt: "", caption: "" };
});

function openLightbox(item: GalleryItem) {
  const idx = filteredImages.value.findIndex((i) => i.id === item.id);
  if (idx >= 0) {
    currentIndex.value = idx;
    lightboxOpen.value = true;
  }
}

function closeLightbox() {
  lightboxOpen.value = false;
}

function nextImage() {
  currentIndex.value = (currentIndex.value + 1) % filteredImages.value.length;
}

function prevImage() {
  currentIndex.value =
    currentIndex.value === 0
      ? filteredImages.value.length - 1
      : currentIndex.value - 1;
}
</script>