; } function Reveal({ children, delay = 0, as = 'div', style }) { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; // Immediate above-the-fold check — don't wait for IntersectionObserver, // which may not fire its initial callback in some embedded iframes. const checkInView = () => { const r = el.getBoundingClientRect(); const vh = window.innerHeight || document.documentElement.clientHeight; return r.top < vh * 0.94 && r.bottom > 0; }; let done = false; const reveal = () => { if (done) return; done = true; setTimeout(() => el.classList.add('is-in'), delay); }; if (checkInView()) { reveal(); return; } const obs = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) {reveal();obs.unobserve(el);} }); }, { threshold: 0.08, rootMargin: '0px 0px -6% 0px' }); obs.observe(el); // Fallback: scroll listener in case IO never fires const onScroll = () => { if (checkInView()) {reveal();window.removeEventListener('scroll', onScroll);obs.disconnect();} }; window.addEventListener('scroll', onScroll, { passive: true }); return () => {obs.disconnect();window.removeEventListener('scroll', onScroll);}; }, [delay]); const Tag = as; return {children}; } function CardSurface({ children, variant, style, onClick }) { // variant from tweak: 'border' | 'filled' | 'none' const base = { padding: '28px 26px', borderRadius: 4, background: 'transparent', border: 'none', transition: 'background 200ms, border-color 200ms' }; const variants = { border: { border: '1px solid var(--rule)', background: 'transparent' }, filled: { background: 'var(--bg-alt)', border: '1px solid transparent' }, none: { background: 'transparent', border: 'none', padding: 0 } }; return (

{children}

); } /* -------------------- HEADER -------------------- */ function Header({ t, lang, setLang, onPreOrder, route }) { const onPartner = route === 'partners'; return (

{ e.preventDefault(); history.pushState(null, '', location.pathname + location.search); window.dispatchEvent(new HashChangeEvent('hashchange')); window.scrollTo(0, 0); }} style={{ display: 'flex', alignItems: 'baseline', gap: 12, minWidth: 0, textDecoration: 'none' }}>

{t.brand.mark}

{ e.currentTarget.style.background = 'var(--accent)'; e.currentTarget.style.color = 'var(--accent-ink)'; }} onMouseOut={(e) => { if (!onPartner) { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--accent)'; } }} >{t.partner.nav}

{['en', 'ru', 'es', 'id'].map((l) => )}

); } /* -------------------- HERO -------------------- */ function Hero({ t, onPreOrder }) { return (

{/* temple video bleeding from the right, dissolving into the background */}

{t.hero.eyebrow} {t.hero.title[0]}
{t.hero.title[1]}
{t.hero.title[2]} {t.hero.sub}

{t.hero.cta}

{t.hero.ctaNote}

{t.hero.meta.map(([h, sub], i) =>

{h}

{sub}

)}

); } function PrimaryButton({ children, onClick, variant = 'solid' }) { const base = { fontFamily: 'var(--sans)', fontSize: 15, fontWeight: 500, letterSpacing: '-0.005em', padding: '14px 22px 15px', borderRadius: 2, cursor: 'pointer', border: '1px solid var(--accent)', background: 'var(--accent)', color: 'var(--accent-ink)', transition: 'transform 180ms cubic-bezier(.2,.6,.2,1), background 180ms, color 180ms', display: 'inline-flex', alignItems: 'center', gap: 12 }; const ghost = { background: 'transparent', color: 'var(--ink)' }; return ( ); } /* -------------------- SECTION SHELL -------------------- */ function Section({ id, children, alt, top = true, bottom = true, numeral, numeralSide = 'right', foliage }) { return (

{numeral && {numeral}} {foliage && }

{children}

); } /* -------------------- 02 More than -------------------- */ function MoreThan({ t, cardVariant }) { return (

{t.more.eyebrow}

{t.more.title} {t.more.intro}

{t.more.cards.map((c, i) =>

· {String(i + 1).padStart(2, '0')} {c.tag}

{c.title} {c.body} )}

); } /* -------------------- 03 Inside -------------------- */ function Inside({ t, cardVariant }) { return (

{t.inside.eyebrow} {t.inside.title}

{t.inside.items.map((it, i) =>

{it.h}

{it.b}

)}

{t.inside.timing}

); } /* -------------------- STOPS -------------------- */ function Stops({ t, lang, cardVariant }) { const [open, setOpen] = useState(1); // Lempuyang open by default return (

{t.stops.eyebrow} {t.stops.title} {t.stops.sub}

); } /* The landing now borrows the application’s actual information architecture: chapter cards first, then only a couple of deliberately open free windows. */ function GuidePlayerPreview({ lang }) { const [section, setSection] = useState('stops'); const [voice, setVoice] = useState('female'); const [openId, setOpenId] = useState('lempuyang'); const copy = { ru: { title: 'Записи по точкам', stops: 'Основные точки маршрута', bali: 'Дополнительно о Бали', male: 'Мужской голос', female: 'Женский голос', prompt: 'Выберите точку, голос и запись. Один-два фрагмента в каждой подборке можно послушать бесплатно.', tracks: 'записей', culture: 'Круг жизни на Бали', tirta: 'Тирта Гангга', taman: 'Таман Уджунг', goa: 'Гоа Лавах', free: 'Бесплатный фрагмент', full: 'Полная версия' }, en: { title: 'Stories for each stop', stops: 'Main route stops', bali: 'More about Bali', male: 'Male voice', female: 'Female voice', prompt: 'Choose a stop, a voice and a story. One or two excerpts in each collection are free to hear.', tracks: 'tracks', culture: 'The circle of life in Bali', tirta: 'Tirta Gangga', taman: 'Taman Ujung', goa: 'Goa Lawah', free: 'Free excerpt', full: 'Full version' }, es: { title: 'Historias por cada parada', stops: 'Paradas principales de la ruta', bali: 'Más sobre Bali', male: 'Voz masculina', female: 'Voz femenina', prompt: 'Elige una parada, una voz y una historia. Uno o dos fragmentos de cada selección se pueden escuchar gratis.', tracks: 'pistas', culture: 'El círculo de la vida en Bali', tirta: 'Tirta Gangga', taman: 'Taman Ujung', goa: 'Goa Lawah', free: 'Fragmento gratuito', full: 'Versión completa' }, id: { title: 'Cerita untuk setiap pemberhentian', stops: 'Pemberhentian utama', bali: 'Lebih banyak tentang Bali', male: 'Suara pria', female: 'Suara wanita', prompt: 'Pilih pemberhentian, suara, dan cerita. Rekaman bahasa Indonesia sedang disiapkan.', tracks: 'rekaman', culture: 'Siklus hidup di Bali', tirta: 'Tirta Gangga', taman: 'Taman Ujung', goa: 'Goa Lawah', free: 'Segera hadir', full: 'Rekaman bahasa Indonesia segera hadir' }, }[lang]; const items = section === 'stops' ? [{id:'lempuyang',title:'Pura Lempuyang',count:8},{id:'tirta',title:copy.tirta,count:8},{id:'taman',title:copy.taman,count:7},{id:'goa',title:copy.goa,count:8}] : [{id:'life',title:copy.culture,count:5}]; const changeSection = (next) => { setSection(next); setOpenId(next === 'stops' ? 'lempuyang' : 'life'); }; return

{items.map((item) => setOpenId(openId === item.id ? '' : item.id)} copy={copy} lang={lang} voice={voice} />)}

