/* Main App + practical info + hero + tweaks */ const { useState: _u1, useEffect: _u2, useMemo: _u3 } = React; // ───────────────────────────────────────────────────────────── // Wi-Fi card with copy-to-clipboard on the password // ───────────────────────────────────────────────────────────── function WifiRow({ label, value, copiable, t, dark }) { const [copied, setCopied] = _u1(false); const onCopy = () => { if (!copiable) return; try { navigator.clipboard.writeText(value); setCopied(true); setTimeout(() => setCopied(false), 1800); } catch (e) {} }; return (
{label} {value} {copiable && (copied ? : )}
); } function PracticalInfo({ t, lang, dark, data }) { return (
{t.arrivalTime} {data.meta.checkIn}
{t.departureTime} {data.meta.checkOut}
{t.parkingDesc} {t.storageDesc} {t.securityDesc}
{data.meta.ownerName} — {t.contactHint}
{data.meta.phone} {t.writeOwner}
); } // Address / "How to get here" card — dedicated block with maps links function AddressBlock({ t, data, dark }) { return (
{t.howToGet}
{data.meta.address}
GPS {data.meta.gps[0].toFixed(4)}° N, {data.meta.gps[1].toFixed(4)}° E
{t.navigateHere} Mapy.cz
); } // Amenities / Resort — two light-weight columns function VillaFactBlock({ t, dark }) { const Col = ({ title, items, icon: I }) => (
{title}
); return (
); } // ───────────────────────────────────────────────────────────── // Category nav (sticky pill bar) — filters + smooth scroll // ───────────────────────────────────────────────────────────── function CategoryNav({ t, dark, selected, setSelected }) { const cats = ['all', 'trips', 'water', 'sport', 'walks', 'wellness', 'cycling', 'gastro']; return (
{cats.map(c => { const isSel = selected === c; const label = c === 'all' ? t.seeAll : t.category[c]; return ( ); })}
); } // ───────────────────────────────────────────────────────────── // Hero // ───────────────────────────────────────────────────────────── function Hero({ t, lang, setLang, data, dark, heroVariant }) { const firstWord = t.welcome.split(' ')[0]; const rest = t.welcome.split(' ').slice(1).join(' '); return (
{/* Top bar: villa mark + lang */}
Vila Albatros
{/* Title */}
Lužické hory · Resort Malevil

{firstWord}{' '} {rest}

{t.subtitle}

); } // ───────────────────────────────────────────────────────────── // Owner message // ───────────────────────────────────────────────────────────── function OwnerMessage({ t, data, dark }) { return (
{t.ownerMsg}
{t.ownerLetter}
{data.meta.ownerName}
{t.ownerRole}
); } // ───────────────────────────────────────────────────────────── // Tweaks panel // ───────────────────────────────────────────────────────────── function TweaksPanel({ visible, t, dark, setDark, density, setDensity, heroVariant, setHeroVariant, onPersist }) { if (!visible) return null; const row = (label, children) => (
{label}
{children}
); const btn = (active, onClick, content, key) => ( ); const tw = t.tweaks; return (
{tw.title}
{row(tw.theme, (
{btn(!dark, () => { setDark(false); onPersist({ dark: false }); }, <> {tw.light}, 'l')} {btn(dark, () => { setDark(true); onPersist({ dark: true }); }, <> {tw.dark}, 'd')}
))} {row(tw.density, (
{btn(density==='list', () => { setDensity('list'); onPersist({ density: 'list' }); }, <> {tw.list}, 'li')} {btn(density==='grid', () => { setDensity('grid'); onPersist({ density: 'grid' }); }, <> {tw.grid}, 'gr')} {btn(density==='tile', () => { setDensity('tile'); onPersist({ density: 'tile' }); }, <> {tw.tile}, 'ti')}
))} {row(tw.hero, (
{btn(heroVariant==='botanical', () => { setHeroVariant('botanical'); onPersist({ heroVariant:'botanical' }); }, tw.botanical, 'b')} {btn(heroVariant==='topo', () => { setHeroVariant('topo'); onPersist({ heroVariant:'topo' }); }, tw.topo, 't')} {btn(heroVariant==='minimal', () => { setHeroVariant('minimal'); onPersist({ heroVariant:'minimal' }); }, tw.minimal, 'm')}
))}
); } // ───────────────────────────────────────────────────────────── // Section heading // ───────────────────────────────────────────────────────────── function SectionHeading({ eyebrow, title, subtitle, dark }) { return (
{eyebrow} ·

{title}

{subtitle && (

{subtitle}

)}
); } // ───────────────────────────────────────────────────────────── // Main App // ───────────────────────────────────────────────────────────── function App({ initialTweaks }) { const data = window.VILLA_DATA; const [lang, setLang] = _u1(() => localStorage.getItem('villa_lang') || 'cs'); const [dark, setDark] = _u1(!!initialTweaks.dark); const [density, setDensity] = _u1(initialTweaks.density || 'grid'); const [heroVariant, setHeroVariant] = _u1(initialTweaks.heroVariant || 'botanical'); const [selectedCat, setSelectedCat] = _u1('all'); const [openActivity, setOpenActivity] = _u1(null); const [tweaksVisible, setTweaksVisible] = _u1(false); _u2(() => { localStorage.setItem('villa_lang', lang); }, [lang]); _u2(() => { document.documentElement.lang = lang === 'cs' ? 'cs' : lang; }, [lang]); _u2(() => { const handler = (e) => { if (e.data?.type === '__activate_edit_mode') setTweaksVisible(true); if (e.data?.type === '__deactivate_edit_mode') setTweaksVisible(false); }; window.addEventListener('message', handler); window.parent.postMessage({ type:'__edit_mode_available' }, '*'); return () => window.removeEventListener('message', handler); }, []); const persistKey = (edits) => { window.parent.postMessage({ type:'__edit_mode_set_keys', edits }, '*'); }; const t = data.i18n[lang]; const bg = dark ? '#0F241C' : '#F7F3EA'; const fg = dark ? '#F5EAD0' : '#1E3A2E'; _u2(() => { document.body.style.background = bg; document.body.style.color = fg; }, [bg, fg]); const cats = ['trips','water','walks','cycling','sport','wellness','gastro']; return (
{/* 1 — Practical info */}
{/* Address / How to get here */}
{/* Villa + Resort facts */}
{/* Owner message */} {/* 2 — Activities */}
{cats.map(c => ( ))} {/* Footer */}
setOpenActivity(null)} villaGps={data.meta.gps}/>
); } Object.assign(window, { App, PracticalInfo, CategoryNav, Hero, OwnerMessage, TweaksPanel, SectionHeading, AddressBlock, VillaFactBlock, WifiRow, });