// Hristi Accommodation — booking-focused homepage // No-build stack: CDN React + in-browser Babel. Content lives in rooms-data.js. const { useState, useEffect, useRef, useMemo } = React; // Google Maps — pinned to the exact location of Villa „Hristi" (from the // owner's Google Maps link). Coordinates: 41.063593, 20.8025131. const MAP_COORDS = '41.063593,20.8025131'; const MAP_EMBED_URL = `https://www.google.com/maps?q=${MAP_COORDS}&z=17&output=embed`; const MAP_DIR_URL = `https://www.google.com/maps/dir/?api=1&destination=${MAP_COORDS}`; // ---------- i18n helper ---------- window.t = (val, lang) => { if (val == null) return ''; if (typeof val === 'string') return val; if (typeof val === 'object' && val[lang] != null) return val[lang]; return ''; }; // ---------- Reveal on scroll ---------- function useReveal() { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { el.classList.add('in'); io.disconnect(); } }, { threshold: 0.12 }); io.observe(el); return () => io.disconnect(); }, []); return ref; } // ---------- Inline icons (replaces lucide-react) ---------- function Icon({ name, className }) { const p = { width: 20, height: 20, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round', className }; switch (name) { case 'arrow': return (); case 'expand': return (); case 'check': return (); case 'chevron': return (); case 'clock': return (); case 'home': return (); case 'mail': return (); case 'pin': return (); case 'menu': return (); case 'phone': return (); case 'star': return (); case 'leaf': return (); case 'coffee': return (); case 'car': return (); case 'cash': return (); case 'no-smoke': return (); case 'bed': return (); case 'sofa': return (); case 'kitchen': return (); case 'balcony': return (); case 'view': return (); case 'droplet': return (); case 'snow': return (); case 'tv': return (); case 'wifi': return (); case 'linens': return (); case 'hairdryer': return (); case 'fridge': return (); case 'family': return (); case 'laptop': return (); case 'x': return (); case 'instagram': return (); case 'whatsapp': return (); default: return null; } } // Pick a line icon for a free-text amenity, matching English or Macedonian. function amenityIcon(text) { const s = (text || '').toLowerCase(); const has = (...keys) => keys.some(k => s.includes(k)); if (has('living', 'дневна')) return 'sofa'; if (has('bed', 'кревет', 'sofa', 'софа')) return 'bed'; if (has('kitchen', 'кујна')) return 'kitchen'; if (has('balcony', 'балкон')) return 'balcony'; if (has('terrace', 'тераса')) return 'leaf'; if (has('view', 'поглед')) return 'view'; if (has('shower', 'туш')) return 'droplet'; if (has('bath', 'бања')) return 'droplet'; if (has('hair', 'фен')) return 'hairdryer'; if (has('air', 'клима')) return 'snow'; if (has('wi-fi', 'wifi')) return 'wifi'; if (has('tv', 'тв')) return 'tv'; if (has('linen', 'постелнина')) return 'linens'; if (has('refriger', 'fridge', 'фрижидер')) return 'fridge'; if (has('coffee', 'tea', 'кафе', 'чај')) return 'coffee'; if (has('family', 'деца', 'семеј')) return 'family'; if (has('work', 'работ', 'desk')) return 'laptop'; return 'check'; } // ---------- Gradient placeholder (becomes a real photo later) ---------- function Photo({ className = '', gradient, image, children, onClick }) { const style = image ? { backgroundImage: `url('${image}')` } : { background: gradient }; return (
{ if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onClick(e); } } : undefined} > {children}
); } // ---------- Header ---------- function Header({ lang, setLang, onNav, onBook, hidden }) { const S = window.STRINGS; const [open, setOpen] = useState(false); const [activeId, setActiveId] = useState(''); const go = (id) => { setOpen(false); onNav(id); }; const book = () => { setOpen(false); onBook(); }; const links = [ { id: 'rooms', label: S.nav.rooms }, { id: 'about', label: S.nav.place }, { id: 'gallery', label: S.nav.gallery }, { id: 'reviews', label: S.nav.guests }, ]; // Highlight the nav link for whichever section is centered in the viewport useEffect(() => { const els = links.map(l => document.getElementById(l.id)).filter(Boolean); if (!els.length) return; const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) setActiveId(e.target.id); }); }, { rootMargin: '-45% 0px -50% 0px', threshold: 0 }); els.forEach(el => io.observe(el)); return () => io.disconnect(); }, []); return (
{links.map(l => )}
); } // ---------- Hero ---------- function Hero({ lang, onBook, onNav }) { const S = window.STRINGS.hero; return (

