<%- include('partials/stitch-head') %>
<body class="bg-background 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-24 md:pb-20 px-4 sm:px-6 md:px-12 max-w-screen-2xl mx-auto min-h-screen">
<%- include('partials/stitch-breadcrumbs') %>
<header class="mb-12 md:mb-20 text-center anim-page-head">
<span class="font-label text-[10px] tracking-[0.3em] uppercase text-primary mb-4 block">Reservierung</span>
<h1 class="font-headline text-3xl sm:text-4xl md:text-6xl lg:text-7xl font-bold tracking-tight text-on-surface">Termin anfragen</h1>
<p class="mt-6 max-w-2xl mx-auto text-on-surface-variant text-sm md:text-base font-light"><%= site.booking.disclaimer %></p>
</header>

<% if (site.aiContent && site.aiContent.bookingHowToSteps && site.aiContent.bookingHowToSteps.length) { %>
<section id="termin-so-gehts" class="max-w-2xl mx-auto w-full mb-12 md:mb-16" aria-labelledby="buchung-howto-heading">
<h2 id="buchung-howto-heading" class="font-headline text-xl md:text-2xl text-on-surface mb-6">So funktioniert die Online-Anfrage</h2>
<ol class="list-decimal list-inside space-y-3 md:space-y-4 text-on-surface-variant text-sm md:text-base font-light leading-relaxed marker:text-primary">
<% site.aiContent.bookingHowToSteps.forEach(function (step) { %>
<li><span class="font-medium text-on-surface"><%= step.name %>:</span> <%= step.text %></li>
<% }); %>
</ol>
</section>
<% } %>

<script id="booking-config" type="application/json"><%- bookingJson %></script>

<form id="booking-form" class="mb-16 md:mb-24" novalidate>
<input type="text" name="website" value="" tabindex="-1" autocomplete="off" aria-hidden="true" class="sr-only" style="position:absolute;left:-9999px;width:1px;height:1px;opacity:0">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-12 data-reveal-stagger">
<div class="lg:col-span-5 relative">
<div class="glass-panel p-6 md:p-8 rounded-xl shadow-2xl relative z-10">
<div class="mb-6">
<label class="font-label text-[10px] tracking-[0.2em] uppercase text-outline mb-3 block" for="booking-service">Leistung</label>
<select class="w-full bg-surface-container-lowest border border-outline-variant/40 rounded-lg py-3 px-4 text-on-surface text-sm focus:border-primary focus:ring-0" id="booking-service" name="serviceId" required>
<option value="">Bitte wählen …</option>
<% site.services.forEach(function (svc) { %>
<option value="<%= svc.id %>"><%= svc.name %> (ab <%= svc.priceFrom %> <%= svc.currency %>)</option>
<% }); %>
</select>
</div>
<div class="flex justify-between items-center mb-6">
<h2 class="font-headline text-xl md:text-2xl text-primary">Datum wählen</h2>
<div class="flex gap-1 sm:gap-2 md:gap-4">
<button type="button" id="booking-prev-month" class="inline-flex items-center justify-center min-h-11 min-w-11 rounded-lg text-secondary hover:text-primary hover:bg-surface-container-high/50 bg-transparent border-0 p-0 cursor-pointer" aria-label="Vorheriger Monat"><span class="material-symbols-outlined text-2xl">chevron_left</span></button>
<button type="button" id="booking-next-month" class="inline-flex items-center justify-center min-h-11 min-w-11 rounded-lg text-secondary hover:text-primary hover:bg-surface-container-high/50 bg-transparent border-0 p-0 cursor-pointer" aria-label="Nächster Monat"><span class="material-symbols-outlined text-2xl">chevron_right</span></button>
</div>
</div>
<p id="booking-month-label" class="font-label text-[10px] tracking-widest uppercase text-outline mb-4 text-center"></p>
<div id="booking-calendar" class="mb-8"></div>
<div class="border-t border-outline-variant/30 pt-6 md:pt-8">
<h3 class="font-label text-[10px] tracking-[0.2em] uppercase text-outline mb-4">Uhrzeiten</h3>
<div id="booking-slots"></div>
</div>
<input type="hidden" name="date" value="">
<input type="hidden" name="time" value="">
</div>
<div class="absolute -top-10 -left-10 w-40 h-40 bg-primary/10 rounded-full blur-[80px] pointer-events-none hidden md:block"></div>
</div>

