Terminal Window Component

<div class="bg-black/60 backdrop-blur-lg rounded-2xl border border-white/10 shadow-2xl overflow-hidden">
  <div class="flex items-center justify-between p-4 border-b border-white/10">
    <div class="flex items-center space-x-3">
      <div class="flex space-x-2">
        <div class="w-3 h-3 bg-red-500 rounded-full"></div>
        <div class="w-3 h-3 bg-yellow-500 rounded-full"></div>
        <div class="w-3 h-3 bg-green-500 rounded-full"></div>
      </div>
      <span class="text-sm text-white/60">shader-terminal</span>
    </div>
    <div class="flex items-center space-x-2 text-xs text-white/40">
      <span>Three.js</span>
      <div class="w-1 h-1 bg-white/40 rounded-full"></div>
      <span>WebGL</span>
    </div>
  </div>
  <div class="p-6 space-y-4 font-mono text-sm text-white">
    <div class="flex items-center space-x-2">
      <span class="text-green-400">➜</span>
      <span class="text-blue-400">~</span>
      <span class="text-white/80">Running shader: happy_windows_terminal.glsl</span>
    </div>
    <div class="space-y-2 text-white/60">
      <div class="flex justify-between">
        <span>Render mode:</span>
        <span class="text-purple-400">Ray Marching</span>
      </div>
      <div class="flex justify-between">
        <span>Max iterations:</span>
        <span class="text-green-400">60</span>
      </div>
      <div class="flex justify-between">
        <span>Tolerance:</span>
        <span class="text-blue-400">0.0005</span>
      </div>
      <div class="flex justify-between">
        <span>Animation:</span>
        <span class="text-yellow-400">Active</span>
      </div>
    </div>
    <div class="border-t border-white/10 pt-4">
      <div class="flex items-center space-x-2 text-white/40">
        <i data-lucide="info" class="w-4 h-4"></i>
        <span>Based on Shadertoy implementation by range_marten</span>
      </div>
    </div>
  </div>
</div>