// parts2.jsx — Features, AppScreenshots, Stats

function Features() {
  const cards = [
  {
    title: 'Stop planning. Start exploring.',
    desc: 'Curated walking tours guide you through the best of each city. No research, no guesswork.',
    img: 'assets/feature-tour.jpg',
    bg: 'var(--warm-bg)', tx: 'var(--text)', dx: 'var(--text-muted)'
  },
  {
    title: 'Navigate around smoothly',
    desc: 'Optimized walking routes connect your location and all the stops into one smooth journey.',
    img: 'assets/feature-map.jpg',
    bg: 'var(--border)', tx: 'var(--text)', dx: 'var(--text-muted)', border: true
  },
  {
    title: 'Build your own itineraries',
    desc: 'From history to nature, pick your interests and create itineraries for your style.',
    img: 'assets/feature-explore.jpg',
    bg: 'var(--card)', tx: 'var(--text)', dx: 'var(--text-muted)'
  }];


  return (
    <section id="features">
      <div className="wrap">
        <div className="sec-head" style={{ marginBottom: 40, maxWidth: 'none' }}>
          <h2>Built for explorers<span className="dot"></span></h2>
        </div>
        <div className="features">
          {cards.map((c, i) =>
          <div
            key={i}
            className="fcard fcard-visual"
            style={{ background: c.bg, border: c.border ? '1.5px solid var(--border)' : 'none' }}>
            
              <div className="fcard-text">
                <h3 style={{ color: c.tx }}>{c.title}</h3>
                <p style={{ color: c.dx }}>{c.desc}</p>
              </div>
              <div className="fcard-screen">
                <div className="fcard-sq-frame">
                  <img src={c.img} alt="" />
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function LocalsSection({ onCta }) {
  return (
    <section id="locals">
      <div className="wrap">
        <div className="statband locals-card">
          <div className="locals-text">
            <div className="locals-eyebrow">
              <span className="mdi-fill" style={{ fontSize: 15, lineHeight: 1 }}>location_city</span>
              For locals
            </div>
            <h2 className="locals-h2">
              Get a new perspective on your home city<span className="dot" style={{ background: 'var(--primary)' }}></span>
            </h2>
            <p className="locals-body">The square you cut through every morning. The street you've walked a thousand times. The building you've never looked up at. Every one of them has a story you haven't heard yet. Venturer helps you understand your city better and reveals hidden gems you didn't even know existed.

            </p>

          </div>
          <div className="locals-img-wrap">
            <img src="_ds/assets/bratislava.jpg" alt="City street" className="locals-img" />
          </div>
        </div>
      </div>
    </section>);

}

function PixelFrame({ src }) {
  return (
    <div className="pf-body">
      <div className="pf-vol-up"></div>
      <div className="pf-vol-dn"></div>
      <div className="pf-power"></div>
      <div className="pf-screen">
        <div className="pf-punch"></div>
        <img src={src} alt="" draggable="false" />
      </div>
    </div>);

}

function AppScreenshots() {
  const screens = [
  'assets/screen4.jpg', 'assets/screen2.jpg', 'assets/screen8.jpg',
  'assets/screen1.jpg', 'assets/screen6.jpg',
  'assets/screen5.jpg', 'assets/screen7.jpg'];

  const n = screens.length;
  const tripleScreens = [...screens, ...screens, ...screens]; // 24 items

  const [dotActive, setDotActive] = React.useState(0);
  const [tick, setTick] = React.useState(0);
  const wrapRef = React.useRef(null);
  const trackRef = React.useRef(null);
  const vPos = React.useRef(n); // start at middle copy (index 8)
  const dragStart = React.useRef(null);

  const CARD_W = 270;
  const GAP = 24;

  const positionTrack = React.useCallback((idx, animated) => {
    if (!wrapRef.current || !trackRef.current) return;
    const ww = wrapRef.current.offsetWidth;
    const offset = ww / 2 - CARD_W / 2 - idx * (CARD_W + GAP);
    if (!animated) {
      trackRef.current.style.transition = 'none';
      trackRef.current.getBoundingClientRect(); // force reflow
    } else {
      trackRef.current.style.transition = 'transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
    }
    trackRef.current.style.transform = `translateX(${offset}px) translateY(-50%)`;
  }, []);

  React.useEffect(() => {
    positionTrack(vPos.current, false);
    const ro = new ResizeObserver(() => positionTrack(vPos.current, false));
    if (wrapRef.current) ro.observe(wrapRef.current);
    return () => ro.disconnect();
  }, [positionTrack]);

  const go = React.useCallback((d) => {
    vPos.current += d;
    positionTrack(vPos.current, true);
    setDotActive((vPos.current % n + n) % n);
    setTimeout(() => {
      let jumped = false;
      if (vPos.current < n) {vPos.current += n;jumped = true;} else
      if (vPos.current >= 2 * n) {vPos.current -= n;jumped = true;}
      if (jumped) {positionTrack(vPos.current, false);setTick((t) => t + 1);}
    }, 460);
  }, [n, positionTrack]);

  const onPointerDown = (e) => {
    dragStart.current = e.clientX;
    if (e.pointerType === 'touch') e.currentTarget.setPointerCapture(e.pointerId);
  };
  const onPointerUp = (e) => {
    if (dragStart.current === null) return;
    const diff = e.clientX - dragStart.current;
    if (Math.abs(diff) > 30) go(diff < 0 ? 1 : -1);
    dragStart.current = null;
  };

  return (
    <section id="app" data-tick={tick}>
      <div className="wrap">
        <div className="sec-head" style={{ marginBottom: 40 }}>
          <h2>See how it works<span className="dot"></span></h2>
        </div>
      </div>
      <div
        className="phone-slider-wrap"
        ref={wrapRef}
        onPointerDown={onPointerDown}
        onPointerUp={onPointerUp}>
        
        <div className="phone-slider-track" ref={trackRef}>
          {tripleScreens.map((src, i) =>
          <div
            key={i}
            className={'phone-slide-item' + (i === vPos.current ? ' active' : '')}
            onClick={() => {const d = i - vPos.current;if (d !== 0 && Math.abs(d) <= 3) go(d);}}>
            
              <PixelFrame src={src} />
            </div>
          )}
        </div>
      </div>
      <div className="wrap">
        <div className="slider-nav">
          <button className="slider-arr" onClick={() => go(-1)} aria-label="Previous">
            <span className="mdi">chevron_left</span>
          </button>
          <div className="slider-dots">
            {screens.map((_, i) =>
            <button
              key={i}
              className={'slider-dot' + (i === dotActive ? ' active' : '')}
              onClick={() => {const d = i - dotActive;if (d !== 0) go(d);}}
              aria-label={'Screen ' + (i + 1)} />

            )}
          </div>
          <button className="slider-arr" onClick={() => go(1)} aria-label="Next">
            <span className="mdi">chevron_right</span>
          </button>
        </div>
      </div>
    </section>);

}

function Stats() {
  const stats = [
  { n: '60+', s: 'Cities mapped', dot: true },
  { n: '4.2K', s: 'Curated tours' },
  { n: '90K', s: 'Sights with audio' },
  { n: '4.8', s: 'App store rating', star: true }];

  return (
    <section style={{ paddingTop: 0 }}>
      <div className="wrap">
        <div className="statband">
          <div className="stat-grid">
            {stats.map((st) =>
            <div key={st.s} className="stat">
                <div className="n">
                  {st.n}
                  {st.dot && <span className="dot" style={{ width: '.18em', height: '.18em' }}></span>}
                  {st.star &&
                <span className="mdi-fill" style={{ fontSize: 38, color: 'var(--primary)', marginLeft: 4, verticalAlign: 'middle' }}>
                      star
                    </span>
                }
                </div>
                <div className="l">{st.s}</div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

// AppScreenshotsSlider — just the interactive slider, used as a React island.
// The surrounding section heading is static HTML in index.html.
function AppScreenshotsSlider() {
  const screens = [
    'assets/screen4.jpg', 'assets/screen2.jpg', 'assets/screen8.jpg',
    'assets/screen1.jpg', 'assets/screen6.jpg',
    'assets/screen5.jpg', 'assets/screen7.jpg'
  ];
  const n = screens.length;
  const tripleScreens = [...screens, ...screens, ...screens];

  const [dotActive, setDotActive] = React.useState(0);
  const [tick, setTick] = React.useState(0);
  const wrapRef = React.useRef(null);
  const trackRef = React.useRef(null);
  const vPos = React.useRef(n);
  const dragStart = React.useRef(null);

  const CARD_W = 270;
  const GAP = 24;

  const positionTrack = React.useCallback((idx, animated) => {
    if (!wrapRef.current || !trackRef.current) return;
    const ww = wrapRef.current.offsetWidth;
    const offset = ww / 2 - CARD_W / 2 - idx * (CARD_W + GAP);
    if (!animated) {
      trackRef.current.style.transition = 'none';
      trackRef.current.getBoundingClientRect();
    } else {
      trackRef.current.style.transition = 'transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
    }
    trackRef.current.style.transform = `translateX(${offset}px) translateY(-50%)`;
  }, []);

  React.useEffect(() => {
    positionTrack(vPos.current, false);
    const ro = new ResizeObserver(() => positionTrack(vPos.current, false));
    if (wrapRef.current) ro.observe(wrapRef.current);
    return () => ro.disconnect();
  }, [positionTrack]);

  const go = React.useCallback((d) => {
    vPos.current += d;
    positionTrack(vPos.current, true);
    setDotActive((vPos.current % n + n) % n);
    setTimeout(() => {
      let jumped = false;
      if (vPos.current < n) { vPos.current += n; jumped = true; }
      else if (vPos.current >= 2 * n) { vPos.current -= n; jumped = true; }
      if (jumped) { positionTrack(vPos.current, false); setTick((t) => t + 1); }
    }, 460);
  }, [n, positionTrack]);

  const onPointerDown = (e) => {
    dragStart.current = e.clientX;
    if (e.pointerType === 'touch') e.currentTarget.setPointerCapture(e.pointerId);
  };
  const onPointerUp = (e) => {
    if (dragStart.current === null) return;
    const diff = e.clientX - dragStart.current;
    if (Math.abs(diff) > 30) go(diff < 0 ? 1 : -1);
    dragStart.current = null;
  };

  return (
    <>
      <div
        className="phone-slider-wrap"
        data-tick={tick}
        ref={wrapRef}
        onPointerDown={onPointerDown}
        onPointerUp={onPointerUp}>
        <div className="phone-slider-track" ref={trackRef}>
          {tripleScreens.map((src, i) =>
            <div
              key={i}
              className={'phone-slide-item' + (i === vPos.current ? ' active' : '')}
              onClick={() => { const d = i - vPos.current; if (d !== 0 && Math.abs(d) <= 3) go(d); }}>
              <PixelFrame src={src} />
            </div>
          )}
        </div>
      </div>
      <div className="wrap">
        <div className="slider-nav">
          <button className="slider-arr" onClick={() => go(-1)} aria-label="Previous">
            <span className="mdi">chevron_left</span>
          </button>
          <div className="slider-dots">
            {screens.map((_, i) =>
              <button
                key={i}
                className={'slider-dot' + (i === dotActive ? ' active' : '')}
                onClick={() => { const d = i - dotActive; if (d !== 0) go(d); }}
                aria-label={'Screen ' + (i + 1)} />
            )}
          </div>
          <button className="slider-arr" onClick={() => go(1)} aria-label="Next">
            <span className="mdi">chevron_right</span>
          </button>
        </div>
      </div>
    </>
  );
}

Object.assign(window, { Features, LocalsSection, AppScreenshots, Stats, AppScreenshotsSlider });