// Auto-scrolling sample marquee + click-to-fullscreen lightbox.

function SampleStrip() {
  const items = [...FIGURES, ...FIGURES];
  const [lightbox, setLightbox] = React.useState(null);

  React.useEffect(() => {
    if (!lightbox) return;
    const onKey = (e) => { if (e.key === 'Escape') setLightbox(null); };
    window.addEventListener('keydown', onKey);
    // Prevent background scroll while lightbox is open
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = prev;
    };
  }, [lightbox]);

  return (
    <>
      <div className="sample-marquee">
        <div className="sample-head">
          <span>── Example outputs</span>
          <span className="count">{FIGURES.length} →</span>
        </div>
        <div className="marquee-track-wrap">
          <div className="track">
            {items.map((f, i) => (
              <div className="sample-card" key={i} onClick={() => setLightbox(f)} style={{cursor: 'pointer'}}>
                <span className="s-tag">{f.tag}</span>
                <img src={f.img} alt={f.name} style={f.objectPosition ? {objectPosition: f.objectPosition} : undefined}/>
                <div className="s-meta">
                  <span className="n">{f.name}</span>
                  <span>{f.meta}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {lightbox && (
        <div className="modal on sample-lightbox" onClick={() => setLightbox(null)}>
          <div className="lightbox-inner" onClick={(e) => e.stopPropagation()}>
            <div className="lightbox-head">
              <span className="lightbox-tag">FIG_{lightbox.tag} · {lightbox.name}</span>
              <span className="close" onClick={() => setLightbox(null)}>CLOSE ×</span>
            </div>
            <div className="lightbox-imgwrap">
              <img src={lightbox.img} alt={lightbox.name} />
            </div>
            <div className="lightbox-foot">
              <span>{lightbox.meta}</span>
              <span>QWEN-EDIT-2511 · ACTION LORA</span>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

Object.assign(window, { SampleStrip });