export function AnimationDemo() {
  return (
    <section>
      <h2 class="text-xl font-bold text-secondary font-display hh-divider-glow">
        GPU Animation Proof
      </h2>
      <div class="flex flex-wrap items-center gap-8">
        {/* Rotating square */}
        <div class="flex flex-col items-center gap-2">
          <div
            class="w-16 h-16 border-2 animate-rotate"
            style={{ "will-change": "transform", "border-color": "var(--hh-color-secondary)" }}
          />
          <span class="text-xs text-text-muted font-mono">Rotate (transform)</span>
        </div>

        {/* Fading circle */}
        <div class="flex flex-col items-center gap-2">
          <div
            class="w-16 h-16 bg-secondary animate-fade-pulse"
            style={{ "will-change": "opacity" }}
          />
          <span class="text-xs text-text-muted font-mono">Fade (opacity)</span>
        </div>

        {/* Sliding bar */}
        <div class="flex flex-col items-center gap-2">
          <div class="w-64 h-4 relative">
            <div
              class="absolute left-0 top-0 w-16 h-4 bg-secondary animate-slide"
              style={{ "will-change": "transform" }}
            />
          </div>
          <span class="text-xs text-text-muted font-mono">Slide (translateX)</span>
        </div>
      </div>
    </section>
  );
}