// Portfolio content. Placeholder projects; drop a `video` (or `before`/`after` image) on any entry to replace its plate.
const PF_GOLD = 'rgba(245,180,0,';   // derived from --logo-gold; only ever light, never a fill
const PF_BLUE = 'rgba(58,184,255,';  // --laser-blue; VFX tracking overlays only

const PF_DISC = {
  ai: { label: 'AI Video Production', sub: 'SaaS explainers · Product explainers · UGC' },
  vfx: { label: 'Precision VFX', sub: 'Rotoscopy · Prep/Paint · Matchmove · Compositing' },
};
const PF_CATS = {
  ugc: { label: 'Explainers & UGC', disc: 'ai', fx: 'Hover play + analytics', icon: 'sparkles' },
  cleanup: { label: 'Roto & Prep/Paint', disc: 'vfx', fx: 'Wipe slider', icon: 'eraser' },
  beauty: { label: 'Beauty Fix', disc: 'vfx', fx: 'Spotlight switch', icon: 'scan-face' },
  comp: { label: 'Master Compositing', disc: 'vfx', fx: 'Layer explosion', icon: 'layers' },
};
const PF_PROJECTS = [
  { id: 'p10', cat: 'cleanup', title: 'Rotoscopy', meta: 'Hair detail · spline + matte', ratio: '4 / 5', before: 'assets/roto-comp.png', after: 'assets/roto-matte-v2.jpg', labels: ['Final comp', 'Matte output'], fit: 'contain', services: ['Rotoscopy', 'Hair detail', 'Matte'] },
  { id: 'p2', cat: 'cleanup', title: 'Wire removal', meta: 'Prep / Paint · wire cleanup', ratio: '16 / 9', before: 'assets/wire-removal-before.jpg', after: 'assets/wire-removal-after.jpg', video: 'assets/wire-removal-h264.mp4', services: ['Prep / Paint', 'Wire removal', 'Clean plate'] },
  { id: 'p11', cat: 'cleanup', title: 'Rig removal', meta: 'Prep / Paint · rig cleanup', ratio: '16 / 9', video: 'assets/rig-removal-h264.mp4', services: ['Rig removal', 'Prep / Paint', 'Clean plate'] },
  { id: 'p12', cat: 'comp', title: 'Set extension', meta: 'Compositing · environment build', ratio: '16 / 9', video: 'assets/set-extension-h264.mp4', services: ['Set extension', 'Compositing', 'Track / Matchmove'] },
  { id: 'p6', cat: 'comp', title: 'Marakkar', meta: 'Feature film · compositing', ratio: '16 / 9', after: 'assets/film-marakkar.jpg', video: 'assets/thuglife-comp-h264.mp4', services: ['Compositing', 'Rotoscopy', 'Track / Matchmove'] },
  { id: 'p4', cat: 'comp', title: 'Marakkar', meta: 'Feature film · layer breakdown', ratio: '1920 / 790', after: 'assets/marakkar-final.jpg', services: ['Compositing', 'Keying', 'Rotoscopy'], layers: ['BG plate', 'Dust element', 'FG bluescreen', 'Final comp'], layerSrc: ['assets/marakkar-bg.jpg', 'assets/marakkar-dust.jpg', 'assets/marakkar-fg.jpg', 'assets/marakkar-final.jpg'] },
  { id: 'p3', cat: 'beauty', title: 'Beauty fix', meta: 'Skin retouch · digital makeup', ratio: '16 / 9', video: 'assets/beauty-fix-redwipe-h264.mp4', services: ['Beauty fix', 'Prep / Paint', 'Compositing'] },
  { id: 'p7', cat: 'beauty', title: 'De-ageing', meta: 'Digital makeup · de-ageing', ratio: '16 / 9', video: 'assets/de-ageing-h264.mp4', services: ['Beauty fix', 'Rotoscopy', 'Compositing'] },
  { id: 'p1', cat: 'ugc', title: 'Temple jewellery', meta: 'UGC ad · 9:16', ratio: '9 / 16', after: 'assets/ugc-jewel-1.jpg', video: 'assets/ugc-jewel-h264.mp4', services: ['UGC', 'AI visuals', 'Edit'], metric: '+34%', metricLabel: 'Hook rate', note: 'Hybrid AI + manual cut' },
  { id: 'p5', cat: 'ugc', title: 'Orbit Audio', meta: 'Product explainer · 60s', ratio: '1 / 1', services: ['Product explainer', 'AI visuals', 'Motion design'], metric: '2.1×', metricLabel: 'ROAS', note: 'One film, 12 cutdowns' },
  { id: 'p9', cat: 'ugc', title: 'Kissflow – Explainer Video', meta: 'SaaS explainer', ratio: '16 / 9', after: 'assets/kissflow-thumb.png', vimeo: '1240356853', services: ['Explainer video', 'AI visuals', 'Motion design'], metric: 'Explainer', metricLabel: 'Hair & nail growth', note: 'AI visuals + hand-finished motion' },
  { id: 'p13', cat: 'ugc', title: 'GenQuest – Explainer Video', meta: 'How police find invisible fingerprints', ratio: '16 / 9', after: 'assets/genquest-fingerprints-thumb-v2.png', vimeo: '1241186724', services: ['Explainer video', 'AI visuals', 'Motion design'] },
];
const PF_CASES = [
  { id: 'c1', tc: '00:00:04:12', title: 'Rotoscopy', client: 'Hair-detail roto', poster: 'assets/roto-comp.png', brief: 'Edge-accurate mattes with fine hair detail, delivered as a matte pass for the comp team.', tools: ['Silhouette', 'Nuke'], file: 'EXR matte sequence' },
  { id: 'c2', tc: '00:00:41:20', title: 'Wire removal', client: 'Feature film', video: 'assets/wire-removal-h264.mp4', poster: 'assets/wire-removal-before.jpg', brief: 'Paint out safety wires frame by frame and rebuild the clean plate behind them.', tools: ['Nuke', 'Mocha Pro'], file: 'ProRes 4444 · clean plate' },
  { id: 'c3', tc: '00:01:18:03', title: 'Rig removal', client: 'Feature film', video: 'assets/rig-removal-h264.mp4', brief: 'Remove rigs and stands from the shot and restore the background.', tools: ['Nuke', 'Mocha Pro'], file: 'ProRes 4444 · clean plate' },
  { id: 'c4', tc: '00:02:09:08', title: 'Set extension', client: 'Compositing', video: 'assets/set-extension-h264.mp4', brief: 'Extend the practical set into a full environment, tracked to the camera move.', tools: ['Nuke', 'SynthEyes', 'Photoshop'], file: 'ProRes 4444 · final comp' },
  { id: 'c5', tc: '00:02:41:20', title: 'Beauty fix', client: 'Skin retouch · digital makeup', video: 'assets/beauty-fix-redwipe-h264.mp4', brief: 'Skin retouch and digital makeup that holds texture and pore detail.', tools: ['Nuke', 'Beauty Box', 'Silhouette'], file: 'ProRes 4444 · final' },
  { id: 'c6', tc: '00:03:33:15', title: 'Temple jewellery — UGC', client: 'UGC ad · 9:16', video: 'assets/ugc-jewel-h264.mp4', poster: 'assets/ugc-jewel-1.jpg', brief: 'A creator-style vertical ad for jewellery, built for paid social.', tools: ['Custom AI models', 'After Effects'], file: 'MP4 · 1080×1920' },
  { id: 'c7', tc: '00:04:02:01', title: 'Kissflow – Explainer Video', client: 'SaaS explainer', poster: 'assets/kissflow-thumb.png', vimeo: '1240356853', brief: 'An explainer that turns a single question into a clear, visual story.', tools: ['Custom AI models', 'After Effects'], file: 'MP4 · 1920×1080' },
  { id: 'c8', tc: '00:04:40:12', title: 'GenQuest – Explainer Video', client: 'How police find invisible fingerprints', poster: 'assets/genquest-fingerprints-thumb-v2.png', vimeo: '1241186724', brief: 'An explainer on how forensic teams reveal invisible fingerprints, told visually for a general audience.', tools: ['Custom AI models', 'After Effects'], file: 'MP4 · 1920×1080' },
];