<div class="lg:col-span-7 flex flex-col justify-start">
<div class="max-w-xl mx-auto lg:mx-0 lg:ml-auto w-full">
<h2 class="font-headline text-2xl md:text-3xl mb-8 md:mb-10 text-on-surface">Deine Kontaktdaten</h2>
<div class="space-y-6 md:space-y-8">
<div class="relative group">
<label class="font-label text-[10px] tracking-widest uppercase text-outline mb-2 block group-focus-within:text-primary transition-colors" for="bf-name">Name</label>
<input class="w-full bg-surface-container-lowest border border-outline-variant/40 focus:border-primary focus:ring-0 rounded-lg py-4 px-6 text-on-surface placeholder:text-outline-variant/50 transition-all font-body text-sm" id="bf-name" name="name" type="text" required autocomplete="name" placeholder="NAME">
</div>
<div class="relative group">
<label class="font-label text-[10px] tracking-widest uppercase text-outline mb-2 block group-focus-within:text-primary transition-colors" for="bf-email">E-Mail</label>
<input class="w-full bg-surface-container-lowest border border-outline-variant/40 focus:border-primary focus:ring-0 rounded-lg py-4 px-6 text-on-surface placeholder:text-outline-variant/50 transition-all font-body text-sm" id="bf-email" name="email" type="email" autocomplete="email" placeholder="E-MAIL">
</div>
<div class="relative group">
<label class="font-label text-[10px] tracking-widest uppercase text-outline mb-2 block group-focus-within:text-primary transition-colors" for="bf-phone">Telefon</label>
<input class="w-full bg-surface-container-lowest border border-outline-variant/40 focus:border-primary focus:ring-0 rounded-lg py-4 px-6 text-on-surface placeholder:text-outline-variant/50 transition-all font-body text-sm" id="bf-phone" name="phone" type="tel" autocomplete="tel" placeholder="TELEFON">
</div>
<div class="relative group">
<label class="font-label text-[10px] tracking-widest uppercase text-outline mb-2 block group-focus-within:text-primary transition-colors" for="bf-note">Zusatz <span class="text-outline-variant">(optional)</span></label>
<textarea class="w-full bg-surface-container-lowest border border-outline-variant/40 focus:border-primary focus:ring-0 rounded-lg py-4 px-6 text-on-surface placeholder:text-outline-variant/50 transition-all font-body text-sm resize-none" id="bf-note" name="note" rows="4" autocomplete="off" placeholder="ANMERKUNGEN"></textarea>
</div>
<p class="text-xs text-outline-variant">Mindestens E-Mail oder Telefon ausfüllen.</p>
<p id="booking-form-status" class="text-sm font-body" role="status"></p>
<button class="w-full 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 shadow-lg hover:shadow-primary/20 transition-all active:scale-95" type="submit">Anfrage senden</button>
</div>
</div>
</div>
</div>
</form>

<section class="grid grid-cols-1 lg:grid-cols-2 gap-10 md:gap-12 items-stretch border-t border-outline-variant/10 pt-16 md:pt-24" data-reveal-stagger>
<%- include('partials/stitch-map-panel', { variant: 'compact' }) %>
<div class="p-6 md:p-10 flex flex-col justify-center border border-outline-variant/20 rounded-xl motion-lift">
<h3 class="font-headline text-2xl text-primary mb-6">Kurz erreichbar</h3>
<p class="text-on-surface-variant text-sm mb-6">Fragen vorab? Ruf uns an oder schreib eine <a class="text-primary hover:underline" href="/kontakt">Nachricht</a>.</p>
<a class="inline-flex items-center gap-2 font-headline text-xl text-secondary hover:text-primary transition-colors" href="tel:<%= site.phone %>"><span class="material-symbols-outlined text-base">call</span> <%= site.phoneDisplay %></a>
</div>
</section>
</main>
<%- include('partials/stitch-footer') %>
<%- include('partials/end', { scripts: ['/js/booking.js'] }) %>
