const { Icon, Button } = window.AIProductionStudioDesignSystem_16a811;
// 2. Breakdown grid — masonry with per-category hover anatomy + floating inspector
function PfTileUGC({ p, hot }) {
  return (
    <>
      {p.video ? <video src={p.video} poster={p.after} muted loop playsInline preload="metadata" ref={(v) => { if (!v) return; if (hot) v.play().catch(() => {}); else { v.pause(); v.currentTime = 0; } }} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', background: '#000' }} /> : <PfPlate disc="ai" src={p.after} label={p.after ? '' : 'Hover to play'} />}
      {p.vimeo && hot && <iframe title={p.title} src={`https://player.vimeo.com/video/${p.vimeo}?autoplay=1&muted=1&loop=1&controls=0&title=0&byline=0&portrait=0&dnt=1`} allow="autoplay; fullscreen; picture-in-picture" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0, pointerEvents: 'none', background: 'transparent' }} />}
      {p.alt && !p.video && <img src={p.alt} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: hot ? 1 : 0, transform: hot ? 'scale(1)' : 'scale(1.04)', transition: 'opacity var(--dur-slow) var(--ease-standard), transform 1.2s var(--ease-standard)' }} />}
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg,rgba(5,5,6,0) 30%,rgba(5,5,6,.85) 100%)', opacity: hot ? 1 : 0, transition: 'opacity var(--dur-base)' }} />
      <div style={{ position: 'absolute', left: 20, right: 20, bottom: 20, display: 'flex', flexDirection: 'column', gap: 6, opacity: hot ? 1 : 0, transform: hot ? 'none' : 'translateY(10px)', transition: 'all var(--dur-base) var(--ease-standard)' }}>
        <span className="u-display" style={{ fontSize: 'clamp(40px,4vw,60px)', lineHeight: 1, color: 'var(--white)', textShadow: `0 0 24px ${PF_GOLD}.45)` }}>{p.metric}</span>
        <span className="u-label" style={{ color: 'var(--mono-100)' }}>{p.metricLabel}</span>
        <span style={{ fontSize: 'var(--type-sm)', color: 'var(--mono-300)', marginTop: 4 }}>{p.note}</span>
      </div>
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: 2, background: 'rgba(255,255,255,.12)' }}>
        {hot && <div style={{ height: '100%', background: 'var(--white)', transformOrigin: '0 50%', animation: 'pf-fill 6s linear infinite' }} />}
      </div>
    </>
  );
}

