/* global React */
// frames.jsx — animated cinematic "film still" placeholders.
// Pure CSS/SVG gradients with grain — no hand-drawn imagery.
// Each Frame takes a `tone` (color-grade) and renders a moving abstract still.

const { useEffect, useRef } = React;

function Frame({ tone = 'dusk', label, motion = true }) {
  const palettes = {
    dusk:    ['#3b1d2e', '#7a2e3d', '#d68a5a', '#f1c98a'],
    blue:    ['#0a1426', '#1a3656', '#3a6e9c', '#9bc0e0'],
    ember:   ['#160a08', '#3a1408', '#7a2a14', '#d96a3a'],
    void:    ['#070707', '#181818', '#2a2a2a', '#5a5a5a'],
    desert:  ['#2a1812', '#6e3a22', '#c97a3a', '#f0c277'],
    neon:    ['#0a0418', '#2a1454', '#6a2ec0', '#f06ed8'],
    forest:  ['#08120c', '#1a3a26', '#3a6e44', '#9ec48a'],
    pale:    ['#1a1a1a', '#3a3a38', '#8a857a', '#dcd6c8'],
  }[tone] || ['#1a1a1a','#333','#666','#aaa'];

  const id = useRef('grad-' + Math.random().toString(36).slice(2, 9)).current;

  return (
    <div className="thumb-inner frame-host">
      <svg viewBox="0 0 800 500" preserveAspectRatio="xMidYMid slice"
           style={{ position:'absolute', inset:0, width:'100%', height:'100%' }}>
        <defs>
          <radialGradient id={id+'a'} cx="35%" cy="60%" r="80%">
            <stop offset="0%"   stopColor={palettes[3]} stopOpacity="0.95"/>
            <stop offset="35%"  stopColor={palettes[2]} stopOpacity="0.9"/>
            <stop offset="75%"  stopColor={palettes[1]} stopOpacity="0.95"/>
            <stop offset="100%" stopColor={palettes[0]} stopOpacity="1"/>
          </radialGradient>
          <linearGradient id={id+'b'} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%"   stopColor={palettes[0]} stopOpacity="0.0"/>
            <stop offset="60%"  stopColor={palettes[0]} stopOpacity="0.0"/>
            <stop offset="100%" stopColor="#000" stopOpacity="0.85"/>
          </linearGradient>
          <linearGradient id={id+'c'} x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%"   stopColor="#000" stopOpacity="0.6"/>
            <stop offset="50%"  stopColor="#000" stopOpacity="0.0"/>
            <stop offset="100%" stopColor="#000" stopOpacity="0.5"/>
          </linearGradient>
          <filter id={id+'blur'}>
            <feGaussianBlur stdDeviation="22"/>
          </filter>
        </defs>

        <rect width="800" height="500" fill={palettes[0]}/>

        {/* moving abstract orbs */}
        <g filter={`url(#${id}blur)`}>
          <circle r="180" fill={palettes[3]} opacity=".55">
            {motion && <animate attributeName="cx" values="200;520;240;200" dur="14s" repeatCount="indefinite"/>}
            {motion && <animate attributeName="cy" values="220;180;320;220" dur="17s" repeatCount="indefinite"/>}
            {!motion && <animate attributeName="cx" values="280" dur="1s" repeatCount="indefinite"/>}
          </circle>
          <circle r="220" fill={palettes[2]} opacity=".55">
            {motion && <animate attributeName="cx" values="600;320;620;600" dur="19s" repeatCount="indefinite"/>}
            {motion && <animate attributeName="cy" values="320;260;380;320" dur="13s" repeatCount="indefinite"/>}
          </circle>
          <circle r="260" fill={palettes[1]} opacity=".7">
            {motion && <animate attributeName="cx" values="400;220;520;400" dur="22s" repeatCount="indefinite"/>}
            {motion && <animate attributeName="cy" values="500;420;560;500" dur="16s" repeatCount="indefinite"/>}
          </circle>
        </g>

        {/* horizon hint */}
        <rect x="0" y="320" width="800" height="1" fill={palettes[3]} opacity=".18"/>
        {/* color grade overlays */}
        <rect width="800" height="500" fill={`url(#${id}a)`} opacity=".4"/>
        <rect width="800" height="500" fill={`url(#${id}b)`}/>
        <rect width="800" height="500" fill={`url(#${id}c)`} opacity=".7"/>

        {/* film perforation marks */}
        <g opacity=".35" fontFamily="ui-monospace, monospace" fontSize="11" fill="#fff">
          <text x="14" y="22">▢ {label}</text>
          <text x="786" y="22" textAnchor="end">24fps</text>
          <text x="14" y="488">2.39:1</text>
          <text x="786" y="488" textAnchor="end">·   ·   ·</text>
        </g>
      </svg>

      {/* scanlines on hover */}
      <div className="frame-lines" />
    </div>
  );
}

// css for scanlines added via inline style block
if (!document.getElementById('frame-host-style')) {
  const s = document.createElement('style');
  s.id = 'frame-host-style';
  s.textContent = `
    .frame-host{ background:#000; }
    .frame-lines{
      position:absolute; inset:0; pointer-events:none;
      background: repeating-linear-gradient(0deg,
        rgba(255,255,255,0) 0px, rgba(255,255,255,0) 3px,
        rgba(255,255,255,.04) 4px, rgba(255,255,255,0) 5px);
      opacity:0; transition: opacity .5s ease;
    }
    .work-card:hover .frame-lines{ opacity:1; }
  `;
  document.head.appendChild(s);
}

window.Frame = Frame;