<%- include('partials/stitch-head') %>
<% const s = site.services; const g = site.gallery; const hb = site.homeBento || { eyebrow: 'Unser Menü', title: 'Haar-Erlebnisse mit Liebe zum Detail', aside: 'Individuelle Beratung, hochwertige Produkte und ruhige Atmosphäre — für Schnitt, Farbe und Pflege.' }; %>
<body class="bg-surface text-on-surface font-body selection:bg-primary/30 selection:text-primary">
<%- include('partials/stitch-nav') %>
<main>
<%- include('partials/stitch-breadcrumbs') %>
<section class="relative min-h-[100dvh] min-h-screen flex items-center justify-center overflow-hidden pt-[calc(4.5rem+env(safe-area-inset-top,0px))] pb-10 md:pt-20 md:pb-0">
<div class="absolute inset-0 z-0">
<img class="w-full h-full object-cover opacity-40 anim-hero-bg" src="<%= site.hero.image.src %>" alt="<%= site.hero.image.alt %>" width="1920" height="1080" loading="eager" decoding="async">
<div class="absolute inset-0 bg-gradient-to-b from-surface/80 via-transparent to-surface"></div>
</div>
<div class="relative z-10 w-full max-w-7xl mx-auto px-4 sm:px-6 flex justify-center">
<div class="glass-panel p-6 sm:p-10 md:p-20 rounded-xl max-w-4xl w-full text-center anim-hero-panel">
<span class="font-label text-primary tracking-[0.3em] uppercase text-xs mb-6 block anim-hero-eyebrow"><%= site.hero.eyebrow %> · <%= site.owner.years %> Jahre</span>
<% const _ht = site.hero.title.split('Hilden'); %>
<h1 class="font-headline text-3xl sm:text-4xl md:text-5xl lg:text-8xl text-on-surface leading-[1.12] sm:leading-tight mb-6 sm:mb-8 tracking-tighter anim-hero-title">
<%= _ht[0] %><span class="text-primary italic">Hilden<% if (_ht[1]) { %><%= _ht[1] %><% } %></span>
</h1>
<p class="font-body text-secondary max-w-xl mx-auto text-lg mb-6 leading-relaxed anim-hero-lead">
<%= site.hero.lead %>
</p>
<% if (site.aiContent && site.aiContent.salonDefinition) { %>
<p id="salon-einordnung" class="font-body text-on-surface max-w-2xl mx-auto text-sm sm:text-base mb-6 leading-relaxed text-left sm:text-center border-l-2 border-primary/35 pl-4 sm:border-l-0 sm:pl-0 sm:border-t sm:border-primary/25 sm:pt-5">
<%= site.aiContent.salonDefinition %>
</p>
<% } %>
<p class="font-body text-on-surface-variant max-w-xl mx-auto text-base mb-10 leading-relaxed anim-hero-text">
<%= site.hero.text %>
</p>
<div class="flex flex-col md:flex-row items-stretch sm:items-center justify-center gap-4 sm:gap-6 w-full max-w-md sm:max-w-none mx-auto md:mx-0 anim-hero-cta">
<a class="w-full md:w-auto inline-flex items-center justify-center min-h-12 bg-primary text-on-primary px-8 sm:px-10 py-4 sm:py-5 rounded-md font-label uppercase tracking-widest text-sm font-bold hover:shadow-[0_0_40px_rgba(233,193,118,0.3)] transition-all motion-lift" href="/buchung">Termin anfragen</a>
<a class="w-full md:w-auto inline-flex items-center justify-center min-h-12 border border-outline-variant/30 text-primary px-8 sm:px-10 py-4 sm:py-5 rounded-md font-label uppercase tracking-widest text-sm font-bold hover:bg-surface-container-high transition-all motion-lift" href="/leistungen">Leistungen</a>
</div>
<p class="mt-10 font-label text-[10px] tracking-widest uppercase text-secondary/70 anim-hero-rating">⭐ <%= site.hero.rating.value %> <%= site.hero.rating.label %> · Walk-ins willkommen</p>
</div>
</div>
<div class="absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 opacity-40">
<span class="font-label text-[10px] tracking-[0.2em] uppercase anim-fade-soft">Mehr entdecken</span>
<div class="w-px h-12 bg-gradient-to-b from-primary to-transparent anim-hero-scroll-hint"></div>
</div>
</section>

