// screens2.jsx — Stamp pass, Reservation, Rooms, Beer, Info
// ─────────────────────────────────────────────────────────────
// Default editable app data (passed down from App via appData prop)
// ─────────────────────────────────────────────────────────────
const DEFAULT_APP_DATA = {
hours: [
{ day: 'Do – Sa', times: ['17:00 – 21:30'], closed: false },
{ day: 'Sonntag', times: ['11:30 – 14:30', '17:00 – 21:00'], closed: false },
{ day: 'Mo – Mi', times: ['Ruhetag'], closed: true }],
contact: {
address: 'Kirchplatz 2 · 97292 Uettingen',
phone: '09369 - 8221',
email: 'kontakt@alte-brauerei.de',
whatsapp: 'https://wa.me/4993698221',
ebike: '6 kostenfreie Stationen am Hof',
wall: '2 Wallboxen · je 11 kW'
},
home: {
name: 'Brauerei Zapf',
tagline: 'Familiengeführt seit 1883.\nFrisch g\'zapft, frisch g\'kocht.'
},
news: {
icon: 'bike',
text: 'Sechs E-Bike-Ladestationen',
sub: 'Kostenfrei am Hof — Kabel bitte mitbringen.'
},
platzampel: {
schichten: [
{ label: 'Do Abend', status: 'grün' },
{ label: 'Fr Abend', status: 'grün' },
{ label: 'Sa Abend', status: 'grün' },
{ label: 'So Mittag', status: 'grün' },
{ label: 'So Abend', status: 'grün' }]
},
wochenkarte: {
kw: '21',
do: [
{ name: 'Frühlings-„Brizza"', desc: 'Brezelteig-Pizza · Knoblauchschmand, Feta, grüner Spargel, Paprika, Zucchini, rote Zwiebelringe', price: '16,50' },
{ name: 'Paniertes Jägerschnitzel', desc: 'mit Rahmpilzen, Wedges und Beilagensalat', price: '19,90' }],
fr: [
{ name: 'Frühlings-„Brizza"', desc: 'Brezelteig-Pizza · Knoblauchschmand, Feta, grüner Spargel, Paprika, Zucchini, rote Zwiebelringe', price: '16,50' },
{ name: 'Paniertes Jägerschnitzel', desc: 'mit Rahmpilzen, Wedges und Beilagensalat', price: '19,90' }],
sa: [
{ name: 'Pikanter Schaschliktopf', desc: 'o. Innereien · mit Pommes frites und Beilagensalat', price: '18,50' },
{ name: 'Rinderbraten', desc: 'mit Burgundersauce, Kartoffelklößen und Salat oder Wirsing', price: '22,50' }],
so: [
{ name: 'Pikanter Schaschliktopf', desc: 'o. Innereien · mit Pommes frites und Beilagensalat', price: '18,50' },
{ name: 'Rinderbraten', desc: 'mit Burgundersauce, Kartoffelklößen und Salat oder Wirsing', price: '22,50' }],
bild: ''
},
sonderbier: {
name: 'Vaters Freude',
desc: 'Dunkel, herb, obergärig, leichte Trübung',
price: '3,50'
},
sonderzeiten: {
betriebsruhe: [
{ von: '02.07.26', bis: '05.07.26' },
{ von: '27.08.26', bis: '13.09.26' },
{ von: '05.11.26', bis: '08.11.26' },
{ von: '24.12.26', bis: '06.01.27' }],
feiertage: [
{ datum: '01.05.2026', name: 'Tag der Arbeit (Fr)', zeit: 'ab 17:00' },
{ datum: '14.05.2026', name: 'Christi Himmelfahrt (Do)', zeit: 'ab 17:00' },
{ datum: '25.05.2026', name: 'Pfingstmontag (Mo)', zeit: 'ab 11:30' },
{ datum: '04.06.2026', name: 'Fronleichnam (Do)', zeit: 'ab 17:00' },
{ datum: '15.08.2026', name: 'Mariä Himmelfahrt (Sa)', zeit: 'ab 17:00' },
{ datum: '03.10.2026', name: 'Tag der dt. Einheit (Sa)', zeit: 'ab 17:00' },
{ datum: '01.11.2026', name: 'Allerheiligen (So)', zeit: 'ab 11:30' },
{ datum: '25.12.2026', name: 'Weihnachten (Fr)', zeit: 'geschlossen' },
{ datum: '26.12.2026', name: 'Weihnachten (Sa)', zeit: 'geschlossen' }]
}
};
// ─────────────────────────────────────────────────────────────
// STEMPELPASS — hero feature
// ─────────────────────────────────────────────────────────────
const MILESTONES = [
{ at: 5, label: 'Ein Hausbier', sub: 'aufs Haus', icon: 'beer', earned: 5 },
{ at: 10, label: 'Cocktail nach Wahl', sub: 'aufs Haus', icon: 'sparkle', earned: 10 },
{ at: 20, label: 'Günstigstes Gericht frei', sub: 'von allen bestellten Speisen des Abends', icon: 'heart', earned: 20 }];
const STAMP_PHRASE = "PROST AUF UETTINGEN!";
const StampPassScreen = ({ palette, tweaks, stamps, setStamps, openQR, guestId, restoreByGuestId, stampsLoading }) => {
const style = tweaks.stampStyle || 'bierdeckel';
const next = MILESTONES.find((m) => stamps < m.at) || MILESTONES[2];
const remaining = Math.max(0, next.at - stamps);
const [showRestore, setShowRestore] = React.useState(false);
const [restoreInput, setRestoreInput] = React.useState('');
const [restoreMsg, setRestoreMsg] = React.useState('');
const doRestore = async () => {
if (restoreInput.length < 5) { setRestoreMsg('Bitte vollständige ID eingeben (z.B. ZB-4A2F)'); return; }
const ok = await restoreByGuestId(restoreInput);
setRestoreMsg(ok ? '✓ Stempel wiederhergestellt!' : '✗ ID nicht gefunden.');
if (ok) setTimeout(() => setShowRestore(false), 1500);
};
return (
Wirtshaus-Pass
Deine Stempelkarte
Für jeden Besuch ein Stempel — Code beim Personal erfragen.
{/* The card itself */}
{style === 'bierdeckel' &&
{/* Action buttons */}
{/* Next milestone hint OR congratulations */}
{stamps >= 20 ?
🎉
Herzlichen Glückwunsch!
Du hast alle 20 Stempel gesammelt. Vielen Dank für deine Treue — zeige diese Karte beim Personal zum Einlösen.
:
Noch {remaining || 1} Stempel bis {next.label}
{next.sub}
}
⭐
Bewertung = Stempel
Google-Bewertung abgeben → +1 Stempel extra
Hinterlasse uns eine Google-Bewertung und zeige sie dem Personal. Du bekommst dafür einen Bonus-Stempel !
Code vom Personal erfragen
_ _ _ _
Bewertung zeigen → Personal gibt dir einen Code → +1 Stempel
{/* Belohnungen */}
Was du bekommst
{MILESTONES.map((m) => {
const got = stamps >= m.at;
return (
{/* Big number */}
{m.at}
{got ?
:
{m.at - stamps} fehlen
}
);
})}
{/* Guest ID + Restore */}
{stampsLoading ? (
Lade Stempel…
) : (
Deine Karten-ID
{guestId || '…'}
Screenshot machen — zum Wiederherstellen
setShowRestore(v => !v)} style={{
padding:'6px 10px', borderRadius:8, border:`1px solid ${palette.green}25`,
background:'transparent', cursor:'pointer', fontFamily:'Manrope', fontSize:11, color:palette.muted,
}}>Restore
{showRestore && (
Alte ID eingeben
OK
{restoreMsg &&
{restoreMsg}
}
)}
)}
);
};
const BierdeckelCard = ({ palette, stamps }) =>
{/* Outer & inner rings */}
{/* Header */}
BRAUEREI ZAPF
Wirtshaus-Pass · seit 1883
{/* 5×4 stamp grid — fixed size cells so all 20 fit */}
{Array.from({ length: 20 }).map((_, i) => {
const filled = i < stamps;
const isMilestone = [4, 9, 19].includes(i);
return (
{filled &&
{STAMP_PHRASE[i]}
}
{isMilestone &&
{i + 1}
}
);
})}
{/* footer */}
{stamps} / 20 · Kirchplatz 2 · Uettingen
{/* Top strip */}
{/* Stamp grid 5x4 */}
{Array.from({ length: 20 }).map((_, i) => {
const filled = i < stamps;
return (
{filled ? STAMP_PHRASE[i] : i + 1}
);
})}
{/* Footer with name */}
NAME: M. WEBER
{stamps}/20
{/* Mug grid 5x4 */}
{Array.from({ length: 20 }).map((_, i) => {
const filled = i < stamps;
const fillPct = filled ? 0.85 : 0;
return (
{/* mug body */}
);
})}
{/* Foot */}
ZAPFBRÄU · KIRCHPLATZ 2 · UETTINGEN
;
// ─────────────────────────────────────────────────────────────
// CODE MODAL — customer enters daily PIN to receive stamp
// ─────────────────────────────────────────────────────────────
const CodeModal = ({ palette, onClose, onStamp }) => {
const [code, setCode] = React.useState('');
const [error, setError] = React.useState('');
const [success, setSuccess] = React.useState(null); // null | 'add' | number(subtract)
const daily = getDailyStampCode();
const verify = () => {
if (code.trim() === daily) {
setSuccess('add');
setTimeout(() => {onStamp(1);onClose();}, 1200);
return;
}
// Review bonus code
if (typeof getReviewCode === 'function' && code.trim() === getReviewCode()) {
setSuccess('add');
setTimeout(() => {onStamp(1);onClose();}, 1200);
return;
}
for (const n of [5, 10, 20]) {
if (code.trim() === getRedemptionCode(n)) {
setSuccess(n);
setTimeout(() => {onStamp(-n);onClose();}, 1500);
return;
}
}
setError('Falscher Code — bitte Personal fragen.');
setCode('');
};
return (
e.stopPropagation()} style={{
background: palette.cream, borderRadius: 22, padding: 24, width: '100%',
boxShadow: `0 24px 60px ${palette.ink}60`,
display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14
}}>
{success ?
<>
{success === 'add' ? 'Stempel erhalten!' : `${success} Stempel eingelöst!`}
:
<>
Stempel erhalten
Tages-Code vomPersonal eingeben
{setCode(e.target.value.replace(/\D/g, ''));setError('');}}
maxLength={4}
placeholder="_ _ _ _"
inputMode="numeric"
style={{
width: '100%', textAlign: 'center', fontSize: 36, letterSpacing: 14, fontFamily: '"DM Serif Display", serif',
padding: '14px 0', background: palette.paper, border: `2px solid ${error ? '#ef4444' : palette.green}`,
borderRadius: 14, color: palette.ink, outline: 'none'
}} />
{error &&
{error}
}
Code bestätigen
Den Tages-Code erhältst du vom Personal beim Bezahlen.
Abbrechen
}
);
};
// ─────────────────────────────────────────────────────────────
// RESERVIEREN FLOW
// ─────────────────────────────────────────────────────────────
const BookScreen = ({ palette, onComplete }) => {
const [step, setStep] = React.useState(0);
const [data, setData] = React.useState({
persons: 4, date: null, time: null, area: 'innen', name: '', tel: '', notes: ''
});
const update = (patch) => setData((d) => ({ ...d, ...patch }));
const next = () => setStep((s) => s + 1);
const back = () => setStep((s) => Math.max(0, s - 1));
const stepLabels = ['Personen', 'Datum & Zeit', 'Bereich', 'Kontakt', 'Bestätigung'];
return (
Tisch reservieren
{step < 4 ? <>Schritt {step + 1} / {stepLabels.length} : <>Geschafft!}
{/* Progress bar */}
{step < 4 &&
{stepLabels.map((_, i) =>
)}
{stepLabels[step].toUpperCase()}
}
{step === 0 &&
{/* Footer buttons */}
{step < 4 ?
{step > 0 &&
}
step === 3 ? next() : next()} disabled={!validateStep(step, data)} style={{
flex: 1, padding: '14px', background: validateStep(step, data) ? palette.green : palette.muted + '40',
color: palette.cream, border: 'none', borderRadius: 12, cursor: validateStep(step, data) ? 'pointer' : 'not-allowed',
fontFamily: 'Manrope', fontWeight: 700, fontSize: 14,
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
boxShadow: validateStep(step, data) ? `0 6px 14px ${palette.green}40` : 'none'
}}>
{step === 3 ? 'Reservierung absenden' : 'Weiter'}
:
Zurück zur Übersicht
}
);
};
const validateStep = (step, d) => {
if (step === 0) return d.persons > 0;
if (step === 1) return d.date && d.time;
if (step === 2) return !!d.area;
if (step === 3) return d.name.length > 1 && d.tel.length > 5;
return true;
};
const StepPersons = ({ data, update, palette }) =>
Wie viele seid ihr?
update({ persons: Math.max(1, data.persons - 1) })} style={{
width: 52, height: 52, borderRadius: 26, background: palette.green + '10', border: 'none',
color: palette.green, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center'
}}>
{data.persons}
{data.persons === 1 ? 'Person' : 'Personen'}
update({ persons: Math.min(20, data.persons + 1) })} style={{
width: 52, height: 52, borderRadius: 26, background: palette.green, border: 'none',
color: palette.cream, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center'
}}>
{data.persons >= 7 &&
Größere Gruppen sind herzlich willkommen — bis zu 25 Personen kein Problem. Bitte ruf kurz an: 09369 8221
}
;
const StepDate = ({ data, update, palette }) => {
const today = new Date();
const days = Array.from({ length: 14 }).map((_, i) => {
const d = new Date(today);d.setDate(today.getDate() + i);return d;
});
const dayNames = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'];
const months = ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'];
// Only Thu(4), Fri(5), Sat(6), Sun(0) are open; disable others
const isClosed = (d) => [1, 2, 3].includes(d.getDay());
// Also disable today if no more slots (past 19:45)
const isTodayFull = (d) => {
const now = new Date();
if (d.toDateString() !== now.toDateString()) return false;
const hm = now.getHours() * 60 + now.getMinutes();
return hm >= 19 * 60 + 46; // past last slot + 45min buffer
};
// Generate valid time slots for selected date
const getSlots = (d) => {
if (!d) return [];
const dow = d.getDay();
const now = new Date();
const isToday = d.toDateString() === now.toDateString();
const nowHm = isToday ? now.getHours() * 60 + now.getMinutes() : 0;
const slots = [];
// Sunday lunch: only 11:30 and 13:00
if (dow === 0) {
[691, 780].forEach((m) => {// 11:30=691, 13:00=780
const h = Math.floor(m / 60),mn = m % 60;
if (!isToday || nowHm + 45 <= m) {
slots.push(`${h}:${String(mn).padStart(2, '0')}`);
}
});
}
// Evening slots 17:00–19:45 in 15-min steps (all open days)
if ([0, 4, 5, 6].includes(dow)) {
for (let m = 17 * 60; m <= 19 * 60 + 45; m += 15) {
const h = Math.floor(m / 60),mn = m % 60;
if (!isToday || nowHm + 45 <= m) {
slots.push(`${h}:${String(mn).padStart(2, '0')}`);
}
}
}
return slots;
};
const selectedDate = data.date ? new Date(data.date) : null;
const slots = getSlots(selectedDate);
return (
Wann dürfen wir euch begrüßen?
{/* Date picker */}
{days.map((d, i) => {
const closed = isClosed(d) || isTodayFull(d);
const sel = selectedDate && d.toDateString() === selectedDate.toDateString();
return (
!closed && update({ date: d.toISOString(), time: null })} disabled={closed} style={{
flexShrink: 0, width: 56, padding: '10px 0', borderRadius: 12,
border: sel ? 'none' : `1px solid ${palette.green}25`,
background: sel ? palette.green : palette.paper,
color: sel ? palette.cream : closed ? palette.muted + '80' : palette.ink,
fontFamily: 'Manrope', cursor: closed ? 'not-allowed' : 'pointer',
opacity: closed ? 0.4 : 1
}}>
{dayNames[d.getDay()]}
{d.getDate()}
{months[d.getMonth()]}
{closed && [1, 2, 3].includes(d.getDay()) &&
Ruhetag
}
);
})}
{/* Time slots */}
{selectedDate &&
<>
UHRZEIT
{slots.length > 0 ?
{slots.map((t) => {
const sel = data.time === t;
return (
update({ time: t })} style={{
padding: '12px 0', borderRadius: 10,
border: sel ? 'none' : `1px solid ${palette.green}25`,
background: sel ? palette.accent : palette.paper,
color: sel ? palette.cream : palette.ink,
fontFamily: '"DM Serif Display", serif', fontSize: 15, cursor: 'pointer'
}}>{t} );
})}
:
Für diesen Tag sind keine Zeiten mehr verfügbar. Bitte einen anderen Tag wählen.
}
Letzter Buchungsslot um 19:45 Uhr.
}
);
};
const StepArea = ({ data, update, palette }) => {
const areas = [
{ id: 'innen', name: 'Innenbereich', desc: 'Liebevoll eingerichtete Räume — gemütlich & traditionell', emoji: '🪑' },
{ id: 'aussen', name: 'Außenbereich', desc: 'Unterm alten Kühlschiff — Mai bis September', emoji: '🌳', seasonal: true }];
return (
Wo möchtet ihr sitzen ?
{areas.map((a) => {
const sel = data.area === a.id;
return (
update({ area: a.id })} style={{
display: 'flex', alignItems: 'center', gap: 14, padding: 16,
borderRadius: 14, textAlign: 'left', cursor: 'pointer',
background: sel ? palette.green : palette.paper,
color: sel ? palette.cream : palette.ink,
border: sel ? 'none' : `1px solid ${palette.green}18`,
fontFamily: 'Manrope'
}}>
{a.emoji}
{sel && );
})}
);
};
const ContactField = ({ palette, label, value, onChange, type = 'text', placeholder, hint }) =>
{label}
onChange(e.target.value)} placeholder={placeholder} style={{
width: '100%', padding: '14px 16px', background: palette.paper,
border: `1px solid ${palette.green}25`, borderRadius: 12,
fontFamily: 'Manrope', fontSize: 15, color: palette.ink, outline: 'none'
}} />
{hint &&
{hint}
}
;
const StepContact = ({ data, update, palette }) =>
Wie heißt du, damit's klappt ?
update({ name: v })} placeholder="Maxi Mustermann" />
update({ tel: v })} type="tel" placeholder="+49 …" hint="Falls wir dich kurz erreichen müssen." />
update({ notes: v })} placeholder="Geburtstag, Allergien, …" />
;
const StepConfirm = ({ data, palette }) => {
const date = data.date && new Date(data.date);
const months = ['Jan', 'Feb', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'Sept', 'Okt', 'Nov', 'Dez'];
const days = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'];
const areaName = { innen: 'Innenbereich', aussen: 'Außenbereich' }[data.area] || data.area;
const dateStr = date ? `${days[date.getDay()]}, ${date.getDate()}. ${months[date.getMonth()]} · ${data.time}` : '—';
const waText = encodeURIComponent(
`Hallo, ich möchte gerne einen Tisch reservieren:\n` +
`📅 ${dateStr}\n👥 ${data.persons} ${data.persons === 1 ? 'Person' : 'Personen'}\n` +
`📍 ${areaName}\n👤 ${data.name}` + (
data.notes ? `\n📝 ${data.notes}` : '')
);
const waLink = `https://wa.me/4993698221?text=${waText}`;
return (
Wir freuen uns!
Schick uns jetzt deine Reservierung per WhatsApp — wir bestätigen sie persönlich.
|
|
|
|
{data.notes && |
}
{/* Info boxes */}
{[
'🕐 Dein Tisch wird 15 Minuten freigehalten.',
'⏱ Standard-Sitzzeit: 90 Minuten — längerer Aufenthalt gerne auf Anfrage im Kommentarfeld.',
'🐾 Im Innenbereich sind Haustiere leider nicht erlaubt.'].
map((txt, i) =>
{txt}
)}
{/* WhatsApp CTA */}
Per WhatsApp reservieren
Hinweis: Haustiere sind im Innenbereich leider nicht erlaubt. Im Außenbereich gerne willkommen.
);
};
const Row = ({ k, v, palette, last }) =>
{k}
{v}
;
// ─────────────────────────────────────────────────────────────
// ROOMS / ZIMMER
// ─────────────────────────────────────────────────────────────
const ROOMS = [
{ type: 'Einzelzimmer', sleep: 1, ab: 78, count: 4, desc: 'Parkett, Schreibtisch, Balkon', img: 'einzelzimmer · parkett, balkon' },
{ type: 'Doppelzimmer', sleep: 2, ab: 110, count: 5, desc: 'Großes Bad, Sitzecke, schallisoliert', img: 'doppelzimmer · sitzecke' },
{ type: 'Familienzimmer', sleep: 4, ab: 145, count: 2, desc: 'Zwei Räume verbunden, ideal für Familien', img: 'familienzimmer · zwei räume' }];
const RoomsScreen = ({ palette }) => {
const iframeRef = React.useRef();
React.useEffect(() => {
let loaded = false;
const handle = (e) => {
if (e.data?.action === 'RESIZE' && iframeRef.current) {
iframeRef.current.style.height = e.data.height + 'px';
if (loaded) {
const top = iframeRef.current.parentElement?.scrollTop || 0;
iframeRef.current.parentElement?.scrollTo?.(0, top);
} else {loaded = true;}
}
};
window.addEventListener('message', handle);
return () => window.removeEventListener('message', handle);
}, []);
return (
Gästehaus
Elf gemütliche Gästezimmer
{/* Foto-Slider Zimmer */}
{[
{ id: 'zapf-gaestehaus-blau', label: 'Gästehaus', src: 'uploads/IMG_20170120_131630.jpg' },
{ id: 'zapf-innenhof-nacht', label: 'Innenhof', src: 'uploads/20210715_215113.jpg' },
{ id: 'zapf-doppelzimmer', label: 'Doppelzimmer', src: 'uploads/Zapf_Uettingen_Zimmer-02084.jpg' },
{ id: 'zapf-familienzimmer', label: 'Familienzimmer', src: 'uploads/20210707_143453.jpg' },
{ id: 'zapf-fruehstueck', label: 'Frühstück', src: 'uploads/IMG_20260515_074715583.jpg' }].
map(({ id, label, src }) =>
{src ?
:
}
)}
{[
'🔑 Check-in ab 14:00 · Check-out bis 10:00',
'🍳 Frühstück 15 €/P · Do/Fr 7:30–10:00 · Sa/So 8:00–10:00 · Anmeldung bis 15:00 Uhr am Anreisetag',
'🅿️ Kostenlos im abschließbaren Innenhof',
'🐾 Haustiere leider nicht gestattet',
'🚬 Nichtraucherzimmer · Rauchen im Hof erlaubt',
'🔋 E-Auto laden: 2 × 11 kW · 0,40 €/kWh (Ladekarte von uns)'].
map((txt, i) =>
{txt}
)}
📖 Digitale Gästemappe öffnen
{/* Längeraufenthalt */}
Längere Aufenthalte
Ab 3 Nächten ab 45 €/Nacht im Einzelzimmer. Buchung ab Montag. Doppel-, 3- und 4-Bett-Zimmer auf Anfrage auch als Einzelzimmer buchbar.
Verfügbarkeit & Buchung
{/* Gästebewertungen */}
Gästebewertungen
);
};
// ─────────────────────────────────────────────────────────────
// INFO / HAUS
// ─────────────────────────────────────────────────────────────
const InfoScreen = ({ palette, appData, openInApp, goto }) => {
const d = appData || DEFAULT_APP_DATA;
const hours = d.hours || DEFAULT_APP_DATA.hours;
const contact = d.contact || DEFAULT_APP_DATA.contact;
return (
Über das Haus
Seit 1883
{/* Sketch image */}
{/* Sonderzeiten */}
{((d.sonderzeiten?.feiertage?.length || 0) > 0 || (d.sonderzeiten?.betriebsruhe?.length || 0) > 0) &&
Sonderzeiten
{(d.sonderzeiten?.betriebsruhe?.length || 0) > 0 &&
Betriebsruhe · Geschlossen
{d.sonderzeiten.betriebsruhe.map((b, i) =>
{b.von}
bis {b.bis}
)}
}
{(d.sonderzeiten?.feiertage?.length || 0) > 0 &&
Feiertage
{d.sonderzeiten.feiertage.map((f, i) =>
)}
}
}
{/* Hours */}
Öffnungszeiten
{hours.map((h, i) =>
{h.day}
{h.times.map((t, ti) =>
{t}
)}
)}
{/* Contact rows */}
Anfahrt & Kontakt
openInApp('https://www.eventim-light.com/de/a/68e7819487a05c16200ae183/iframe/e/68e78b1bd3b6dd78d7a8d20c/', 'Brauseminare') : null} />
{/* Website & Social */}
{/* Foto-Slider */}
Unsere Geschichte
{/* vertical line */}
{[
{ year: '1883', icon: '🏠', title: 'Die Anfänge', text: 'Wilhelm Gottlieb Zapf erwirbt das Wirtshaus mit Brauerei. Er braut bis ca. 1918.' },
{ year: '1926', icon: '👩', title: 'Elsa & die Fernfahrer', text: 'Nach dem Unfalltod ihres Mannes Andreas führt Elsa Zapf das Gasthaus allein — und macht es zur bekannten Fernfahrerstation.' },
{ year: '1951', icon: '👨👩👧', title: 'Erich & Hanna', text: 'Erich Zapf kehrt aus der Kriegsgefangenschaft zurück und übernimmt 1951 gemeinsam mit Hanna das Wirtshaus.' },
{ year: '1982', icon: '🏨', title: 'Metzgerei & Gästehaus', text: 'Metzgerei ab 1982 (bis 2017). 1998 entsteht das Gästehaus mit sechs modernen Zimmern im Innenhof.' },
{ year: '2017', icon: '🍺', title: 'Heute · 5. Generation', text: 'Yvonne Mennig und Dr. Andreas Herr führen die Brauerei. Seit 2018 brauen sie wieder eigenes Zapfbräu.' }].
map((e, i) =>
{e.icon}
{e.year}
{e.title}
{e.text}
)}
{/* WhatsApp Channel */}
{/* fake roads */}
{/* Haustiere */}
🐾
Haustiere
Im Innenbereich sind Haustiere leider nicht erlaubt. Im Außenbereich sind eure Vierbeiner herzlich willkommen.
{/* FAQ Link */}
{goto &&
goto('faq')} style={{
width: '100%', padding: '14px 18px', borderRadius: 14, border: 'none',
background: palette.green, cursor: 'pointer', textAlign: 'left',
display: 'flex', alignItems: 'center', gap: 14, fontFamily: 'Manrope',
boxShadow: `0 4px 14px ${palette.green}30`
}}>
❓
Häufige Fragen
Alles zu Bier, Hotel, Umgebung & mehr
}
);
};
const ContactRow = ({ icon, k, v, palette, link, onPress }) =>
;
// ─────────────────────────────────────────────────────────────
// BIER & BRAUEREI
// ─────────────────────────────────────────────────────────────
const BEERS = [
{
name: "Gottlieb's Lieblingstrunk",
style: 'Dunkles Vollbier',
abv: '5,4 %',
plato: '13,5 °P',
be: '17 BE',
color: '#3a1f08',
desc: 'Angelehnt an ein früheres Märzen — ausgeprägte Malzaromen mit einer Note von Karamell und Schokolade, leichte Restsüße.',
person: 'Wilhelm Gottlieb Zapf (1857–1944)',
story: 'Der Gründer. Gelernter Bierbrauer aus dem Steigerwald, zog 1883 nach Uettingen — und trank sein Dunkles am liebsten warm zur Genesung.',
gen: '1. Generation'
},
{
name: "Elsa's Goldrausch",
style: 'Helles Vollbier',
abv: '4,9 %',
plato: '11,8 °P',
be: '22 BE',
color: '#d4a234',
desc: 'Leichte Malzaromatik mit dezenter Süße und harmonischer Hopfung — der Klassiker.',
person: 'Elsa Zapf (1899–1957)',
story: 'Die zweite Generation. Bekannt für ihre Fernfahrer-Station: Auch nachts um 3 Uhr kamen Trucker an — und bekamen ein gutes Essen.',
gen: '2. Generation'
},
{
name: "Hanna's Mühlenweiße",
style: 'Weizenbier',
abv: '5,2 %',
plato: '12,5 °P',
be: '13 BE',
color: '#e6c87a',
desc: 'Leicht fruchtig mit einer Note von Nelke und Banane. Angenehmer Körper und Spritzigkeit.',
person: 'Hanna Zapf (1927–2018)',
story: 'Wirtin von 1951 bis 2018. Sie stammte aus der Uettinger „Unteren Mühle" — ihr Vater brachte das erste elektrische Licht nach Uettingen.',
gen: '3. Generation'
}];
const BeerScreen = ({ palette }) =>
Hausbrauerei
{/* Logo */}
Drei Generationen, drei Biere
Seit 2018 brauen wir wieder selbst. Jedes Bier trägt den Namen der Generation, die unser Haus geprägt hat.
{BEERS.map((b) =>
{/* Color band */}
{/* Header row */}
{/* Color swatch circle */}
{/* Style + stats */}
{b.style}
{b.abv}
{b.plato} · {b.be}
{/* Description */}
{b.desc}
{/* Story */}
)}
;
// ─────────────────────────────────────────────────────────────
// BUCHEN HUB — Tisch oder Zimmer
// ─────────────────────────────────────────────────────────────
const BookHub = ({ palette, goto }) =>
Reservierung
Was möchtest du buchen?
goto('book')} style={{
background: palette.green, color: palette.cream, border: 'none',
borderRadius: 18, padding: '22px 20px', textAlign: 'left', cursor: 'pointer',
display: 'flex', alignItems: 'center', gap: 16,
boxShadow: `0 6px 20px ${palette.green}30`
}}>
Tisch reservieren
In Wirtsstube oder Biergarten · Do–So
goto('rooms')} style={{
background: palette.paper, color: palette.ink, border: `1px solid ${palette.green}18`,
borderRadius: 18, padding: '22px 20px', textAlign: 'left', cursor: 'pointer',
display: 'flex', alignItems: 'center', gap: 16
}}>
Zimmer buchen
11 Gästezimmer · Verfügbarkeit im Buchungssystem
{[
'🍽️ Tisch: 15 Min. freigehalten · 90 Min. Sitzzeit · Haustiere innen nicht erlaubt',
'🔑 Check-in ab 14:00 Uhr · Check-out bis 10:00 Uhr',
'🍳 Frühstück 15 €/Person · Do/Fr 7:30–10:00 · Sa/So 8:00–10:00 · Anmeldung bis 15:00 Uhr am Anreisetag',
'🅿️ Kostenlos im abschließbaren Innenhof oder rund um die Kirche',
'🐾 Haustiere leider nicht gestattet',
'🚭 Nichtraucherzimmer · Rauchen im Hof / auf Balkonen erlaubt',
'💳 Bargeld & EC-Karte vor Ort · Rechnung auf Anfrage per Mail'].
map((txt, i) =>
{txt}
)}
;
// ─────────────────────────────────────────────────────────────
// FOTO-SLIDER (Bildergalerie)
// ─────────────────────────────────────────────────────────────
const GALLERY_ITEMS = [
{ id: 'zapf-wirtsstube', label: 'Wirtsstube', sub: 'Gemütlich & traditionell', src: null },
{ id: 'zapf-biergarten', label: 'Brauhaus Uettingen', sub: 'Das alte Brauhaus nebenan', src: 'uploads/20210712_125425.jpg' },
{ id: 'zapf-brauerei', label: 'Am Kirchplatz', sub: 'Seit 1883 in Familienbesitz', src: 'uploads/20210712_125622.jpg' },
{ id: 'zapf-gastehaus', label: 'Gästehaus', sub: '11 Zimmer im Hof', src: 'uploads/IMG_20170120_131630.jpg' }];
const GallerySlider = ({ palette }) => {
const [active, setActive] = React.useState(0);
return (
Eindrücke
{GALLERY_ITEMS.map((item, i) =>
setActive(i)} style={{
flexShrink: 0, width: 190, borderRadius: 14, overflow: 'hidden', cursor: 'pointer',
border: active === i ? `2px solid ${palette.accent}` : '2px solid transparent',
transition: 'border-color 0.2s'
}}>
{item.src ?
:
}
)}
);
};
// ─────────────────────────────────────────────────────────────
// IN-APP BROWSER — opens URLs in an iframe overlay
// ─────────────────────────────────────────────────────────────
const InAppBrowser = ({ url, title, palette, onClose }) =>
;
// ─────────────────────────────────────────────────────────────
// FAQ SCREEN
// ─────────────────────────────────────────────────────────────
const FAQ_DATA = [
{ cat: 'Restaurant & Biergarten', items: [
{ q: 'Gibt es glutenfreie Gerichte?', a: 'Das halbe Hähnchen mit Pommes und Salat ist definitiv glutenfrei — seit Jahrzehnten ein Klassiker. Bitte sprecht unser Personal an.' },
{ q: 'Warum sind abends nicht immer alle Gerichte da?', a: 'Frische-Philosophie: Wenn wir von allem viel vorrätig haben, können wir nicht frisch kochen. Wer z.B. ein Schäufele möchte, kann vorbestellen — wir halten es zurück.' },
{ q: 'Sonntag Mittag: Wie lange kann ich sitzen bleiben?', a: 'Wir haben zwei Sitzzeiten. Bei Reservierung um 11:30 Uhr bitten wir, den Tisch um 13:00 Uhr freizugeben, damit wir auch anderen Gästen Platz bieten können.' },
{ q: 'Kann man halbe Portionen bestellen?', a: 'Ja, für ausgewählte Gerichte. Wir ziehen 1,50 € vom Preis ab — nicht bei allen Gerichten möglich. Personal fragen.' },
{ q: 'Zahlung: Apple Pay oder Google Pay?', a: 'Ja, moderne kontaktlose Zahlungsmittel wie Apple Pay und Google Pay werden akzeptiert.' },
{ q: 'Gibt es Hochstühle oder Wickelmöglichkeiten?', a: '3 Hochstühle in der Gaststätte, 2 im Biergarten. Wickelplatz im 1. OG des Wirtshauses.' }]
},
{ cat: 'Brauerei & Bier', items: [
{ q: 'Kann man Bier in Flaschen kaufen?', a: 'Ja, zum Mitnehmen — einfach ansprechen.' },
{ q: 'Gibt es alkoholfreies Bier?', a: 'Momentan nicht — wir führen ausschließlich hausgebraute Biere.' },
{ q: 'Wie lange ist das Bier haltbar?', a: 'Unsere naturbelassenen Biere ca. 8 Wochen.' }]
},
{ cat: 'Hotel & Übernachtung', items: [
{ q: 'Gibt es barrierefreie Zimmer?', a: 'Alle Zimmer sind im 1. oder 2. OG — leider kein Aufzug.' },
{ q: 'Familienzimmer oder Zustellbetten?', a: 'Ja, ein Vierbettzimmer: Doppelbett + Stockbett (zwei normale Betten übereinander).' },
{ q: 'Minibar oder Getränke auf dem Zimmer?', a: 'Im Gästehaus (blaues Haus, EG) gibt es eine kleine Snackbar mit Getränken und Snacks. Ansonsten gerne im Wirtshaus.' },
{ q: 'Stornierung?', a: 'Bis 2 Wochen vorher: kostenlos. Bis 3 Tage: 50 %. Ab 3 Tage: voller Betrag. Bei Neubuchung erstatten wir.' },
{ q: 'Allergikerfreundliche Zimmer?', a: 'Auf Anfrage: allergikerfreundliche Bettdecken.' }]
},
{ cat: 'Umgebung & Freizeit', items: [
{ q: 'Wanderwege oder Radstrecken in der Nähe?', a: 'Direkt ab unserem Haus startet der Kulturweg durch Uettingen. Wir liegen an der Romantischen Straße. Radwege vorhanden.' },
{ q: 'Sehenswürdigkeiten in der Umgebung?', a: 'Uettinger Schloss, fränkische Bierkultur und malerische Dörfer. Weitere Infos auf unserer Website.' },
{ q: 'Fahrräder abstellen?', a: 'Sichere Plätze mit Überdachung im Hof und 6 E-Bike-Ladestationen. Ladekabel bitte mitbringen.' }]
}];
const FaqAccordion = ({ items, palette }) => {
const [open, setOpen] = React.useState(null);
return (
{items.map((item, i) =>
setOpen(open === i ? null : i)} style={{
width: '100%', textAlign: 'left', padding: '12px 14px', border: 'none', cursor: 'pointer',
background: open === i ? palette.green : palette.green + '14',
display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10,
fontFamily: 'Manrope', fontSize: 13, fontWeight: 600,
color: open === i ? palette.cream : palette.green,
borderRadius: open === i ? '12px 12px 0 0' : '12px',
transition: 'background 0.15s, color 0.15s'
}}>
{item.q}
{open === i &&
{item.a}
}
)}
Häufige Fragen
Noch Fragen? Wir haben Antworten.
{FAQ_DATA.map((cat) =>
{cat.cat}
)}
;
Object.assign(window, {
DEFAULT_APP_DATA,
InAppBrowser,
FaqScreen,
StampPassScreen, CodeModal,
BookHub, BookScreen, RoomsScreen, InfoScreen, BeerScreen,
GallerySlider
}); 
:
