// parts3.jsx — AudioFeature, BetaCTA, Footer

function AudioFeature() {
  const [playing, setPlaying] = React.useState(false);
  const [activeIdx, setActiveIdx] = React.useState(0);
  const [currentTime, setCurrentTime] = React.useState(0);
  const [duration, setDuration] = React.useState(0);
  const audioRef = React.useRef(null);

  const places = [
  {
    name: 'Sagrada Família', city: 'Barcelona', sub: 'Barcelona · Cathedral · Modernisme',
    img: 'uploads/sagrada_familia.jpg', audio: 'uploads/Sagrada Familia.mp3'
  },
  {
    name: 'Barcelona Cathedral', city: 'Barcelona', sub: 'Barcelona · Market Hall · Modernisme',
    img: 'uploads/Catedral-de-Barcelona.jpg', audio: 'uploads/Cathedral.mp3'
  },
  {
    name: 'La Boqueria Market', city: 'Barcelona', sub: 'Barcelona · Market Hall · Modernisme',
    img: 'uploads/boqueria_market_thumb.webp', audio: 'uploads/La Boqueria Market.mp3'
  }];

  const cachedDurations = React.useRef({});
  const preloadAudios = React.useRef([]);

  // Preload all images AND audio metadata up front
  React.useEffect(() => {
    places.forEach((p, i) => {
      const im = new window.Image();
      im.src = p.img;
      const au = new Audio();
      au.preload = 'metadata';
      au.src = encodeURI(p.audio);
      au.addEventListener('loadedmetadata', () => {
        cachedDurations.current[i] = au.duration;
        if (i === activeIdx) setDuration(au.duration);
      });
      au.load();
      preloadAudios.current[i] = au; // prevent GC
    });
  }, []);

  // Wire up audio element per track
  React.useEffect(() => {
    const audio = new Audio();
    audio.preload = 'metadata';
    audio.src = encodeURI(places[activeIdx].audio);
    audio.load();
    audioRef.current = audio;
    setCurrentTime(0);
    // Use cached duration immediately if available
    setDuration(cachedDurations.current[activeIdx] || 0);
    setPlaying(false);

    const onTime = () => setCurrentTime(audio.currentTime);
    const onMeta = () => setDuration(audio.duration);
    const onEnd = () => {setPlaying(false);setCurrentTime(0);};

    audio.addEventListener('timeupdate', onTime);
    audio.addEventListener('loadedmetadata', onMeta);
    audio.addEventListener('durationchange', onMeta);
    audio.addEventListener('ended', onEnd);

    return () => {
      audio.pause();
      audio.removeEventListener('timeupdate', onTime);
      audio.removeEventListener('loadedmetadata', onMeta);
      audio.removeEventListener('durationchange', onMeta);
      audio.removeEventListener('ended', onEnd);
      audio.src = '';
    };
  }, [activeIdx]);

  const togglePlay = () => {
    const audio = audioRef.current;
    if (!audio) return;
    if (playing) {audio.pause();setPlaying(false);} else
    {audio.play().catch(() => {});setPlaying(true);}
  };

  const go = (dir) => {
    if (audioRef.current) audioRef.current.pause();
    setPlaying(false);
    setCurrentTime(0);
    setActiveIdx((i) => (i + dir + places.length) % places.length);
  };

  const seek = (e) => {
    const rect = e.currentTarget.getBoundingClientRect();
    const frac = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
    if (audioRef.current && duration > 0) {
      audioRef.current.currentTime = frac * duration;
      setCurrentTime(frac * duration);
    }
  };

  const fmt = (s) => {
    if (!s || !isFinite(s)) return '0:00';
    const m = Math.floor(s / 60);
    const sec = Math.floor(s % 60);
    return `${m}:${sec.toString().padStart(2, '0')}`;
  };

  const bars = [0.3, 0.6, 0.9, 0.5, 1, 0.7, 0.4, 0.85, 0.55, 0.95, 0.6, 0.35, 0.75, 0.5, 0.9, 0.45, 0.7, 0.3, 0.6, 0.8];
  const filledBars = duration > 0 ? Math.round(currentTime / duration * bars.length) : 0;
  const place = places[activeIdx];

  return (
    <section id="audio">
      <div className="wrap">
        <div className="audio">
          <div>
            <h2 className="disp audio-h2" style={{ lineHeight: .98, letterSpacing: '-.025em' }}>
              Hear the story of every place<span className="dot"></span>
            </h2>
            <p style={{ fontSize: 18, color: 'var(--text-muted)', lineHeight: 1.5, margin: '20px 0 0' }}>Other guides give you a list. Venturer hands you a story. Every sight, square, and forgotten corner narrated like a sharp local guide. History, politics, legends, practical tips, the detail you'd walk right past.</p>
          </div>
          <div className="audiocard audiocard-immersive">
            <img className="ac-bg" key={place.img} src={place.img} alt={place.name} />
            <div className="ac-overlay"></div>
            <div className="ac-content">
              <div className="acrow">
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="t">{place.name}</div>
                  <div className="s">{place.sub}</div>
                </div>
                <div className="ac-nav-group">
                  <button className="ac-nav ac-nav-light" onClick={() => go(-1)} aria-label="Previous place">
                    <span className="mdi">chevron_left</span>
                  </button>
                  <span className="ac-nav-count ac-nav-count-light">{activeIdx + 1}/{places.length}</span>
                  <button className="ac-nav ac-nav-light" onClick={() => go(1)} aria-label="Next place">
                    <span className="mdi">chevron_right</span>
                  </button>
                </div>
              </div>
              <div>
                <div className="waveform" onClick={seek} style={{ cursor: 'pointer' }}>
                  {bars.map((b, i) =>
                  <i key={i} className={i < filledBars ? 'on' : ''} style={{ height: b * 100 + '%' }}></i>
                  )}
                </div>
                <div className="actrl">
                  <span className="time">{fmt(currentTime)}</span>
                  <div className={`acplay${playing ? '' : ' acplay--idle'}`} onClick={togglePlay}>
                    <span className="mdi-fill">{playing ? 'pause' : 'play_arrow'}</span>
                  </div>
                  <span className="time">{fmt(duration)}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function BetaCTA({ onCta, onIosCta }) {
  return (
    <section id="beta">
      <div className="wrap">
        <div className="cta">
          <div className="beta-badge">
            <span className="mdi-fill" style={{ fontSize: 14 }}>android</span>
            Android Beta
          </div>
          <h2 style={{ fontSize: 60, lineHeight: .95, letterSpacing: '-.03em' }}>
            Get early access and start exploring<span className="dot" style={{ background: 'var(--surface)' }}></span>
          </h2>
          <p>Your next city is already mapped. Join the beta and walk out the door in seconds.</p>
          <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
            <button className="btn btn-dark" onClick={onCta}>
              <span className="mdi-fill">android</span>
              Get for Android
            </button>
            {onIosCta &&
            <button className="btn btn-ghost" onClick={onIosCta}>
              <AppleIcon />
              Request for iOS
            </button>
            }
          </div>
          <p className="cta-note">Limited free beta testing · Android only.</p>
        </div>
      </div>
    </section>);

}

function Footer() {
  return (
    <footer>
      <div className="wrap">
        <div className="foot-bottom" style={{ margin: "0px" }}>
          <span>© 2026 Venturer Network s.r.o. All rights reserved.</span>
          <span>
            <a href="/privacy-policy" style={{ color: 'inherit', textDecoration: 'none' }}>Privacy</a>
            {' · '}
            <a href="/terms-of-use" style={{ color: 'inherit', textDecoration: 'none' }}>Terms</a>
          </span>
        </div>
      </div>
    </footer>);

}

// AudioPlayerCard — just the interactive card, used as a React island.
// The surrounding section heading/text is static HTML in index.html.
function AudioPlayerCard() {
  const [playing, setPlaying] = React.useState(false);
  const [activeIdx, setActiveIdx] = React.useState(0);
  const [currentTime, setCurrentTime] = React.useState(0);
  const [duration, setDuration] = React.useState(0);
  const audioRef = React.useRef(null);

  const places = [
    {
      name: 'Sagrada Família', sub: 'Barcelona · Cathedral · Modernisme',
      img: 'uploads/sagrada_familia.jpg', audio: 'uploads/Sagrada Familia.mp3'
    },
    {
      name: 'Barcelona Cathedral', sub: 'Barcelona · Gothic Quarter · Cathedral',
      img: 'uploads/Catedral-de-Barcelona.jpg', audio: 'uploads/Cathedral.mp3'
    },
    {
      name: 'La Boqueria Market', sub: 'Barcelona · Market Hall · Modernisme',
      img: 'uploads/boqueria_market_thumb.webp', audio: 'uploads/La Boqueria Market.mp3'
    }
  ];

  const cachedDurations = React.useRef({});
  const preloadAudios = React.useRef([]);

  React.useEffect(() => {
    places.forEach((p, i) => {
      const im = new window.Image(); im.src = p.img;
      const au = new Audio();
      au.preload = 'metadata';
      au.src = encodeURI(p.audio);
      au.addEventListener('loadedmetadata', () => {
        cachedDurations.current[i] = au.duration;
        if (i === activeIdx) setDuration(au.duration);
      });
      au.load();
      preloadAudios.current[i] = au;
    });
  }, []);

  React.useEffect(() => {
    const audio = new Audio();
    audio.preload = 'metadata';
    audio.src = encodeURI(places[activeIdx].audio);
    audio.load();
    audioRef.current = audio;
    setCurrentTime(0);
    setDuration(cachedDurations.current[activeIdx] || 0);
    setPlaying(false);
    const onTime = () => setCurrentTime(audio.currentTime);
    const onMeta = () => setDuration(audio.duration);
    const onEnd  = () => { setPlaying(false); setCurrentTime(0); };
    audio.addEventListener('timeupdate', onTime);
    audio.addEventListener('loadedmetadata', onMeta);
    audio.addEventListener('durationchange', onMeta);
    audio.addEventListener('ended', onEnd);
    return () => {
      audio.pause();
      audio.removeEventListener('timeupdate', onTime);
      audio.removeEventListener('loadedmetadata', onMeta);
      audio.removeEventListener('durationchange', onMeta);
      audio.removeEventListener('ended', onEnd);
      audio.src = '';
    };
  }, [activeIdx]);

  const togglePlay = () => {
    const audio = audioRef.current;
    if (!audio) return;
    if (playing) { audio.pause(); setPlaying(false); }
    else { audio.play().catch(() => {}); setPlaying(true); }
  };

  const go = (dir) => {
    if (audioRef.current) audioRef.current.pause();
    setPlaying(false); setCurrentTime(0);
    setActiveIdx((i) => (i + dir + places.length) % places.length);
  };

  const seek = (e) => {
    const rect = e.currentTarget.getBoundingClientRect();
    const frac = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
    if (audioRef.current && duration > 0) {
      audioRef.current.currentTime = frac * duration;
      setCurrentTime(frac * duration);
    }
  };

  const fmt = (s) => {
    if (!s || !isFinite(s)) return '0:00';
    return `${Math.floor(s / 60)}:${Math.floor(s % 60).toString().padStart(2, '0')}`;
  };

  const bars = [0.3,0.6,0.9,0.5,1,0.7,0.4,0.85,0.55,0.95,0.6,0.35,0.75,0.5,0.9,0.45,0.7,0.3,0.6,0.8];
  const filledBars = duration > 0 ? Math.round(currentTime / duration * bars.length) : 0;
  const place = places[activeIdx];

  return (
    <div className="audiocard audiocard-immersive">
      <img className="ac-bg" key={place.img} src={place.img} alt={place.name} />
      <div className="ac-overlay"></div>
      <div className="ac-content">
        <div className="acrow">
          <div style={{ flex: 1, minWidth: 0 }}>
            <div className="t">{place.name}</div>
            <div className="s">{place.sub}</div>
          </div>
          <div className="ac-nav-group">
            <button className="ac-nav ac-nav-light" onClick={() => go(-1)} aria-label="Previous place">
              <span className="mdi">chevron_left</span>
            </button>
            <span className="ac-nav-count ac-nav-count-light">{activeIdx + 1}/{places.length}</span>
            <button className="ac-nav ac-nav-light" onClick={() => go(1)} aria-label="Next place">
              <span className="mdi">chevron_right</span>
            </button>
          </div>
        </div>
        <div>
          <div className="waveform" onClick={seek} style={{ cursor: 'pointer' }}>
            {bars.map((b, i) =>
              <i key={i} className={i < filledBars ? 'on' : ''} style={{ height: b * 100 + '%' }}></i>
            )}
          </div>
          <div className="actrl">
            <span className="time">{fmt(currentTime)}</span>
            <div className={`acplay${playing ? '' : ' acplay--idle'}`} onClick={togglePlay}>
              <span className="mdi-fill">{playing ? 'pause' : 'play_arrow'}</span>
            </div>
            <span className="time">{fmt(duration)}</span>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AudioFeature, BetaCTA, Footer, AudioPlayerCard });