<% const hsfTimeSlots = []; for (var _h = 8; _h <= 19; _h++) { for (var _m = 0; _m < 60; _m += 30) { if (_h === 19 && _m > 0) continue; var _hh = _h < 10 ? '0' + _h : String(_h); var _mm = _m === 0 ? '00' : '30'; hsfTimeSlots.push(_hh + ':' + _mm); } } %>
<section class="py-16 sm:py-24 md:py-32 px-4 sm:px-6 md:px-12 bg-surface-container-low" aria-labelledby="home-services-heading">
<div class="max-w-screen-2xl mx-auto">
<div class="flex flex-col md:flex-row md:items-end justify-between gap-8 mb-12 md:mb-16" data-reveal>
<div class="max-w-2xl">
<span class="font-label text-primary tracking-[0.2em] uppercase text-xs mb-4 block">Leistungen</span>
<h2 id="home-services-heading" class="font-headline text-4xl md:text-5xl lg:text-6xl text-on-surface tracking-tight">Unser Angebot</h2>
<p class="mt-4 text-on-surface-variant text-sm md:text-base leading-relaxed max-w-xl">Tippe auf eine Kachel — im Fenster kannst du direkt eine unverbindliche Terminanfrage für diese Leistung senden.</p>
</div>
<a class="shrink-0 font-label text-[10px] tracking-[0.2em] uppercase text-primary border border-outline-variant/30 px-6 py-3 rounded-md hover:bg-surface-container-high transition-colors motion-lift" href="/leistungen">Alle Preise</a>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8" data-reveal-stagger>
<% site.services.forEach(function (svc) { %>
<button type="button" class="group text-left w-full glass-panel rounded-xl p-6 md:p-8 motion-lift border border-outline-variant/15 hover:border-primary/35 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-surface-container-low" data-open-service-modal="<%= svc.id %>" aria-haspopup="dialog" aria-controls="service-booking-dialog">
<div class="flex items-start justify-between gap-4 mb-4">
<% if (svc.badge) { %><span class="font-label text-[10px] tracking-widest uppercase text-primary"><%= svc.badge %></span><% } else { %><span class="font-label text-[10px] tracking-widest uppercase text-outline">Salon</span><% } %>
<span class="material-symbols-outlined text-primary/80 group-hover:text-primary transition-colors text-2xl shrink-0" aria-hidden="true">calendar_add_on</span>
</div>
<h3 class="font-headline text-xl md:text-2xl text-on-surface mb-3 group-hover:text-primary transition-colors"><%= svc.name %></h3>
<p class="text-sm text-on-surface-variant leading-relaxed mb-6 home-tile-desc-3"><%= svc.description %></p>
<div class="flex flex-wrap items-baseline justify-between gap-2 pt-4 border-t border-outline-variant/20">
<span class="font-label text-xs tracking-widest text-outline uppercase"><%= svc.duration %></span>
<span class="font-headline text-lg text-primary">ab <%= svc.priceFrom %><%= svc.currency %></span>
</div>
<span class="sr-only">Öffnet Terminanfrage für <%= svc.name %></span>
</button>
<% }); %>
</div>
<p class="mt-10 md:mt-12 text-center text-sm text-secondary/70">Ausführlicher Kalender mit freien Tagen: <a class="text-primary hover:underline underline-offset-4" href="/buchung">Zur Buchungsseite</a></p>
</div>
</section>

<section class="py-16 sm:py-24 md:py-32 px-4 sm:px-6 md:px-12 bg-surface">
<div class="max-w-screen-2xl mx-auto">
<div class="flex flex-col md:flex-row justify-between items-end mb-16 md:mb-20 gap-8" data-reveal>
<div class="max-w-2xl">
<span class="font-label text-primary tracking-[0.2em] uppercase text-xs mb-4 block"><%= hb.eyebrow %></span>
<h2 class="font-headline text-4xl md:text-6xl text-on-surface tracking-tight"><%= hb.title %></h2>
</div>
<p class="font-body text-secondary/60 max-w-xs text-sm uppercase tracking-wider leading-relaxed">
<%= hb.aside %>
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-12 gap-6" data-reveal-stagger>
<% const bento = [
  { col: 8, aspect: 'aspect-[16/9]', si: 0, gi: 0 },
  { col: 4, aspect: 'aspect-square md:aspect-auto', si: 2, gi: 1 },
  { col: 4, aspect: 'aspect-square md:aspect-auto', si: 5, gi: 2 },
  { col: 8, aspect: 'aspect-[16/9]', si: 3, gi: 3 },
]; %>
<% bento.forEach(function (cell) { const svc = s[cell.si]; const img = g[cell.gi] || g[0]; const colClass = cell.col === 8 ? 'md:col-span-8' : 'md:col-span-4'; %>
<div class="<%= colClass %> group relative overflow-hidden rounded-xl <%= cell.aspect %> bg-surface-container-low motion-lift">
<img class="absolute inset-0 w-full h-full object-cover opacity-60 group-hover:scale-110 transition-transform duration-700" src="<%= img.src %>" alt="<%= img.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-0 left-0 p-6 md:p-10">
<h3 class="font-headline text-2xl md:text-3xl mb-2 text-on-surface"><%= svc.name %></h3>
<p class="text-secondary/80 max-w-sm mb-4 md:mb-6 text-sm"><%= svc.description %></p>
<span class="font-label text-primary text-xs tracking-widest border-b border-primary/30 pb-1">AB <%= svc.priceFrom %><%= svc.currency %></span>
</div>
</div>
<% }) %>
</div>
</div>
</section>

