Retro Groovebox 8-Bit

Tu tarea es escribir un componente React completamente funcional y en un solo archivo (compatible con Claude Artifacts) que implemente una "Retro 8-Bit Groovebox y Secuenciador" avanzada con exportación de audio sin pérdidas y generación procedural de ritmos.

Especificaciones Técnicas y Stack:
- React (Hooks: useState, useEffect, useRef, useCallback).
- Tailwind CSS para estilos y Lucide React para la iconografía.
- Web Audio API nativa (prohibido usar etiquetas <audio> o enlaces externos).
- OfflineAudioContext para el renderizado offline del audio y un codificador WAV (PCM 16-bit) propio en JavaScript. Prohibido usar MediaRecorder (produce formatos con pérdida como .webm/Opus y puede introducir desfase respecto a la reproducción).

Motor de Audio y Síntesis (Estilo 8-bits):
Diseña 4 pistas sintetizadas matemáticamente emulando chips retro (ej. 2A03 de NES). Requisito de arquitectura crítico: cada voz debe implementarse como una función pura que recibe (ctx, destination, t), de forma que la misma función se use tanto para la reproducción en vivo como para el renderizado offline. Esto garantiza que el archivo exportado suene idéntico al navegador, porque no existen dos versiones del sonido, solo un código ejecutado en dos contextos distintos.
- Kick: Onda cuadrada (Square) con caída de frecuencia (pitch drop) muy rápida.
- Snare: Buffer de ruido blanco (White Noise) con filtro paso banda y envolvente de volumen corto.
- Hi-Hat: Ruido blanco filtrado en alta frecuencia (High-pass) muy percusivo.
- Bass/Blip: Onda triangular (Triangle) tocando una nota grave fija (ej. C3) controlada por un oscilador puro.

El buffer de ruido blanco debe generarse al sample rate del contexto activo (regenerándose si cambia entre el contexto en vivo a 48 kHz y el offline a 44.1 kHz) para mantener la coherencia de caja y hi-hat en ambos modos.

Sistema de Secuenciación:
Implementa un temporizador preciso (Lookahead/Scheduling usando audioContext.currentTime) para programar las notas. Es crítico evitar la desincronización (jitter) del ciclo de renderizado de React. El resaltado visual de la columna en reproducción debe alinearse al tiempo de audio mediante setTimeout calculado sobre currentTime.

Generación Procedural Inteligente (Algoritmos Musicales):
Añade dos botones especiales que borren la cuadrícula actual y generen un nuevo patrón aplicando lógica de probabilidad musical (no aleatoriedad caótica pura):

Botón 1: "Generar Chill 8-Bit"
- BPM: Ajustar aleatoriamente entre 90 y 110.
- Kick: 100% de probabilidad en el paso 1; 80% en el paso 9; 10% en los demás.
- Snare: 100% en los pasos 5 y 13 (tiempos 2 y 4); 5% en los demás.
- Hi-Hat: 70% en pasos impares (1, 3, 5...); 20% en pasos pares.
- Bass: 30% de probabilidad en cualquier paso, con una regla estricta: limpia automáticamente secuencias de más de 2 notas juntas para generar silencios y síncopas.

Botón 2: "Generar Retro Techno"
- BPM: Ajustar aleatoriamente entre 130 y 145.
- Kick: 100% en los pasos 1, 5, 9 y 13 (Four-on-the-floor).
- Snare: 100% en los pasos 5 y 13.
- Hi-Hat: 90% en pasos impares; 50% en pasos pares.
- Bass: 80% de probabilidad en los contratiempos (pasos 3, 7, 11, 15); 15% en el resto.

Lógica de Exportación WAV (renderizado offline, sonido idéntico al navegador):
- Al pulsar "Exportar WAV", crea un OfflineAudioContext (mono, 44.1 kHz) con una duración calculada a partir del BPM, el número de loops y un pequeño padding de cola (~0.3 s) para no cortar el último decay.
- Construye un master gain con el mismo valor que el de la reproducción en vivo (ej. 0.7) y programa todas las voces del patrón sobre él usando las mismas funciones de síntesis.
- Renderiza con startRendering(), convierte el AudioBuffer resultante a un Blob WAV PCM 16-bit mediante un codificador propio (cabecera RIFF/WAVE + escritura de muestras con DataView), y fuerza la descarga con un enlace oculto. El nombre del archivo debe incluir el BPM (ej. retro-groovebox-120bpm-<timestamp>.wav).
- Añade un selector de LOOPS (1/2/4/8) para elegir cuántas repeticiones del patrón se exportan.

Arquitectura de Interfaz y UI/UX (Estética Game Boy Clásica):
- Paleta: Tonos verde oliva/amarillo verdoso (pantalla LCD monocroma), carcasa gris claro y botones oscuro/borgoña. Usa clases de Tailwind para lograrlo.
- Controles superiores: Botones Play/Stop, "Exportar WAV" (con estado deshabilitado/"..." mientras renderiza), Slider de BPM dinámico, Clear Grid, los dos botones de Generación Procedural y el selector de LOOPS.
- Matriz: 4 filas x 16 columnas. La columna en reproducción debe resaltarse. Los "píxeles" (pasos activados) deben tener un contraste máximo (verde muy oscuro o negro) sobre el fondo de la rejilla.

El código debe ser auto-contenido, robusto frente a fugas de memoria del AudioContext (cierre del contexto y limpieza de timers en el useEffect de desmontaje) y exportado como export default function RetroDrumMachine().