; } const AUDIO_PREVIEW_ORIGIN = 'https://guide.baliaudioguide.com'; function GuidePreviewCard({ item, isOpen, onToggle, copy, lang, voice }) { const audioRef = useRef(null); const [playing, setPlaying] = useState(false); const supportsSample = lang !== 'id' && (['lempuyang', 'tirta'].includes(item.id) || (item.id === 'taman' && lang === 'ru') || (item.id === 'life' && lang === 'ru')); const isFree = supportsSample && !(voice === 'male' && lang !== 'ru'); const source = voice === 'male' && lang === 'ru' ? item.id === 'tirta' ? `${AUDIO_PREVIEW_ORIGIN}/route-app/audio/tirta_gangga_v2_full_george_2026-07-24/01_vstuplenie.mp3` : item.id === 'taman' ? `${AUDIO_PREVIEW_ORIGIN}/route-app/audio/taman_ujung_final_george_2026-06-17/01_vstuplenie.mp3` : item.id === 'life' ? `${AUDIO_PREVIEW_ORIGIN}/route-app/audio/o_bali_kultura_v2_krug_zhizni_george_2026-07-24/02_rozhdenie.mp3` : `${AUDIO_PREVIEW_ORIGIN}/route-app/audio/pura_lempuyang_v3_full_george_2026-07-17/01_vstuplenie.mp3` : item.id === 'life' ? `${AUDIO_PREVIEW_ORIGIN}/route-app/audio/o_bali_kultura_v2_krug_zhizni_mariia_2026-07-24/02_rozhdenie.mp3` : item.id === 'tirta' ? lang === 'ru' ? `${AUDIO_PREVIEW_ORIGIN}/elevenlabs/FINAL_APPROVED/tirta_gangga/01_tirta_gangga_pervoe_vpechatlenie/audio_music/01_tirta_gangga_pervoe_vpechatlenie_mariia_r_javanese_vibes_fullbed.m4a` : lang === 'es' ? `${AUDIO_PREVIEW_ORIGIN}/elevenlabs/FINAL_APPROVED/tirta_gangga_es/01_tirta_gangga_primera_impresion/audio_music/01_tirta_gangga_primera_impresion_lucy_v1_with_javanese_vibes_fullbed.m4a` : `${AUDIO_PREVIEW_ORIGIN}/elevenlabs/FINAL_APPROVED/tirta_gangga_en/01_tirta_gangga_first_impression/audio_music/01_tirta_gangga_first_impression_alice_v1_with_javanese_vibes_fullbed.m4a` : item.id === 'taman' ? `${AUDIO_PREVIEW_ORIGIN}/elevenlabs/FINAL_APPROVED/taman_ujung_v3/01_taman_ujung_vstuplenie/audio_music/01_taman_ujung_vstuplenie_mariia_r_repro_javanese_fullbed.m4a` : lang === 'ru' ? `${AUDIO_PREVIEW_ORIGIN}/elevenlabs/FINAL_APPROVED/pura_lempuyang/01_lempuyang_pervoe_vpechatlenie/audio_music/01_mariia_r_recommended_with_epic_nusantara_fullbed.m4a` : lang === 'es' ? `${AUDIO_PREVIEW_ORIGIN}/elevenlabs/FINAL_APPROVED/pura_lempuyang_es/01_lempuyang_primera_impresion/audio_music/01_lempuyang_primera_impresion_lucy_v1_with_epic_nusantara_fullbed.m4a` : `${AUDIO_PREVIEW_ORIGIN}/elevenlabs/FINAL_APPROVED/pura_lempuyang_en/01_lempuyang_first_impression/audio_music/01_lempuyang_first_impression_alice_v1_with_epic_nusantara_fullbed.m4a`; const names = item.id === 'life' ? (lang === 'ru' ? ['Вступление', 'Рождение', 'Взросление', 'Замужество', 'Смерть'] : lang === 'es' ? ['Introducción', 'Nacimiento', 'Crecimiento', 'Matrimonio', 'Muerte'] : ['Introduction', 'Birth', 'Growing up', 'Marriage', 'Death']) : item.id === 'tirta' ? (lang === 'ru' ? ['Король, который строил сад сам', 'Вход и смысл названия', 'Три уровня водного сада', 'Остров демонов', 'Фонтан Нава Санга', 'Священный источник', 'Тихий сад', 'Что забрать с собой'] : lang === 'es' ? ['El rey que construyó el jardín', 'Entrada y significado', 'Los tres niveles del jardín', 'La isla de los demonios', 'Fuente Nava Sanga', 'Manantial sagrado', 'Jardín tranquilo', 'Lo que te llevas contigo'] : ['The king who built the garden', 'Entry and meaning', 'Three levels of the garden', 'The demon island', 'Nava Sanga fountain', 'Sacred spring', 'Quiet garden', 'What to take with you']) : item.id === 'taman' ? (lang === 'ru' ? ['Дворец как послание', 'Ориентиры и смысл названия', 'История и эпоха', 'Гили Бале и мосты', 'Бале Бенгонг и Бале Капал', 'Пруд Дира', 'Что уже унёс с собой этот день'] : lang === 'es' ? ['El palacio como mensaje', 'Referencias y significado', 'Historia y época', 'Gili Bale y los puentes', 'Bale Bengong y Bale Kapal', 'Estanque Dira', 'Lo que este día ya se ha llevado'] : ['A palace as a message', 'Landmarks and meaning', 'History and its era', 'Gili Bale and bridges', 'Bale Bengong and Bale Kapal', 'Dira pond', 'What this day has already taken away']) : (lang === 'ru' ? ['Первое впечатление', 'Подъём и смысл названия', 'Один из древнейших храмов Бали', 'Ворота и подношения', 'Наги и лестницы', 'Агунг и знаменитое отражение', 'Легенда Лемпуянга', 'Что забрать с собой'] : lang === 'es' ? ['Primera impresión', 'La subida y el nombre', 'Uno de los templos más antiguos', 'Puertas y ofrendas', 'Nagas y escalinatas', 'El Agung y el reflejo', 'La leyenda de Lempuyang', 'Lo que te llevas contigo'] : ['First impression', 'The climb and the name', 'One of Bali’s oldest temples', 'Gates and offerings', 'Nagas and stairways', 'Mount Agung and the reflection', 'The legend of Lempuyang', 'What to take with you']); const toggle = () => { const audio = audioRef.current; if (!audio) return; audio.paused ? audio.play().catch(() => {}) : audio.pause(); }; return

; } function StopCard({ stop, index, isOpen, onToggle, cardVariant, lockedLabel, sampleLabel, sampleData, lang }) { const base = { cursor: 'pointer', transition: 'background 220ms ease', padding: '22px 24px', borderRadius: 2 }; const variants = { border: { border: '1px solid var(--rule)', background: isOpen ? 'var(--bg-alt)' : 'transparent' }, filled: { background: isOpen ? 'var(--bg-deep)' : 'var(--bg-alt)', border: '1px solid transparent' }, none: { background: 'transparent', borderBottom: '1px solid var(--rule)', padding: '22px 0', borderRadius: 0 } }; return (

{stop.time}

{stop.name}

{stop.sample ? ● {sampleLabel} : {lockedLabel} } →

{stop.preview} {stop.sample && sampleData &&

}

); } function LockIcon() { return ( ); } /* -------------------- SAMPLE PLAYER (embedded in a route stop) -------------------- */ function SamplePlayer({ sample, isOpen }) { const audioRef = useRef(null); const waveRef = useRef(null); const [playing, setPlaying] = useState(false); const [pos, setPos] = useState(0); // 0..1 const [cur, setCur] = useState(0); // seconds elapsed const [dur, setDur] = useState(0); // real duration once known const bars = useMemo(() => { const N = 80; return Array.from({ length: N }, (_, i) => { const x = i / N; // pseudo-random but stable const n = Math.sin(i * 1.7) * Math.cos(i * 0.3) + Math.sin(i * 0.6) * 0.5; const env = Math.sin(x * Math.PI); return 0.25 + 0.7 * Math.abs(n) * env; }); }, []); // Pause when the stop card collapses useEffect(() => { if (!isOpen && audioRef.current) audioRef.current.pause(); }, [isOpen]); const toggle = () => { const a = audioRef.current; if (!a) return; if (a.paused) {a.play().catch(() => {});} else {a.pause();} }; const onLoaded = () => { const a = audioRef.current; if (a && isFinite(a.duration)) setDur(a.duration); }; const onTime = () => { const a = audioRef.current; if (!a) return; setCur(a.currentTime); setPos(a.duration ? a.currentTime / a.duration : 0); }; const onEnded = () => {setPlaying(false);setPos(0);setCur(0);}; const seek = (clientX) => { const a = audioRef.current,el = waveRef.current; if (!a || !el || !a.duration) return; const r = el.getBoundingClientRect(); const x = Math.min(1, Math.max(0, (clientX - r.left) / r.width)); a.currentTime = x * a.duration; setPos(x);setCur(x * a.duration); }; const durLabel = dur ? formatTime(dur) : sample.duration; return (

e.stopPropagation()}>