const { Icon, Button } = window.AIProductionStudioDesignSystem_16a811;
// 4. Infinite ribbon — film-strip timeline of micro case studies, drag / wheel / auto-scroll
const PF_TOOL_ICON = { 'Nuke': 'atom', 'After Effects': 'layers', 'Premiere Pro': 'film', 'Custom AI models': 'cpu', 'Houdini': 'box', 'Photoshop': 'image', 'Silhouette': 'spline', 'Mocha Pro': 'crosshair', 'SynthEyes': 'eye', 'Beauty Box': 'scan-face', 'DaVinci Resolve': 'palette' };

function PfRibbon({ onOpen }) {
  const track = React.useRef(null);
  const st = React.useRef({ off: 0, drag: false, moved: 0, last: 0, hover: false, vel: 0 });
  React.useEffect(() => {
    let raf;
    const tick = () => {
      const s = st.current, el = track.current;
      if (el) {
        const w = el.scrollWidth / 2;
        if (!s.drag) { s.off += s.hover ? s.vel : .5 + s.vel; s.vel *= .92; }
        if (w) s.off = ((s.off % w) + w) % w;
        el.style.transform = `translate3d(${-s.off}px,0,0)`;
      }
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);
  const down = (e) => { const s = st.current; s.drag = true; s.moved = 0; s.last = e.clientX; e.currentTarget.setPointerCapture(e.pointerId); };
  const mv = (e) => { const s = st.current; if (!s.drag) return; const dx = e.clientX - s.last; s.last = e.clientX; s.off -= dx; s.moved += Math.abs(dx); s.vel = -dx * .6; };
  const up = () => { st.current.drag = false; };
  const wheel = (e) => { const d = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : 0; if (d) { st.current.off += d; } };
  const items = [...PF_CASES, ...PF_CASES];
  const holes = { height: 14, backgroundImage: 'linear-gradient(90deg,rgba(255,255,255,.16) 0 10px,transparent 10px 28px)', backgroundSize: '28px 6px', backgroundRepeat: 'repeat-x', backgroundPosition: '0 50%' };
  return (
    <section style={{ padding: 'var(--section-y) 0', overflow: 'hidden' }}>
      <div style={{ maxWidth: 'var(--page-max)', margin: '0 auto', padding: '0 var(--page-pad)', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 'var(--space-8)', flexWrap: 'wrap', marginBottom: 'var(--space-10)' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}>
          <span className="u-label">Tech blueprint</span>
          <h2 className="u-display" style={{ fontSize: 'var(--type-d3)', maxWidth: '20ch' }}>Brief, toolkit, deliverable</h2>
        </div>
        <span className="u-label" style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}><Icon name="move-horizontal" size={14} />Drag the timeline · click a clip</span>
      </div>
      <div onPointerDown={down} onPointerMove={mv} onPointerUp={up} onPointerCancel={up} onWheel={wheel}
        onMouseEnter={() => (st.current.hover = true)} onMouseLeave={() => { st.current.hover = false; up(); }}
        style={{ position: 'relative', background: '#141416', borderTop: '1px solid var(--line-hairline)', borderBottom: '1px solid var(--line-hairline)', cursor: 'grab', userSelect: 'none', touchAction: 'pan-y' }}>
        <div aria-hidden style={{ height: 22, borderBottom: '1px solid var(--line-hairline)', backgroundImage: 'linear-gradient(90deg,rgba(255,255,255,.28) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px)', backgroundSize: '120px 100%,24px 8px', backgroundRepeat: 'repeat-x', backgroundPosition: '0 0,0 100%' }} />
        <div aria-hidden style={holes} />
        <div ref={track} style={{ display: 'flex', gap: 16, padding: '12px 10px 34px', width: 'max-content', willChange: 'transform' }}>
          {items.map((c, i) => (
            <button key={i} data-gold onClick={() => { if (st.current.moved < 6) onOpen(c); }}
              style={{ flex: '0 0 auto', width: 320, background: 'none', border: 0, padding: 0, cursor: 'pointer', textAlign: 'left', color: 'var(--white)' }}>
              <div style={{ position: 'relative', aspectRatio: '16 / 9', borderRadius: 6, overflow: 'hidden', border: '1px solid rgba(255,255,255,.08)', boxShadow: '0 34px 70px -14px rgba(0,0,0,.95), 0 16px 30px -8px rgba(0,0,0,.85), 0 4px 10px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -2px 0 rgba(0,0,0,.7)' }}>
                {c.video ? <video src={c.video} poster={c.poster} muted loop playsInline preload="metadata" onMouseEnter={(e) => e.currentTarget.play().catch(() => {})} onMouseLeave={(e) => e.currentTarget.pause()} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', background: '#000', pointerEvents: 'auto' }} /> : c.poster ? <img src={c.poster} alt="" draggable={false} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} /> : <PfPlate disc="vfx" />}
                <span className="u-mono" style={{ position: 'absolute', left: 8, top: 6, fontSize: 10, color: 'var(--white)', padding: '2px 6px', borderRadius: 4, background: 'rgba(5,5,6,.6)', pointerEvents: 'none' }}>{c.tc}</span>
              </div>
              <div style={{ position: 'relative', zIndex: 1, display: 'flex', justifyContent: 'space-between', gap: 8, padding: '26px 2px 0' }}>
                <span style={{ fontSize: 'var(--type-sm)', fontWeight: 500 }}>{c.title}</span>
                <Icon name="arrow-up-right" size={14} color="var(--mono-400)" />
              </div>
            </button>
          ))}
        </div>
        <div aria-hidden style={{ ...holes, marginTop: 10 }} />
        <div aria-hidden style={{ position: 'absolute', left: '50%', top: 0, bottom: 0, width: 1, background: 'rgba(255,255,255,.7)', pointerEvents: 'none' }}>
          <span style={{ position: 'absolute', top: 0, left: -6, width: 13, height: 12, background: 'var(--white)', clipPath: 'polygon(0 0,100% 0,50% 100%)' }} />
        </div>
      </div>
    </section>
  );
}

function PfCaseWindow({ c }) {
  if (!c) return null;
  return (
    <div>
      <div style={{ position: 'relative', aspectRatio: '16 / 9', background: '#000', borderBottom: '1px solid var(--line-hairline)' }}>{c.vimeo ? <iframe key={c.id} title={c.title} src={`https://player.vimeo.com/video/${c.vimeo}?autoplay=1&title=0&byline=0&portrait=0&dnt=1`} allow="autoplay; fullscreen; picture-in-picture" allowFullScreen style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0 }} /> : c.video ? <video key={c.id} src={c.video} poster={c.poster} autoPlay muted loop controls playsInline style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'contain' }} /> : c.poster ? <img src={c.poster} alt={c.title} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'contain' }} /> : <PfPlate disc="vfx" />}</div>
      <div style={{ padding: 'var(--space-10)', display: 'flex', flexDirection: 'column', gap: 'var(--space-8)' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          <span className="u-label">{c.client}</span>
          <h3 className="u-display" style={{ fontSize: 'var(--type-d3)', color: 'var(--white)' }}>{c.title}</h3>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(220px,1fr))', gap: 'var(--space-8)', borderTop: '1px solid var(--line-hairline)', paddingTop: 'var(--space-6)' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
            <span className="u-label">The brief</span>
            <p style={{ fontSize: 'var(--type-md)', color: 'var(--mono-200)', textWrap: 'pretty' }}>{c.brief}</p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
            <span className="u-label">The toolkit</span>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {c.tools.map((t) => <span key={t} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 'var(--type-sm)', color: 'var(--white)' }}><span style={{ width: 28, height: 28, borderRadius: 8, border: '1px solid var(--line-strong)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name={PF_TOOL_ICON[t] || 'box'} size={14} /></span>{t}</span>)}
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
            <span className="u-label">The deliverable</span>
            <p style={{ fontSize: 'var(--type-sm)', color: 'var(--mono-300)' }}>Sample available on request.</p>
            <div><Button variant="primary" iconLeft="download" onClick={(e) => e.preventDefault()}>{c.file}</Button></div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PfRibbon, PfCaseWindow });