/* ColorGradingShowcase.jsx — curves + before/after split showcase */
(function () {
  'use strict';

  const CGS_DS = {
    bg:'#0f0f0f', panel:'#1a1a1a', surface:'#252525',
    border:'#2e2e2e', border2:'#333333',
    text:'#f5f5f5', dim:'#999999', muted:'#666666',
    accent:'#00FF00',
  };

  const LUTS = [
    { name:'Cinematic',    css:'contrast(1.12) saturate(0.85) hue-rotate(195deg) brightness(0.92)' },
    { name:'Teal & Orange',css:'saturate(1.3) hue-rotate(10deg) contrast(1.1)' },
    { name:'Vintage',      css:'sepia(0.35) contrast(0.95) brightness(0.92) saturate(0.8)' },
    { name:'Bleach',       css:'contrast(1.2) saturate(0.6) brightness(1.05)' },
    { name:'Cross Process',css:'saturate(1.8) hue-rotate(285deg) contrast(1.15) brightness(0.9)' },
    { name:'Neutral',      css:'none' },
  ];

  /* Catmull-Rom spline → SVG path string */
  function catmullRomPath(pts) {
    if (pts.length < 2) return '';
    const sorted = [...pts].sort((a,b) => a.x - b.x);
    if (sorted.length === 2) {
      return `M ${sorted[0].x},${sorted[0].y} L ${sorted[1].x},${sorted[1].y}`;
    }
    let d = `M ${sorted[0].x},${sorted[0].y}`;
    for (let i = 0; i < sorted.length - 1; i++) {
      const p0 = sorted[Math.max(i-1, 0)];
      const p1 = sorted[i];
      const p2 = sorted[i+1];
      const p3 = sorted[Math.min(i+2, sorted.length-1)];
      const cp1x = p1.x + (p2.x - p0.x) / 6;
      const cp1y = p1.y + (p2.y - p0.y) / 6;
      const cp2x = p2.x - (p3.x - p1.x) / 6;
      const cp2y = p2.y - (p3.y - p1.y) / 6;
      d += ` C ${cp1x},${cp1y} ${cp2x},${cp2y} ${p2.x},${p2.y}`;
    }
    return d;
  }

  /* Approximate CSS filter from master curve midpoint deviation */
  function curveToFilter(pts, saturation, temperature) {
    const sorted = [...pts].sort((a,b) => a.x - b.x);
    // Sample curve at x=128 (midtones) and x=192 (highlights)
    let mid = 128, high = 192;
    // Find enclosing segment for x=128
    for (let i = 0; i < sorted.length - 1; i++) {
      if (sorted[i].x <= 128 && sorted[i+1].x >= 128) {
        const t = (128 - sorted[i].x) / (sorted[i+1].x - sorted[i].x);
        mid = sorted[i].y + t * (sorted[i+1].y - sorted[i].y);
      }
      if (sorted[i].x <= 192 && sorted[i+1].x >= 192) {
        const t = (192 - sorted[i].x) / (sorted[i+1].x - sorted[i].x);
        high = sorted[i].y + t * (sorted[i+1].y - sorted[i].y);
      }
    }
    const brightness = (mid / 128).toFixed(2);
    const slope = (sorted[sorted.length-1].y - sorted[0].y) / 256;
    const contrast = Math.max(0.5, Math.min(2.0, slope)).toFixed(2);
    const sat = ((saturation + 100) / 100).toFixed(2);
    const hue = Math.round(temperature * 0.6);
    return `brightness(${brightness}) contrast(${contrast}) saturate(${sat}) hue-rotate(${hue}deg)`;
  }

  function LandscapeSVG({ filterCss }) {
    return (
      <svg viewBox="0 0 460 260" xmlns="http://www.w3.org/2000/svg"
        style={{ width:'100%', height:'100%', display:'block', filter: filterCss || 'none' }}>
        <defs>
          <linearGradient id="cgsky" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#1a3a6a"/>
            <stop offset="40%" stopColor="#3a7bd5"/>
            <stop offset="100%" stopColor="#87ceeb"/>
          </linearGradient>
          <linearGradient id="cgmtn" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#4a5a3a"/>
            <stop offset="100%" stopColor="#2a3a2a"/>
          </linearGradient>
          <linearGradient id="cgwater" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#2a5a8a"/>
            <stop offset="100%" stopColor="#1a3a5a"/>
          </linearGradient>
        </defs>
        {/* Sky */}
        <rect width="460" height="260" fill="url(#cgsky)"/>
        {/* Sun */}
        <circle cx="380" cy="55" r="32" fill="#ffd700" opacity="0.9"/>
        <circle cx="380" cy="55" r="44" fill="#ffaa00" opacity="0.2"/>
        {/* Clouds */}
        <ellipse cx="80" cy="45" rx="55" ry="18" fill="white" opacity="0.85"/>
        <ellipse cx="110" cy="35" rx="40" ry="14" fill="white" opacity="0.9"/>
        <ellipse cx="220" cy="60" rx="45" ry="14" fill="white" opacity="0.7"/>
        <ellipse cx="250" cy="50" rx="30" ry="10" fill="white" opacity="0.8"/>
        {/* Mountains back */}
        <polygon points="0,170 80,80 160,170" fill="#3a5a3a"/>
        <polygon points="100,170 200,60 300,170" fill="url(#cgmtn)"/>
        <polygon points="260,170 360,90 460,170" fill="#3a4a3a"/>
        {/* Mountain snow caps */}
        <polygon points="190,70 200,60 210,70 205,72 195,72" fill="white" opacity="0.9"/>
        <polygon points="350,100 360,90 370,100 365,102 355,102" fill="white" opacity="0.8"/>
        {/* Water / lake */}
        <ellipse cx="230" cy="195" rx="160" ry="25" fill="url(#cgwater)"/>
        {/* Ground/meadow */}
        <rect y="165" width="460" height="95" fill="#4a7a2a"/>
        <rect y="188" width="460" height="72" fill="#3a6a1a"/>
        {/* Trees foreground */}
        <rect x="30" y="148" width="8" height="30" fill="#3a2a0a"/>
        <polygon points="14,155 34,100 54,155" fill="#1a5a1a"/>
        <rect x="420" y="145" width="8" height="35" fill="#3a2a0a"/>
        <polygon points="404,152 424,95 444,152" fill="#2a5a1a"/>
        {/* House */}
        <rect x="175" y="145" width="40" height="30" fill="#8a6a4a"/>
        <polygon points="168,148 215,125 262,148" fill="#6a4a2a"/>
        <rect x="188" y="158" width="12" height="17" fill="#5a4a3a"/>
        <rect x="207" y="153" width="8" height="8" fill="#ffcc88" opacity="0.8"/>
        {/* Path */}
        <ellipse cx="230" cy="225" rx="45" ry="10" fill="#8a7a5a" opacity="0.6"/>
        {/* Person silhouette */}
        <circle cx="230" cy="195" r="4" fill="#2a1a0a"/>
        <rect x="228" y="199" width="4" height="10" fill="#3a2a1a"/>
      </svg>
    );
  }

  function ColorGradingShowcase({ scale = 1, style = {}, className = '' }) {
    const [tab, setTab]       = React.useState('Curves');
    const [channel, setChann] = React.useState('Master');
    const [splitX, setSplitX] = React.useState(230);
    const [dragging, setDrag] = React.useState(false);
    const [activeLUT, setLUT] = React.useState(null);
    const [saturation, setSat]= React.useState(0);    // -100 to +100
    const [temperature, setTemp]=React.useState(0);   // -50 to +50
    const [userDid, setUD]    = React.useState(false);
    const containerRef        = React.useRef(null);

    // Curve points per channel (in SVG 256×256 space, y is inverted — 0=top=white)
    const defaultPts = [{ id:0, x:0, y:256 },{ id:1, x:256, y:0 }];
    const [curves, setCurves] = React.useState({
      Master: defaultPts,
      R:      defaultPts,
      G:      defaultPts,
      B:      defaultPts,
    });
    const [dragPt, setDragPt] = React.useState(null);
    const nextId = React.useRef(10);
    const svgRef = React.useRef(null);

    const interact = () => { if (!userDid) setUD(true); };

    // Wheel state for the color wheels
    const [wheelDots, setWheelDots] = React.useState({ Shadows:[40,40], Midtones:[40,40], Highlights:[40,40] });

    /* ── Curve editor interactions ── */
    const svgCoords = e => {
      const r = svgRef.current.getBoundingClientRect();
      const x = Math.round(Math.min(256, Math.max(0, (e.clientX - r.left) / r.width * 256)));
      const y = Math.round(Math.min(256, Math.max(0, (e.clientY - r.top) / r.height * 256)));
      return { x, y };
    };

    const handleSvgDown = e => {
      interact();
      const { x, y } = svgCoords(e);
      // Check if clicking near an existing point
      const pts = curves[channel];
      const hit = pts.find(p => Math.abs(p.x - x) < 14 && Math.abs(p.y - y) < 14);
      if (hit) {
        setDragPt(hit.id);
        return;
      }
      // Add new point
      const newId = nextId.current++;
      setCurves(c => ({ ...c, [channel]: [...c[channel], { id:newId, x, y }] }));
      setDragPt(newId);
    };

    const handleSvgMove = e => {
      if (dragPt === null) return;
      const { x, y } = svgCoords(e);
      setCurves(c => ({
        ...c,
        [channel]: c[channel].map(p => p.id === dragPt ? { ...p, x, y } : p),
      }));
    };

    const handleSvgUp = () => setDragPt(null);

    /* ── Split handle drag ── */
    const splitRef = React.useRef(null);
    const splitDragging = React.useRef(false);

    const onSplitDown = e => {
      interact();
      splitDragging.current = true;
      e.preventDefault();
    };

    React.useEffect(() => {
      const onMove = e => {
        if (!splitDragging.current) return;
        const r = containerRef.current?.getBoundingClientRect();
        if (!r) return;
        const newX = Math.min(440, Math.max(20, e.clientX - r.left - 320)); // 320 = left panel width
        setSplitX(newX);
      };
      const onUp = () => { splitDragging.current = false; };
      window.addEventListener('pointermove', onMove);
      window.addEventListener('pointerup', onUp);
      return () => { window.removeEventListener('pointermove', onMove); window.removeEventListener('pointerup', onUp); };
    }, []);

    const currentPts   = curves[channel];
    const masterCss    = activeLUT ? LUTS.find(l => l.name === activeLUT)?.css || 'none'
                                   : curveToFilter(curves.Master, saturation, temperature);

    const chanColors   = { Master:'#fff', R:'#ff4444', G:'#44ff44', B:'#4488ff' };
    const chanColor    = chanColors[channel] || '#fff';

    return (
      <div ref={containerRef} onMouseDown={interact} className={className}
        style={{
          width:780, height:500, background:CGS_DS.bg, border:`1px solid ${CGS_DS.border}`,
          borderRadius:8, overflow:'hidden', display:'flex', flexDirection:'column',
          fontFamily:"'Inter',-apple-system,sans-serif",
          transform: scale !== 1 ? `scale(${scale})` : undefined, transformOrigin:'top left',
          ...style,
        }}>

        <div style={{ flex:1, display:'flex', overflow:'hidden' }}>

          {/* ── Left panel: grading controls ── */}
          <div style={{ width:320, background:CGS_DS.panel, borderRight:`1px solid ${CGS_DS.border}`, display:'flex', flexDirection:'column', flexShrink:0, overflow:'hidden' }}>

            {/* Tabs: Curves / Wheels / Scopes */}
            <div style={{ display:'flex', borderBottom:`1px solid ${CGS_DS.border}`, flexShrink:0 }}>
              {['Curves','Wheels','Scopes'].map(t => (
                <button key={t} onClick={() => { setTab(t); interact(); }}
                  style={{
                    flex:1, padding:'9px 0', background:'transparent', border:'none',
                    borderBottom: tab === t ? `2px solid ${CGS_DS.accent}` : '2px solid transparent',
                    color: tab === t ? CGS_DS.accent : CGS_DS.dim, fontSize:11, fontWeight: tab===t?700:400,
                    cursor:'pointer', fontFamily:'inherit', letterSpacing:0.5,
                  }}>
                  {t}
                </button>
              ))}
            </div>

            {/* ── CURVES TAB ── */}
            {tab === 'Curves' && (
              <div style={{ flex:1, overflow:'auto', padding:12 }}>
                {/* Channel tabs */}
                <div style={{ display:'flex', gap:4, marginBottom:8 }}>
                  {['Master','R','G','B'].map(ch => (
                    <button key={ch} onClick={() => { setChann(ch); interact(); }}
                      style={{
                        flex:1, padding:'4px 0', borderRadius:3, border:`1px solid ${channel===ch?chanColors[ch]:'#333'}`,
                        background: channel===ch ? chanColors[ch]+'22' : 'transparent',
                        color: channel===ch ? chanColors[ch] : CGS_DS.dim,
                        fontSize:10, fontWeight:700, cursor:'pointer', fontFamily:'inherit',
                      }}>
                      {ch}
                    </button>
                  ))}
                  <button onClick={() => { setCurves(c => ({...c, [channel]: defaultPts})); interact(); }}
                    style={{ padding:'4px 8px', borderRadius:3, border:'1px solid #333', background:'transparent', color:CGS_DS.dim, fontSize:10, cursor:'pointer', fontFamily:'inherit' }}>
                    Reset
                  </button>
                </div>

                {/* Curve SVG canvas */}
                <svg ref={svgRef} viewBox="0 0 256 256"
                  style={{ width:'100%', aspectRatio:'1', background:'#000', borderRadius:4, border:`1px solid ${CGS_DS.border}`, cursor: dragPt !== null ? 'grabbing' : 'crosshair', display:'block' }}
                  onPointerDown={handleSvgDown} onPointerMove={handleSvgMove} onPointerUp={handleSvgUp}>

                  {/* Grid */}
                  {[64,128,192].map(v => (
                    <React.Fragment key={v}>
                      <line x1={v} y1="0" x2={v} y2="256" stroke="#1e1e1e" strokeWidth="1"/>
                      <line x1="0" y1={v} x2="256" y2={v} stroke="#1e1e1e" strokeWidth="1"/>
                    </React.Fragment>
                  ))}
                  {/* Diagonal reference (identity) */}
                  <line x1="0" y1="256" x2="256" y2="0" stroke="#333" strokeWidth="1" strokeDasharray="4,4"/>

                  {/* Curve */}
                  <path d={catmullRomPath(currentPts)} fill="none" stroke={chanColor} strokeWidth="2" strokeLinecap="round"/>

                  {/* Control points */}
                  {currentPts.map(p => (
                    <circle key={p.id} cx={p.x} cy={p.y} r="5"
                      fill={chanColor} stroke="#000" strokeWidth="1.5"
                      style={{ cursor:'grab' }}
                    />
                  ))}
                </svg>

                {/* Sliders */}
                <div style={{ marginTop:10, display:'flex', flexDirection:'column', gap:8 }}>
                  {[
                    { label:'Saturation', val:saturation, set:setSat, min:-100, max:100 },
                    { label:'Temperature', val:temperature, set:setTemp, min:-50, max:50 },
                  ].map(({ label, val, set, min, max }) => (
                    <div key={label}>
                      <div style={{ display:'flex', justifyContent:'space-between', marginBottom:3 }}>
                        <span style={{ fontSize:10, color:CGS_DS.dim }}>{label}</span>
                        <span style={{ fontSize:10, color:CGS_DS.text, fontFamily:'monospace' }}>{val > 0 ? '+' : ''}{val}</span>
                      </div>
                      <input type="range" min={min} max={max} value={val}
                        onChange={e => { set(Number(e.target.value)); interact(); setLUT(null); }}
                        style={{ width:'100%', accentColor:CGS_DS.accent }}
                      />
                    </div>
                  ))}
                </div>
              </div>
            )}

            {/* ── WHEELS TAB ── */}
            {tab === 'Wheels' && (
              <div style={{ flex:1, overflow:'auto', padding:12 }}>
                <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:8 }}>
                  {['Shadows','Midtones','Highlights'].map((wname, wi) => {
                    const dot = wheelDots[wname];
                    const size = 82;
                    return (
                      <div key={wname} style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:6 }}>
                        <span style={{ fontSize:9, color:CGS_DS.dim, textTransform:'uppercase', letterSpacing:1 }}>{wname}</span>
                        <svg viewBox="0 0 82 82" style={{ width:size, height:size, cursor:'crosshair' }}
                          onPointerDown={e => {
                            interact();
                            const r = e.currentTarget.getBoundingClientRect();
                            const x = Math.round((e.clientX - r.left) / r.width * 82);
                            const y = Math.round((e.clientY - r.top) / r.height * 82);
                            setWheelDots(d => ({...d, [wname]: [x, y]}));
                          }}
                          onPointerMove={e => {
                            if (e.buttons !== 1) return;
                            const r = e.currentTarget.getBoundingClientRect();
                            const x = Math.min(80,Math.max(2,Math.round((e.clientX - r.left) / r.width * 82)));
                            const y = Math.min(80,Math.max(2,Math.round((e.clientY - r.top) / r.height * 82)));
                            setWheelDots(d => ({...d, [wname]: [x, y]}));
                          }}>
                          {/* Hue ring */}
                          <defs>
                            <radialGradient id={`wg${wi}`}>
                              <stop offset="0%" stopColor="white"/>
                              <stop offset="100%" stopColor="transparent"/>
                            </radialGradient>
                          </defs>
                          <circle cx="41" cy="41" r="40" fill={`url(#wg${wi})`}/>
                          {/* Hue segments */}
                          {Array.from({length:12},(_,i) => {
                            const a0 = (i/12)*360, a1 = ((i+1)/12)*360;
                            const r0=20, r1=40;
                            const a0r = a0*Math.PI/180, a1r = a1*Math.PI/180;
                            const x1=41+r1*Math.cos(a0r),y1=41+r1*Math.sin(a0r);
                            const x2=41+r1*Math.cos(a1r),y2=41+r1*Math.sin(a1r);
                            const x3=41+r0*Math.cos(a1r),y3=41+r0*Math.sin(a1r);
                            const x4=41+r0*Math.cos(a0r),y4=41+r0*Math.sin(a0r);
                            return <path key={i} d={`M${x1},${y1} A${r1},${r1} 0 0,1 ${x2},${y2} L${x3},${y3} A${r0},${r0} 0 0,0 ${x4},${y4}Z`} fill={`hsl(${a0},80%,55%)`} opacity="0.8"/>;
                          })}
                          <circle cx="41" cy="41" r="18" fill="#1a1a1a"/>
                          {/* Draggable dot */}
                          <circle cx={dot[0]} cy={dot[1]} r="5" fill={CGS_DS.accent} stroke="#000" strokeWidth="1.5"/>
                        </svg>
                        <input type="range" min="0" max="100" defaultValue="0"
                          style={{ width:'80%', accentColor:CGS_DS.accent }}
                          onChange={() => interact()}
                        />
                      </div>
                    );
                  })}
                </div>
                <div style={{ marginTop:12, display:'flex', flexDirection:'column', gap:8 }}>
                  {['Saturation','Hue'].map(lbl => (
                    <div key={lbl}>
                      <span style={{ fontSize:10, color:CGS_DS.dim, display:'block', marginBottom:3 }}>{lbl}</span>
                      <input type="range" min="-100" max="100" defaultValue="0" style={{ width:'100%', accentColor:CGS_DS.accent }} onChange={() => interact()}/>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {/* ── SCOPES TAB ── */}
            {tab === 'Scopes' && (
              <div style={{ flex:1, overflow:'auto', padding:12 }}>
                <div style={{ fontSize:9, color:CGS_DS.muted, letterSpacing:2, textTransform:'uppercase', marginBottom:6 }}>Waveform</div>
                <svg viewBox="0 0 280 100" style={{ width:'100%', background:'#000', borderRadius:4, border:`1px solid ${CGS_DS.border}`, display:'block', marginBottom:10 }}>
                  {/* Mock waveform */}
                  {Array.from({length:280},(_,x) => {
                    const h = 20 + Math.abs(Math.sin(x*0.12)*30 + Math.sin(x*0.07)*20 + Math.sin(x*0.25)*10);
                    return <line key={x} x1={x} y1={100} x2={x} y2={100-h} stroke={`rgba(0,255,0,${0.3+h/100*0.5})`} strokeWidth="1"/>;
                  })}
                  <line x1="0" y1="50" x2="280" y2="50" stroke="#333" strokeWidth="1" strokeDasharray="2,4"/>
                </svg>
                <div style={{ fontSize:9, color:CGS_DS.muted, letterSpacing:2, textTransform:'uppercase', marginBottom:6 }}>Vectorscope</div>
                <svg viewBox="0 0 140 140" style={{ width:'50%', background:'#000', borderRadius:4, border:`1px solid ${CGS_DS.border}`, display:'block' }}>
                  <circle cx="70" cy="70" r="68" fill="none" stroke="#1a1a1a" strokeWidth="1"/>
                  <circle cx="70" cy="70" r="48" fill="none" stroke="#111" strokeWidth="1"/>
                  <line x1="2" y1="70" x2="138" y2="70" stroke="#1a1a1a" strokeWidth="1"/>
                  <line x1="70" y1="2" x2="70" y2="138" stroke="#1a1a1a" strokeWidth="1"/>
                  {/* Mock chroma dots */}
                  {Array.from({length:60},(_,i) => {
                    const angle = (i/60)*Math.PI*2 + 0.8;
                    const r = 20 + Math.sin(i*0.7)*18 + Math.cos(i*0.3)*10;
                    const x = 70 + r * Math.cos(angle);
                    const y = 70 + r * Math.sin(angle);
                    return <circle key={i} cx={x} cy={y} r="1.5" fill={`hsl(${i*6+30},90%,65%)`} opacity="0.7"/>;
                  })}
                </svg>
              </div>
            )}

            {/* LUT presets */}
            <div style={{ padding:'8px 12px', borderTop:`1px solid ${CGS_DS.border}`, flexShrink:0 }}>
              <div style={{ fontSize:9, color:CGS_DS.muted, letterSpacing:2, textTransform:'uppercase', marginBottom:5 }}>LUT Presets</div>
              <div style={{ display:'flex', gap:4, overflowX:'auto' }}>
                {LUTS.map(l => (
                  <button key={l.name} onClick={() => { setLUT(activeLUT === l.name ? null : l.name); interact(); }}
                    style={{
                      padding:'4px 8px', borderRadius:4, border:`1px solid ${activeLUT===l.name?CGS_DS.accent:'#333'}`,
                      background: activeLUT===l.name ? CGS_DS.accent+'22' : 'transparent',
                      color: activeLUT===l.name ? CGS_DS.accent : CGS_DS.dim,
                      fontSize:10, cursor:'pointer', whiteSpace:'nowrap', fontFamily:'inherit',
                      boxShadow: activeLUT===l.name ? `0 0 8px rgba(0,255,0,0.3)` : 'none',
                      flexShrink:0,
                    }}>
                    {l.name}
                  </button>
                ))}
              </div>
            </div>
          </div>

          {/* ── Right panel: Before/After preview ── */}
          <div style={{ flex:1, position:'relative', overflow:'hidden', background:'#0a0a0a' }}>
            {/* Labels */}
            <div style={{ position:'absolute', top:8, left:10, fontSize:9, color:'rgba(255,255,255,0.5)', letterSpacing:2, textTransform:'uppercase', zIndex:5, fontWeight:700 }}>Before</div>
            <div style={{ position:'absolute', top:8, right:10, fontSize:9, color:CGS_DS.accent, letterSpacing:2, textTransform:'uppercase', zIndex:5, fontWeight:700 }}>After</div>

            {/* Before (left half) */}
            <div style={{ position:'absolute', inset:0, overflow:'hidden' }}>
              <LandscapeSVG filterCss={null}/>
            </div>

            {/* After (right half — clipped) */}
            <div style={{ position:'absolute', inset:0, overflow:'hidden', clipPath:`inset(0 0 0 ${splitX}px)` }}>
              <LandscapeSVG filterCss={masterCss}/>
            </div>

            {/* Split line */}
            <div style={{ position:'absolute', top:0, bottom:0, left:splitX, width:2, background:'rgba(255,255,255,0.8)', zIndex:4, pointerEvents:'none' }}/>

            {/* Drag handle */}
            <div
              onPointerDown={onSplitDown}
              style={{
                position:'absolute', top:'50%', left:splitX, transform:'translate(-50%, -50%)',
                width:28, height:28, borderRadius:99, background:'rgba(255,255,255,0.9)',
                border:'2px solid #ccc', cursor:'ew-resize', zIndex:5,
                display:'flex', alignItems:'center', justifyContent:'center',
                boxShadow:'0 2px 8px rgba(0,0,0,0.4)',
              }}>
              <span style={{ fontSize:12, color:'#333', userSelect:'none' }}>⇔</span>
            </div>
          </div>
        </div>
      </div>
    );
  }

  window.ColorGradingShowcase = ColorGradingShowcase;
})();