✏️ עריכת japan-experience.html

C:\TripServer\JAPAN\japan-experience.html

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>חוויית יפן קולנועית</title>

@keyframes fxFinalFade{
  0%{opacity:1;transform:scale(1.015) translate3d(0,0,0)}
  72%{opacity:1;transform:scale(1.075) translate3d(-.5%,.1%,0)}
  100%{opacity:.12;transform:scale(1.095) translate3d(-.8%,.2%,0)}
}
#photo.fx-final-fade{animation:fxFinalFade var(--slide-duration,9600ms) ease-in-out forwards!important}

</style>

<style>

.top button,
.top-finish,
.finish,
.controls button{
  min-height:48px !important;
  min-width:48px !important;
  padding:10px 14px !important;
  font-size:16px !important;
}
@media(max-width:700px){
  .top{gap:8px!important}
  .controls{gap:7px!important}
  .top button,.top-finish,.finish,.controls button{
    min-height:46px!important;
    min-width:46px!important;
    padding:9px 12px!important;
    font-size:15px!important;
  }
  .pill{font-size:14px!important;padding:9px 12px!important}
}
</style>

<style>

#photo{
  transition: opacity 950ms ease, transform 950ms ease !important;
  will-change: transform, opacity;
}
#photo.show{animation:none!important}
#photo.fx-city-zoom{animation:fxCityZoom var(--slide-duration,4200ms) ease-in-out forwards!important}
#photo.fx-night-drift{animation:fxNightDrift var(--slide-duration,4200ms) ease-in-out forwards!important}
#photo.fx-pop-zoom{animation:fxPopZoom var(--slide-duration,3900ms) cubic-bezier(.2,.7,.2,1) forwards!important}
#photo.fx-slow-zoom{animation:fxSlowZoom var(--slide-duration,5000ms) ease-in-out forwards!important}
#photo.fx-epic-zoom{animation:fxEpicZoom var(--slide-duration,5600ms) ease-in-out forwards!important}
#photo.fx-soft-pan{animation:fxSoftPan var(--slide-duration,4300ms) ease-in-out forwards!important}
#photo.fx-gentle-pan{animation:fxGentlePan var(--slide-duration,4100ms) ease-in-out forwards!important}
#photo.fx-night-zoom{animation:fxNightZoom var(--slide-duration,4200ms) ease-in-out forwards!important}
#photo.fx-park-zoom{animation:fxParkZoom var(--slide-duration,4200ms) ease-in-out forwards!important}
#photo.fx-hero-zoom{animation:fxHeroZoom var(--slide-duration,5200ms) ease-in-out forwards!important}
#photo.fx-gate-pan{animation:fxGatePan var(--slide-duration,5200ms) ease-in-out forwards!important}
#photo.fx-top-reveal{animation:fxTopReveal var(--slide-duration,5200ms) ease-in-out forwards!important}
.chapter-card{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;
  text-align:center;background:
  radial-gradient(circle at 50% 38%,rgba(56,189,248,.22),transparent 24rem),
  linear-gradient(145deg,#020617,#111827 54%,#312e81);
  z-index:2;
}
.chapter-card .chapter-title{
  font-size:clamp(42px,9vw,104px);font-weight:950;line-height:1.05;
  text-shadow:0 12px 36px rgba(0,0,0,.55),0 0 28px rgba(56,189,248,.45);
}
.chapter-card .chapter-sub{
  margin-top:16px;font-size:clamp(18px,4vw,36px);font-weight:950;color:#fde68a;
  text-shadow:0 8px 26px rgba(0,0,0,.50);
}
.caption{transition:opacity .45s ease, transform .45s ease}
.caption.hide-caption{opacity:0;transform:translateY(8px)}
@keyframes fxCityZoom{from{transform:scale(1.01) translate3d(0,0,0)}to{transform:scale(1.075) translate3d(-.8%,.2%,0)}}
@keyframes fxNightDrift{from{transform:scale(1.015) translate3d(.8%,0,0)}to{transform:scale(1.065) translate3d(-1.2%,.3%,0)}}
@keyframes fxPopZoom{0%{transform:scale(1.00)}45%{transform:scale(1.045)}100%{transform:scale(1.065)}}
@keyframes fxSlowZoom{from{transform:scale(1.00)}to{transform:scale(1.055)}}
@keyframes fxEpicZoom{from{transform:scale(1.00) translate3d(0,0,0)}to{transform:scale(1.075) translate3d(0,-.5%,0)}}
@keyframes fxSoftPan{from{transform:scale(1.025) translate3d(-1%,0,0)}to{transform:scale(1.055) translate3d(1%,0,0)}}
@keyframes fxGentlePan{from{transform:scale(1.02) translate3d(.8%,0,0)}to{transform:scale(1.045) translate3d(-.8%,0,0)}}
@keyframes fxNightZoom{from{transform:scale(1.01)}to{transform:scale(1.06)}}
@keyframes fxParkZoom{from{transform:scale(1.00)}to{transform:scale(1.07)}}
@keyframes fxHeroZoom{from{transform:scale(1.00)}to{transform:scale(1.085)}}
@keyframes fxGatePan{from{transform:scale(1.03) translate3d(-.8%,0,0)}to{transform:scale(1.06) translate3d(.8%,0,0)}}
@keyframes fxTopReveal{from{transform:scale(1.00) translate3d(0,0,0)}to{transform:scale(1.035) translate3d(0,.4%,0)}}
@media(max-width:700px){
  .chapter-card .chapter-title{font-size:clamp(36px,11vw,70px)}
  .chapter-card .chapter-sub{font-size:clamp(16px,5vw,25px);padding:0 18px}
}
</style>

<style>

#photo{transition:opacity 950ms ease,transform 950ms ease!important;will-change:transform,opacity}
#photo.show{animation:none!important}
#photo.fx-city-zoom{animation:fxCityZoom var(--slide-duration,4200ms) ease-in-out forwards!important}
#photo.fx-night-drift{animation:fxNightDrift var(--slide-duration,4300ms) ease-in-out forwards!important}
#photo.fx-pop-zoom{animation:fxPopZoom var(--slide-duration,3900ms) cubic-bezier(.2,.7,.2,1) forwards!important}
#photo.fx-slow-zoom{animation:fxSlowZoom var(--slide-duration,5000ms) ease-in-out forwards!important}
#photo.fx-epic-zoom{animation:fxEpicZoom var(--slide-duration,5600ms) ease-in-out forwards!important}
#photo.fx-soft-pan{animation:fxSoftPan var(--slide-duration,4300ms) ease-in-out forwards!important}
#photo.fx-gentle-pan{animation:fxGentlePan var(--slide-duration,4100ms) ease-in-out forwards!important}
#photo.fx-night-zoom{animation:fxNightZoom var(--slide-duration,4200ms) ease-in-out forwards!important}
#photo.fx-park-zoom{animation:fxParkZoom var(--slide-duration,4200ms) ease-in-out forwards!important}
#photo.fx-hero-zoom{animation:fxHeroZoom var(--slide-duration,5200ms) ease-in-out forwards!important}
#photo.fx-gate-pan{animation:fxGatePan var(--slide-duration,5200ms) ease-in-out forwards!important}
#photo.fx-top-reveal{animation:fxTopReveal var(--slide-duration,5200ms) ease-in-out forwards!important}
.chapter-card{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;background:radial-gradient(circle at 50% 38%,rgba(56,189,248,.22),transparent 24rem),linear-gradient(145deg,#020617,#111827 54%,#312e81);z-index:2}
.chapter-card .chapter-title{font-size:clamp(42px,9vw,104px);font-weight:950;line-height:1.05;text-shadow:0 12px 36px rgba(0,0,0,.55),0 0 28px rgba(56,189,248,.45)}
.chapter-card .chapter-sub{margin-top:16px;font-size:clamp(18px,4vw,36px);font-weight:950;color:#fde68a;text-shadow:0 8px 26px rgba(0,0,0,.50)}
@keyframes fxCityZoom{from{transform:scale(1.01) translate3d(0,0,0)}to{transform:scale(1.075) translate3d(-.8%,.2%,0)}}
@keyframes fxNightDrift{from{transform:scale(1.015) translate3d(.8%,0,0)}to{transform:scale(1.065) translate3d(-1.2%,.3%,0)}}
@keyframes fxPopZoom{0%{transform:scale(1)}45%{transform:scale(1.045)}100%{transform:scale(1.065)}}
@keyframes fxSlowZoom{from{transform:scale(1)}to{transform:scale(1.055)}}
@keyframes fxEpicZoom{from{transform:scale(1)}to{transform:scale(1.075) translate3d(0,-.5%,0)}}
@keyframes fxSoftPan{from{transform:scale(1.025) translate3d(-1%,0,0)}to{transform:scale(1.055) translate3d(1%,0,0)}}
@keyframes fxGentlePan{from{transform:scale(1.02) translate3d(.8%,0,0)}to{transform:scale(1.045) translate3d(-.8%,0,0)}}
@keyframes fxNightZoom{from{transform:scale(1.01)}to{transform:scale(1.06)}}
@keyframes fxParkZoom{from{transform:scale(1)}to{transform:scale(1.07)}}
@keyframes fxHeroZoom{from{transform:scale(1)}to{transform:scale(1.085)}}
@keyframes fxGatePan{from{transform:scale(1.03) translate3d(-.8%,0,0)}to{transform:scale(1.06) translate3d(.8%,0,0)}}
@keyframes fxTopReveal{from{transform:scale(1)}to{transform:scale(1.035) translate3d(0,.4%,0)}}
.top button,.top-finish,.finish,.controls button{min-height:48px!important;min-width:48px!important;padding:10px 14px!important;font-size:16px!important}
@media(max-width:700px){.chapter-card .chapter-title{font-size:clamp(36px,11vw,70px)}.chapter-card .chapter-sub{font-size:clamp(16px,5vw,25px);padding:0 18px}.top button,.top-finish,.finish,.controls button{min-height:46px!important;min-width:46px!important;padding:9px 12px!important;font-size:15px!important}}
</style>

<style>

.top button,
.top-finish,
.finish,
.controls button{
  min-height:72px !important;
  height:72px !important;
  min-width:54px !important;
  padding-top:20px !important;
  padding-bottom:20px !important;
  padding-left:14px !important;
  padding-right:14px !important;
  font-size:21px !important;
  line-height:1 !important;
}

.pill{
  min-height:60px !important;
  display:flex !important;
  align-items:center !important;
}

@media(max-width:700px){
  .top{
    top:calc(env(safe-area-inset-top) + 8px) !important;
    gap:6px !important;
  }
  .controls{
    gap:6px !important;
  }
  .top button,
  .top-finish,
  .finish,
  .controls button{
    min-height:78px !important;
    height:78px !important;
    min-width:52px !important;
    padding-top:24px !important;
    padding-bottom:24px !important;
    padding-left:10px !important;
    padding-right:10px !important;
    font-size:22px !important;
    border-radius:28px !important;
  }
  .pill{
    min-height:58px !important;
    font-size:14px !important;
    padding:10px 12px !important;
  }
  .finish{
    bottom:calc(env(safe-area-inset-bottom) + 10px) !important;
  }
}
</style>

</head>
<body>
<div id="app">
<audio id="music" preload="none" loop>
  <source src="media/japan-experience/music/japan-theme.mp3" type="audio/mpeg">
  <source src="media/japan-experience/music/japan-theme" type="audio/mpeg">
  <source src="media/music/japan-theme.mp3" type="audio/mpeg">
  <source src="japan-theme.mp3" type="audio/mpeg">
</audio>
<div class="top"><div class="pill">🎬 מצגת טיול יפן 2026</div><div class="controls"><button class="top-finish" id="finishBtn" type="button">סיום</button><button id="prevBtn">⏮</button><button id="nextBtn">⏭</button><button id="sound">🔊</button><button id="pause">⏸</button><button id="restart">↻</button></div></div>
<div id="bg"><img id="photo" alt=""></div>
<div class="caption"><div class="section" id="section"></div><h1 id="title"></h1><p id="subtitle"></p></div>
<div class="progress"><span id="bar"></span></div>
<div class="error" id="error"></div>
<div class="start" id="start"><div class="start-card"><h1>יפן 2026</h1><div class="start-spacer"></div><button id="startBtn">הפעל חוויה ✨</button><button id="prepareOfflineCache" type="button">⬇️ שמור מדיה לצפייה אופליין</button><div aria-live="polite" id="offlineCacheStatus"></div><div class="preload-status" id="preloadStatus"></div></div></div>
</div>
<script>

function daysUntilJapan(){
  const target = new Date("2026-07-18T00:00:00+09:00");
  const now = new Date();
  const diff = target - now;
  const days = Math.max(0, Math.ceil(diff / (1000*60*60*24)));
  if(days===0) return "היום טסים ליפן ✈️";
  if(days===1) return "מחר טסים ליפן ✈️";
  return "עוד " + days + " ימים לטיסה ✈️";
}

// FIX v001: the previous timing was too short and the last slide auto-returned after 3 seconds.
  // Keep every real slide on screen long enough, and keep the final slide visible until the user chooses סיום.
  const MIN_IMAGE_DURATION_MS = 6200;
  const MIN_CHAPTER_DURATION_MS = 5000;
  const MIN_FINALE_DURATION_MS = 10000;
  const MIN_FAMILY_DURATION_MS = 15000;

const INITIAL_BUFFER_IMAGES = 4;
  const NEXT_BUFFER_IMAGES = 4;
  const START_BUFFER_MAX_WAIT_MS = 4200;
  const IMAGE_LOAD_TIMEOUT_MS = 12000;
  const imageCache = new Map();
  let startImagesReady = false;
  let startImagesPreparing = false;
  let startImagesPromise = null;

const sec = document.getElementById('section');
  const title = document.getElementById('title');
  const sub = document.getElementById('subtitle');
  const bar = document.getElementById('bar');
  const music = document.getElementById('music');
  const err = document.getElementById('error');
  const bg = document.getElementById('bg');
  const preloadStatus = document.getElementById('preloadStatus');
  const startBtn = document.getElementById('startBtn');
  const prepareOfflineCacheBtn = document.getElementById('prepareOfflineCache');
  const offlineCacheStatus = document.getElementById('offlineCacheStatus');
  const OFFLINE_CACHE_NAME = 'japan2026-experience-media-v1-exact';
  const OFFLINE_MUSIC_URL = 'media/japan-experience/music/japan-theme.mp3';
  const offlineObjectUrls = new Map();

function returnToTrip(){
    window.location.href = "/JAPAN/#top";
  }

function showError(msg){
    if(!err) return;
    err.style.display='block';
    err.textContent=msg;
  }
  function clearError(){
    if(!err) return;
    err.style.display='none';
    err.textContent='';
  }

function setPreloadStatus(msg){
    if(preloadStatus) preloadStatus.textContent = msg || '';
  }

function setStartBusy(busy){
    if(!startBtn) return;
    startBtn.disabled = !!busy;
    startBtn.classList.toggle('is-loading', !!busy);
    startBtn.textContent = busy ? 'מכין תמונות...' : 'הפעל חוויה ✨';
  }

function slideDuration(s){
    const explicit = Number(s && s.duration ? s.duration : 0);
    const fallback = s && s.chapter ? MIN_CHAPTER_DURATION_MS : 6500;
    let minimum = s && s.chapter ? MIN_CHAPTER_DURATION_MS : MIN_IMAGE_DURATION_MS;
    if(s && (s.section === 'finale' || s.effect === 'final-fade')) minimum = MIN_FINALE_DURATION_MS;
    if(s && (s.section === 'family' || s.effect === 'family-hero')) minimum = MIN_FAMILY_DURATION_MS;
    return Math.max(minimum, explicit || fallback);
  }

function clearTimer(){
    if(timer){ clearTimeout(timer); timer = null; }
  }

function scheduleNext(){
    clearTimer();
    const s = SLIDES[i] || {};
    timer = setTimeout(next, slideDuration(s));
  }

function canUseOfflineCache(){
    return !!(window.caches && window.isSecureContext);
  }

function absoluteAssetUrl(url){
    return new URL(url, document.baseURI || window.location.href).href;
  }

function setOfflineStatus(msg){
    if(offlineCacheStatus) offlineCacheStatus.textContent = msg || '';
  }

function allOfflineAssetUrls(){
    // שומרים רק את המדיה שהמצגת באמת משתמשת בה: תמונות שקפים חיצוניות + שיר אחד.
    // תמונת הסיום שמוטמעת כ-data נשארת בתוך ה-HTML ולכן אינה נכנסת לספירת cache.
    const imageUrls = [];
    SLIDES.forEach(function(slide){
      if(!slide || !slide.src) return;
      const url = slideSrc(slide.src);
      if(!url || String(url).startsWith('data:')) return;
      if(imageUrls.indexOf(url) === -1) imageUrls.push(url);
    });
    return imageUrls.concat([OFFLINE_MUSIC_URL]);
  }

async function storageLabel(){
    try{
      if(!navigator.storage || !navigator.storage.estimate) return '';
      const est = await navigator.storage.estimate();
      if(!est || !est.usage) return '';
      const mb = Math.round(est.usage / 1024 / 1024);
      return ' • שימוש מקומי כ-' + mb + 'MB';
    }catch(e){ return ''; }
  }

async function getCachedObjectUrl(url){
    if(!canUseOfflineCache()) return '';
    const absolute = absoluteAssetUrl(url);
    if(offlineObjectUrls.has(absolute)) return offlineObjectUrls.get(absolute);
    try{
      const cache = await caches.open(OFFLINE_CACHE_NAME);
      const response = await cache.match(absolute);
      if(!response) return '';
      const blob = await response.blob();
      const blobUrl = URL.createObjectURL(blob);
      offlineObjectUrls.set(absolute, blobUrl);
      return blobUrl;
    }catch(e){ return ''; }
  }

async function resolveCachedAssetUrl(url){
    const cached = await getCachedObjectUrl(url);
    return cached || url;
  }

async function putAssetInOfflineCache(cache, url){
    const absolute = absoluteAssetUrl(url);
    try{
      const response = await fetch(absolute, {cache:'reload', credentials:'same-origin'});
      if(response && response.ok){
        await cache.put(absolute, response.clone());
        return true;
      }
    }catch(e){
      try{
        const existing = await cache.match(absolute);
        return !!existing;
      }catch(inner){ return false; }
    }
    return false;
  }

async function prepareOfflineCache(){
    if(!prepareOfflineCacheBtn) return;
    if(!canUseOfflineCache()){
      setOfflineStatus('שמירה אופליין זמינה ב-HTTPS או localhost בדפדפן תומך.');
      return;
    }
    prepareOfflineCacheBtn.disabled = true;
    prepareOfflineCacheBtn.textContent = 'שומר מדיה…';
    setOfflineStatus('מכין שמירה מקומית…');
    const urls = allOfflineAssetUrls();
    const cache = await caches.open(OFFLINE_CACHE_NAME);
    let ok = 0;
    for(let idx = 0; idx < urls.length; idx++){
      const saved = await putAssetInOfflineCache(cache, urls[idx]);
      if(saved) ok++;
      const pct = Math.round((idx + 1) / urls.length * 100);
      setOfflineStatus('נשמרו ' + ok + '/' + urls.length + ' קבצים • ' + pct + '%');
    }
    prepareOfflineCacheBtn.disabled = false;
    prepareOfflineCacheBtn.textContent = ok === urls.length ? '✅ מדיה שמורה אופליין' : '⬇️ נסה לשמור שוב';
    prepareOfflineCacheBtn.classList.toggle('cache-ready', ok === urls.length);
    setOfflineStatus(ok + '/' + urls.length + ' קבצים זמינים מקומית' + await storageLabel());
  }

async function ensureOfflineAudioSource(){
    if(!music || !canUseOfflineCache()) return false;
    const cached = await getCachedObjectUrl(OFFLINE_MUSIC_URL);
    if(cached && music.src !== cached){
      music.src = cached;
      try{ music.load(); }catch(e){}
      return true;
    }
    return false;
  }

async function checkExistingOfflineCache(){
    if(!prepareOfflineCacheBtn || !canUseOfflineCache()) return;
    try{
      const cache = await caches.open(OFFLINE_CACHE_NAME);
      const urls = allOfflineAssetUrls();
      let ok = 0;
      for(const url of urls){
        if(await cache.match(absoluteAssetUrl(url))) ok++;
      }
      if(ok === urls.length && urls.length){
        prepareOfflineCacheBtn.textContent = '✅ מדיה שמורה אופליין';
        prepareOfflineCacheBtn.classList.add('cache-ready');
        setOfflineStatus('המדיה זמינה מקומית.');
      }else if(ok > 0){
        setOfflineStatus('קיימים ' + ok + '/' + urls.length + ' קבצים שמורים.');
      }
    }catch(e){}
  }

function slideSrc(src){
    if(!src) return '';
    if(String(src).startsWith('data:')) return src;
    const raw = String(src);
    return raw + (raw.includes('?') ? '&' : '?') + 'v=14';
  }

function preloadImage(src){
    const resolved = slideSrc(src);
    if(!resolved) return Promise.resolve(false);
    if(imageCache.has(resolved)) return imageCache.get(resolved);

imageCache.set(resolved, promise);
    return promise;
  }

function preloadIndex(index){
    const s = SLIDES[index];
    if(!s || !s.src) return Promise.resolve(true);
    return preloadImage(s.src);
  }

function imageSlideIndexesFrom(startIndex, imageCount){
    const indexes = [];
    for(let n = Math.max(0, startIndex); n < SLIDES.length && indexes.length < imageCount; n++){
      if(SLIDES[n] && SLIDES[n].src) indexes.push(n);
    }
    return indexes;
  }

function allImageSlideIndexes(){
    const indexes = [];
    for(let n = 0; n < SLIDES.length; n++){
      if(SLIDES[n] && SLIDES[n].src) indexes.push(n);
    }
    return indexes;
  }

async function preloadInitialBuffer(){
    const indexes = imageSlideIndexesFrom(0, INITIAL_BUFFER_IMAGES);
    if(!indexes.length){ setPreloadStatus(''); return true; }
    let done = 0;
    setPreloadStatus('טוען תמונות ראשונות 0/' + indexes.length);
    const results = await Promise.all(indexes.map(function(index){
      return preloadIndex(index).then(function(ok){
        done++;
        setPreloadStatus('טוען תמונות ראשונות ' + done + '/' + indexes.length);
        return ok;
      });
    }));
    return results.every(Boolean);
  }

async function prepareAllImagesBeforeStart(){
    if(startImagesReady) return true;
    if(startImagesPromise) return startImagesPromise;
    startImagesPreparing = true;
    setStartBusy(true);

const indexes = imageSlideIndexesFrom(0, INITIAL_BUFFER_IMAGES);
    if(!indexes.length){
      startImagesReady = true;
      startImagesPreparing = false;
      setStartBusy(false);
      setPreloadStatus('מוכן להפעלה');
      return true;
    }

function preloadNextImages(currentIndex, count){
    const indexes = imageSlideIndexesFrom(currentIndex + 1, count || NEXT_BUFFER_IMAGES);
    indexes.forEach(function(index){ preloadIndex(index); });
  }

function ensureImg(){
    let p = document.getElementById('photo');
    if(!p){
      bg.innerHTML = '<img id="photo" alt="">';
      p = document.getElementById('photo');
    }
    return p;
  }

function clearCaption(){
    if(sec) sec.textContent='';
    if(title) title.textContent='';
    if(sub) sub.textContent='';
  }

function updateProgress(){
    if(bar) bar.style.width = ((i + 1) / SLIDES.length * 100) + '%';
  }

function renderChapter(s){
    bg.innerHTML = '<div class="chapter-card"><div class="chapter-title">' + (s.title || '') + '</div><div class="chapter-sub">' + (s.subtitle || '') + '</div></div>';
    clearCaption();
  }

function renderOutro(s){
    bg.innerHTML = '<div class="outro"><div class="big">יפן 2026</div><div class="small">' + (s.subtitle || '') + '</div></div>';
    clearCaption();
  }

function escapeHtml(value){
    return String(value || '').replace(/[&<>"]/g, function(ch){
      return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[ch];
    });
  }

function renderMissingSlide(s){
    const label = escapeHtml(NAMES[s.section] || '');
    const titleText = escapeHtml(s.title || '');
    const subText = escapeHtml(s.subtitle || '');
    const srcText = escapeHtml(s.src || '');
    bg.innerHTML = '<div class="missing-card"><div class="missing-title">' + titleText + '</div><div class="missing-sub">' + subText + '</div><div class="missing-note">Image not loaded: ' + srcText + '</div></div>';
    if(sec) sec.textContent = label;
    if(title) title.textContent = s.title || '';
    if(sub) sub.textContent = s.subtitle || '';
  }

async function show(n, skipCount=0, direction=1){
    if(skipCount > SLIDES.length){
      console.warn('Too many missing images in a row');
      showError('כמה תמונות לא נטענו ברצף. בדוק שהקבצים קיימים בתיקיית media/images.');
      return false;
    }

const token = ++renderToken;
    i = Math.max(0, Math.min(n, SLIDES.length - 1));
    const s = SLIDES[i] || {};
    clearError();
    updateProgress();

if(s.chapter){
      renderChapter(s);
      preloadNextImages(i, NEXT_BUFFER_IMAGES);
      return true;
    }

if(s.outro){
      renderOutro(s);
      clearTimer();
      return true;
    }

const ok = await preloadImage(s.src);
    if(token !== renderToken) return false;

if(!ok){
      console.warn('Missing image rendered as timed fallback, not skipped:', s.src);
      renderMissingSlide(s);
      showError('תמונה לא נטענה, אבל השקף לא ידולג ולכן המצגת לא תקפוץ מוקדם לסיום: ' + (s.src || ''));
      preloadNextImages(i, NEXT_BUFFER_IMAGES);
      return true;
    }

const p = ensureImg();
    p.onload = null;
    p.onerror = null;
    p.className = '';
    p.style.setProperty('--slide-duration', slideDuration(s) + 'ms');
    p.style.objectPosition = s.pos || 'center center';
    const displaySrc = await resolveCachedAssetUrl(slideSrc(s.src));
    if(token !== renderToken) return false;
    p.src = displaySrc;

if(sec) sec.textContent = NAMES[s.section] || '';
    if(title) title.textContent = s.title || '';
    if(sub) sub.textContent = s.subtitle || '';

void p.offsetWidth;
    p.classList.add('show');
    p.classList.add('fx-' + (s.effect || 'slow-zoom'));

preloadNextImages(i, NEXT_BUFFER_IMAGES);
    return true;
  }

async function playMusic(silent){
    try{
      if(!music) return false;
      music.volume = .82;
      await ensureOfflineAudioSource();
      await music.play();
      const soundBtn = document.getElementById('sound');
      if(soundBtn) soundBtn.textContent = '🔇';
      return true;
    }catch(e){
      if(!silent){
        showError('המוזיקה לא הופעלה. בדוק שהקובץ japan-theme.mp3 קיים בתיקיית media/japan-experience/music.');
      }
      return false;
    }
  }

async function next(){
    if(paused) return;
    if(i >= SLIDES.length - 1){
      clearTimer();
      paused = true;
      const pauseBtn = document.getElementById('pause');
      if(pauseBtn) pauseBtn.textContent = '▶';
      return;
    }
    const shown = await show(i + 1, 0, 1);
    if(started && !paused && shown) scheduleNext();
  }

async function previous(){
    clearTimer();
    const shown = await show(Math.max(i - 1, 0), 0, -1);
    if(started && !paused && shown) scheduleNext();
  }

async function manualNext(){
    clearTimer();
    if(i >= SLIDES.length - 1){
      returnToTrip();
      return;
    }
    const shown = await show(i + 1, 0, 1);
    if(started && !paused && shown) scheduleNext();
  }

async function start(options){
    if(started || startImagesPreparing) return;
    const opts = options || {};
    clearTimer();

if(!startImagesReady){
      setStartBusy(true);
      await prepareAllImagesBeforeStart();
    }

started = true;
    const startEl = document.getElementById('start');
    if(startEl) startEl.classList.add('hide');
    setPreloadStatus('');

const musicPromise = opts.withoutAudio ? Promise.resolve(false) : playMusic(false);
    const shown = await show(0);
    await musicPromise.catch(function(){ return false; });
    preloadNextImages(i, NEXT_BUFFER_IMAGES);
    preloadAllRemainingInBackground();
    if(!paused && shown) scheduleNext();
  }

if(startBtn) startBtn.onclick = function(){ start({withoutAudio:false}); };
  if(prepareOfflineCacheBtn) prepareOfflineCacheBtn.onclick = prepareOfflineCache;

prepareAllImagesBeforeStart();
  checkExistingOfflineCache();

const soundBtn = document.getElementById('sound');
  if(soundBtn) soundBtn.onclick = function(){
    if(!music) return;
    if(music.paused) playMusic();
    else {
      music.pause();
      soundBtn.textContent='🔊';
    }
  };

const restartBtn = document.getElementById('restart');
  if(restartBtn) restartBtn.onclick = function(){ location.reload(); };

const nextBtn = document.getElementById('nextBtn');
  if(nextBtn) nextBtn.onclick = manualNext;

const prevBtn = document.getElementById('prevBtn');
  if(prevBtn) prevBtn.onclick = previous;

const finishBtn = document.getElementById('finishBtn');
  if(finishBtn) finishBtn.onclick = returnToTrip;

show(0);
  window.EitanJapanPresentationBuffer = {
    preloadInitialBuffer,
    prepareAllImagesBeforeStart,
    preloadNextImages,
    preloadAllRemainingInBackground,
    cache:imageCache,
    config:{initial:INITIAL_BUFFER_IMAGES,next:NEXT_BUFFER_IMAGES,startMaxWait:START_BUFFER_MAX_WAIT_MS,timeout:IMAGE_LOAD_TIMEOUT_MS},
    health:{slides:SLIDES.length,estimatedDurationMs:SLIDES.reduce(function(sum, slide){return sum + slideDuration(slide);},0),autoReturnAtEnd:false},
    offline:{cacheName:OFFLINE_CACHE_NAME,assets:allOfflineAssetUrls,assetCount:function(){return allOfflineAssetUrls().length;}}
  };
  window.EitanJapanPresentationOffline = {
    cacheName: OFFLINE_CACHE_NAME,
    assets: allOfflineAssetUrls,
    assetCount: function(){ return allOfflineAssetUrls().length; },
    prepare: prepareOfflineCache
  };
})();
</script>
</body></html>