{t(S.title, lang)}

{t(S.sub, lang)}

); } // ---------- About ---------- function About({ lang }) { const S = window.STRINGS.about; const ref = useReveal(); return (
{t(S.eyebrow, lang)}

{t(S.heading, lang)}

{t(S.body, lang)}

{S.reasons.map((r, i) => (

{t(r.title, lang)}

{t(r.copy, lang)}

))}
{lang === 'en' ? 'And whenever you need it, just ask' : 'И кога ќе ви затреба, само прашајте'}
{lang === 'en' ? 'Breakfast' : 'Појадок'} {lang === 'en' ? 'We can arrange it for your stay.' : 'Можеме да го средиме за вашиот престој.'}
{lang === 'en' ? 'Transport' : 'Превоз'} {lang === 'en' ? 'Pickup from the airport or bus station.' : 'Превоз од аеродром или автобуска.'}
); } // ---------- Rooms ---------- function Rooms({ lang, onRoom, onBookRoom }) { const S = window.STRINGS.rooms; const rooms = window.ROOMS; const [active, setActive] = useState(0); const room = useMemo(() => rooms[active], [active]); const features = (t(room.amenities, lang) || []).slice(0, 4); const cardRef = useRef(null); const selectRoom = (i) => { setActive(i); if (window.innerWidth < 900 && cardRef.current) { setTimeout(() => cardRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' }), 60); } }; return (
{t(S.eyebrow, lang)}

{t(S.heading, lang)}

{t(S.sub, lang)}

{rooms.map((r, i) => ( ))}
onRoom(room.slug)} className=""/>
{t(room.tone, lang)}

{t(room.name, lang)}

{t(room.description, lang)}

{t(S.included, lang)}
    {features.map((f, i) => (
  • {f}
    • ))}
); } // ---------- Gallery ---------- function Gallery({ lang }) { const S = window.STRINGS.gallery; const items = window.GALLERY; const [i, setI] = useState(0); const cur = items[i]; return ( ); } // ---------- Reviews (rotating 3-up carousel) ---------- function Reviews({ lang }) { const S = window.STRINGS.reviews; const ref = useReveal(); const all = window.REVIEWS; const total = all.length; const shown = Math.min(3, total); const [start, setStart] = useState(0); const [paused, setPaused] = useState(false); // Auto-advance one review every 5.5s (window of 3 wraps around); pause on hover useEffect(() => { if (total <= shown || paused) return; const id = setInterval(() => setStart(s => (s + 1) % total), 5500); return () => clearInterval(id); }, [total, shown, paused]); const visible = Array.from({ length: shown }, (_, k) => ({ r: all[(start + k) % total], key: (start + k) % total })); return (
{t(S.eyebrow, lang)}

{t(S.heading, lang)}

