);
}
// ============== Hero language switcher (mobile only) — reactive ==============
function HeroLangSwitcher({ lang, setLang }) {
const langs = ['ca', 'es', 'en', 'fr', 'nl'];
return (
{langs.map(l => (
))}
);
}
// ============== Hero ==============
function Hero({ t, lang, setLang }) {
const heroRef = useRef(null);
useEffect(() => {
if (window.matchMedia('(hover: none)').matches) return;
const onMove = (e) => {
if (!heroRef.current) return;
const r = heroRef.current.getBoundingClientRect();
const x = (e.clientX - r.left) / r.width - 0.5;
const y = (e.clientY - r.top) / r.height - 0.5;
heroRef.current.style.setProperty('--mx', x);
heroRef.current.style.setProperty('--my', y);
};
const el = heroRef.current;
el?.addEventListener('mousemove', onMove);
return () => el?.removeEventListener('mousemove', onMove);
}, []);
return (
{t.hero.badge && (
{t.hero.badge}
)}
{t.hero.eyebrow}
{/* Mobile-only language switcher (visible only when burger is shown) */}
{t.hero.title}
{t.hero.titleAnd}
{t.hero.title2}
{t.hero.sub}
{t.hero.scroll}
);
}
// ============== Story ==============
function Story({ t }) {
const StatsCounter = window.CP_GAME?.StatsCounter;
return (
{t.story.eyebrow}
{t.story.title.split('\n').map((line, i) => (
{i === 1 ? {line} : line}
))}
{t.story.p1}
{t.story.p2}
{t.story.sign}
{t.story.stat1Value}
{t.story.stat1Label}
{t.story.stat2Value}
{t.story.stat2Label}
{t.story.stat3Value}
{t.story.stat3Label}
{t.story.ownerName}
{t.story.ownerRole}
);
}
// ============== Generic Menu Renderer (used for breakfast & lunch) ==============
function MenuItems({ items }) {
if (!items || !items.length) return null;
return items.map((it, i) => (
{it.n}
{it.p}{it.p && !/^[+]/.test(it.p) ? € : null}
{it.d &&
{it.d}
}
));
}
// ============== Category Pager (arrows + name + dots) ==============
function CategoryPager({ cats, active, onChange }) {
const idx = Math.max(0, cats.indexOf(active));
const total = cats.length;
const go = (i) => onChange(cats[(i + total) % total]);
const prev = () => go(idx - 1);
const next = () => go(idx + 1);
const startX = useRef(0);
const startY = useRef(0);
const onTouchStart = (e) => {
startX.current = e.touches[0].clientX;
startY.current = e.touches[0].clientY;
};
const onTouchEnd = (e) => {
const dx = e.changedTouches[0].clientX - startX.current;
const dy = e.changedTouches[0].clientY - startY.current;
if (Math.abs(dx) > 45 && Math.abs(dx) > Math.abs(dy) * 1.4) {
if (dx > 0) prev(); else next();
}
};
return (
{active}
{idx + 1} / {total}
{cats.map((c, i) => (
);
}
// ============== Breakfast Menu ==============
function BreakfastMenu({ t }) {
const cats = t.breakfast.cats || [];
const [active, setActive] = useState(cats[0]);
useEffect(() => { setActive(cats[0]); }, [cats[0]]);
const items = t.breakfast.items[active] || [];
return (
{t.breakfast.eyebrow}
{t.breakfast.title}
{t.breakfast.sub}
);
}
// ============== Lunch Menu ==============
function LunchMenu({ t }) {
const cats = t.lunch.cats || [];
const [active, setActive] = useState(cats[0]);
useEffect(() => { setActive(cats[0]); }, [cats[0]]);
const items = t.lunch.items[active] || [];
return (
{t.lunch.eyebrow}
{t.lunch.title}
{t.lunch.sub}
);
}
// ============== Gallery (real photos with lightbox) ==============
const GALLERY_PHOTOS = [
{ src: 'assets/photos/exterior.jpg', cls: 't1', key: 0 },
{ src: 'assets/photos/octopus.jpg', cls: 't2', key: 1 },
{ src: 'assets/photos/salmon-toast.jpg', cls: 't3', key: 2 },
{ src: 'assets/photos/table-overhead.jpg', cls: 't4', key: 3 },
{ src: 'assets/photos/charcuterie.jpg', cls: 't5', key: 4 },
{ src: 'assets/photos/bravas.jpg', cls: 't6', key: 5 },
{ src: 'assets/photos/teacups.jpg', cls: 't7', key: 6 },
{ src: 'assets/photos/matcha-cat.jpg', cls: 't8', key: 7 },
{ src: 'assets/photos/canas-fresas.jpg', cls: 't9', key: 8 },
{ src: 'assets/photos/coconut-bowl.jpg', cls: 't10', key: 9 }
];
function Gallery({ t }) {
const [lbIndex, setLbIndex] = useState(-1);
const Lightbox = window.CP_GAME?.PhotoLightbox;
const labels = t.gallery.labels || [];
const photos = GALLERY_PHOTOS.map((p, i) => ({ ...p, caption: labels[i] || '', alt: labels[i] || 'Can Petita' }));
return (
{t.gallery.eyebrow}
{t.gallery.title}
{t.gallery.sub}
{photos.map((p, i) => (
setLbIndex(i)} role="button" tabIndex={0}
onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') setLbIndex(i); }}>
{p.caption}
))}
{Lightbox && lbIndex >= 0 && (
setLbIndex(-1)}/>
)}
);
}
// ============== Reviews (real Google reviews) ==============
function Reviews({ t }) {
return (
{t.reviews.eyebrow}
{t.reviews.title}
{t.reviews.sub &&
{t.reviews.sub}
}
★★★★★
{t.trust?.rating || '4,9'} / 5 · {t.trust?.reviewsCount || '157'} {t.trust?.reviewsLabel || 'reseñas verificadas'}
{t.reviews.list.map((r, i) => (
"
{'★'.repeat(r.s || 5)}
{r.t}
{r.b}
{r.a}
{r.src &&
{r.src}
}
))}
);
}
// ============== Visit (hours + Google Maps) ==============
function Visit({ t }) {
const now = new Date();
const jsDay = now.getDay(); // 0=Sun, 1=Mon, ... 6=Sat
// Our hoursList is Mon-first → index = (Sun=6, Mon=0, Tue=1, ..., Sat=5)
const todayIdx = jsDay === 0 ? 6 : jsDay - 1;
const mapsEmbed = "https://maps.google.com/maps?q=Carrer%20de%20Sant%20Antoni%2C%2017252%20Sant%20Antoni%20de%20Calonge%2C%20Girona&t=&z=15&ie=UTF8&iwloc=&output=embed";
return (
{t.visit.eyebrow}
{t.visit.title}
{t.visit.title}
{t.visit.address}
{t.visit.city || '17252 Sant Antoni de Calonge · Girona'}
{t.visit.hours}
{t.visit.hoursList.map((h, i) => (
-
{h.d}
{h.h}
))}
);
}
// ============== Helper: friendly date formatter (i18n aware) ==============
function fmtFriendlyDate(ymd, lang) {
if (!ymd) return '—';
try {
const d = new Date(ymd + 'T00:00:00');
const localeMap = { ca: 'ca-ES', es: 'es-ES', en: 'en-GB', fr: 'fr-FR', nl: 'nl-NL' };
return new Intl.DateTimeFormat(localeMap[lang] || 'es-ES', { weekday: 'long', day: 'numeric', month: 'long' }).format(d);
} catch (_) { return ymd; }
}
// ============== Manage-reservation icons (line-art, brand) ==============
const CP_MANAGE_ICONS = {
calendar: () => (
),
arrowRight: () => (
),
close: () => (
),
warning: () => (
),
info: () => (
),
check: () => (
),
search: () => (
),
whatsapp: () => (
)
};
// Persistent floating pill: when the visitor has a future reservation in localStorage,
// show a small chip on every page so they can open the manage modal in one tap.
function ReservationFloater({ t, lang }) {
const [last, setLast] = useState(() => {
try {
const raw = localStorage.getItem('cp_last_reservation');
const obj = raw ? JSON.parse(raw) : null;
if (!obj) return null;
const today = new Date().toISOString().slice(0, 10);
return obj.date >= today ? obj : null;
} catch { return null; }
});
const [dismissed, setDismissed] = useState(() => {
try { return sessionStorage.getItem('cp_floater_dismissed') === '1'; } catch { return false; }
});
useEffect(() => {
const refresh = () => {
try {
const raw = localStorage.getItem('cp_last_reservation');
const obj = raw ? JSON.parse(raw) : null;
const today = new Date().toISOString().slice(0, 10);
setLast(obj && obj.date >= today ? obj : null);
} catch { setLast(null); }
};
window.addEventListener('storage', refresh);
window.addEventListener('cp:reservation-updated', refresh);
return () => {
window.removeEventListener('storage', refresh);
window.removeEventListener('cp:reservation-updated', refresh);
};
}, []);
if (!last || dismissed) return null;
const open = () => window.dispatchEvent(new CustomEvent('cp:open-manage', { detail: { id: last.id } }));
const dismiss = (e) => {
e.stopPropagation();
try { sessionStorage.setItem('cp_floater_dismissed', '1'); } catch (_) {}
setDismissed(true);
};
const Cal = CP_MANAGE_ICONS.calendar;
const Arrow = CP_MANAGE_ICONS.arrowRight;
const X = CP_MANAGE_ICONS.close;
return (
{ if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); open(); } }}
aria-label={t.reserve.floaterLabel || 'Tu reserva'}>
{t.reserve.floaterLabel || 'Tu reserva'}
{fmtFriendlyDate(last.date, lang)} · {last.time}
);
}
// ============== Manage Reservation modal (cancel / lookup / reschedule) ==============
function ManageReservation({ t, lang, open, onClose, prefillId }) {
const [code, setCode] = useState('');
const [reservation, setReservation] = useState(null);
const [step, setStep] = useState('lookup'); // lookup, found, alreadyCancelled, justCancelled, confirm
const [busy, setBusy] = useState(false);
const [errMsg, setErrMsg] = useState('');
useEffect(() => {
if (open && prefillId) { setCode(prefillId); setTimeout(() => doLookup(prefillId), 200); }
if (!open) { setCode(''); setReservation(null); setStep('lookup'); setErrMsg(''); }
// ESC handler
const onKey = (e) => { if (e.key === 'Escape' && open) onClose(); };
if (open) document.addEventListener('keydown', onKey);
return () => document.removeEventListener('keydown', onKey);
}, [open, prefillId]);
const doLookup = async (id) => {
const clean = (id || code).trim(); // ⚠️ NO toUpperCase — Firestore IDs are case-sensitive
if (!clean) return;
setBusy(true); setErrMsg('');
try {
const fb = window.CP_FIREBASE;
const r = fb ? await fb.getReservationById(clean) : null;
if (!r) {
setErrMsg(t.reserve.notFound || 'No encontramos ninguna reserva con ese código.');
setStep('lookup');
} else {
setReservation(r);
setStep(r.status === 'cancelled' ? 'alreadyCancelled' : 'found');
}
} catch (e) {
const msg = (e.message || '').toLowerCase().includes('network')
? (t.reserve.networkErr || 'Sin conexión. Revisa tu internet y vuelve a intentar.')
: 'Error: ' + (e.message || 'algo falló');
setErrMsg(msg);
} finally {
setBusy(false);
}
};
const askCancel = () => setStep('confirm');
const doCancel = async () => {
if (!reservation) return;
setBusy(true); setErrMsg('');
try {
await window.CP_FIREBASE.cancelReservationByCustomer(reservation.id);
setReservation({ ...reservation, status: 'cancelled' });
setStep('justCancelled');
// Clear last-reservation pill so "ver mi reserva" doesn't suggest the cancelled one
try { localStorage.removeItem('cp_last_reservation'); } catch (_) {}
try { window.dispatchEvent(new CustomEvent('cp:reservation-updated')); } catch (_) {}
} catch (e) {
const msg = (e.message || '').toLowerCase().includes('network')
? (t.reserve.networkErr || 'Sin conexión. Revisa tu internet y vuelve a intentar.')
: 'Error: ' + (e.message || 'algo falló');
setErrMsg(msg);
setStep('found');
} finally {
setBusy(false);
}
};
const whatsappUrl = (action) => {
if (!reservation) return '#';
const phone = '+34972077350';
const dateText = fmtFriendlyDate(reservation.date, lang);
let msg;
if (action === 'reschedule') {
msg = `Hola Paco, soy ${reservation.name}. Necesito cambiar mi reserva del ${dateText} a las ${reservation.time} (${reservation.people} personas). Código: ${reservation.id}`;
} else {
msg = `Hola Paco, soy ${reservation.name}. Te escribo por mi reserva del ${dateText} a las ${reservation.time} (${reservation.people} personas). Código: ${reservation.id}`;
}
return `https://wa.me/${phone.replace(/\D/g,'')}?text=${encodeURIComponent(msg)}`;
};
if (!open) return null;
return (
{ if (e.target.classList.contains('manage-modal')) onClose(); }} role="dialog" aria-modal="true">
{t.reserve.manageEyebrow || 'Tu reserva'}
{t.reserve.manageTitle || 'Gestionar mi reserva'}
{step === 'lookup' && (
)}
{step === 'found' && reservation && (
{t.reserve.name}{reservation.name}
{t.reserve.date}{fmtFriendlyDate(reservation.date, lang)}
{t.reserve.time}{reservation.time}
{t.reserve.people}{reservation.people}
{reservation.notes && (
notas{reservation.notes}
)}
{t.reserve.statusLabel || 'estado'}{reservation.status === 'confirmed' ? (t.reserve.statusConfirmed || 'confirmada') : (t.reserve.statusPending || 'recibida · te llamamos')}
{errMsg &&
{errMsg}
}
)}
{step === 'confirm' && reservation && (
{(() => { const W = CP_MANAGE_ICONS.warning; return ; })()}
{t.reserve.confirmTitle || '¿Cancelar definitivamente?'}
{t.reserve.confirmSub || 'Si quieres cambiar el día o la hora, mejor escríbenos por WhatsApp en lugar de cancelar.'}
{t.reserve.name}{reservation.name}
{t.reserve.date}{fmtFriendlyDate(reservation.date, lang)} · {reservation.time}
{errMsg &&
{errMsg}
}
)}
{step === 'justCancelled' && reservation && (
{(() => { const C = CP_MANAGE_ICONS.check; return ; })()}
{t.reserve.cancelledTitle || 'Reserva cancelada'}
{t.reserve.cancelledSub || 'Hemos avisado a Paco. Esperamos verte pronto.'}
)}
{step === 'alreadyCancelled' && reservation && (
{(() => { const I = CP_MANAGE_ICONS.info; return ; })()}
{t.reserve.alreadyTitle || 'Esta reserva ya estaba cancelada'}
{t.reserve.alreadySub || 'Si quieres venir, haz una nueva reserva — Paco te recibe encantado.'}
)}
);
}
// ============== ICS calendar download (no library) ==============
function downloadICS({ id, name, date, time, people }) {
const dt = new Date(date + 'T' + time + ':00');
const end = new Date(dt.getTime() + 90 * 60 * 1000); // 90-minute reservation
const fmt = (d) => d.toISOString().replace(/[-:]/g, '').split('.')[0] + 'Z';
const ics = [
'BEGIN:VCALENDAR',
'VERSION:2.0',
'PRODID:-//Can Petita//Reservation//ES',
'METHOD:PUBLISH',
'BEGIN:VEVENT',
`UID:${id}@canpetitacafe.com`,
`DTSTAMP:${fmt(new Date())}`,
`DTSTART:${fmt(dt)}`,
`DTEND:${fmt(end)}`,
`SUMMARY:Reserva Can Petita · ${people}p`,
`DESCRIPTION:Reserva a nombre de ${name}\\n\\nCódigo: ${id}\\n\\nGestionar: https://canpetitacafe.com/?reserva=${id}`,
'LOCATION:Carrer de Sant Antoni\\, 17252 Sant Antoni de Calonge\\, Girona',
'BEGIN:VALARM',
'TRIGGER:-PT2H',
'ACTION:DISPLAY',
'DESCRIPTION:Recordatorio reserva Can Petita',
'END:VALARM',
'END:VEVENT',
'END:VCALENDAR'
].join('\r\n');
const blob = new Blob([ics], { type: 'text/calendar;charset=utf-8' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `can-petita-${date}.ics`;
document.body.appendChild(a); a.click();
setTimeout(() => { URL.revokeObjectURL(url); a.remove(); }, 100);
}
// ============== Reserve (Firebase + localStorage fallback) ==============
function Reserve({ t, lang }) {
const [people, setPeople] = useState(2);
const [date, setDate] = useState(() => {
// pick the next OPEN date (skip Tuesdays / any closed day)
const fn = window.CP_RESERVE?.getAvailableTimeSlots;
const d = new Date();
for (let i = 0; i < 8; i++) {
const y = d.getFullYear(), m = String(d.getMonth()+1).padStart(2,'0'), day = String(d.getDate()).padStart(2,'0');
const ymd = `${y}-${m}-${day}`;
if (!fn || (fn(ymd) || []).length > 0) return ymd;
d.setDate(d.getDate() + 1);
}
return d.toISOString().slice(0, 10);
});
const [time, setTime] = useState('13:30');
const [name, setName] = useState('');
const [phone, setPhone] = useState('');
const [notes, setNotes] = useState('');
const [errors, setErrors] = useState({});
const [status, setStatus] = useState('idle'); // idle, sending, sent, error
const [resultId, setResultId] = useState(null);
const [persisted, setPersisted] = useState(null);
const [manageOpen, setManageOpen] = useState(false);
const [managePrefill, setManagePrefill] = useState('');
const [copied, setCopied] = useState(false);
const [lastReservation, setLastReservation] = useState(() => {
try {
const raw = localStorage.getItem('cp_last_reservation');
return raw ? JSON.parse(raw) : null;
} catch { return null; }
});
// ?reserva=ID URL handler — auto-opens the manage modal
useEffect(() => {
const params = new URLSearchParams(window.location.search);
const r = params.get('reserva') || params.get('reservation');
if (r) { setManagePrefill(r); setManageOpen(true); }
const onOpen = (e) => {
setManagePrefill((e.detail && e.detail.id) || '');
setManageOpen(true);
};
window.addEventListener('cp:open-manage', onOpen);
return () => window.removeEventListener('cp:open-manage', onOpen);
}, []);
// Recompute today inside submit for late-night edge case
const today = new Date().toISOString().slice(0, 10);
// Detect if selected date is closed
const isClosed = useMemo(() => {
const fn = window.CP_RESERVE?.getAvailableTimeSlots;
return fn ? (fn(date) || []).length === 0 : false;
}, [date]);
// Available time slots
const slots = useMemo(() => {
const fn = window.CP_RESERVE?.getAvailableTimeSlots;
if (!fn) return ['09:00','10:00','11:00','12:00','13:00','13:30','14:00','14:30'];
return fn(date) || [];
}, [date]);
useEffect(() => {
if (slots.length && !slots.includes(time)) setTime(slots[0]);
}, [slots]);
// jump to next open day
const jumpToNextOpen = () => {
const fn = window.CP_RESERVE?.getAvailableTimeSlots;
if (!fn) return;
const d = new Date(date + 'T00:00:00');
for (let i = 1; i < 8; i++) {
d.setDate(d.getDate() + 1);
const ymd = d.getFullYear() + '-' + String(d.getMonth()+1).padStart(2,'0') + '-' + String(d.getDate()).padStart(2,'0');
if ((fn(ymd) || []).length > 0) { setDate(ymd); break; }
}
};
const submit = async (e) => {
e.preventDefault();
const payload = { name: name.trim(), phone: phone.trim(), people, date, time, notes: notes.trim(), language: lang };
const validate = window.CP_RESERVE?.validateReservation;
const v = validate ? validate(payload) : { ok: name && phone && date && time, errors: {} };
if (!v.ok) { setErrors(v.errors || {}); return; }
setErrors({});
setStatus('sending');
try {
const fb = window.CP_FIREBASE;
let id;
if (!fb) {
const arr = JSON.parse(localStorage.getItem('cp_reservations') || '[]');
id = 'L' + Date.now().toString(36).toUpperCase();
arr.push({ ...payload, id, createdAt: new Date().toISOString(), status: 'pending', source: 'web' });
localStorage.setItem('cp_reservations', JSON.stringify(arr));
setResultId(id); setPersisted('local'); setStatus('sent');
} else {
const res = await fb.addReservation({ ...payload, source: 'web' });
id = res.id;
setResultId(id); setPersisted(res.persisted); setStatus('sent');
}
// Persist last reservation in localStorage so revisits show "Tu reserva"
try {
const last = { id, name: payload.name, date: payload.date, time: payload.time, people: payload.people, savedAt: Date.now() };
localStorage.setItem('cp_last_reservation', JSON.stringify(last));
setLastReservation(last);
try { sessionStorage.removeItem('cp_floater_dismissed'); } catch (_) {}
window.dispatchEvent(new CustomEvent('cp:reservation-updated'));
} catch (_) {}
// NO auto-clear — let user dismiss manually so they have time to copy/save the code
} catch (err) {
console.error(err);
setStatus('error');
setTimeout(() => setStatus('idle'), 6000);
}
};
const copyCode = async () => {
if (!resultId) return;
try {
await navigator.clipboard.writeText(resultId);
setCopied(true);
setTimeout(() => setCopied(false), 2200);
} catch (_) {
// Fallback: select the code element so user can long-press
const el = document.querySelector('.code-pill');
if (el && window.getSelection) {
const range = document.createRange();
range.selectNode(el);
const sel = window.getSelection();
sel.removeAllRanges(); sel.addRange(range);
}
}
};
const newReservation = () => {
setStatus('idle');
setName(''); setPhone(''); setNotes('');
setResultId(null);
};
const whatsappConfirmUrl = useMemo(() => {
if (!resultId) return '#';
const dateText = fmtFriendlyDate(date, lang);
const msg = `Hola Paco! Acabo de reservar mesa: ${name || ''} · ${dateText} · ${time} · ${people}p · Código ${resultId}`;
return `https://wa.me/34972077350?text=${encodeURIComponent(msg)}`;
}, [resultId, date, time, people, name, lang]);
const reservationLink = useMemo(() => {
if (!resultId) return '';
const origin = (typeof window !== 'undefined' && window.location && window.location.origin) || '';
return `${origin}/?reserva=${encodeURIComponent(resultId)}`;
}, [resultId]);
const [linkShared, setLinkShared] = useState('');
const shareReservationLink = async () => {
if (!reservationLink) return;
const dateText = fmtFriendlyDate(date, lang);
const text = `Mi reserva en Can Petita · ${dateText} · ${time} · ${people}p`;
try {
if (navigator.share) {
await navigator.share({ title: 'Mi reserva — Can Petita', text, url: reservationLink });
setLinkShared('shared');
} else {
await navigator.clipboard.writeText(reservationLink);
setLinkShared('copied');
}
} catch (_) {
try { await navigator.clipboard.writeText(reservationLink); setLinkShared('copied'); } catch (__) {}
}
setTimeout(() => setLinkShared(''), 2500);
};
const whatsappSelfUrl = useMemo(() => {
if (!reservationLink) return '#';
const dateText = fmtFriendlyDate(date, lang);
const msg = `Mi reserva en Can Petita · ${dateText} · ${time} · ${people}p\n${reservationLink}`;
return `https://wa.me/?text=${encodeURIComponent(msg)}`;
}, [reservationLink, date, time, people, lang]);
const peopleSliderStyle = { '--rng': `${((people - 1) / 11) * 100}%` };
return (
{t.reserve.eyebrow}
{t.reserve.title}
{t.reserve.sub}
{/* Returning visitor: pill with last reservation */}
{lastReservation && status !== 'sent' && (
{ setManagePrefill(lastReservation.id); setManageOpen(true); }}>
{(() => { const C = CP_MANAGE_ICONS.calendar; return ; })()}
{t.reserve.lastResLabel || 'Tu última reserva'}
{lastReservation.name} · {fmtFriendlyDate(lastReservation.date, lang)} · {lastReservation.time}
{(() => { const A = CP_MANAGE_ICONS.arrowRight; return
; })()}
)}
{/* Closed-day banner */}
{isClosed && status !== 'sent' && (
{t.reserve.closedBanner || 'Cerramos los martes — prueba otro día.'}
)}
{status !== 'sent' && (