<%- 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">Kontakt</span>
<h1 class="font-headline text-3xl sm:text-4xl md:text-6xl lg:text-7xl font-bold tracking-tight text-on-surface">Nachricht an <%= site.brand %></h1>
</header>

<div class="max-w-xl mx-auto w-full mb-20 md:mb-32 anim-page-head-delayed">
<h2 class="font-headline text-2xl md:text-3xl mb-8 md:mb-10 text-on-surface text-center">Nachricht senden</h2>
<form id="contact-form" class="space-y-8" 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="relative group">
<label class="font-label text-[10px] tracking-widest uppercase text-outline mb-2 block group-focus-within:text-primary transition-colors" for="cf-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="cf-name" name="name" type="text" required autocomplete="name" placeholder="DEIN 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="cf-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="cf-email" name="email" type="email" required autocomplete="email" placeholder="NAME@BEISPIEL.DE">
</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="cf-subject">Betreff <span class="text-outline-variant">(optional)</span></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="cf-subject" name="subject" type="text" autocomplete="off" placeholder="THEMA">
</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="cf-message">Nachricht</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="cf-message" name="message" rows="5" required autocomplete="off" placeholder="WIE KÖNNEN WIR HELFEN?"></textarea>
</div>
<p id="contact-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">Nachricht senden</button>
</form>
<p class="mt-6 text-center text-[10px] text-outline-variant uppercase tracking-widest">Demo: ohne SMTP siehe Server-Log.</p>
</div>

<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: 'tall' }) %>
<div id="oeffnungszeiten" class="p-6 md:p-10 lg:p-12 border border-outline-variant/20 rounded-xl glass-panel motion-lift scroll-mt-28">
<h3 class="font-headline text-2xl md:text-3xl mb-8 md:mb-12 text-primary">Öffnungszeiten</h3>
<div class="space-y-4 md:space-y-6">
<% site.openingHoursRows.forEach(function (row) { %>
<div class="flex justify-between items-end gap-4 border-b border-outline-variant/10 pb-4">
<span class="font-label text-xs tracking-widest uppercase text-secondary"><%= row.day %></span>
<span class="font-body text-base md:text-lg text-on-surface font-light text-right"><%= row.hours %></span>
</div>
<% }); %>
</div>
<div class="mt-10 md:mt-12 flex flex-wrap gap-8 md:gap-10">
<div>
<p class="font-label text-[10px] tracking-widest uppercase text-outline mb-2">Telefon</p>
<a class="font-body text-lg text-on-surface hover:text-primary transition-colors" href="tel:<%= site.phone %>"><%= site.phoneDisplay %></a>
</div>
<div>
<p class="font-label text-[10px] tracking-widest uppercase text-outline mb-2">E-Mail</p>
<a class="font-body text-lg text-on-surface hover:text-primary transition-colors break-all" href="mailto:<%= site.email %>"><%= site.email %></a>
</div>
</div>
<p class="mt-8 text-sm text-on-surface-variant"><%= site.accessibilityNote %></p>
</div>
</section>

<% if (site.aiContent && site.aiContent.faq && site.aiContent.faq.length) { %>
<section class="border-t border-outline-variant/10 pt-16 md:pt-24 max-w-3xl mx-auto w-full" aria-labelledby="kontakt-faq-heading">
<div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 mb-10">
<h2 id="kontakt-faq-heading" class="font-headline text-2xl md:text-3xl text-on-surface">Häufige Fragen</h2>
<% if (site.aiContent.lastReviewed) { %>
<p class="text-[10px] font-label uppercase tracking-widest text-outline-variant shrink-0">Stand <time datetime="<%= site.aiContent.lastReviewed %>"><%= site.aiContent.lastReviewed.replace(/^(\d{4})-(\d{2})-(\d{2})$/, '$3.$2.$1') %></time></p>
<% } %>
</div>
<div class="space-y-8">
<% site.aiContent.faq.forEach(function (item, i) { %>
<div class="border-b border-outline-variant/15 pb-8 last:border-0 last:pb-0">
<h3 class="font-headline text-lg text-primary mb-3"><%= item.question %></h3>
<p class="font-body text-on-surface-variant text-sm md:text-base leading-relaxed"><%= item.answer %></p>
</div>
<% }); %>
</div>
</section>
<% } %>
</main>
<%- include('partials/stitch-footer') %>
<%- include('partials/end', { scripts: [] }) %>