setPaused(true)} onMouseLeave={() => setPaused(false)}> {visible.map(({ r, key }, i) => (
{[0,1,2,3,4].map(n => )}

“{t(r.quote, lang)}”

{r.author}
{lang === 'en' ? 'via' : 'преку'} {t(r.origin, lang)}
))}
{total > shown && (
{all.map((_, i) => (
)}
); } // ---------- Booking + Contact + Footer ---------- function BookSection({ lang, preselectRoom, onClearPreselect }) { const S = window.STRINGS.book; const C = window.STRINGS.contact; const F = window.STRINGS.footer; // status: idle | whatsapp | instagram const [status, setStatus] = useState('idle'); const [igBody, setIgBody] = useState(''); const [copied, setCopied] = useState(false); const formRef = useRef(null); const [room, setRoom] = useState(preselectRoom || ''); const [arrive, setArrive] = useState(''); const today = useMemo(() => new Date().toISOString().split('T')[0], []); useEffect(() => { if (preselectRoom) { setRoom(preselectRoom); setStatus('idle'); } }, [preselectRoom]); // After the request is copied, give the guest ~2.5s to read the paste steps, // then take them straight to our Instagram DM. useEffect(() => { if (status !== 'instagram') return; const id = setTimeout(() => { window.location.href = 'https://ig.me/m/hristiaccommodation'; }, 2500); return () => clearTimeout(id); }, [status]); const roomName = (slug) => { const r = window.ROOMS.find(x => x.slug === slug); return r ? t(r.name, lang) : (lang === 'en' ? 'Any available room' : 'Било која слободна соба'); }; const composeBody = (d) => { const L = (en, mk) => lang === 'en' ? en : mk; const breakfast = d.get('breakfast') === 'yes' ? L('Yes, please', 'Да, ве молам') : L('No', 'Не'); const rideMap = { airport: L('Airport pickup', 'Превоз од аеродром'), bus: L('Bus station pickup', 'Превоз од автобуска'), other: L('Yes, see note', 'Да, види белешка'), }; const transport = rideMap[d.get('transport')] || L('No', 'Не'); return [ L('New availability request from the Hristi website', 'Ново барање за достапност од веб-страницата на Христи'), '', L('Arrival', 'Пристигање') + ': ' + (d.get('arrival') || '-'), L('Departure', 'Заминување') + ': ' + (d.get('departure') || '-'), L('Guests', 'Гости') + ': ' + (d.get('guests') || '-'), L('Room', 'Соба') + ': ' + roomName(d.get('room')), L('Breakfast', 'Појадок') + ': ' + breakfast, L('Transport', 'Превоз') + ': ' + transport, L('Name', 'Име') + ': ' + (d.get('name') || '-'), L('Email or phone', 'Е-пошта или телефон') + ': ' + (d.get('contact') || '-'), L('Note', 'Белешка') + ': ' + (d.get('note') || '-'), ].join('\n'); }; // Both paths reuse the same formatted request. WhatsApp accepts the whole // message in the link, so we open it right away. Instagram can't pre-fill a DM, // so we copy the text and show the paste instructions FIRST — opening Instagram // is a separate, deliberate tap, so the guest reads what to do before they leave. const send = (channel) => { const form = formRef.current; if (!form.reportValidity()) return; // enforce the required fields first const body = composeBody(new FormData(form)); if (channel === 'whatsapp') { const num = C.phone.replace(/\D/g, ''); window.open(`https://wa.me/${num}?text=${encodeURIComponent(body)}`, '_blank', 'noopener'); } else { try { navigator.clipboard && navigator.clipboard.writeText(body); setCopied(true); } catch (err) {} setIgBody(body); } setStatus(channel); if (onClearPreselect) onClearPreselect(); }; const openInstagram = () => { window.location.href = 'https://ig.me/m/hristiaccommodation'; }; const copyAgain = () => { try { navigator.clipboard && navigator.clipboard.writeText(igBody); setCopied(true); } catch (err) {} }; const reset = () => { setStatus('idle'); setCopied(false); }; const done = status === 'whatsapp' || status === 'instagram'; return (
{t(S.eyebrow, lang)}

{t(S.heading, lang)}

{t(S.sub, lang)}

{lang === 'en' ? 'Good to know' : 'Корисно да се знае'}
  • {lang === 'en' ? 'Check-in 2–5 pm · Check-out by 11 am' : 'Пријавување 14–17 ч · Одјавување до 11 ч'}
  • {lang === 'en' ? 'Cash only' : 'Само готовина'}
  • {lang === 'en' ? 'No smoking indoors' : 'Не се пуши во затворен простор'}
{C.social.map(s => {s.name})}
{done ? (
✓

{status === 'instagram' ? (lang === 'en' ? 'Your request is copied ✓' : 'Вашето барање е копирано ✓') : (lang === 'en' ? 'Almost there. Press send' : 'Уште малку. Притиснете испрати')}

{status === 'instagram' ? (lang === 'en' ? 'Taking you to our Instagram now… when the chat opens, long-press the message box, choose Paste, and hit send. We reply quickly.' : 'Ве носиме до нашиот Instagram… кога ќе се отвори разговорот, држете на полето за порака, изберете Залепи и притиснете испрати. Брзо одговараме.') : (lang === 'en' ? 'We opened WhatsApp with your request filled in. Just press send and it comes straight to us.' : 'Отворивме WhatsApp со пополнето барање. Само притиснете испрати и пораката доаѓа директно кај нас.')}

{status === 'instagram' && (
)}
) : (
e.preventDefault()}>
{t(S.cardKicker, lang)}
{t(S.cardTitle, lang)}