/* Shared components — image placeholder, reveal hook, hairline, etc. */
const { useState, useEffect, useRef, useMemo, useCallback } = React;
/* ---------- Striped image placeholder ---------- */
function Ph({ label, dark, aspect, style, children, seed = 1, slot, shape, className, src, locked }) {
const stripes = useMemo(() => {
const arr = [];
const n = 7;
for (let i = 0; i < n; i++) {
const off = (seed * 13 + i * 41) % 100;
arr.push({
x: -20 + i * 22 + off / 8,
w: 6 + off % 9,
op: 0.04 + off % 7 / 120
});
}
return arr;
}, [seed]);
// If a slot id is provided, render the image-slot web component so the user
// can drag-and-drop a real photo onto it. Otherwise render the striped
// placeholder.
if (slot) {
const slotStyle = { width: '100%', height: '100%', aspectRatio: aspect, display: 'block', ...style };
return (
);
}
return (
{label && {label}}
{children}
);
}
/* ---------- Hero placeholder w/ stronger composition ---------- */
function HeroPh({ label, slot = 'hero', src = 'hero-placeholder.svg', locked }) {
return (
);
}
/* ---------- Scroll reveal ---------- */
function useReveal() {
useEffect(() => {
const els = document.querySelectorAll('.reveal:not(.in)');
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
e.target.classList.add('in');
io.unobserve(e.target);
}
});
}, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
els.forEach((el) => io.observe(el));
// Reversible reveal — fades back out when scrolled out of view (used by the
// booking bar so it animates in on the way down and out on the way up).
const rEls = document.querySelectorAll('.reveal-repeat');
const ioR = new IntersectionObserver((entries) => {
entries.forEach((e) => {
e.target.classList.toggle('in', e.isIntersecting);
});
}, { threshold: 0.18, rootMargin: '0px 0px -40px 0px' });
rEls.forEach((el) => ioR.observe(el));
return () => { io.disconnect(); ioR.disconnect(); };
});
}
/* ---------- Section header ---------- */
function SectionHead({ num, eyebrow, title, lede }) {
return (
{num ? num + ' · ' + eyebrow : eyebrow}
);
}
/* ---------- Navigation ---------- */
/* Clean paths per page, mirrored from PATH_BY_PAGE in app.jsx. Nav and footer
links need a real href so crawlers can discover pages and so the links work
with cmd-click / open-in-new-tab. Navigation is still handled in JS. */
const CASA_PATHS = {
home: '', apartments: '/apartments', area: '/area', story: '/story',
contact: '/visit', 'find-us': '/findus', faq: '/faq', 'house-manual': '/manual',
vouchers: '/vouchers', press: '/press', imprint: '/imprint',
privacy: '/privacy', cookies: '/cookies', terms: '/terms', booked: '/booked'
};
function casaHref(page, lang) {
return '/' + (lang || 'en') + (CASA_PATHS[page] || '');
}
/* Props for a JS-navigated but crawlable link. */
function navLink(page, lang, setPage) {
return {
href: casaHref(page, lang),
onClick: (e) => {
if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) return;
e.preventDefault();
setPage(page);
}
};
}
function Nav({ page, setPage, lang, setLang, t, onHero, onBook }) {
const [scrolled, setScrolled] = useState(false);
const [menuOpen, setMenuOpen] = useState(false);
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 40);
window.addEventListener('scroll', onScroll);
return () => window.removeEventListener('scroll', onScroll);
}, []);
const links = [
{ id: 'home', label: t.nav.home },
{ id: 'apartments', label: t.nav.apartments },
{ id: 'story', label: t.nav.story },
{ id: 'area', label: t.nav.area },
{ id: 'contact', label: t.nav.contact }];
return (
<>
{menuOpen &&
{['en', 'it', 'de'].map((l) =>
)}
}
);
}
/* ---------- Footer ---------- */
// Cloudflare Turnstile (invisible) — same site key as the enquiry form. Secret is
// TURNSTILE_SECRET_KEY in Vercel, verified in api/subscribe.js.
const NL_TURNSTILE_SITE_KEY = "0x4AAAAAADs7irwwFp6GIvC7";
function Footer({ t, setPage, lang }) {
const [email, setEmail] = useState('');
const [nlState, setNlState] = useState('idle'); // idle | sending | done | error
const [tsToken, setTsToken] = useState('');
const tsRef = useRef(null);
const tsWidget = useRef(null);
useEffect(() => {
let tries = 0;
const iv = setInterval(() => {
if (window.turnstile && tsRef.current && tsWidget.current === null) {
tsWidget.current = window.turnstile.render(tsRef.current, {
sitekey: NL_TURNSTILE_SITE_KEY,
callback: (token) => setTsToken(token),
'error-callback': () => setTsToken(''),
'expired-callback': () => { setTsToken(''); if (window.turnstile && tsWidget.current !== null) window.turnstile.reset(tsWidget.current); }
});
clearInterval(iv);
}
if (++tries > 150) clearInterval(iv);
}, 100);
return () => clearInterval(iv);
}, []);
const subscribe = async (e) => {
e.preventDefault();
if (nlState === 'sending') return;
setNlState('sending');
try {
const res = await fetch('/api/subscribe', {
method: 'POST',
headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
body: JSON.stringify({ email, lang: lang || 'en', 'cf-turnstile-response': tsToken })
});
setNlState(res.ok ? 'done' : 'error');
if (window.turnstile && tsWidget.current !== null) { window.turnstile.reset(tsWidget.current); setTsToken(''); }
} catch (err) {
setNlState('error');
}
};
return (
);
}
// Default photo URLs sourced from the existing casalaudieri.com Squarespace
// site. Users can override any slot by dragging a new image onto it; the
// override persists in browser storage. Replace these with locally-hosted
// images once the user is ready.
const CASA_PHOTOS = {
hero: "hero-2000.jpg",
storyDetail: "story-bookshelf-1200.jpg",
storyHistory: "story-history-1200.jpg",
"apt-jochtal": "apt-jochtal-1200.jpg",
"area-skiing": "area-skiing-1600.jpg",
"area-brixen": "area-brixen-1600.jpg",
"area-plose-cable": "area-plose-cable-1600.jpg"
};
/* ---------- Shared Leaflet map ---------- */
function CasaMap({ lat = 46.71362, lng = 11.65426, aspect = '4 / 3' }) {
const mapRef = React.useRef(null);
React.useEffect(() => {
if (!window.L || !mapRef.current || mapRef.current._init) return;
mapRef.current._init = true;
const map = window.L.map(mapRef.current, {
scrollWheelZoom: false, zoomControl: true, attributionControl: true
}).setView([lat, lng], 16);
window.L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors', className: 'map-soft-tiles',
subdomains: 'abcd', maxZoom: 19
}).addTo(map);
const icon = window.L.divIcon({
className: 'casa-pin',
html: 'Casa Laudieri, Fallmerayerstraße 5, Brixen',
iconSize: [16, 16], iconAnchor: [8, 8]
});
window.L.marker([lat, lng], { icon }).addTo(map).bindTooltip('Casa Laudieri', {
permanent: true, direction: 'right', offset: [14, 0], className: 'casa-tooltip'
});
return () => { map.remove(); if (mapRef.current) mapRef.current._init = false; };
}, [lat, lng]);
return (
Casa Laudieri
Fallmerayerstraße 5, Brixen
);
}
function CookieBanner({ t, setPage, lang }) {
const [show, setShow] = useState(false);
useEffect(() => {
let v = null;
try {v = localStorage.getItem('cl-cookie-consent');} catch (e) {}
window.casaCookieConsent = v; // 'accepted' | 'declined' | null — future analytics can gate on this
if (!v) setShow(true);
const reopen = () => setShow(true);
window.addEventListener('cookie-reopen', reopen);
return () => window.removeEventListener('cookie-reopen', reopen);
}, []);
if (!show) return null;
const cb = t.cookieBanner || {};
const choose = (v) => {
try {localStorage.setItem('cl-cookie-consent', v);} catch (e) {}
window.casaCookieConsent = v;
window.dispatchEvent(new CustomEvent('cookie-consent', { detail: v }));
setShow(false);
};
return (
);
}
function FormSelect({ name, options, defaultValue, id }) {
const [value, setValue] = useState(defaultValue != null ? defaultValue : (options[0] && options[0].value));
const [open, setOpen] = useState(false);
const ref = useRef(null);
useEffect(() => {
if (!open) return;
const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
document.addEventListener('mousedown', onDoc);
return () => document.removeEventListener('mousedown', onDoc);
}, [open]);
const current = options.find((o) => o.value === value) || options[0];
return (
{open &&
{options.map((o) =>
- {setValue(o.value);setOpen(false);}}>{o.label}
)}
}
);
}
Object.assign(window, { Ph, HeroPh, useReveal, SectionHead, Nav, Footer, CASA_PHOTOS, CasaMap, CookieBanner, FormSelect, casaHref, navLink });