// ZION EventReels — Coverflow showcase for the Events page.
// The center reel sits upright, plays muted, and is spotlighted; the rest fan
// back in 3D perspective and auto-rotate through. Tap the center reel for full
// sound (it pops forward); tap a side reel to bring it to center; drag to spin.
function EventReels() {
  const slides = React.useMemo(() => ([
    { id: 'e1', video: 'assets/event-reels/eventreel1.mp4', poster: 'assets/event-reels/eventreel1.jpg' },
    { id: 'e2', video: 'assets/event-reels/eventreel2.mp4', poster: 'assets/event-reels/eventreel2.jpg' },
    { id: 'e3', video: 'assets/event-reels/eventreel3.mp4', poster: 'assets/event-reels/eventreel3.jpg' },
    { id: 'e4', video: 'assets/event-reels/eventreel4.mp4', poster: 'assets/event-reels/eventreel4.jpg' },
    { id: 'e5', video: 'assets/event-reels/eventreel5.mp4', poster: 'assets/event-reels/eventreel5.jpg' },
    { id: 'e6', video: 'assets/event-reels/eventreel6.mp4', poster: 'assets/event-reels/eventreel6.jpg' },
    { id: 'e7', video: 'assets/event-reels/eventreel7.mp4', poster: 'assets/event-reels/eventreel7.jpg' },
  ]), []);

  const PREVIEW_MS = 5000;
  const [center, setCenter] = React.useState(0);
  const [expanded, setExpanded] = React.useState(false);
  const [paused, setPaused] = React.useState(false);
  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);
  const dxRef = React.useRef(0);

  const next = () => setCenter(c => (c + 1) % slides.length);
  React.useEffect(() => { setExpanded(false); }, [center]);
  React.useEffect(() => {
    if (expanded || drag.active || paused) return;
    const t = setTimeout(next, PREVIEW_MS);
    return () => clearTimeout(t);
  }, [center, expanded, drag.active, paused, slides.length]);
  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]);

  const onPointerDown = (e) => {
    try { e.currentTarget.setPointerCapture && e.currentTarget.setPointerCapture(e.pointerId); } catch (_) {}
    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;
    if (moved.current) {
      const steps = Math.round(-dx / 150);
      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 {
      const el = document.elementFromPoint(e.clientX, e.clientY);
      const card = el && el.closest ? el.closest('[data-er-index]') : null;
      const idx = card ? Number(card.getAttribute('data-er-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={{ position: 'relative', width: '100%', marginBottom: 44 }}>
      <div
        onPointerDown={onPointerDown}
        onPointerMove={onPointerMove}
        onPointerUp={onPointerUp}
        onPointerCancel={onPointerUp}
        onMouseEnter={() => setPaused(true)}
        onMouseLeave={() => setPaused(false)}
        style={{
          position: 'relative', width: '100%', height: 'clamp(400px, 52vw, 580px)',
          perspective: '1200px', cursor: drag.active ? 'grabbing' : 'grab',
          touchAction: 'pan-y', userSelect: 'none',
          WebkitMaskImage: 'linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%)',
          maskImage: 'linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%)',
        }}
      >
        {slides.map((s, i) => {
          const off = offsetOf(i);
          const o = off + drag.dx / 150;
          const ao = Math.abs(o);
          const x = o * 120;
          const zz = -ao * 170;
          const rotY = -Math.max(-1, Math.min(1, o)) * 50;
          const scale = Math.max(0.6, 1 - ao * 0.12);
          const opacity = ao > 3.2 ? 0 : 1;
          const isCenter = Math.round(off) === 0;
          const focused = expanded && isCenter;
          return (
            <div key={s.id} data-er-index={i}
              style={{
                position: 'absolute', left: '50%', top: '50%',
                width: 'clamp(185px, 21vw, 285px)', aspectRatio: '9 / 16',
                transform: `translate(-50%, -50%) translate3d(${x}px, 0, ${zz}px) rotateY(${rotY}deg) scale(${focused ? scale * 1.05 : scale})`,
                transformStyle: 'preserve-3d',
                opacity: isCenter ? 1 : opacity * 0.85,
                filter: (!isCenter && !drag.active) ? 'brightness(0.6)' : 'none',
                zIndex: focused ? 200 : (100 - Math.round(ao * 10)),
                transition: drag.active ? 'none' : 'transform 620ms cubic-bezier(0.16,1,0.3,1), opacity 420ms, filter 420ms',
                borderRadius: 16, overflow: 'hidden', background: '#141414', cursor: 'pointer',
                boxShadow: isCenter
                  ? (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)'
                    : '0 30px 70px rgba(0,0,0,0.65), 0 0 0 1px rgba(247,89,31,0.32)')
                  : '0 18px 44px rgba(0,0,0,0.55)',
              }}
            >
              {isCenter ? (
                <video ref={videoRef} key={'erv-' + 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' }} />
              )}
              <div aria-hidden style={{ position: 'absolute', inset: 0, pointerEvents: 'none', background: 'linear-gradient(180deg, transparent 62%, rgba(0,0,0,0.42) 100%)' }} />

              {isCenter && (
                <>
                  {!expanded && (
                    <div style={{
                      position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%,-50%)',
                      width: 54, height: 54, 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="17" height="21" 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' }}>
                    {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={'erbar-' + 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-er-bar ${PREVIEW_MS}ms linear forwards` }} />
                    </div>
                  )}
                </>
              )}
            </div>
          );
        })}
      </div>
      <style>{`@keyframes zion-er-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }`}</style>

      <div style={{ display: 'flex', justifyContent: 'center', gap: 8, marginTop: 26 }}>
        {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.EventReels = EventReels;