// Full-window player for a clicked grid tile: video, Vimeo, or the final still
// Click-through layer build: each pass lands on top of the last, one by one
function PfLayerSteps({ item }) {
  const L = item.layers || [], S = item.layerSrc || [];
  const [k, setK] = React.useState(0);
  const [play, setPlay] = React.useState(true);
  React.useEffect(() => { if (!play) return; const t = setTimeout(() => setK((n) => (n + 1) % L.length), k === L.length - 1 ? 3200 : 1800); return () => clearTimeout(t); }, [k, play, L.length]);
  return (
    <>
      {S.map((src, i) => (
        <img key={src} src={src} alt={L[i]} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'contain', opacity: i <= k ? 1 : 0, transform: i === k ? 'scale(1)' : i < k ? 'scale(1)' : 'scale(1.03)', transition: 'opacity 600ms var(--ease-standard), transform 600ms var(--ease-standard)' }} />
      ))}
      <div style={{ position: 'absolute', left: 16, top: 14, padding: '6px 12px', borderRadius: 999, background: 'rgba(5,5,6,.7)', display: 'flex', gap: 10, alignItems: 'baseline', color: 'var(--white)' }}>
        <span className="u-mono" style={{ fontSize: 'var(--type-xs)', color: 'var(--mono-300)' }}>{String(k + 1).padStart(2, '0')} / {String(L.length).padStart(2, '0')}</span>
        <span className="u-label" style={{ color: 'var(--white)' }}>{L[k]}</span>
      </div>
      <div style={{ position: 'absolute', left: 16, right: 16, bottom: 14, display: 'flex', alignItems: 'center', gap: 10 }}>
        <button onClick={() => setPlay((p) => !p)} aria-label={play ? 'Pause' : 'Play'} style={{ width: 36, height: 36, borderRadius: '50%', border: '1px solid rgba(255,255,255,.3)', background: 'rgba(5,5,6,.7)', color: 'var(--white)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name={play ? 'pause' : 'play'} size={14} /></button>
        {L.map((name, i) => (
          <button key={name} onClick={() => { setK(i); setPlay(false); }} aria-label={'Show ' + name} style={{ flex: 1, height: 36, padding: 0, border: 0, background: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center' }}>
            <span style={{ display: 'block', width: '100%', height: 3, borderRadius: 2, background: i <= k ? 'var(--white)' : 'rgba(255,255,255,.25)', transition: 'background 400ms' }} />
          </button>
        ))}
      </div>
    </>
  );
}

function PfPlayer({ item, onClose }) {
  React.useEffect(() => { if (!item) return; const k = (e) => e.key === 'Escape' && onClose(); window.addEventListener('keydown', k); const o = document.body.style.overflow; document.body.style.overflow = 'hidden'; return () => { window.removeEventListener('keydown', k); document.body.style.overflow = o; }; }, [item]);
  if (!item) return null;
  const tall = item.ratio === '9 / 16';
  const r = item.layerSrc && item.ratio ? item.ratio : '16 / 9'; const rn = r.split('/').map(Number); const rv = rn[0] / rn[1];
  const box = tall ? { height: '90vh', aspectRatio: '9 / 16' } : { width: `min(96vw, calc(80vh * ${rv}))`, aspectRatio: r };
  return ReactDOM.createPortal(
    <div role="dialog" aria-modal="true" aria-label={item.title} onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 300, background: 'rgba(0,0,0,.94)', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 16, animation: 'pf-in var(--dur-base) var(--ease-standard)' }}>
      <div onClick={(e) => e.stopPropagation()} style={{ position: 'relative', ...box, maxWidth: '96vw', background: '#000' }}>
        {item.layerSrc && item.layers ? (
          <PfLayerSteps item={item} />
        ) : item.vimeo ? (
          <iframe title={item.title} src={`https://player.vimeo.com/video/${item.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 }} />
        ) : item.video ? (
          <video src={item.video} poster={item.after} autoPlay controls playsInline style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'contain', background: '#000' }} />
        ) : (
          <img src={item.after || item.before} alt={item.title} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'contain' }} />
        )}
      </div>
      <div onClick={(e) => e.stopPropagation()} style={{ display: 'flex', gap: 12, alignItems: 'baseline', color: 'var(--white)' }}>
        <span className="u-display" style={{ fontSize: 'var(--type-h3)' }}>{item.title}</span>
        <span className="u-label" style={{ color: 'var(--mono-300)' }}>{item.meta}</span>
      </div>
      <button onClick={onClose} aria-label="Close player" style={{ position: 'absolute', top: 20, right: 20, width: 48, height: 48, borderRadius: '50%', cursor: 'pointer', color: 'var(--white)', border: '1px solid rgba(255,255,255,.3)', background: 'rgba(20,20,22,.7)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="x" size={20} /></button>
    </div>,
    document.body
  );
}

function PfTileWipe({ p, hot }) {
  const [bad, setBad] = React.useState(false);
  if (p.video && bad) return (
    <>
      <PfPlate kind="raw" label="Rig removal" />
      <span className="u-label" style={{ position: 'absolute', top: 12, right: 14, color: 'var(--mono-200)' }}>Video coming soon</span>
    </>
  );
  if (p.video) return (
    <>
      <video onError={() => setBad(true)} src={p.video} poster={p.after} muted loop playsInline preload="metadata" ref={(v) => { if (!v) return; if (hot) v.play().catch(() => {}); else { v.pause(); v.currentTime = 0.1; } }} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', background: '#000' }} />
      <span className="u-label" style={{ position: 'absolute', left: 14, bottom: 12, color: 'var(--mono-200)', opacity: hot ? 0 : 1, transition: 'opacity var(--dur-base)' }}>Hover to play</span>
      <span className="u-label" style={{ position: 'absolute', top: 12, right: 14, color: 'var(--mono-200)', opacity: hot ? 1 : 0, transition: 'opacity var(--dur-base)' }}>Before → After</span>
    </>
  );
  return (
    <>
      <PfPlate kind="raw" gate={p.gate} fit={p.fit} src={p.before} label={p.labels ? p.labels[0] : p.before ? 'Input' : undefined} />
      <div key={hot ? 'h' : 'r'} style={{ position: 'absolute', inset: 0, clipPath: 'inset(0 100% 0 0)', animation: hot ? 'pf-wipe 2.4s var(--ease-standard) forwards' : 'none' }}><PfPlate kind="final" gate={p.gate} fit={p.fit} src={p.after} label={p.labels ? p.labels[1] : p.before ? 'Output' : 'Final comp'} /></div>
      {hot && <div key="line" style={{ position: 'absolute', top: p.gate ? '22%' : 0, bottom: p.gate ? '22%' : 0, width: 2, marginLeft: -1, background: 'var(--white)', boxShadow: `0 0 14px ${PF_BLUE}.9)`, animation: 'pf-wipe-line 2.4s var(--ease-standard) forwards' }} />}
      <span className="u-label" style={{ position: 'absolute', top: 12, right: 14, color: 'var(--mono-200)', opacity: hot ? 1 : 0, transition: 'opacity var(--dur-base)' }}>{p.labels ? p.labels.join(' → ') : p.before ? 'Input → Output' : 'Raw → Final'}</span>
    </>
  );
}

function PfTileBeauty({ p, hot }) {
  if (p.video) return <PfTileWipe p={p} hot={hot} />;
  const [spot, setSpot] = React.useState(false);
  const [pt, setPt] = React.useState({ x: 50, y: 42 });
  return (
    <div onMouseMove={(e) => { const r = e.currentTarget.getBoundingClientRect(); setPt({ x: ((e.clientX - r.left) / r.width) * 100, y: ((e.clientY - r.top) / r.height) * 100 }); }} style={{ position: 'absolute', inset: 0 }}>
      <PfPlate kind="final" src={p.after} label="Retouched" />
      <div style={{ position: 'absolute', inset: 0, opacity: spot ? 1 : 0, transition: 'opacity var(--dur-base)', WebkitMaskImage: `radial-gradient(circle 90px at ${pt.x}% ${pt.y}%,#000 60%,transparent 100%)`, maskImage: `radial-gradient(circle 90px at ${pt.x}% ${pt.y}%,#000 60%,transparent 100%)` }}>
        <PfPlate kind="before" src={p.before} label="Before" />
        {[[30, 30], [58, 40], [44, 56], [66, 62], [38, 72], [52, 24]].map(([x, y], i) => <span key={i} style={{ position: 'absolute', left: x + '%', top: y + '%', width: 10, height: 10, borderRadius: '50%', border: `1px solid ${PF_BLUE}1)` }} />)}
      </div>
      <button onClick={(e) => { e.stopPropagation(); setSpot((s) => !s); }} aria-pressed={spot}
        style={{ position: 'absolute', top: 12, right: 12, display: 'flex', alignItems: 'center', gap: 10, padding: '6px 8px 6px 12px', borderRadius: 999, border: '1px solid rgba(255,255,255,.24)', background: 'rgba(5,5,6,.5)', backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)', color: 'var(--white)', cursor: 'pointer', fontSize: 'var(--type-xs)', letterSpacing: '.06em', textTransform: 'uppercase', opacity: hot || spot ? 1 : .7 }}>
        Spotlight
        <span style={{ position: 'relative', width: 30, height: 18, borderRadius: 999, background: spot ? 'var(--white)' : 'rgba(255,255,255,.2)', transition: 'background var(--dur-fast)' }}>
          <span style={{ position: 'absolute', top: 2, left: spot ? 14 : 2, width: 14, height: 14, borderRadius: '50%', background: spot ? 'var(--mono-950)' : 'var(--white)', transition: 'left var(--dur-fast) var(--ease-standard)' }} />
        </span>
      </button>
    </div>
  );
}

function PfTileExplode({ p, hot }) {
  if (p.video) return <PfTileWipe p={p} hot={hot} />;
  const L = p.layers || [];
  return (
    <div style={{ position: 'absolute', inset: 0, perspective: 1200, background: 'var(--mono-950)' }}>
      <div style={{ position: 'absolute', inset: 0, transformStyle: 'preserve-3d', transition: 'transform 700ms var(--ease-standard)', transform: hot ? 'rotateX(56deg) rotateZ(-32deg) scale(.62)' : 'none' }}>
        {L.map((name, i) => (
          <div key={name} style={{ position: 'absolute', inset: 0, transformStyle: 'preserve-3d', transition: 'transform 700ms var(--ease-standard), opacity 700ms', transform: hot ? `translateZ(${(i - (L.length - 1) / 2) * 70}px)` : 'none', border: hot ? '1px solid rgba(255,255,255,.4)' : 'none', background: i === L.length - 1 ? 'linear-gradient(150deg,#2B2B2F,#101012)' : `rgba(${60 + i * 30},${60 + i * 30},${66 + i * 30},${hot ? .5 : 0})`, opacity: hot || i === L.length - 1 ? 1 : 0, overflow: 'hidden', boxShadow: hot && p.layerSrc ? '0 10px 30px rgba(0,0,0,.5)' : 'none' }}>
            {p.layerSrc ? <img src={p.layerSrc[i]} alt={name} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} /> : i === L.length - 1 && (p.after ? <PfPlate src={p.after} label="Final comp" /> : <PfMotif disc="vfx" strength={.6} />)}
            <span className="u-label" style={{ position: 'absolute', left: 12, top: 10, color: 'var(--white)', opacity: hot ? 1 : 0, transition: 'opacity var(--dur-base)' }}>{String(i + 1).padStart(2, '0')} {name}</span>
          </div>
        ))}
      </div>
      <span className="u-label" style={{ position: 'absolute', left: 14, bottom: 12, color: 'var(--mono-400)', opacity: hot ? 0 : 1 }}>Final comp</span>
    </div>
  );
}

const PF_TILE = { ugc: PfTileUGC, cleanup: PfTileWipe, beauty: PfTileBeauty, comp: PfTileExplode };

function PfGrid({ disc, cat, setDisc, setCat }) {
  const [hot, setHot] = React.useState(null);
  const [full, setFull] = React.useState(null);
  const insp = React.useRef(null);
  const items = PF_PROJECTS.filter((p) => (!disc || PF_CATS[p.cat].disc === disc) && (!cat || p.cat === cat));
  const hp = PF_PROJECTS.find((p) => p.id === hot);
  const move = (e) => { if (insp.current) insp.current.style.transform = `translate(${e.clientX + 22}px,${e.clientY + 22}px)`; };
  const ROW = ['p10', 'p2', 'p11'];
  const row = ROW.map((id) => items.find((p) => p.id === id)).filter(Boolean);
  const rest = items.filter((p) => !ROW.includes(p.id));
  const tile = (p, ratio) => {
    const T = PF_TILE[p.cat];
    return (
      <figure key={p.id} data-gold onClick={() => setFull(p)} onMouseEnter={() => setHot(p.id)} onMouseLeave={() => setHot(null)} style={{ margin: ratio ? 0 : '0 0 var(--gutter)', breakInside: 'avoid', cursor: 'pointer', animation: 'pf-in var(--dur-slow) var(--ease-standard)' }}>
        <div style={{ position: 'relative', aspectRatio: ratio || p.ratio, borderRadius: 'var(--radius-lg)', overflow: 'hidden', border: '1px solid rgba(255,255,255,.06)', background: 'var(--mono-900)', 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)' }}>
          <T p={p} hot={hot === p.id} />
        </div>
        <figcaption style={{ position: 'relative', zIndex: 1, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 12, marginTop: 'var(--space-8)' }}>
          <span className="u-display" style={{ fontSize: 'var(--type-h3)', color: 'var(--white)' }}>{p.title}</span>
          <span className="u-label" style={{ textAlign: 'right', color: 'var(--mono-200)' }}>{p.meta}</span>
        </figcaption>
      </figure>
    );
  };
  const chip = (on) => ({ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '8px 16px', borderRadius: 999, cursor: 'pointer', fontSize: 'var(--type-sm)', border: '1px solid ' + (on ? 'var(--white)' : 'var(--line-strong)'), background: on ? 'var(--white)' : 'transparent', color: on ? 'var(--mono-950)' : 'var(--mono-200)', transition: 'all var(--dur-fast)' });
  return (
    <section id="pf-grid" onMouseMove={move} style={{ maxWidth: 'var(--page-max)', margin: '0 auto', padding: 'var(--section-y) var(--page-pad)' }}>
      <div style={{ 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">The breakdown grid</span>
          <h2 className="u-display" style={{ fontSize: 'var(--type-d3)', maxWidth: '18ch' }}>{disc ? PF_DISC[disc].label : 'Every shot, taken apart'}</h2>
        </div>
        <div style={{ display: 'flex', gap: 'var(--space-2)', flexWrap: 'wrap' }}>
          {[[null, 'All'], ['ai', 'AI Video'], ['vfx', 'VFX']].map(([d, l]) => <button key={l} style={chip(disc === d && !cat)} onClick={() => { setDisc(d); setCat(null); }}>{l}</button>)}
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(200px,1fr))', gap: 'var(--space-2)', marginBottom: 'var(--space-10)', borderTop: '1px solid var(--line-hairline)', paddingTop: 'var(--space-5)' }}>
        {Object.entries(PF_CATS).map(([k, c]) => (
          <button key={k} onClick={() => { setCat(cat === k ? null : k); setDisc(null); }} style={{ textAlign: 'left', background: 'none', border: 0, padding: '8px 0', cursor: 'pointer', display: 'flex', gap: 12, alignItems: 'flex-start', opacity: !cat || cat === k ? 1 : .45, transition: 'opacity var(--dur-fast)' }}>
            <Icon name={c.icon} size={16} color="var(--white)" />
            <span style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
              <span style={{ color: 'var(--white)', fontSize: 'var(--type-sm)', fontWeight: 500 }}>{c.label}</span>
              <span className="u-label" style={{ fontSize: 10 }}>{c.fx}</span>
            </span>
          </button>
        ))}
      </div>
      {row.length > 0 && (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(260px,1fr))', gap: 'var(--gutter)', marginBottom: 'var(--gutter)' }}>
          {row.map((p) => tile(p, '4 / 3'))}
        </div>
      )}
      <div style={{ columnCount: 3, columnGap: 'var(--gutter)' }} className="pf-masonry">
        {rest.map((p) => tile(p))}
      </div>
      <PfPlayer item={full} onClose={() => { setFull(null); setHot(null); }} />
      {/* floating inspector */}
      <div ref={insp} aria-hidden style={{ position: 'fixed', left: 0, top: 0, zIndex: 50, pointerEvents: 'none', transition: 'opacity var(--dur-fast)', opacity: hp ? 1 : 0 }}>
        <div style={{ padding: '8px 14px', borderRadius: 999, border: '1px solid rgba(255,255,255,.22)', background: 'rgba(5,5,6,.55)', backdropFilter: 'blur(12px) saturate(115%)', WebkitBackdropFilter: 'blur(12px) saturate(115%)', whiteSpace: 'nowrap' }}>
          <span className="u-label" style={{ fontSize: 11, color: 'var(--white)' }}>{hp ? hp.title : ''}</span>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PfGrid });