const TraceVideoClip = ({ src, caption, eyebrow }) => {
  const t = window.TRACE;
  const videoRef = React.useRef(null);

  React.useEffect(() => {
    const el = videoRef.current;
    if (!el) return;
    const tryPlay = () => el.play().catch(() => {});
    tryPlay();
    el.addEventListener('loadeddata', tryPlay);
    return () => el.removeEventListener('loadeddata', tryPlay);
  }, []);

  return (
    <section className="trace-clip" style={{
      padding: '40px 48px 100px', fontFamily: t.sans,
      display: 'flex', flexDirection: 'column', alignItems: 'center',
    }}>
      <div style={{
        width: '100%', maxWidth: 880, borderRadius: 16, overflow: 'hidden',
        border: `1px solid ${t.hair}`, boxShadow: '0 24px 80px rgba(0,0,0,0.10)',
        background: t.bg,
      }}>
        <video
          ref={videoRef}
          src={src}
          autoPlay muted loop playsInline
          style={{ display: 'block', width: '100%', height: 'auto' }}
        />
      </div>
      {(eyebrow || caption) && (
        <div style={{ marginTop: 24, textAlign: 'center', maxWidth: 560 }}>
          {eyebrow && <Eyebrow style={{ marginBottom: 8, justifyContent: 'center', display: 'flex' }}>{eyebrow}</Eyebrow>}
          {caption && (
            <div style={{ fontFamily: t.serif, fontSize: 22, color: t.ink, fontStyle: 'italic' }}>
              {caption}
            </div>
          )}
        </div>
      )}
    </section>
  );
};

window.TraceVideoClip = TraceVideoClip;