// ZION ContentCollabs — fanned, draggable Reels cluster (real videos).
// Behaviour:
//   • The centered card plays its video MUTED as a 5-second preview, then auto-advances.
//   • Tap the centered card → it restarts and plays the FULL clip WITH sound; when the
//     clip ends it auto-advances to the next reel (and goes back to muted previews).
//   • Tap a side card → it slides to the center.
//   • Drag / swipe to rotate. Only the centered card runs a <video> (others show a
//     poster frame) so the slider stays smooth.
// Tap vs drag is detected on the pointer itself, and unmuted playback is started
// directly inside the tap (browsers only allow sound to start within a user gesture).
function ContentCollabs() {
  const slides = React.useMemo(() => ([
    { id: 'r1', video: 'assets/reels/reel1.mp4', poster: 'assets/reels/reel1.jpg' },
    { id: 'r2', video: 'assets/reels/reel2.mp4', poster: 'assets/reels/reel2.jpg' },
    { id: 'r3', video: 'assets/reels/reel3.mp4', poster: 'assets/reels/reel3.jpg' },
    { id: 'r4', video: 'assets/reels/reel4.mp4', poster: 'assets/reels/reel4.jpg' },
    { id: 'r5', video: 'assets/reels/reel5.mp4', poster: 'assets/reels/reel5.jpg' },
    { id: 'r6', video: 'assets/reels/reel6.mp4', poster: 'assets/reels/reel6.jpg' },
    { id: 'r7', video: 'assets/reels/reel7.mp4', poster: 'assets/reels/reel7.jpg' },
  ]), []);

  const PREVIEW_MS = 5000;
  const [center, setCenter] = React.useState(0);
  const [expanded, setExpanded] = React.useState(false); // full clip + sound
  const [paused, setPaused] = React.useState(false);      // hover-pause the preview timer
  const [drag, setDrag] = React.useState({ active: false, dx: 0 });
  const videoRef = React.useRef(null);
  const startX = React.useRef(0);
  const moved = React.useRef(false);
  const active = React.useRef(false); // ref (not state) so drag never drops on the first move
  const dxRef = React.useRef(0);      // latest drag distance — pointerup must not read stale state

  const next = () => setCenter(c => (c + 1) % slides.length);

  // Whenever the centered reel changes, drop back to muted-preview mode.
  React.useEffect(() => { setExpanded(false); }, [center]);

  // 5-second preview auto-advance (paused while expanded / dragging / hovered).
  React.useEffect(() => {
    if (expanded || drag.active || paused) return;
    const t = setTimeout(next, PREVIEW_MS);
    return () => clearTimeout(t);
  }, [center, expanded, drag.active, paused, slides.length]);

  // Muted-preview playback. (Full+sound playback is started in the tap handler so it
  // counts as a user gesture — doing it here would be blocked by autoplay policy.)
  React.useEffect(() => {
    const v = videoRef.current;
    if (!v) return;
    v.loop = !expanded;
    if (!expanded) {
      v.muted = true; v.defaultMuted = true;
      const p = v.play(); if (p && p.catch) p.catch(() => {});
    }
  }, [expanded, center]);

  // ----- pointer: distinguish a tap from a drag -----
  const onPointerDown = (e) => {
    try { e.currentTarget.setPointerCapture?.(e.pointerId); } catch (err) {}
    active.current = true;
    startX.current = e.clientX; moved.current = false; dxRef.current = 0;
    setDrag({ active: true, dx: 0 });
  };
  const onPointerMove = (e) => {
    if (!active.current) return;
    const dx = e.clientX - startX.current;
    dxRef.current = dx;
    if (Math.abs(dx) > 6) moved.current = true;
    setDrag(d => ({ ...d, dx }));
  };
  const onPointerUp = (e) => {
    if (!active.current) return;
    active.current = false;
    const dx = dxRef.current; // read from ref, not state (state is stale at release)
    if (moved.current) {
      // a drag — rotate the cluster
      const steps = Math.round(-dx / 130);
      if (steps !== 0) setCenter(c => (c + steps + slides.length * 10) % slides.length);
      else if (Math.abs(dx) > 45) setCenter(c => (c + (dx > 0 ? -1 : 1) + slides.length) % slides.length);
    } else {
      // a tap — figure out which card (pointer capture hides e.target, so use coords)
      const el = document.elementFromPoint(e.clientX, e.clientY);
      const card = el && el.closest ? el.closest('[data-reel-index]') : null;
      const idx = card ? Number(card.getAttribute('data-reel-index')) : -1;
      if (idx === center) {
        const v = videoRef.current;
        if (!expanded) {
          if (v) { v.muted = false; v.currentTime = 0; const p = v.play(); if (p && p.catch) p.catch(() => {}); }
          setExpanded(true);
        } else {
          if (v) { v.muted = true; }
          setExpanded(false);
        }
      } else if (idx >= 0) {
        setCenter(idx);
      }
    }
    setDrag({ active: false, dx: 0 });
  };

  const offsetOf = (i) => {
    const n = slides.length;
    let d = i - center;
    if (d > n / 2) d -= n;
    if (d < -n / 2) d += n;
    return d;
  };

  return (
    <section style={{ color: '#fff', padding: '88px 32px 96px', background: '#0A0A0A', position: 'relative', overflow: 'hidden' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', textAlign: 'center' }}>
        <div style={{
          fontFamily: 'var(--font-script)', fontStyle: 'italic',
          fontSize: 'clamp(28px, 4vw, 56px)', color: '#F7591F',
          textTransform: 'uppercase', letterSpacing: '0.005em', marginBottom: 4,
        }}>FEATURED</div>
        <h2 style={{
          fontFamily: 'Poppins, sans-serif', fontWeight: 900,
          fontSize: 'clamp(56px, 9vw, 140px)', lineHeight: 0.95,
          letterSpacing: '-0.025em', textTransform: 'uppercase',
          margin: 0, color: '#fff', whiteSpace: 'nowrap',
        }}>WORLD WIDE</h2>
      </div>

      <div
        onPointerDown={onPointerDown}
        onPointerMove={onPointerMove}
        onPointerUp={onPointerUp}
        onPointerCancel={onPointerUp}
        onMouseEnter={() => setPaused(true)}
        onMouseLeave={() => setPaused(false)}
        style={{
          position: 'relative', width: '100%', height: 'clamp(420px, 46vw, 620px)',
          marginTop: 56, cursor: drag.active ? 'grabbing' : 'grab',
          touchAction: 'pan-y', userSelect: 'none',
          WebkitMaskImage: 'linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%)',
          maskImage: 'linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%)',
        }}
      >
        {slides.map((s, i) => {
          const off = offsetOf(i);
          const o = off + drag.dx / 130;
          const ao = Math.abs(o);
          const x = o * 200, y = ao * 8, rot = o * 3;
          const scale = Math.max(0.7, 1 - ao * 0.07);
          const z = 100 - Math.round(ao * 10);
          const opacity = ao > 3 ? 0 : 1;
          const isCenter = Math.round(off) === 0;
          // When a reel is playing with sound, spotlight it: pop the focused card,
          // push the rest back (dim + blur + shrink) for a clean depth-of-field feel.
          const focused = expanded && isCenter;
          const dimmed = expanded && !isCenter;
          const cardScale = scale * (focused ? 1.08 : (dimmed ? 0.9 : 1));
          return (
            <div key={s.id}
              data-reel-index={i}
              style={{
                position: 'absolute', left: '50%', top: '50%',
                width: 'clamp(200px, 19vw, 290px)', aspectRatio: '9 / 16',
                transform: `translate(-50%, -50%) translate3d(${x}px, ${y}px, 0) rotate(${focused ? 0 : rot}deg) scale(${cardScale})`,
                opacity: dimmed ? opacity * 0.22 : opacity,
                filter: dimmed ? 'blur(4px) brightness(0.5)' : 'none',
                zIndex: focused ? 200 : z,
                transition: drag.active ? 'none' : 'transform 520ms cubic-bezier(0.16,1,0.3,1), opacity 420ms ease, filter 420ms ease, box-shadow 420ms ease',
                borderRadius: 16, overflow: 'hidden',
                boxShadow: focused
                  ? '0 40px 90px rgba(0,0,0,0.75), 0 0 0 1px rgba(247,89,31,0.65), 0 0 50px rgba(247,89,31,0.4)'
                  : (ao < 0.5 ? '0 24px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(247,89,31,0.25)' : '0 12px 32px rgba(0,0,0,0.5)'),
                background: '#141414', cursor: 'pointer',
              }}
            >
              {isCenter ? (
                <video
                  ref={videoRef}
                  key={'vid-' + center}
                  src={s.video}
                  poster={s.poster}
                  autoPlay muted playsInline preload="auto"
                  onEnded={() => { if (expanded) next(); }}
                  style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', pointerEvents: 'none' }}
                />
              ) : (
                <img src={s.poster} alt="" draggable={false}
                  style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', pointerEvents: 'none' }} />
              )}

              {/* darken bottom for legibility */}
              <div aria-hidden style={{ position: 'absolute', inset: 0, pointerEvents: 'none', background: 'linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.5) 100%)' }} />

              {isCenter && (
                <>
                  {!expanded && (
                    <div style={{
                      position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%,-50%)',
                      width: 56, height: 56, borderRadius: '50%', background: 'rgba(247,89,31,0.92)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      boxShadow: '0 0 24px rgba(247,89,31,0.45)', pointerEvents: 'none',
                    }}>
                      <svg width="18" height="22" viewBox="0 0 22 26" fill="#fff" aria-hidden="true"><path d="M0 0 L22 13 L0 26 Z" /></svg>
                    </div>
                  )}
                  <div style={{
                    position: 'absolute', top: 12, right: 12, pointerEvents: 'none',
                    background: 'rgba(0,0,0,0.55)', borderRadius: 999, padding: '5px 7px',
                    display: 'flex', alignItems: 'center', gap: 6,
                  }}>
                    {expanded ? (
                      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M11 5 L6 9 H2 v6 h4 l5 4 Z"/><path d="M19 5a8 8 0 0 1 0 14"/><path d="M15.5 8.5a4 4 0 0 1 0 7"/></svg>
                    ) : (
                      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M11 5 L6 9 H2 v6 h4 l5 4 Z"/><path d="M22 9 L16 15 M16 9 l6 6"/></svg>
                    )}
                  </div>
                  {!expanded && !paused && !drag.active && (
                    <div key={'bar-' + center} style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: 3, background: 'rgba(255,255,255,0.2)', pointerEvents: 'none' }}>
                      <div style={{ height: '100%', background: '#F7591F', width: '100%', transformOrigin: 'left', animation: `zion-reel-bar ${PREVIEW_MS}ms linear forwards` }} />
                    </div>
                  )}
                </>
              )}
            </div>
          );
        })}
      </div>

      <style>{`@keyframes zion-reel-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }`}</style>

      <div style={{
        textAlign: 'center', marginTop: 56,
        fontFamily: 'Poppins, sans-serif', fontWeight: 800,
        fontSize: 'clamp(28px, 4vw, 56px)', color: '#fff', letterSpacing: '-0.015em',
      }}>
        <span style={{ color: '#F7591F' }}>200M+</span> Views
      </div>

      <div style={{ display: 'flex', justifyContent: 'center', gap: 8, marginTop: 28 }}>
        {slides.map((_, idx) => (
          <button key={idx} onClick={() => setCenter(idx)} aria-label={`Show reel ${idx + 1}`}
            style={{
              width: idx === center ? 28 : 8, height: 8, borderRadius: 999,
              background: idx === center ? '#F7591F' : 'rgba(255,255,255,0.3)',
              border: 'none', cursor: 'pointer', padding: 0,
              transition: 'width 320ms cubic-bezier(0.16,1,0.3,1), background 220ms',
            }} />
        ))}
      </div>
    </section>
  );
}

window.ContentCollabs = ContentCollabs;