// Minimal hero — same interactive Bezier panel, simplified
const { useState, useEffect, useRef } = React;

const PRESETS = [
  { name: 'Ease',         p: [0.25, 0.10, 0.25, 1.00] },
  { name: 'Linear',       p: [0.00, 0.00, 1.00, 1.00] },
  { name: 'Ease Out',     p: [0.00, 0.00, 0.20, 1.00] },
  { name: 'Snap',         p: [0.85, 0.00, 0.15, 1.00] },
  { name: 'Overshoot',    p: [0.34, 1.56, 0.64, 1.00] },
  { name: 'Anticipate',   p: [0.60,-0.28, 0.74, 0.05] },
];

function bezierY(t, p1y, p2y) {
  const u = 1 - t;
  return 3*u*u*t*p1y + 3*u*t*t*p2y + t*t*t;
}
function solveT(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 HeroPanel() {
  const [pts, setPts] = useState([0.25, 0.10, 0.25, 1.00]);
  const [activePreset, setActivePreset] = useState('Ease');
  const [copied, setCopied] = useState(false);
  const svgRef = useRef(null);
  const dragRef = useRef(null);

  const W = 480, H = 480, PAD = 30;
  const sx = (x) => PAD + x * (W - 2*PAD);
  const sy = (y) => H - PAD - y * (H - 2*PAD);
  const ux = (px) => Math.max(0, Math.min(1, (px - PAD) / (W - 2*PAD)));
  const uy = (py) => Math.max(-0.6, Math.min(1.6, (H - PAD - py) / (H - 2*PAD)));

  const onDown = (which) => (e) => { e.preventDefault(); dragRef.current = which; };

  useEffect(() => {
    const onMove = (e) => {
      if (!dragRef.current || !svgRef.current) return;
      const r = svgRef.current.getBoundingClientRect();
      const cx = e.touches ? e.touches[0].clientX : e.clientX;
      const cy = e.touches ? e.touches[0].clientY : e.clientY;
      const px = ((cx - r.left) / r.width) * W;
      const py = ((cy - r.top) / r.height) * H;
      const x = ux(px), y = uy(py);
      setPts((cur) => {
        const n = [...cur];
        if (dragRef.current === 'p1') { n[0]=x; n[1]=y; }
        if (dragRef.current === 'p2') { n[2]=x; n[3]=y; }
        return n;
      });
      setActivePreset(null);
    };
    const onUp = () => { dragRef.current = null; };
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mouseup', onUp);
    window.addEventListener('touchmove', onMove, { passive: false });
    window.addEventListener('touchend', onUp);
    return () => {
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('mouseup', onUp);
      window.removeEventListener('touchmove', onMove);
      window.removeEventListener('touchend', onUp);
    };
  }, []);

  const [p1x, p1y, p2x, p2y] = pts;
  const cssVal = `cubic-bezier(${p1x.toFixed(2)}, ${p1y.toFixed(2)}, ${p2x.toFixed(2)}, ${p2y.toFixed(2)})`;
  const path = `M ${sx(0)} ${sy(0)} C ${sx(p1x)} ${sy(p1y)}, ${sx(p2x)} ${sy(p2y)}, ${sx(1)} ${sy(1)}`;

  const [tick, setTick] = useState(0);
  useEffect(() => {
    let raf;
    const start = performance.now();
    const loop = (now) => { setTick(((now - start) / 2400) % 1); raf = requestAnimationFrame(loop); };
    raf = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(raf);
  }, []);
  const c = (tick * 2) % 2;
  const phase = c < 1 ? c : 1 - (c - 1);
  const tt = solveT(phase, p1x, p2x);
  const previewY = bezierY(tt, p1y, p2y);

  const copyVal = () => {
    navigator.clipboard?.writeText(cssVal);
    setCopied(true);
    setTimeout(() => setCopied(false), 1400);
  };

  return (
    <div className="panel">
      <div className="panel-bar">
        <div className="panel-title">
          <span className="glyph">^</span>
          <span>PRO MOTION CURVES</span>
          <span className="pill">cubic</span>
        </div>
        <div style={{display: 'flex', gap: 6, alignItems: 'center', fontFamily: 'var(--mono)', fontSize: 11, color: '#5c676b'}}>
          <span style={{display: 'inline-block', width: 6, height: 6, borderRadius: '50%', background: '#a3ff3c', boxShadow: '0 0 6px #a3ff3c'}}></span>
          live
        </div>
      </div>

      <div className="panel-body">
        <div style={{display: 'grid', gridTemplateColumns: '1fr 0.85fr', gap: 16}}>
          <div>
            <div className="canvas-wrap">
              <span className="axis-label tl">1.0</span>
              <span className="axis-label bl">0.0</span>
              <button className="star-btn" title="Favorite">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><polygon points="12 2 15 9 22 10 17 15 18 22 12 19 6 22 7 15 2 10 9 9 12 2"/></svg>
              </button>
              <svg ref={svgRef} viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none">
                <g stroke="rgba(255,255,255,0.05)" strokeWidth="1">
                  {[0.25, 0.5, 0.75].map(v => (
                    <React.Fragment key={'g'+v}>
                      <line x1={sx(0)} y1={sy(v)} x2={sx(1)} y2={sy(v)}/>
                      <line x1={sx(v)} y1={sy(0)} x2={sx(v)} y2={sy(1)}/>
                    </React.Fragment>
                  ))}
                </g>
                <rect x={sx(0)} y={sy(1)} width={W - 2*PAD} height={H - 2*PAD} fill="none" stroke="rgba(255,255,255,0.18)" strokeWidth="1"/>
                <line x1={sx(0)} y1={sy(0)} x2={sx(1)} y2={sy(1)} stroke="rgba(255,255,255,0.12)" strokeWidth="1" strokeDasharray="3 4"/>
                <line x1={sx(0)} y1={sy(0)} x2={sx(p1x)} y2={sy(p1y)} stroke="#c8a4ff" strokeWidth="1.5" opacity="0.6"/>
                <line x1={sx(p2x)} y1={sy(p2y)} x2={sx(1)} y2={sy(1)} stroke="#ff9a3c" strokeWidth="1.5" opacity="0.6"/>
                <path d={path} fill="none" stroke="#a3ff3c" strokeWidth="6" opacity="0.18" strokeLinecap="round"/>
                <path d={path} fill="none" stroke="#a3ff3c" strokeWidth="2.6" strokeLinecap="round"/>
                <circle cx={sx(0)} cy={sy(0)} r="5" fill="#0a0d0e" stroke="rgba(255,255,255,0.6)" strokeWidth="1.4"/>
                <circle cx={sx(1)} cy={sy(1)} r="5" fill="#0a0d0e" stroke="rgba(255,255,255,0.6)" strokeWidth="1.4"/>
                <circle cx={sx(p1x)} cy={sy(p1y)} r="9" fill="#c8a4ff" style={{cursor: 'grab', filter: 'drop-shadow(0 0 6px rgba(200,164,255,0.5))'}} onMouseDown={onDown('p1')} onTouchStart={onDown('p1')}/>
                <circle cx={sx(p2x)} cy={sy(p2y)} r="9" fill="#ff9a3c" style={{cursor: 'grab', filter: 'drop-shadow(0 0 6px rgba(255,154,60,0.5))'}} onMouseDown={onDown('p2')} onTouchStart={onDown('p2')}/>
                <circle cx={sx(phase)} cy={sy(previewY)} r="4" fill="#a3ff3c" opacity="0.85"/>
              </svg>
            </div>

            <div className="css-out">
              <div className="css-out-label">// CSS</div>
              <div className="css-out-box">{cssVal}</div>
            </div>

            <div className="actions">
              <button className="pbtn" onClick={copyVal}>
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></svg>
                {copied ? 'COPIED' : 'COPY'}
              </button>
              <button className="pbtn primary">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
                APPLY
              </button>
              <button className="pbtn">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><polyline points="3 7 8 12 3 17"/><path d="M21 12H8"/></svg>
                RESET
              </button>
            </div>
          </div>

          <div style={{padding: 14, border: '1px solid #1c2124', borderRadius: 10, background: '#14181a'}}>
            <div style={{fontFamily: 'var(--mono)', fontSize: 11, color: '#5c676b', letterSpacing: '0.02em', marginBottom: 12}}>// LIBRARY</div>
            <div style={{display: 'flex', flexDirection: 'column', gap: 6}}>
              {PRESETS.map((preset) => {
                const active = activePreset === preset.name;
                const [a,b,c2,d] = preset.p;
                const w = 60, h = 36, p = 4;
                const px = (x) => p + x * (w - 2*p);
                const py = (y) => h - p - y * (h - 2*p);
                const pd = `M ${px(0)} ${py(0)} C ${px(a)} ${py(b)}, ${px(c2)} ${py(d)}, ${px(1)} ${py(1)}`;
                return (
                  <div key={preset.name} onClick={() => { setPts([...preset.p]); setActivePreset(preset.name); }} style={{
                    display: 'flex', alignItems: 'center', gap: 10, padding: 8,
                    background: active ? 'rgba(163,255,60,0.08)' : 'rgba(255,255,255,0.02)',
                    border: `1px solid ${active ? 'rgba(163,255,60,0.4)' : '#1c2124'}`,
                    borderRadius: 7, cursor: 'pointer'
                  }}>
                    <div style={{width: w, height: h, background: '#0a0d0e', border: '1px solid #1c2124', borderRadius: 4, flexShrink: 0}}>
                      <svg viewBox={`0 0 ${w} ${h}`} width={w} height={h}>
                        <path d={pd} fill="none" stroke={active ? '#a3ff3c' : 'rgba(255,255,255,0.7)'} strokeWidth="1.5" strokeLinecap="round"/>
                      </svg>
                    </div>
                    <div style={{flex: 1, minWidth: 0}}>
                      <div style={{fontSize: 12, fontWeight: 500, color: active ? '#a3ff3c' : '#e8eef0'}}>{preset.name}</div>
                      <div style={{fontFamily: 'var(--mono)', fontSize: 10, color: '#5c676b'}}>
                        {preset.p.map(v => v.toFixed(2)).join(', ')}
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>

        <div className="preview-rail">
          <span className="label">// PREVIEW</span>
          <div className="preview-track">
            <div className="preview-dot" style={{left: `${phase * 100}%`}}></div>
          </div>
          <span style={{fontFamily: 'var(--mono)', fontSize: 11, color: '#5c676b'}}>{(phase * 100).toFixed(0)}%</span>
        </div>
      </div>
    </div>
  );
}

const heroRoot = ReactDOM.createRoot(document.getElementById('hero-panel'));
heroRoot.render(<HeroPanel />);