<section class="py-16 sm:py-24 md:py-32 bg-surface-container-low overflow-hidden" data-reveal>
<div class="max-w-screen-2xl mx-auto px-4 sm:px-6 md:px-12">
<div class="grid grid-cols-1 md:grid-cols-2 items-center gap-10 sm:gap-16 md:gap-20">
<div class="relative">
<div class="aspect-[4/5] rounded-xl overflow-hidden relative z-10 shadow-2xl">
<img class="w-full h-full object-cover" src="<%= site.owner.image.src %>" alt="<%= site.owner.image.alt %>" width="800" height="1000" loading="lazy" decoding="async">
</div>
<div class="absolute -bottom-10 -right-10 w-full h-full bg-surface-container-high -z-0 rounded-xl hidden md:block"></div>
<div class="absolute -top-6 -left-6 glass-panel p-6 z-20">
<span class="font-headline text-4xl text-primary block"><%= site.owner.years %></span>
<span class="font-label text-[10px] tracking-widest uppercase">Jahre Erfahrung</span>
</div>
</div>
<div class="space-y-8 md:space-y-10">
<span class="font-label text-primary tracking-[0.2em] uppercase text-xs block">Inhaber</span>
<h2 class="font-headline text-3xl sm:text-4xl md:text-7xl text-on-surface break-words"><%= site.owner.name %> <br/><span class="italic font-normal text-primary"><%= site.owner.role %></span></h2>
<div class="space-y-6 font-body text-on-surface-variant text-base sm:text-lg leading-relaxed">
<p>“<%= site.owner.quote %>”</p>
<p><%= site.owner.bio %></p>
</div>
<div class="pt-4">
<a class="inline-flex border border-outline-variant/30 text-primary px-8 py-4 rounded-md font-label uppercase tracking-widest text-xs font-bold hover:bg-surface-container-high transition-all" href="/team">Mehr zum Team</a>
</div>
</div>
</div>
</div>
</section>

<section class="py-16 sm:py-24 md:py-32 bg-surface">
<div class="max-w-screen-2xl mx-auto px-4 sm:px-6 md:px-12">
<div class="text-center mb-12 sm:mb-16 md:mb-24" data-reveal>
<span class="font-label text-primary tracking-[0.2em] uppercase text-xs mb-4 block">Stimmen</span>
<h2 class="font-headline text-3xl sm:text-4xl md:text-6xl text-on-surface px-2">Das sagen unsere Gäste</h2>
<p class="mt-4 text-sm text-secondary/60 max-w-xl mx-auto"><%= site.imagesNote %></p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8" data-reveal-stagger>
<% site.testimonials.forEach(function (t, idx) { %>
<div class="glass-panel p-6 sm:p-8 md:p-10 rounded-xl flex flex-col justify-between motion-lift <%= idx === 1 ? 'md:translate-y-12' : '' %>">
<div>
<span class="material-symbols-outlined text-primary text-4xl mb-6" style="font-variation-settings: 'FILL' 1;">format_quote</span>
<p class="font-headline text-lg md:text-xl italic text-on-surface mb-8 leading-relaxed">“<%= t.text %>”</p>
</div>
<div class="flex items-center gap-4">
<div class="w-12 h-12 rounded-full overflow-hidden border border-primary/20">
<img class="w-full h-full object-cover" src="<%= t.avatar %>" alt="" width="48" height="48" loading="lazy" decoding="async">
</div>
<div>
<h4 class="font-bold text-sm uppercase tracking-wider text-on-surface"><%= t.author %></h4>
<p class="text-[10px] text-secondary/60 tracking-widest uppercase"><%= t.meta %></p>
</div>
</div>
</div>
<% }) %>
</div>
<p class="mt-10 md:mt-12 text-center text-sm text-on-surface-variant max-w-2xl mx-auto leading-relaxed">Mehr Bilder und Looks: <a href="/galerie" class="text-primary hover:underline underline-offset-4">Galerie — Schnitt, Styling und Farbe</a>. Adresse und Zeiten: <a href="/kontakt#oeffnungszeiten" class="text-primary hover:underline underline-offset-4">Kontakt &amp; Öffnungszeiten in Hilden</a>.</p>
</div>
</section>

