// Video — small dedicated section with a single looping example.
function PSVideo() {
  // iOS sometimes ignores the autoPlay attribute on first paint. Force-play on mount.
  // Wrapped in try/catch because Safari throws NotAllowedError when conditions
  // aren't met (low-power mode, no user gesture, etc.) — silent fail is fine.
  const videoRef = React.useRef(null);
  React.useEffect(() => {
    const v = videoRef.current;
    if (!v) return;
    const tryPlay = () => { v.play().catch(() => {}); };
    tryPlay();
    // Retry once when the element is in view (helps when autoplay is throttled until visibility).
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) tryPlay(); });
    }, { threshold: 0.25 });
    io.observe(v);
    return () => io.disconnect();
  }, []);

  return (
    <section id="video" className="ps-section" data-mobile-pad="true" data-mobile-y="xs" style={{ background: 'var(--cocoa)', color: 'var(--cream)', padding: '128px 48px', position: 'relative', overflow: 'hidden' }}>
      <div className="ps-stack-mobile" style={{ maxWidth: 1320, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 80, alignItems: 'center' }}>
        {/* LEFT — copy */}
        <div>
          <div className="eyebrow" style={{ marginBottom: 14, color: 'var(--sand)' }}>
            <span style={{ display: 'inline-block', width: 24, height: 1, background: 'var(--sand)', verticalAlign: 'middle', marginRight: 12 }}></span>
            Now with motion
          </div>
          <h2 className="celestial" style={{
            fontSize: 'clamp(52px,6.4vw,108px)', color: 'var(--cream)', margin: 0
          }}>Give your stills<br />a pulse.</h2>
          <p style={{ fontFamily: '"La Villa", sans-serif', fontSize: 17, lineHeight: 1.6, color: 'var(--cream)', opacity: 0.78, maxWidth: 440, marginTop: 28 }}>Same hybrid principle, in motion. Your product subtly moves through a real captured scene, breeze through linen, hand reaching in, slow camera drift. 24 video presets to choose from.

          </p>
          <div style={{
            display: 'flex', gap: 32, marginTop: 40, paddingTop: 28,
            borderTop: '1px solid var(--border-on-dark)'
          }}>
            {[
            ['5 & 10s loops', 'Standard'],
            ['sound', 'Premium'],
            ['MP4 · MOV', 'Export']].
            map(([n, l]) =>
            <div key={l}>
                <div style={{ fontFamily: '"La Villa", sans-serif', fontWeight: 500, fontSize: 20, color: 'var(--cream)', letterSpacing: '-0.01em' }}>{n}</div>
                <div style={{ fontFamily: '"La Villa", sans-serif', fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--sand)', marginTop: 4 }}>{l}</div>
              </div>
            )}
          </div>
        </div>

        {/* RIGHT — still + video side by side */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          {/* Original still */}
          <div style={{ position: 'relative', aspectRatio: '4/5', background: 'var(--cocoa-soft)', overflow: 'hidden' }}>
            <img src="assets/video-still.jpg" alt="Original still" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
            <div style={{
              position: 'absolute', top: 16, left: 16,
              fontFamily: '"La Villa", sans-serif', fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase',
              color: 'var(--cream)', textShadow: '0 1px 2px rgba(0,0,0,0.4)',
            }}>Still</div>
          </div>
          {/* Video */}
          <div style={{ position: 'relative', aspectRatio: '4/5', background: 'var(--cocoa-soft)', overflow: 'hidden' }}>
            <video
              ref={videoRef}
              src="assets/product-studio-demo.mp4"
              autoPlay
              muted
              defaultMuted
              loop
              playsInline
              preload="auto"
              poster="assets/video-still.jpg"
              style={{
                position: 'absolute', inset: 0,
                width: '100%', height: '100%',
                objectFit: 'cover',
              }}
            />
            <div style={{
              position: 'absolute', top: 16, left: 16, right: 16,
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              color: 'var(--cream)',
              textShadow: '0 1px 2px rgba(0,0,0,0.4)',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ width: 8, height: 8, borderRadius: 999, background: '#B08654', boxShadow: '0 0 0 0 rgba(176,134,84,0.7)', animation: 'pulse 1.6s ease-in-out infinite' }} />
                <span style={{ fontFamily: '"La Villa", sans-serif', fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase' }}>Video</span>
              </div>
              <span style={{ fontFamily: '"La Villa", sans-serif', fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', opacity: 0.85 }}>1080p · 24fps</span>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @keyframes kenburns { from { transform: scale(1.04) translate(0,0); } to { transform: scale(1.12) translate(-2%, -1%); } }
        @keyframes floatY { from { transform: translate(-50%,-52%); } to { transform: translate(-50%,-48%); } }
        @keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(176,134,84,0.6); } 50% { box-shadow: 0 0 0 6px rgba(176,134,84,0); } }
        @keyframes progress { from { width: 0; } to { width: 100%; } }
      `}</style>
    </section>);

}

Object.assign(window, { PSVideo });