// Video — real product demo wrapped in cinema/phone frame chrome
function Video() {
  const { Icon, SectionHead, Tape } = window.RMS;
  const videoRef = React.useRef(null);
  const [playing, setPlaying] = React.useState(false);
  const [muted, setMuted] = React.useState(true);
  const [current, setCurrent] = React.useState(0);
  const [duration, setDuration] = React.useState(0);

  function fmt(t) {
    if (!isFinite(t)) return '00:00';
    const m = Math.floor(t / 60);
    const s = Math.floor(t % 60);
    return String(m).padStart(2, '0') + ':' + String(s).padStart(2, '0');
  }

  function toggle(e) {
    if (e) e.stopPropagation();
    const v = videoRef.current;
    if (!v) return;
    if (v.paused) {
      v.play().catch(() => {});
    } else {
      v.pause();
    }
  }

  function toggleMute(e) {
    if (e) e.stopPropagation();
    const v = videoRef.current;
    if (!v) return;
    v.muted = !v.muted;
    setMuted(v.muted);
  }

  React.useEffect(() => {
    const v = videoRef.current;
    if (!v) return;
    const onPlay = () => setPlaying(true);
    const onPause = () => setPlaying(false);
    const onTime = () => setCurrent(v.currentTime);
    const onMeta = () => setDuration(v.duration);
    const onEnded = () => setPlaying(false);
    v.addEventListener('play', onPlay);
    v.addEventListener('pause', onPause);
    v.addEventListener('timeupdate', onTime);
    v.addEventListener('loadedmetadata', onMeta);
    v.addEventListener('ended', onEnded);
    return () => {
      v.removeEventListener('play', onPlay);
      v.removeEventListener('pause', onPause);
      v.removeEventListener('timeupdate', onTime);
      v.removeEventListener('loadedmetadata', onMeta);
      v.removeEventListener('ended', onEnded);
    };
  }, []);

  return (
    <section id="video" className="section" style={{
      background: 'var(--ink)',
      color: 'var(--paper)',
      borderTop: '2px solid var(--ink)',
      borderBottom: '2px solid var(--ink)',
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* halftone overlay */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'radial-gradient(rgba(255,255,255,0.06) 1.2px, transparent 1.4px)',
        backgroundSize: '10px 10px',
        pointerEvents: 'none',
      }}/>

      <div className="wrap" style={{ position: 'relative' }}>
        <div style={{ marginBottom: 32 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
            <span style={{ width: 18, height: 18, borderRadius: 999, background: 'var(--flame)', border: '2px solid var(--paper)' }}/>
            <div className="eyebrow" style={{ color: 'var(--flame)' }}>SCREENING ROOM</div>
          </div>
          <h2 className="title-xl" style={{ margin: 0, color: 'var(--paper)' }}>WATCH THE ROAST<br/>IN MOTION.</h2>
          <p className="body" style={{ color: 'var(--paper-2)', maxWidth: 540, marginTop: 10 }}>
            One snack, end to end: snap, score, comic, swap. Tap to play.
          </p>
        </div>

        <div style={{ position: 'relative', maxWidth: 360, margin: '0 auto' }}>
          {/* Tape annotations */}
          <div style={{ position: 'absolute', top: -18, left: -28, zIndex: 4 }}>
            <Tape rotate={-6} color="var(--flame)">DEMO REEL</Tape>
          </div>
          <div style={{ position: 'absolute', top: -22, right: -24, zIndex: 4 }}>
            <Tape rotate={5} color="var(--mint)">SHOT ON iPHONE</Tape>
          </div>

          {/* Phone frame containing real portrait video */}
          <div onClick={toggle} style={{
            position: 'relative',
            width: '100%',
            aspectRatio: '9 / 19.5',
            background: 'var(--ink)',
            border: '4px solid var(--ink)',
            borderRadius: 44,
            padding: 8,
            boxShadow: '10px 10px 0 var(--flame)',
            cursor: 'pointer',
            overflow: 'hidden',
          }}>
            <video
              ref={videoRef}
              src="video/demo.mp4"
              poster="images/Main_App_Hero.png"
              playsInline
              muted
              preload="metadata"
              style={{
                width: '100%', height: '100%',
                borderRadius: 32,
                objectFit: 'cover',
                background: 'var(--paper)',
                display: 'block',
              }}
            />

            {/* play button overlay — only when paused */}
            {!playing && (
              <div style={{
                position: 'absolute', inset: 0, display: 'grid', placeItems: 'center',
                pointerEvents: 'none', zIndex: 4,
              }}>
                <div style={{
                  width: 84, height: 84, borderRadius: 999,
                  background: 'var(--flame)', border: '3px solid var(--ink)',
                  display: 'grid', placeItems: 'center',
                  boxShadow: '6px 6px 0 var(--ink)',
                  animation: 'bob 2.6s ease-in-out infinite',
                }}>
                  <span style={{ paddingLeft: 6 }}>{Icon.play(34)}</span>
                </div>
              </div>
            )}

            {/* timecode chip */}
            <div className="mono" style={{
              position: 'absolute', bottom: 18, right: 18, zIndex: 5,
              background: 'var(--ink)', color: 'var(--flame)',
              padding: '4px 9px', borderRadius: 6, fontSize: 10, letterSpacing: '0.16em',
              border: '1.5px solid var(--ink)',
            }}>{fmt(current)} / {fmt(duration)}</div>

            {/* mute toggle */}
            <button
              onClick={toggleMute}
              aria-label={muted ? 'Unmute' : 'Mute'}
              style={{
                position: 'absolute', bottom: 18, left: 18, zIndex: 5,
                background: 'var(--ink)', color: 'var(--paper)',
                border: '1.5px solid var(--ink)',
                borderRadius: 6, padding: '4px 9px',
                fontSize: 10, letterSpacing: '0.16em',
                fontFamily: 'var(--font-mono)',
                cursor: 'pointer',
                display: 'flex', alignItems: 'center', gap: 6,
              }}
            >
              {muted ? '🔇 TAP FOR SOUND' : '🔊 ON'}
            </button>
          </div>

          {/* Caption strip BELOW the phone */}
          <div style={{
            marginTop: 22, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 10,
            color: 'var(--paper-2)',
          }}>
            <div className="mono" style={{ fontSize: 11, letterSpacing: '0.18em' }}>
              {playing ? '▶ NOW PLAYING' : '⏸ TAP TO PLAY'}
            </div>
            <div className="mono" style={{ fontSize: 11, letterSpacing: '0.18em' }}>
              REEL · DEMO.MP4
            </div>
          </div>

          {/* Filmstrip context strip BELOW caption */}
          <div style={{
            marginTop: 18,
            height: 22,
            background: 'var(--ink)',
            backgroundImage: 'repeating-linear-gradient(90deg, var(--ink) 0 14px, var(--paper) 14px 20px, var(--ink) 20px 26px)',
            border: '2px solid var(--paper)',
            borderRadius: 6,
          }}/>

          <div style={{
            marginTop: 14, textAlign: 'center',
            color: 'var(--paper-2)',
          }}>
            <div className="mono" style={{ fontSize: 10.5, letterSpacing: '0.2em' }}>
              1080P · SHOT ON IPHONE · TESTFLIGHT BUILD
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.RMS.Video = Video;