// Video — small dedicated section with a single looping example.
function PSVideo() {
  return (
    <section id="video" className="ps-section" data-mobile-pad="true" data-mobile-y="lg" 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
          }}>Generate<br />video, too.</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 — actual demo video */}
        <div style={{ position: 'relative', aspectRatio: '4/5', background: 'var(--cocoa-soft)', overflow: 'hidden' }}>
          <video
            src="assets/product-studio-demo.mp4"
            autoPlay
            muted
            loop
            playsInline
            style={{
              position: 'absolute', inset: 0,
              width: '100%', height: '100%',
              objectFit: 'cover',
            }}
          />
          {/* Recording chrome */}
          <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' }}>Live preview</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>
      <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 });