<%- include('partials/stitch-head') %>
<body class="bg-surface text-on-surface font-body selection:bg-primary/30 selection:text-primary">
<%- include('partials/stitch-nav') %>
<main class="min-h-screen pt-[calc(5rem+env(safe-area-inset-top,0px))] md:pt-40 pb-20 md:pb-24 botanical-bg">
<%- include('partials/stitch-breadcrumbs') %>
<div class="max-w-screen-2xl mx-auto px-4 sm:px-6 md:px-12 grid grid-cols-1 lg:grid-cols-12 gap-10 sm:gap-12 lg:gap-16">
<div class="lg:col-span-8 space-y-20 md:space-y-24">
<header class="space-y-6 anim-page-head">
<span class="font-label text-[10px] tracking-[0.3em] uppercase text-primary">Leistungen</span>
<h1 class="font-headline text-3xl sm:text-5xl md:text-7xl lg:text-8xl leading-tight tracking-tight text-glow">Preise <br/><span class="italic font-light text-secondary">im Überblick</span></h1>
<p class="max-w-xl text-on-surface-variant text-lg leading-relaxed font-light">Transparente Orientierung — finale Preise und Dauer besprechen wir in der persönlichen Beratung.</p>
</header>

<% site.serviceCategories.forEach(function (cat) { %>
<section class="space-y-10 md:space-y-12" data-reveal>
<div class="flex items-end justify-between border-b border-outline-variant/30 pb-4">
<h2 class="font-headline text-2xl md:text-3xl text-secondary"><%= cat.title %></h2>
<span class="font-label text-[10px] tracking-widest text-outline uppercase"><%= cat.subtitle %></span>
</div>

<% if (cat.featureId) { 
  const fs = site.services.find(function (x) { return x.id === cat.featureId; });
  const fi = site.gallery[cat.featureImageIndex] || site.gallery[0];
  if (fs && fi) { %>
<div id="leistung-<%= cat.featureId %>" class="relative overflow-hidden group rounded-xl aspect-[21/9] max-h-80 md:max-h-none motion-lift scroll-mt-28">
<img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 opacity-60" src="<%= fi.src %>" alt="<%= fi.alt %>" loading="lazy" decoding="async">
<div class="absolute inset-0 bg-gradient-to-t from-surface via-transparent to-transparent"></div>
<div class="absolute bottom-6 left-6 md:bottom-8 md:left-8 right-6 md:right-auto">
<h3 class="font-headline text-2xl md:text-4xl text-primary mb-2"><%= fs.name %></h3>
<p class="text-on-surface font-light max-w-md text-sm md:text-base"><%= fs.description %></p>
</div>
<div class="absolute bottom-6 right-6 md:bottom-8 md:right-8 text-right">
<span class="block font-label text-xs text-outline mb-1 uppercase tracking-widest">Ab</span>
<span class="font-headline text-2xl md:text-3xl text-primary"><%= fs.priceFrom %> <%= fs.currency %></span>
</div>
</div>
<% } } %>

<% const rowIds = cat.featureId ? cat.ids.filter(function (id) { return id !== cat.featureId; }) : cat.ids.slice(); %>
<% if (cat.title === 'Anlass & Pflege') { %>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8" data-reveal-stagger>
<% cat.ids.forEach(function (id) { const svc = site.services.find(function (x) { return x.id === id; }); if (!svc) return; %>
<div id="leistung-<%= id %>" class="p-6 md:p-8 border border-outline-variant/20 rounded-xl hover:border-primary/40 transition-colors group motion-lift scroll-mt-28">
<span class="material-symbols-outlined text-primary mb-4" style="font-variation-settings: 'FILL' 1;"><%= id === 'hochzeit' ? 'favorite' : 'spa' %></span>
<h3 class="font-headline text-xl text-on-surface mb-2"><%= svc.name %></h3>
<p class="text-sm text-on-surface-variant font-light leading-relaxed mb-6"><%= svc.description %></p>
<div class="flex justify-between items-center">
<span class="font-label text-[10px] uppercase tracking-widest text-outline"><%= svc.duration %></span>
<span class="font-headline text-lg text-primary">ab <%= svc.priceFrom %> <%= svc.currency %></span>
</div>
</div>
<% }); %>
</div>
<% } else { %>
<div class="space-y-2 md:space-y-4">
<% rowIds.forEach(function (id) { const svc = site.services.find(function (x) { return x.id === id; }); if (!svc) return; %>
<div id="leistung-<%= id %>" class="group flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 py-4 hover:bg-surface-container-low transition-colors duration-500 rounded-lg px-4 -mx-4 scroll-mt-28">
<div class="space-y-1">
<% if (svc.badge) { %><span class="text-[10px] font-label uppercase tracking-widest text-primary"><%= svc.badge %></span><% } %>
<h3 class="font-headline text-lg md:text-xl text-on-surface group-hover:text-primary transition-colors"><%= svc.name %></h3>
<p class="text-sm text-on-surface-variant font-light"><%= svc.description %></p>
</div>
<div class="flex items-center gap-6 sm:gap-8 shrink-0">
<span class="font-label text-xs tracking-widest text-outline"><%= svc.duration %></span>
<span class="font-headline text-lg md:text-xl text-primary">ab <%= svc.priceFrom %> <%= svc.currency %></span>
</div>
</div>
<% }); %>
</div>
<% } %>
</section>
<% }); %>
</div>