<section class="py-16 sm:py-24 md:py-32 relative overflow-hidden" data-reveal>
<div class="absolute inset-0 z-0">
<img class="w-full h-full object-cover opacity-20" src="<%= site.ctaSection.image %>" alt="<%= site.ctaSection.imageAlt %>" width="1600" height="900" loading="lazy" decoding="async">
<div class="absolute inset-0 bg-surface/90"></div>
</div>
<div class="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 text-center">
<h2 class="font-headline text-3xl sm:text-4xl md:text-7xl mb-8 sm:mb-10 md:mb-12 text-on-surface leading-tight"><%= site.ctaSection.titleLine1 %> <br/><span class="text-primary italic"><%= site.ctaSection.titleAccent %></span></h2>
<a href="/buchung" class="inline-flex items-center justify-center min-h-12 w-full max-w-sm sm:w-auto mx-auto sm:mx-0 bg-primary text-on-primary px-10 sm:px-12 md:px-16 py-4 sm:py-5 md:py-6 rounded-md font-label uppercase tracking-[0.2em] text-sm font-extrabold hover:shadow-[0_0_50px_rgba(233,193,118,0.4)] transition-all">Termin anfragen</a>
</div>
</section>
</main>

<dialog id="service-booking-dialog" class="home-service-dialog" aria-labelledby="service-dialog-title">
<div class="home-service-dialog__panel">
<header class="home-service-dialog__header">
<div>
<span class="home-service-dialog__eyebrow">Termin anfragen</span>
<h2 id="service-dialog-title" class="home-service-dialog__title"></h2>
</div>
<button type="button" class="home-service-dialog__close" data-close-service-dialog aria-label="Dialog schließen">
<span class="material-symbols-outlined text-[26px] font-light" aria-hidden="true">close</span>
</button>
</header>
<p id="service-dialog-description" class="home-service-dialog__desc"></p>
<p id="service-dialog-meta" class="home-service-dialog__meta"></p>
<form id="home-service-booking-form" class="home-service-dialog__form" 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">
<input type="hidden" name="serviceId" id="hsf-service-id" value="">
<div class="home-service-dialog__field">
<label for="hsf-name">Name</label>
<input class="home-service-dialog__input" id="hsf-name" name="name" type="text" required autocomplete="name" placeholder="Dein Name">
</div>
<div class="home-service-dialog__field">
<label for="hsf-email">E-Mail</label>
<input class="home-service-dialog__input" id="hsf-email" name="email" type="email" autocomplete="email" placeholder="name@beispiel.de">
</div>
<div class="home-service-dialog__field">
<label for="hsf-phone">Telefon</label>
<input class="home-service-dialog__input" id="hsf-phone" name="phone" type="tel" autocomplete="tel" placeholder="Optional, falls keine E-Mail">
</div>
<div class="home-service-dialog__row">
<div class="home-service-dialog__field">
<label for="hsf-date">Wunschdatum</label>
<input class="home-service-dialog__input" id="hsf-date" name="date" type="date" required>
</div>
<div class="home-service-dialog__field">
<label for="hsf-time">Uhrzeit</label>
<select class="home-service-dialog__select" id="hsf-time" name="time" required>
<option value="">Bitte wählen …</option>
<% hsfTimeSlots.forEach(function (slot) { %>
<option value="<%= slot %>"><%= slot %> Uhr</option>
<% }); %>
</select>
</div>
</div>
<div class="home-service-dialog__field">
<label for="hsf-note">Anmerkung <span class="booking-label-opt">(optional)</span></label>
<textarea class="home-service-dialog__textarea" id="hsf-note" name="note" rows="3" autocomplete="off" placeholder="z. B. Wunsch oder Fragen"></textarea>
</div>
<p id="hsf-status" class="home-service-dialog__status font-body" role="status"></p>
<button class="home-service-dialog__submit" type="submit">Anfrage senden</button>
</form>
<p class="home-service-dialog__disclaimer"><%= site.booking.disclaimer %></p>
</div>
</dialog>

<script type="application/json" id="home-services-booking-json"><%- JSON.stringify({ services: site.services, advanceWeeks: site.booking.advanceWeeks }).replace(/</g, "\\u003c") %></script>
<%- include('partials/stitch-footer') %>
<%- include('partials/end', { scripts: ['/js/home-service-modal.js'] }) %>
