<%- include('partials/stitch-head') %>
<body class="bg-surface text-on-surface font-body selection:bg-primary selection:text-on-primary">
<%- include('partials/stitch-nav') %>
<main class="pt-[calc(4.5rem+env(safe-area-inset-top,0px))] md:pt-32 pb-8 md:pb-0">
<%- include('partials/stitch-breadcrumbs') %>
<header class="px-4 sm:px-6 md:px-12 mb-10 sm:mb-12 md:mb-20 anim-page-head">
<div class="max-w-4xl">
<span class="text-primary font-label tracking-[0.3em] uppercase text-xs mb-4 block">Portfolio</span>
<h1 class="text-3xl sm:text-5xl md:text-7xl lg:text-8xl font-headline font-bold text-on-surface leading-tight sm:leading-none tracking-tighter mb-6 md:mb-8">
Galerie <span class="text-primary/40 italic">Unico</span>
</h1>
<p class="text-secondary max-w-xl text-sm sm:text-base md:text-lg font-light leading-relaxed">
<%= site.imagesNote %>
</p>
</div>
</header>

<section class="px-4 sm:px-6 md:px-12 mb-12 md:mb-24" data-reveal>
<div class="mobile-scroll-chips flex gap-2 sm:gap-4 items-center border-b border-outline-variant/20 pb-6 whitespace-nowrap" data-gallery-tabs role="tablist" aria-label="Galerie nach Kategorie filtern">
<button type="button" class="gallery-filter-chip gallery-filter-chip--active" role="tab" aria-selected="true" data-gallery-filter="all" id="gallery-tab-all">Alle Motive</button>
<button type="button" class="gallery-filter-chip" role="tab" aria-selected="false" data-gallery-filter="schnitt" id="gallery-tab-schnitt">Schnitt</button>
<button type="button" class="gallery-filter-chip" role="tab" aria-selected="false" data-gallery-filter="farbe" id="gallery-tab-farbe">Farbe</button>
<button type="button" class="gallery-filter-chip" role="tab" aria-selected="false" data-gallery-filter="salon" id="gallery-tab-salon">Salon</button>
</div>
</section>

<section id="galerie-grid" class="px-4 sm:px-6 md:px-12 mb-16 md:mb-24" aria-label="Galeriebilder">
<div class="grid grid-cols-1 md:grid-cols-12 gap-6 md:gap-8 items-start" data-reveal-stagger>
<% const G = site.gallery; %>
<% if (G[0]) { %>
<div class="md:col-span-8 group relative overflow-hidden rounded-xl motion-lift" data-gallery-item data-gallery-cat="<%= G[0].category || 'all' %>">
<div class="aspect-[16/10] bg-surface-container overflow-hidden">
<img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" src="<%= G[0].src %>" alt="<%= G[0].alt %>" loading="eager" decoding="async">
</div>
<div class="absolute inset-0 bg-gradient-to-t from-surface via-transparent to-transparent opacity-60"></div>
<div class="absolute bottom-0 left-0 p-6 md:p-8 w-full group-hover:translate-y-[-4px] transition-transform duration-500">
<div class="glass-panel p-4 md:p-6 rounded-lg inline-block">
<span class="text-primary font-label text-[10px] tracking-[0.2em] uppercase">Featured</span>
<h3 class="text-xl md:text-2xl font-headline mt-2 text-on-surface"><%= site.brand %></h3>
</div>
</div>
<div class="absolute inset-0 border-0 group-hover:border-[1px] border-primary/30 transition-all duration-500 pointer-events-none rounded-xl"></div>
</div>
<% } %>
<% if (G[1]) { %>
<div class="md:col-span-4 group relative rounded-xl h-full" data-gallery-item data-gallery-cat="<%= G[1].category || 'all' %>">
<div class="aspect-[3/4] md:aspect-auto md:min-h-[28rem] bg-surface-container overflow-hidden rounded-xl">
<img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" src="<%= G[1].src %>" alt="<%= G[1].alt %>" loading="lazy" decoding="async">
</div>
<div class="absolute inset-0 border-0 group-hover:border-[1px] border-primary/30 transition-all duration-500 pointer-events-none rounded-xl"></div>
</div>
<% } %>

<% [2,3,4].forEach(function (i) { if (!G[i]) return; %>
<div class="md:col-span-4 group relative overflow-hidden rounded-xl" data-gallery-item data-gallery-cat="<%= G[i].category || 'all' %>">
<div class="aspect-square bg-surface-container">
<img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" src="<%= G[i].src %>" alt="<%= G[i].alt %>" loading="lazy" decoding="async">
</div>
<div class="absolute inset-0 border-0 group-hover:border-[1px] border-primary/30 transition-all duration-500 pointer-events-none rounded-xl"></div>
</div>
<% }); %>

<div class="md:col-span-12 py-8 md:py-12">
<div class="bg-surface-container-low rounded-xl px-8 md:px-12 py-16 md:py-24 flex flex-col items-center text-center">
<h2 class="text-2xl md:text-4xl font-headline italic text-primary/80 mb-6">„<%= site.owner.quote %>”</h2>
<div class="w-24 h-px bg-primary/30"></div>
</div>
</div>

<% if (G[5]) { %>
<div class="md:col-span-12 group relative overflow-hidden rounded-xl" data-gallery-item data-gallery-cat="<%= G[5].category || 'all' %>">
<div class="aspect-[21/9] max-h-80 md:max-h-[22rem] bg-surface-container">
<img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" src="<%= G[5].src %>" alt="<%= G[5].alt %>" loading="lazy" decoding="async">
</div>
<div class="absolute inset-0 border-0 group-hover:border-[1px] border-primary/30 transition-all duration-500 pointer-events-none rounded-xl"></div>
</div>
<% } %>
</div>
</section>
</main>
<%- include('partials/stitch-footer') %>
<%- include('partials/end', { scripts: ['/js/gallery-filter.js'] }) %>