<aside class="lg:col-span-4 lg:sticky lg:top-36 h-fit space-y-8" data-reveal>
<div class="glass-panel p-8 md:p-10 rounded-2xl shadow-2xl space-y-8">
<div class="space-y-2">
<h4 class="font-headline text-2xl text-on-surface">Zeit sichern</h4>
<p class="text-sm text-on-surface-variant font-light">Unverbindliche Terminanfrage — wir melden uns zur Bestätigung.</p>
</div>
<a href="/buchung" class="w-full flex items-center justify-center gap-3 bg-gradient-to-r from-primary to-on-primary-container text-on-primary font-label text-xs tracking-[0.2em] uppercase py-5 rounded-lg hover:shadow-[0_0_30px_rgba(233,193,118,0.3)] transition-all">
<span>Verfügbarkeit anfragen</span>
<span class="material-symbols-outlined text-sm">calendar_today</span>
</a>
<div class="pt-6 border-t border-outline-variant/20 text-center">
<p class="text-[10px] font-label uppercase tracking-widest text-outline-variant">Lieber direkt?</p>
<a class="block mt-2 font-headline text-lg text-secondary hover:text-primary transition-colors" href="tel:<%= site.phone %>"><%= site.phoneDisplay %></a>
</div>
<p class="text-center text-xs text-on-surface-variant font-light pt-6 border-t border-outline-variant/10">Unsere Arbeit in Bildern: <a href="/galerie" class="text-primary hover:underline underline-offset-4">Galerie</a> · Team: <a href="/team" class="text-primary hover:underline underline-offset-4"><%= site.owner.name %> &amp; Crew</a></p>
</div>
<div class="relative rounded-2xl overflow-hidden aspect-square">
<img class="w-full h-full object-cover opacity-40" src="<%= site.gallery[4] ? site.gallery[4].src : site.gallery[0].src %>" alt="" loading="lazy" decoding="async">
<div class="absolute inset-0 bg-surface/40 flex items-center justify-center p-8 text-center">
<div class="space-y-4">
<span class="material-symbols-outlined text-primary text-4xl">auto_awesome</span>
<h5 class="font-headline text-lg md:text-xl italic text-on-surface">„<%= site.owner.quote %>”</h5>
</div>
</div>
</div>
</aside>
</div>
</main>
<%- include('partials/stitch-footer') %>
<%- include('partials/end', { scripts: [] }) %>
