// Minimal preset grid — light theme cards, animated curves
const { useState: useS, useEffect: useE } = React;

const PRESET_GRID = [
  { name: 'Smooth',     p: [0.45, 0.05, 0.55, 0.95] },
  { name: 'Snappy',     p: [0.85, 0.00, 0.15, 1.00] },
  { name: 'UI',         p: [0.40, 0.00, 0.20, 1.00] },
  { name: 'Cinematic',  p: [0.65, 0.05, 0.36, 1.00] },
  { name: 'Overshoot',  p: [0.34, 1.56, 0.64, 1.00] },
  { name: 'Anticipate', p: [0.60,-0.28, 0.74, 0.05] },
  { name: 'Spring',     p: [0.50,-0.50, 0.50, 1.50] },
  { name: 'Pop',        p: [0.20, 1.10, 0.40, 1.00] },
  { name: 'Heavy',      p: [0.95, 0.05, 0.80, 1.00] },
  { name: 'Light',      p: [0.10, 0.40, 0.30, 1.00] },
  { name: 'Precision',  p: [0.50, 0.00, 0.50, 1.00] },
  { name: 'Decel',      p: [0.00, 0.00, 0.20, 1.00] },
];

function bz(t, p1y, p2y) {
  const u = 1 - t;
  return 3*u*u*t*p1y + 3*u*t*t*p2y + t*t*t;
}
function solveTx(x, p1x, p2x) {
  let t = x;
  for (let i = 0; i < 8; i++) {
    const u = 1 - t;
    const fx = 3*u*u*t*p1x + 3*u*t*t*p2x + t*t*t - x;
    const dfx = 3*u*u*p1x + 6*u*t*(p2x-p1x) + 3*t*t*(1-p2x);
    if (Math.abs(dfx) < 1e-6) break;
    t -= fx/dfx; t = Math.max(0, Math.min(1, t));
  }
  return t;
}

function PresetMini({ p, hovered }) {
  const [tick, setTick] = useS(0);
  useE(() => {
    let raf;
    const start = performance.now();
    const loop = (now) => { setTick(((now - start) / 1800) % 1); raf = requestAnimationFrame(loop); };
    raf = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(raf);
  }, []);
  const W = 200, H = 140, PAD = 14;
  const sx = (x) => PAD + x * (W - 2*PAD);
  const sy = (y) => H - PAD - y * (H - 2*PAD - 40) - 18;
  const [p1x,p1y,p2x,p2y] = p;
  const path = `M ${sx(0)} ${sy(0)} C ${sx(p1x)} ${sy(p1y)}, ${sx(p2x)} ${sy(p2y)}, ${sx(1)} ${sy(1)}`;
  const c = (tick * 2) % 2;
  const phase = c < 1 ? c : 1 - (c - 1);
  const tt = solveTx(phase, p1x, p2x);
  const yy = bz(tt, p1y, p2y);
  return (
    <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none">
      <line x1={sx(0)} y1={sy(0)} x2={sx(1)} y2={sy(1)} stroke="rgba(0,0,0,0.08)" strokeWidth="1" strokeDasharray="2 3"/>
      <path d={path} fill="none" stroke={hovered ? '#0a0b0a' : '#1a1c1a'} strokeWidth={hovered ? 2 : 1.4} strokeLinecap="round"/>
      <circle cx={sx(phase)} cy={sy(yy)} r="3" fill="#1a1c1a"/>
    </svg>
  );
}

function PresetCard({ preset }) {
  const [h, setH] = useS(false);
  return (
    <div className="preset" onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}>
      <PresetMini p={preset.p} hovered={h}/>
      <div>
        <div className="preset-name">{preset.name}</div>
        <div className="preset-vals">{preset.p.map(v => v.toFixed(2)).join(', ')}</div>
      </div>
    </div>
  );
}

function PresetGrid() {
  return (
    <div className="preset-grid">
      {PRESET_GRID.map((p, i) => <PresetCard key={i} preset={p}/>)}
    </div>
  );
}

const presetRoot = ReactDOM.createRoot(document.getElementById('preset-grid'));
presetRoot.render(<PresetGrid />);