// Background motif per discipline: organic gold bloom (AI) or sharp tracking grid (VFX)
function PfMotif({ disc, strength = 1 }) {
  if (disc === 'ai') return (
    <div aria-hidden style={{ position: 'absolute', inset: 0, opacity: strength, background: `radial-gradient(60% 70% at 30% 60%,${PF_GOLD}.30) 0%,${PF_GOLD}.08) 45%,rgba(0,0,0,0) 75%),radial-gradient(40% 50% at 78% 25%,${PF_GOLD}.14) 0%,rgba(0,0,0,0) 70%)` }} />
  );
  return (
    <div aria-hidden style={{ position: 'absolute', inset: 0, opacity: strength, backgroundImage: `linear-gradient(${PF_BLUE}.16) 1px,transparent 1px),linear-gradient(90deg,${PF_BLUE}.16) 1px,transparent 1px)`, backgroundSize: '48px 48px', backgroundPosition: 'center' }} />
  );
}

// Tracking-marker cross, used on raw plates and the gateway
function PfMarker({ x, y, color = 'rgba(255,255,255,.7)', size = 14 }) {
  return (
    <span aria-hidden style={{ position: 'absolute', left: x, top: y, width: size, height: size, transform: 'translate(-50%,-50%)' }}>
      <span style={{ position: 'absolute', left: '50%', top: 0, bottom: 0, width: 1, background: color }} />
      <span style={{ position: 'absolute', top: '50%', left: 0, right: 0, height: 1, background: color }} />
    </span>
  );
}

