// "From stills to motion" — showcases the 3-images-into-a-reel flow.
// Three source images on the left, the resulting video on the right,
// with a small "Drop A Reel" preset label connecting them.
//
// This is the canonical example of a Motion Preset workflow on the home page.
// More motion-preset / multi-image-to-video examples will live on the
// (forthcoming) Examples page; this is the teaser.
function PSReel() {
  const stills = [
  { src: 'assets/reel-route66-1.jpg', label: 'Frame 01' },
  { src: 'assets/reel-route66-2.jpg', label: 'Frame 02' },
  { src: 'assets/reel-route66-3.jpg', label: 'Frame 03' }];

  const videoRef = React.useRef(null);
  const [audioOn, setAudioOn] = React.useState(false);
  const toggleAudio = () => {
    const v = videoRef.current;
    if (!v) return;
    const next = !audioOn;
    v.muted = !next;
    if (next) v.play().catch(() => {});
    setAudioOn(next);
  };

  return (
    <section
      id="reel"
      className="ps-section"
      data-mobile-pad="true"
      data-mobile-y="lg"
      style={{
        background: 'var(--bg-2)',
        padding: '128px 48px',
        position: 'relative',
        overflow: 'hidden'
      }}>
      {/* Header */}
      <div style={{ maxWidth: 1320, margin: '0 auto 72px' }}>
        <div className="eyebrow" style={{ marginBottom: 14 }}>
          <span style={{ display: 'inline-block', width: 24, height: 1, background: 'var(--cocoa)', verticalAlign: 'middle', marginRight: 12 }}></span>
          Motion Presets
        </div>
        <div className="ps-stack-mobile" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64, alignItems: 'end' }}>
          <h2 className="celestial" style={{
            fontSize: 'clamp(56px,7vw,128px)', color: 'var(--cocoa)', margin: 0, lineHeight: 0.95
          }}>
            Three stills,<br />
            <span style={{ fontStyle: 'normal', letterSpacing: '-0.02em', fontFamily: '"La Villa"', textTransform: 'none', fontSize: '0.78em' }}>
              one moving reel.
            </span>
          </h2>
          <p style={{
            fontFamily: '"La Villa", sans-serif', fontSize: 17, lineHeight: 1.6,
            color: 'var(--fg-2)', margin: 0, paddingBottom: 12, maxWidth: 420
          }}>Pick any Vault Stock images - or upload your own. Choose a Motion Preset. Product Studio stitches them into a finished reel, same look, now in motion.

          </p>
        </div>
      </div>

      {/* The flow: 3 stills → preset chip → output video */}
      <div className="ps-reel-flow" style={{
        maxWidth: 1320, margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: '1.05fr auto 1fr',
        gap: 56,
        alignItems: 'center'
      }}>
        {/* LEFT — three source stills, slightly fanned */}
        <div>
          <div className="eyebrow" style={{ marginBottom: 18, color: 'var(--fg-2)' }}>
            01 · Source images
          </div>
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10
          }}>
            {stills.map((s, i) =>
            <figure key={i} style={{ margin: 0, position: 'relative' }}>
                <div style={{
                aspectRatio: '3/4',
                background: 'var(--cocoa-soft)',
                overflow: 'hidden',
                position: 'relative',
                boxShadow: '0 12px 28px rgba(42,36,32,0.12)'
              }}>
                  <img
                  src={s.src}
                  alt={s.label}
                  loading="lazy"
                  style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                
                  {/* Frame index chip */}
                  <div style={{
                  position: 'absolute', top: 10, left: 10,
                  background: 'rgba(15,12,10,0.55)',
                  color: 'var(--cream)',
                  padding: '4px 8px',
                  fontFamily: '"La Villa", sans-serif',
                  fontSize: 9, letterSpacing: '0.22em', textTransform: 'uppercase',
                  fontWeight: 500,
                  backdropFilter: 'blur(6px)',
                  WebkitBackdropFilter: 'blur(6px)'
                }}>
                    {String(i + 1).padStart(2, '0')}
                  </div>
                </div>
              </figure>
            )}
          </div>
          <div style={{
            marginTop: 14,
            fontFamily: '"La Villa", sans-serif', fontStyle: 'italic',
            fontSize: 13, color: 'var(--fg-2)', opacity: 0.78
          }}>
            From the <em style={{ fontStyle: 'normal', textDecoration: 'underline', textDecorationColor: 'var(--border-1)', textUnderlineOffset: 3 }}>Route 66</em> collection on The Vault Stock.
          </div>
        </div>

        {/* MIDDLE — preset chip + arrow */}
        <div className="ps-reel-arrow" style={{
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 18,
          padding: '0 4px'
        }}>
          <div className="eyebrow" style={{ color: 'var(--fg-2)', textAlign: 'center', whiteSpace: 'nowrap' }}>
            02 · Preset
          </div>
          <div style={{
            background: 'var(--cocoa)',
            color: 'var(--cream)',
            padding: '14px 22px',
            borderRadius: 999,
            fontFamily: '"La Villa", sans-serif',
            fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase',
            fontWeight: 500,
            display: 'inline-flex', alignItems: 'center', gap: 10,
            boxShadow: '0 10px 24px rgba(42,36,32,0.22)',
            whiteSpace: 'nowrap'
          }}>
            <span aria-hidden="true" style={{
              width: 8, height: 8, borderRadius: 999,
              background: 'var(--sand)',
              animation: 'reelPulse 1.8s ease-in-out infinite'
            }} />
            Drop A Reel
          </div>
          <div style={{
            fontFamily: '"La Villa", sans-serif', fontStyle: 'italic',
            fontSize: 13, color: 'var(--fg-2)', opacity: 0.78, textAlign: 'center'
          }}>
            Motion Preset
          </div>

          {/* Long arrow */}
          <svg className="ps-reel-arrow-svg" width="56" height="22" viewBox="0 0 56 22" fill="none" style={{ marginTop: 6 }}>
            <line x1="0" y1="11" x2="48" y2="11" stroke="var(--cocoa)" strokeWidth="1" />
            <polyline points="42,5 50,11 42,17" stroke="var(--cocoa)" strokeWidth="1" fill="none" />
          </svg>
        </div>

        {/* RIGHT — output video */}
        <div>
          <div className="eyebrow" style={{ marginBottom: 18, color: 'var(--fg-2)' }}>
            03 · The reel
          </div>
          <div style={{
            position: 'relative',
            aspectRatio: '3/4',
            background: 'var(--cocoa-soft)',
            overflow: 'hidden',
            boxShadow: '0 24px 48px rgba(42,36,32,0.22)'
          }}>
            <video
              ref={videoRef}
              src="assets/reel-route66-output.mp4"
              autoPlay
              muted
              loop
              playsInline
              style={{
                position: 'absolute', inset: 0,
                width: '100%', height: '100%',
                objectFit: 'cover'
              }} />
            
            {/* Player chrome */}
            <div style={{
              position: 'absolute', top: 14, left: 14, right: 14,
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              color: 'var(--cream)',
              textShadow: '0 1px 3px rgba(0,0,0,0.4)'
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ width: 8, height: 8, borderRadius: 999, background: 'var(--sand)', animation: 'reelPulse 1.6s ease-in-out infinite' }} />
                <span style={{ fontFamily: '"La Villa", sans-serif', fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase' }}>Output</span>
              </div>
              <span style={{ fontFamily: '"La Villa", sans-serif', fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', opacity: 0.85 }}>5s · 1080p</span>
            </div>
            {/* Bottom: timeline + audio toggle */}
            <div style={{
              position: 'absolute', left: 14, right: 14, bottom: 14,
              display: 'flex', alignItems: 'center', gap: 12
            }}>
              <div style={{
                flex: 1, height: 3, background: 'rgba(255,255,255,0.25)', overflow: 'hidden'
              }}>
                <div style={{
                  width: '100%', height: '100%', background: 'var(--cream)',
                  animation: 'reelProgress 5s linear infinite',
                  transformOrigin: 'left'
                }} />
              </div>
              <button
                type="button"
                onClick={toggleAudio}
                aria-label={audioOn ? 'Mute audio' : 'Play audio'}
                title={audioOn ? 'Mute' : 'Play audio'}
                style={{
                  background: audioOn ? 'var(--cream)' : 'rgba(15,12,10,0.55)',
                  color: audioOn ? 'var(--cocoa)' : 'var(--cream)',
                  border: '1px solid rgba(255,255,255,0.5)',
                  borderRadius: 999,
                  padding: '6px 12px',
                  fontFamily: '"La Villa", sans-serif',
                  fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase',
                  fontWeight: 500, cursor: 'pointer',
                  display: 'inline-flex', alignItems: 'center', gap: 8,
                  backdropFilter: 'blur(6px)',
                  WebkitBackdropFilter: 'blur(6px)',
                  whiteSpace: 'nowrap',
                  transition: 'background 200ms, color 200ms'
                }}>
                
                {audioOn ?
                <svg width="11" height="11" viewBox="0 0 11 11" fill="none" aria-hidden="true">
                    <path d="M1 4v3h2l3 2.5v-8L3 4H1z" fill="currentColor" />
                    <path d="M7.5 3.5q1.5 2 0 4M9 2q3 3.5 0 7" stroke="currentColor" strokeWidth="0.8" fill="none" strokeLinecap="round" />
                  </svg> :

                <svg width="11" height="11" viewBox="0 0 11 11" fill="none" aria-hidden="true">
                    <path d="M1 4v3h2l3 2.5v-8L3 4H1z" fill="currentColor" />
                    <path d="M8 3.5l3 4M11 3.5l-3 4" stroke="currentColor" strokeWidth="0.9" strokeLinecap="round" />
                  </svg>
                }
                {audioOn ? 'Sound on' : 'Sound off'}
              </button>
            </div>
          </div>
          <div style={{
            marginTop: 14,
            fontFamily: '"La Villa", sans-serif',
            fontSize: 13, color: 'var(--fg-2)', opacity: 0.86
          }}>5-second loop, cross-faded between three stills with subtle drift.
On Premium, Studio also picks an ambient soundtrack to match the mood.
          </div>
        </div>
      </div>

      {/* Footnote / link to more */}
      <div style={{
        maxWidth: 1320, margin: '64px auto 0',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        gap: 16, flexWrap: 'wrap',
        paddingTop: 28, borderTop: '1px solid var(--border-1)'
      }}>
        <div style={{
          fontFamily: '"La Villa", sans-serif', fontSize: 14, color: 'var(--fg-2)',
          maxWidth: 540
        }}>
          24 Motion Presets in total. From drifting reels to product loops, hand-reach pours, and ambient ken-burns.
        </div>
        <a href="Examples.html" style={{
          fontFamily: '"La Villa", sans-serif', fontSize: 11, letterSpacing: '0.22em',
          textTransform: 'uppercase', fontWeight: 500, color: 'var(--cocoa)',
          textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 10,
          paddingBottom: 4, borderBottom: '1px solid var(--cocoa)'
        }}>
          See more examples
          <span style={{ fontSize: 14, letterSpacing: 0 }}>→</span>
        </a>
      </div>

      <style>{`
        @keyframes reelPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
        @keyframes reelProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
        @media (max-width: 980px) {
          .ps-reel-flow {
            grid-template-columns: 1fr !important;
            gap: 48px !important;
          }
          .ps-reel-arrow {
            flex-direction: row !important;
            flex-wrap: wrap;
            justify-content: center;
          }
          .ps-reel-arrow-svg {
            transform: rotate(90deg);
          }
        }
      `}</style>
    </section>);

}

Object.assign(window, { PSReel });