// Performance section — 120Hz vs 60Hz comparison
const FrameLine = ({ hz, color }) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const ctx = el.getContext("2d");
    const w = el.width = el.clientWidth * 2;
    const h = el.height = el.clientHeight * 2;
    let raf;
    let t0 = performance.now();
    const isLow = hz <= 60;

    const draw = (now) => {
      const t = (now - t0) / 1000;
      ctx.clearRect(0, 0, w, h);

      const dur = 4;
      // 60Hz lags behind the analog truth; 120Hz tracks instantly
      const lag = isLow ? 0.32 : 0;

      // analog truth (dashed ghost) — the "perfect" hand motion
      ctx.beginPath();
      ctx.strokeStyle = "oklch(0.85 0.005 280 / 0.4)";
      ctx.lineWidth = 1.5 * 2;
      ctx.setLineDash([4, 5]);
      for (let i = 0; i <= 200; i++) {
        const s = (i / 200) * dur;
        const x = w - (s / dur) * w;
        const y = h / 2 + Math.sin((t - dur + s) * 2.4) * (h * 0.32);
        if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
      }
      ctx.stroke();
      ctx.setLineDash([]);

      // sampled smooth line — same curve, just lagged for 60Hz
      ctx.beginPath();
      ctx.strokeStyle = color;
      ctx.lineJoin = "round";
      ctx.lineCap = "round";
      ctx.lineWidth = (isLow ? 2.6 : 2.6) * 2;
      for (let i = 0; i <= 200; i++) {
        const s = (i / 200) * dur;
        const x = w - (s / dur) * w;
        const y = h / 2 + Math.sin((t - dur + s - lag) * 2.4) * (h * 0.32);
        if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
      }
      ctx.stroke();

      // moving "pen tip" dot at the right edge
      const tipY = h / 2 + Math.sin((t - lag) * 2.4) * (h * 0.32);
      ctx.fillStyle = color;
      ctx.beginPath();
      ctx.arc(w - 4, tipY, 5, 0, Math.PI * 2);
      ctx.fill();

      raf = requestAnimationFrame(draw);
    };
    raf = requestAnimationFrame(draw);
    return () => cancelAnimationFrame(raf);
  }, [hz, color]);
  return <canvas ref={ref} className="w-full h-full block" />;
};

const Perf = () => {
  return (
    <section id="performance" className="relative py-24 md:py-32 bg-ink text-paper">
      <div className="mx-auto max-w-[1240px] px-6">
        <div className="flex items-center gap-3 mb-12">
          <div className="text-[11px] font-mono uppercase tracking-[0.22em] text-violet-soft/80">03 · Engine room</div>
          <div className="flex-1 h-px bg-paper/15" />
        </div>

        <div className="reveal flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-16">
          <h2 className="font-semibold tracking-tightest leading-[0.95] text-[44px] md:text-[72px] max-w-[16ch]">
            For the <span className="italic font-medium" style={{ color: '#E5C07B' }}>performance enthusiasts.</span>
          </h2>
          <p className="max-w-md text-[16px] leading-[1.6] text-paper/70">
            Inkly's renderer was rewritten from scratch on Vulkan and WebGPU — a single-threaded path from sensor to pixel, profiled frame-by-frame against the human visual system.
          </p>
        </div>

        {/* the comparison rig */}
        <div className="reveal grid grid-cols-1 lg:grid-cols-2 gap-px bg-paper/10 rounded-3xl overflow-hidden border border-paper/10">
          {[
            { hz: 60, color: "oklch(0.78 0.04 280)", label: "60 Hz", sub: "Standard refresh", lat: "23 ms", note: "Visible stair-stepping. Strokes lag the cursor under fast motion." },
            { hz: 120, color: "#E5C07B", label: "120 Hz", sub: "High-refresh · Inkly", lat: "9 ms", note: "Sample-aligned to the panel. The stroke renders before the eye expects it." },
          ].map((row) => (
            <div key={row.label} className="bg-ink p-8 md:p-10">
              <div className="flex items-baseline justify-between mb-6">
                <div>
                  <div className="text-[11px] font-mono uppercase tracking-[0.18em] text-paper/50">{row.sub}</div>
                  <div className="text-[44px] font-semibold tracking-tightest leading-none mt-1">{row.label}</div>
                </div>
                <div className="text-right">
                  <div className="text-[11px] font-mono uppercase tracking-[0.18em] text-paper/50">End-to-end</div>
                  <div className="text-[28px] font-semibold tracking-tighter2 mt-1" style={{ color: row.color }}>{row.lat}</div>
                </div>
              </div>
              <div className="h-44 rounded-2xl bg-paper/5 border border-paper/10 overflow-hidden">
                <FrameLine hz={row.hz} color={row.color} />
              </div>
              <p className="mt-5 text-[13px] text-paper/60 leading-[1.6]" style={{ textWrap: 'pretty' }}>
                {row.note}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Perf = Perf;