// A placeholder plate. kind: final | raw | before
function PfPlate({ kind = 'final', label, disc = 'vfx', src, gate, fit }) {
  const raw = kind !== 'final';
  return (
    <div style={{ position: 'absolute', inset: 0, background: raw ? '#3a3a3f' : 'linear-gradient(150deg,#2B2B2F 0%,#101012 70%)', overflow: 'hidden' }}>
      {src ? <img src={src} alt="" style={gate ? { position: 'absolute', left: 0, right: 0, top: '22%', bottom: '22%', width: '100%', height: '56%', objectFit: 'cover', background: '#000' } : { position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: fit || 'cover', background: fit ? '#000' : undefined }} /> : !raw && <PfMotif disc={disc} strength={.8} />}
      {raw && !src && [['18%', '22%'], ['72%', '30%'], ['40%', '64%'], ['84%', '78%'], ['24%', '84%']].map(([x, y], i) => <PfMarker key={i} x={x} y={y} />)}
      {raw && !src && <div aria-hidden style={{ position: 'absolute', left: '50%', top: 0, bottom: '30%', width: 2, background: 'rgba(255,255,255,.35)' }} />}
      {gate && <><div aria-hidden style={{ position: 'absolute', left: 0, right: 0, top: 0, height: '22%', background: '#000', borderBottom: '1px solid rgba(255,255,255,.12)' }} /><div aria-hidden style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: '22%', background: '#000', borderTop: '1px solid rgba(255,255,255,.12)' }} /></>}
      <span className="u-label" style={{ position: 'absolute', left: 14, bottom: gate ? 'calc(11% - 7px)' : 12, color: raw || gate ? 'rgba(255,255,255,.75)' : 'var(--mono-400)' }}>{label || (raw ? 'Raw plate' : 'Final')}</span>
    </div>
  );
}

Object.assign(window, { PF_GOLD, PF_BLUE, PF_DISC, PF_CATS, PF_PROJECTS, PF_CASES, PfMotif, PfMarker, PfPlate });