CifraStage Pro - Afinador e Cifragem Autom\u00e1tica<\/title>\n <script src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n background: #0a0a0a;\n color: #ffffff;\n -webkit-font-smoothing: antialiased;\n }\n\n .font-mono {\n font-family: 'JetBrains Mono', 'Fira Code', monospace;\n }\n\n \/* Custom Scrollbar *\/\n ::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n }\n\n ::-webkit-scrollbar-track {\n background: #1a1a1a;\n }\n\n ::-webkit-scrollbar-thumb {\n background: #3a3a3a;\n border-radius: 3px;\n }\n\n ::-webkit-scrollbar-thumb:hover {\n background: #4a4a4a;\n }\n\n \/* Glow Effects *\/\n .glow-amber {\n box-shadow: 0 0 20px rgba(245, 166, 35, 0.3);\n }\n\n .glow-lime {\n box-shadow: 0 0 20px rgba(163, 230, 53, 0.4);\n }\n\n .glow-cyan {\n box-shadow: 0 0 20px rgba(0, 217, 255, 0.3);\n }\n\n \/* Tuner Needle Animation *\/\n .needle {\n transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);\n transform-origin: bottom center;\n }\n\n \/* Wave Animation for Audio *\/\n @keyframes sound-wave {\n 0%, 100% { transform: scale(1); opacity: 0.3; }\n 50% { transform: scale(1.1); opacity: 0.6; }\n }\n\n .sound-wave {\n animation: sound-wave 1.5s ease-in-out infinite;\n }\n\n \/* Chord detection pulse *\/\n @keyframes chord-pulse {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.05); }\n }\n\n .chord-active {\n animation: chord-pulse 0.3s ease-in-out;\n }\n\n \/* Gradient Text *\/\n .text-gradient {\n background: linear-gradient(135deg, #F5A623 0%, #D4AF37 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n <\/style>\n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n stage: {\n 950: '#0a0a0a',\n 900: '#0D0D0D',\n 800: '#111111',\n 700: '#1a1a1a',\n 600: '#2a2a2a',\n 500: '#3a3a3a',\n },\n accent: {\n amber: '#F5A623',\n gold: '#D4AF37',\n lime: '#A3E635',\n cyan: '#00D9FF',\n red: '#EF4444',\n blue: '#3B82F6',\n }\n }\n }\n }\n }\n <\/script>\n<\/head>\n<body>\n <div id=\"root\"><\/div>\n\n <script type=\"text\/babel\">\n const { useState, useEffect, useRef, useCallback } = React;\n\n \/\/ ============================================\n \/\/ UTILIT\u00c1RIOS DE \u00c1UDIO\n \/\/ ============================================\n\n \/\/ Algoritmo de Autocorrela\u00e7\u00e3o para Pitch Detection\n class PitchDetector {\n constructor(audioContext, analyser) {\n this.audioContext = audioContext;\n this.analyser = analyser;\n this.bufferLength = analyser.fftSize;\n this.buffer = new Float32Array(this.bufferLength);\n this.noteStrings = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];\n }\n\n autoCorrelate(buf, sampleRate) {\n let SIZE = buf.length;\n let rms = 0;\n\n for (let i = 0; i < SIZE; i++) {\n const val = buf[i];\n rms += val * val;\n }\n rms = Math.sqrt(rms \/ SIZE);\n\n if (rms < 0.01) return -1;\n\n let r1 = 0, r2 = SIZE - 1, thres = 0.2;\n for (let i = 0; i < SIZE \/ 2; i++) {\n if (Math.abs(buf[i]) < thres) { r1 = i; break; }\n }\n for (let i = 1; i < SIZE \/ 2; i++) {\n if (Math.abs(buf[SIZE - i]) < thres) { r2 = SIZE - i; break; }\n }\n\n buf = buf.slice(r1, r2);\n SIZE = buf.length;\n\n let c = new Array(SIZE).fill(0);\n for (let i = 0; i < SIZE; i++) {\n for (let j = 0; j < SIZE - i; j++) {\n c[i] = c[i] + buf[j] * buf[j + i];\n }\n }\n\n let d = 0;\n while (c[d] > c[d + 1]) d++;\n let maxval = -1, maxpos = -1;\n for (let i = d; i < SIZE; i++) {\n if (c[i] > maxval) {\n maxval = c[i];\n maxpos = i;\n }\n }\n let T0 = maxpos;\n\n \/\/ Interpola\u00e7\u00e3o parab\u00f3lica\n if (T0 > 0 && T0 < c.length - 1) {\n let x1 = c[T0 - 1], x2 = c[T0], x3 = c[T0 + 1];\n let a = (x1 + x3 - 2 * x2) \/ 2;\n let b = (x3 - x1) \/ 2;\n if (a) T0 = T0 - b \/ (2 * a);\n }\n\n return sampleRate \/ T0;\n }\n\n detectPitch() {\n this.analyser.getFloatTimeDomainData(this.buffer);\n const frequency = this.autoCorrelate(this.buffer, this.audioContext.sampleRate);\n\n if (frequency === -1) return null;\n\n const noteNum = 12 * (Math.log(frequency \/ 440) \/ Math.log(2));\n const midiNum = Math.round(noteNum) + 69;\n const noteName = this.noteStrings[midiNum % 12];\n const octave = Math.floor(midiNum \/ 12) - 1;\n\n const expectedFreq = 440 * Math.pow(2, (midiNum - 69) \/ 12);\n const cents = 1200 * Math.log2(frequency \/ expectedFreq);\n\n return {\n frequency: Math.round(frequency * 10) \/ 10,\n note: noteName,\n octave: octave,\n cents: Math.round(cents * 10) \/ 10,\n midi: midiNum,\n detuned: Math.abs(cents) > 5\n };\n }\n }\n\n \/\/ Detector de Acordes usando Cromagrama\n class ChordDetector {\n constructor(audioContext, analyser) {\n this.audioContext = audioContext;\n this.analyser = analyser;\n this.fftSize = analyser.fftSize;\n this.frequencyData = new Float32Array(this.analyser.frequencyBinCount);\n this.fref = 261.63; \/\/ C4\n\n this.chordTemplates = {\n 'C': [1,0,0,0,1,0,0,1,0,0,0,0],\n 'C#': [0,1,0,0,0,1,0,0,1,0,0,0],\n 'D': [0,0,1,0,0,0,1,0,0,1,0,0],\n 'D#': [0,0,0,1,0,0,0,1,0,0,1,0],\n 'E': [0,0,0,0,1,0,0,0,1,0,0,1],\n 'F': [1,0,0,0,0,1,0,0,0,1,0,0],\n 'F#': [0,1,0,0,0,0,1,0,0,0,1,0],\n 'G': [0,0,1,0,0,0,0,1,0,0,0,1],\n 'G#': [1,0,0,1,0,0,0,0,1,0,0,0],\n 'A': [0,1,0,0,1,0,0,0,0,1,0,0],\n 'A#': [0,0,1,0,0,1,0,0,0,0,1,0],\n 'B': [0,0,0,1,0,0,1,0,0,0,0,1],\n 'Cm': [1,0,0,1,0,0,0,1,0,0,0,0],\n 'C#m':[0,1,0,0,1,0,0,0,1,0,0,0],\n 'Dm': [0,0,1,0,0,1,0,0,0,1,0,0],\n 'D#m':[0,0,0,1,0,0,1,0,0,0,1,0],\n 'Em': [0,0,0,0,1,0,0,1,0,0,0,1],\n 'Fm': [1,0,0,0,0,1,0,0,1,0,0,0],\n 'F#m':[0,1,0,0,0,0,1,0,0,1,0,0],\n 'Gm': [0,0,1,0,0,0,0,1,0,0,1,0],\n 'G#m':[0,0,0,1,0,0,0,0,1,0,0,1],\n 'Am': [1,0,0,0,1,0,0,0,0,1,0,0],\n 'A#m':[0,1,0,0,0,1,0,0,0,0,1,0],\n 'Bm': [0,0,1,0,0,0,1,0,0,0,0,1],\n };\n }\n\n computeChromagram() {\n this.analyser.getFloatFrequencyData(this.frequencyData);\n const fs = this.audioContext.sampleRate;\n const N = this.fftSize;\n\n let PCP = new Array(12).fill(0);\n\n for (let l = 0; l < this.analyser.frequencyBinCount; l++) {\n const frequency = (l * fs) \/ N;\n if (frequency > 0 && frequency < 5000) {\n const pitchClass = Math.round(12 * Math.log2(frequency \/ this.fref)) % 12;\n if (pitchClass >= 0 && pitchClass < 12) {\n const magnitude = Math.pow(10, this.frequencyData[l] \/ 20);\n PCP[pitchClass] += magnitude;\n }\n }\n }\n\n const maxVal = Math.max(...PCP);\n if (maxVal > 0) {\n PCP = PCP.map(v => v \/ maxVal);\n }\n\n return PCP;\n }\n\n detectChord() {\n const chromagram = this.computeChromagram();\n let bestChord = null;\n let bestScore = -1;\n\n for (const [chordName, template] of Object.entries(this.chordTemplates)) {\n let score = 0;\n for (let i = 0; i < 12; i++) {\n score += chromagram[i] * template[i];\n }\n\n if (score > bestScore) {\n bestScore = score;\n bestChord = chordName;\n }\n }\n\n if (bestScore < 0.2) return null;\n\n return {\n chord: bestChord,\n confidence: Math.round(bestScore * 100),\n chromagram: chromagram\n };\n }\n }\n\n \/\/ Transposi\u00e7\u00e3o de acordes\n const transposeChord = (chord, semitones) => {\n const notes = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];\n const flatToSharp = { 'Db': 'C#', 'Eb': 'D#', 'Gb': 'F#', 'Ab': 'G#', 'Bb': 'A#' };\n\n const match = chord.match(\/^([A-G][#b]?)(.*)$\/);\n if (!match) return chord;\n\n let [_, root, suffix] = match;\n if (flatToSharp[root]) root = flatToSharp[root];\n\n const noteIndex = notes.indexOf(root);\n if (noteIndex === -1) return chord;\n\n const newIndex = (noteIndex + semitones + 12) % 12;\n return notes[newIndex] + suffix;\n };\n\n const transposeText = (text, semitones) => {\n const chordRegex = \/\b([A-G][#b]?(?:m(?:aj7?|in)?|sus[24]?|dim|aug|add[29]|m?7|\u00b0|\\+)?(?:\\\/[A-G][#b]?)?)\b\/g;\n return text.replace(chordRegex, (match) => transposeChord(match, semitones));\n };\n\n \/\/ ============================================\n \/\/ COMPONENTE: AFINADOR\n \/\/ ============================================\n const Tuner = () => {\n const [isActive, setIsActive] = useState(false);\n const [pitch, setPitch] = useState(null);\n const [error, setError] = useState(null);\n const audioContextRef = useRef(null);\n const analyserRef = useRef(null);\n const detectorRef = useRef(null);\n const animationRef = useRef(null);\n const streamRef = useRef(null);\n\n const startTuner = async () => {\n try {\n setError(null);\n const stream = await navigator.mediaDevices.getUserMedia({ audio: true });\n streamRef.current = stream;\n\n audioContextRef.current = new (window.AudioContext || window.webkitAudioContext)();\n const source = audioContextRef.current.createMediaStreamSource(stream);\n analyserRef.current = audioContextRef.current.createAnalyser();\n analyserRef.current.fftSize = 2048;\n\n source.connect(analyserRef.current);\n detectorRef.current = new PitchDetector(audioContextRef.current, analyserRef.current);\n\n setIsActive(true);\n detectPitch();\n } catch (err) {\n setError('Permiss\u00e3o de microfone negada ou n\u00e3o dispon\u00edvel');\n }\n };\n\n const stopTuner = () => {\n if (animationRef.current) cancelAnimationFrame(animationRef.current);\n if (streamRef.current) {\n streamRef.current.getTracks().forEach(track => track.stop());\n }\n if (audioContextRef.current) {\n audioContextRef.current.close();\n }\n setIsActive(false);\n setPitch(null);\n };\n\n const detectPitch = useCallback(() => {\n if (!detectorRef.current || !isActive) return;\n\n const result = detectorRef.current.detectPitch();\n if (result) {\n setPitch(result);\n }\n animationRef.current = requestAnimationFrame(detectPitch);\n }, [isActive]);\n\n useEffect(() => {\n return () => stopTuner();\n }, []);\n\n const getPointerRotation = () => {\n if (!pitch) return 0;\n const cents = Math.max(-50, Math.min(50, pitch.cents));\n return (cents \/ 50) * 45;\n };\n\n const getTuningStatus = () => {\n if (!pitch) return 'neutral';\n if (Math.abs(pitch.cents) < 5) return 'perfect';\n if (pitch.cents < 0) return 'flat';\n return 'sharp';\n };\n\n const status = getTuningStatus();\n const rotation = getPointerRotation();\n\n return (\n <div className=\"bg-stage-800 rounded-2xl p-6 border border-stage-600 shadow-2xl\">\n <div className=\"flex items-center justify-between mb-6\">\n <div className=\"flex items-center gap-3\">\n <div className=\"w-10 h-10 rounded-xl bg-accent-amber\/20 flex items-center justify-center\">\n <svg className=\"w-6 h-6 text-accent-amber\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3\" \/>\n <\/svg>\n <\/div>\n <div>\n <h2 className=\"text-xl font-bold text-white\">Afinador Crom\u00e1tico<\/h2>\n <p className=\"text-xs text-gray-400\">Detec\u00e7\u00e3o em tempo real<\/p>\n <\/div>\n <\/div>\n\n <button\n onClick={isActive ? stopTuner : startTuner}\n className={`flex items-center gap-2 px-4 py-2 rounded-full font-medium transition-all ${\n isActive \n ? 'bg-red-500\/20 text-red-400 hover:bg-red-500\/30 border border-red-500\/30' \n : 'bg-accent-amber\/20 text-accent-amber hover:bg-accent-amber\/30 border border-accent-amber\/30'\n }`}\n >\n {isActive ? (\n <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" \/>\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z\" \/>\n <\/svg>\n ) : (\n <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z\" \/>\n <\/svg>\n )}\n {isActive ? 'Parar' : 'Ativar'}\n <\/button>\n <\/div>\n\n {error && (\n <div className=\"mb-4 p-3 bg-red-500\/10 border border-red-500\/30 rounded-lg text-red-400 text-sm\">\n {error}\n <\/div>\n )}\n\n {\/* Display do Afinador *\/}\n <div className=\"relative h-56 flex items-center justify-center mb-6\">\n {\/* Arco de fundo *\/}\n <div className=\"absolute w-56 h-28 overflow-hidden\">\n <div className=\"w-56 h-56 rounded-full border-8 border-stage-600 border-b-0\"><\/div>\n <\/div>\n\n {\/* Marcadores *\/}\n <div className=\"absolute w-48 h-24\">\n {[-50, -25, 0, 25, 50].map((mark) => (\n <div\n key={mark}\n className=\"absolute bottom-0 left-1\/2 w-0.5 origin-bottom\"\n style={{ \n transform: `rotate(${(mark \/ 50) * 45}deg) translateX(-50%)`,\n height: mark === 0 ? '20px' : '12px',\n backgroundColor: mark === 0 ? '#F5A623' : '#3a3a3a'\n }}\n >\n <span className=\"absolute -top-5 left-1\/2 -translate-x-1\/2 text-[10px] text-gray-500\">\n {mark === 0 ? '0' : mark}\n <\/span>\n <\/div>\n ))}\n <\/div>\n\n {\/* Ponteiro *\/}\n <div\n className={`absolute w-1 h-24 origin-bottom rounded-full needle ${\n status === 'perfect' ? 'bg-accent-lime glow-lime' : 'bg-accent-amber'\n }`}\n style={{ \n transform: `rotate(${rotation}deg)`,\n bottom: '50%'\n }}\n >\n <div className=\"absolute -top-1 left-1\/2 -translate-x-1\/2 w-2 h-2 rounded-full bg-current\"><\/div>\n <\/div>\n\n {\/* Centro *\/}\n <div className=\"absolute w-3 h-3 bg-stage-700 rounded-full border-2 border-stage-500\"><\/div>\n <\/div>\n\n {\/* Display de Nota *\/}\n <div className=\"text-center\">\n {pitch ? (\n <div className=\"space-y-2\">\n <div className=\"flex items-center justify-center gap-2\">\n <span className={`text-6xl font-bold font-mono ${\n status === 'perfect' ? 'text-accent-lime' : \n status === 'flat' ? 'text-accent-blue' : \n status === 'sharp' ? 'text-accent-red' : 'text-white'\n }`}>\n {pitch.note}\n <\/span>\n <span className=\"text-2xl text-gray-400\">{pitch.octave}<\/span>\n <\/div>\n <p className=\"text-2xl font-mono text-accent-amber\">{pitch.frequency} Hz<\/p>\n <p className={`text-sm font-medium ${\n status === 'perfect' ? 'text-accent-lime' : \n status === 'flat' ? 'text-accent-blue' : 'text-accent-red'\n }`}>\n {status === 'perfect' ? '\u2713 Perfeitamente afinado' : \n status === 'flat' ? `\u266d Baixo (${pitch.cents} cents)` : \n `\u266f Alto (${pitch.cents} cents)`}\n <\/p>\n <\/div>\n ) : (\n <div className=\"text-gray-500 flex flex-col items-center gap-2 py-8\">\n <svg className=\"w-12 h-12 opacity-30\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3\" \/>\n <\/svg>\n <p className=\"text-sm\">{isActive ? 'Aguardando \u00e1udio...' : 'Ative o microfone para come\u00e7ar'}<\/p>\n <\/div>\n )}\n <\/div>\n\n {\/* Status *\/}\n <div className=\"mt-6 flex items-center justify-center gap-2\">\n <div className={`w-2 h-2 rounded-full ${isActive ? 'bg-accent-lime animate-pulse' : 'bg-stage-600'}`}><\/div>\n <span className=\"text-xs text-gray-400\">\n {isActive ? 'Analisando frequ\u00eancias...' : 'Standby'}\n <\/span>\n <\/div>\n <\/div>\n );\n };\n\n \/\/ ============================================\n \/\/ COMPONENTE: CIFRADOR AUTOM\u00c1TICO\n \/\/ ============================================\n const AutoChord = () => {\n const [mode, setMode] = useState('mic');\n const [isListening, setIsListening] = useState(false);\n const [detectedChords, setDetectedChords] = useState([]);\n const [currentChord, setCurrentChord] = useState(null);\n const [audioFile, setAudioFile] = useState(null);\n const [isProcessing, setIsProcessing] = useState(false);\n\n const audioContextRef = useRef(null);\n const analyserRef = useRef(null);\n const detectorRef = useRef(null);\n const animationRef = useRef(null);\n const streamRef = useRef(null);\n\n const startMicDetection = async () => {\n try {\n const stream = await navigator.mediaDevices.getUserMedia({ audio: true });\n streamRef.current = stream;\n\n audioContextRef.current = new (window.AudioContext || window.webkitAudioContext)();\n const source = audioContextRef.current.createMediaStreamSource(stream);\n analyserRef.current = audioContextRef.current.createAnalyser();\n analyserRef.current.fftSize = 4096;\n\n source.connect(analyserRef.current);\n detectorRef.current = new ChordDetector(audioContextRef.current, analyserRef.current);\n\n setIsListening(true);\n detectChords();\n } catch (err) {\n alert('N\u00e3o foi poss\u00edvel acessar o microfone');\n }\n };\n\n const processAudioFile = async (file) => {\n setIsProcessing(true);\n setAudioFile(file);\n\n \/\/ Simula\u00e7\u00e3o de processamento - em produ\u00e7\u00e3o seria an\u00e1lise real\n await new Promise(r => setTimeout(r, 2000));\n\n const simulatedChords = [\n { time: '0:00', chord: 'C', confidence: 85 },\n { time: '0:04', chord: 'G', confidence: 78 },\n { time: '0:08', chord: 'Am', confidence: 82 },\n { time: '0:12', chord: 'F', confidence: 80 },\n { time: '0:16', chord: 'C', confidence: 88 },\n { time: '0:20', chord: 'G\/B', confidence: 75 },\n { time: '0:24', chord: 'Am', confidence: 83 },\n { time: '0:28', chord: 'G', confidence: 79 },\n ];\n\n setDetectedChords(simulatedChords);\n setIsProcessing(false);\n };\n\n const detectChords = useCallback(() => {\n if (!detectorRef.current || !isListening) return;\n\n const result = detectorRef.current.detectChord();\n if (result && result.confidence > 50) {\n setCurrentChord(result);\n\n setDetectedChords(prev => {\n const last = prev[prev.length - 1];\n if (!last || last.chord !== result.chord) {\n const newEntry = { \n time: new Date().toLocaleTimeString().slice(0,5), \n chord: result.chord, \n confidence: result.confidence \n };\n return [...prev.slice(-19), newEntry];\n }\n return prev;\n });\n }\n\n animationRef.current = requestAnimationFrame(detectChords);\n }, [isListening]);\n\n const stopDetection = () => {\n if (animationRef.current) cancelAnimationFrame(animationRef.current);\n if (streamRef.current) {\n streamRef.current.getTracks().forEach(track => track.stop());\n }\n setIsListening(false);\n setCurrentChord(null);\n };\n\n useEffect(() => {\n return () => stopDetection();\n }, []);\n\n const handleFileUpload = (e) => {\n const file = e.target.files[0];\n if (file) processAudioFile(file);\n };\n\n return (\n <div className=\"bg-stage-800 rounded-2xl p-6 border border-stage-600 shadow-2xl\">\n <div className=\"flex items-center justify-between mb-6\">\n <div className=\"flex items-center gap-3\">\n <div className=\"w-10 h-10 rounded-xl bg-accent-cyan\/20 flex items-center justify-center\">\n <svg className=\"w-6 h-6 text-accent-cyan\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M13 10V3L4 14h7v7l9-11h-7z\" \/>\n <\/svg>\n <\/div>\n <div>\n <h2 className=\"text-xl font-bold text-white\">Cifragem Autom\u00e1tica<\/h2>\n <p className=\"text-xs text-gray-400\">IA detecta acordes em tempo real<\/p>\n <\/div>\n <\/div>\n\n <div className=\"flex bg-stage-700 rounded-lg p-1\">\n <button\n onClick={() => { setMode('mic'); setDetectedChords([]); stopDetection(); }}\n className={`flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium transition-all ${\n mode === 'mic' ? 'bg-accent-cyan text-stage-900' : 'text-gray-400 hover:text-white'\n }`}\n >\n <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z\" \/>\n <\/svg>\n Mic\n <\/button>\n <button\n onClick={() => { setMode('file'); setDetectedChords([]); stopDetection(); }}\n className={`flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium transition-all ${\n mode === 'file' ? 'bg-accent-cyan text-stage-900' : 'text-gray-400 hover:text-white'\n }`}\n >\n <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12\" \/>\n <\/svg>\n Arquivo\n <\/button>\n <\/div>\n <\/div>\n\n {mode === 'mic' ? (\n <div className=\"space-y-4\">\n <div className=\"flex justify-center\">\n <button\n onClick={isListening ? stopDetection : startMicDetection}\n className={`relative w-24 h-24 rounded-full flex items-center justify-center transition-all ${\n isListening \n ? 'bg-red-500\/20 text-red-400 border-4 border-red-500' \n : 'bg-accent-cyan\/20 text-accent-cyan border-4 border-accent-cyan hover:bg-accent-cyan\/30'\n }`}\n >\n {isListening ? (\n <svg className=\"w-10 h-10\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M6 4h4v16H6V4zm8 0h4v16h-4V4z\"\/>\n <\/svg>\n ) : (\n <svg className=\"w-10 h-10\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z\" \/>\n <\/svg>\n )}\n\n {isListening && (\n <>\n <div className=\"absolute inset-0 rounded-full border-4 border-red-500 animate-ping opacity-20\"><\/div>\n <div className=\"absolute -inset-4 rounded-full border-2 border-red-400 animate-ping opacity-10\" style={{animationDelay: '0.1s'}}><\/div>\n <\/>\n )}\n <\/button>\n <\/div>\n\n <p className=\"text-center text-gray-400 text-sm\">\n {isListening \n ? 'Toque seu instrumento pr\u00f3ximo ao microfone...' \n : 'Clique para ativar e come\u00e7ar a tocar'}\n <\/p>\n\n {\/* Acorde Atual *\/}\n {currentChord && (\n <div className=\"text-center p-4 bg-stage-700\/50 rounded-xl border border-accent-cyan\/30 chord-active\">\n <p className=\"text-gray-400 text-sm mb-1\">Acorde detectado<\/p>\n <p className=\"text-5xl font-bold text-accent-cyan font-mono\">{currentChord.chord}<\/p>\n <div className=\"flex items-center justify-center gap-2 mt-2\">\n <div className=\"w-24 h-2 bg-stage-600 rounded-full overflow-hidden\">\n <div \n className=\"h-full bg-accent-cyan transition-all duration-300\"\n style={{ width: `${currentChord.confidence}%` }}\n ><\/div>\n <\/div>\n <span className=\"text-xs text-gray-400\">{currentChord.confidence}%<\/span>\n <\/div>\n <\/div>\n )}\n <\/div>\n ) : (\n <div className=\"space-y-4\">\n <label className=\"flex flex-col items-center justify-center w-full h-32 border-2 border-dashed border-stage-500 rounded-xl cursor-pointer hover:border-accent-cyan hover:bg-stage-700\/30 transition-all\">\n <div className=\"flex flex-col items-center justify-center pt-5 pb-6\">\n <svg className=\"w-8 h-8 text-gray-400 mb-2\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12\" \/>\n <\/svg>\n <p className=\"text-sm text-gray-400\">Clique para enviar MP3\/WAV<\/p>\n <p className=\"text-xs text-gray-500 mt-1\">ou arraste o arquivo aqui<\/p>\n <\/div>\n <input type=\"file\" className=\"hidden\" accept=\"audio\/*\" onChange={handleFileUpload} \/>\n <\/label>\n\n {isProcessing && (\n <div className=\"flex items-center justify-center gap-2 text-accent-cyan\">\n <svg className=\"w-5 h-5 animate-spin\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\"><\/circle>\n <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"><\/path>\n <\/svg>\n <span className=\"text-sm\">Analisando \u00e1udio com IA...<\/span>\n <\/div>\n )}\n\n {audioFile && !isProcessing && (\n <p className=\"text-center text-sm text-gray-400\">\n Arquivo: <span className=\"text-white\">{audioFile.name}<\/span>\n <\/p>\n )}\n <\/div>\n )}\n\n {\/* Hist\u00f3rico de Acordes *\/}\n {detectedChords.length > 0 && (\n <div className=\"mt-6\">\n <h3 className=\"text-sm font-medium text-gray-400 mb-3 flex items-center gap-2\">\n <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3\" \/>\n <\/svg>\n Progress\u00e3o detectada\n <\/h3>\n <div className=\"flex flex-wrap gap-2 max-h-40 overflow-y-auto p-2 bg-stage-900\/50 rounded-lg\">\n {detectedChords.map((item, idx) => (\n <div \n key={idx}\n className={`px-3 py-2 rounded-lg font-mono font-bold text-sm transition-all ${\n idx === detectedChords.length - 1 && isListening\n ? 'bg-accent-cyan text-stage-900 ring-2 ring-accent-cyan scale-105' \n : 'bg-stage-700 text-gray-300 hover:bg-stage-600'\n }`}\n >\n {item.chord}\n <span className=\"block text-xs font-normal opacity-70\">{item.time}<\/span>\n <\/div>\n ))}\n <\/div>\n\n <button\n onClick={() => {\n const chordText = detectedChords.map(c => c.chord).join(' | ');\n navigator.clipboard.writeText(chordText);\n alert('Sequ\u00eancia copiada!');\n }}\n className=\"mt-3 w-full py-2 bg-stage-700 hover:bg-stage-600 text-gray-300 rounded-lg text-sm transition-colors flex items-center justify-center gap-2\"\n >\n <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3\" \/>\n <\/svg>\n Copiar sequ\u00eancia\n <\/button>\n <\/div>\n )}\n <\/div>\n );\n };\n\n \/\/ ============================================\n \/\/ COMPONENTE: EDITOR DE CIFRAS\n \/\/ ============================================\n const ChordEditor = () => {\n const [content, setContent] = useState(\n` C G\nEssa \u00e9 uma m\u00fasica de exemplo\n Am F\nPara demonstrar o editor de cifras\n\n C G\/B Am\nVoc\u00ea pode transpor os acordes\n F G C\nUsando os controles acima`\n );\n const [transpose, setTranspose] = useState(0);\n const [isEditing, setIsEditing] = useState(false);\n\n useEffect(() => {\n \/\/ Atualiza display quando muda transposi\u00e7\u00e3o\n }, [content, transpose]);\n\n const handleTranspose = (direction) => {\n setTranspose(prev => {\n const newVal = prev + direction;\n return Math.max(-11, Math.min(11, newVal));\n });\n };\n\n const resetTranspose = () => setTranspose(0);\n\n const displayContent = transpose === 0 ? content : transposeText(content, transpose);\n\n \/\/ Renderiza cifra com destaque nos acordes\n const renderChordChart = (text) => {\n const lines = text.split('\\n');\n\n return lines.map((line, lineIdx) => {\n const chordRegex = \/\b([A-G][#b]?(?:m(?:aj7?|in)?|sus[24]?|dim|aug|add[29]|m?7|\u00b0|\\+)?(?:\\\/[A-G][#b]?)?)\b\/g;\n\n if (line.match(chordRegex) && !line.match(\/[a-z]{3,}\/i)) {\n const parts = [];\n let lastIndex = 0;\n let match;\n\n while ((match = chordRegex.exec(line)) !== null) {\n if (match.index > lastIndex) {\n parts.push(\n <span key={`text-${lineIdx}-${lastIndex}`} className=\"text-gray-300\">\n {line.slice(lastIndex, match.index)}\n <\/span>\n );\n }\n parts.push(\n <span key={`chord-${lineIdx}-${match.index}`} className=\"text-accent-amber font-bold\">\n {match[0]}\n <\/span>\n );\n lastIndex = match.index + match[0].length;\n }\n\n if (lastIndex < line.length) {\n parts.push(\n <span key={`end-${lineIdx}`} className=\"text-gray-300\">\n {line.slice(lastIndex)}\n <\/span>\n );\n }\n\n return (\n <div key={lineIdx} className=\"font-mono text-lg leading-relaxed whitespace-pre\">\n {parts}\n <\/div>\n );\n }\n\n return (\n <div key={lineIdx} className=\"text-gray-300 leading-relaxed whitespace-pre\">\n {line}\n <\/div>\n );\n });\n };\n\n return (\n <div className=\"bg-stage-800 rounded-2xl p-6 border border-stage-600 shadow-2xl\">\n <div className=\"flex items-center justify-between mb-4\">\n <div className=\"flex items-center gap-3\">\n <div className=\"w-10 h-10 rounded-xl bg-accent-amber\/20 flex items-center justify-center\">\n <svg className=\"w-6 h-6 text-accent-amber\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\" \/>\n <\/svg>\n <\/div>\n <div>\n <h2 className=\"text-xl font-bold text-white\">Editor de Cifras<\/h2>\n <p className=\"text-xs text-gray-400\">Transposi\u00e7\u00e3o em tempo real<\/p>\n <\/div>\n <\/div>\n\n <div className=\"flex items-center gap-2\">\n <button\n onClick={() => setIsEditing(!isEditing)}\n className={`px-4 py-2 rounded-lg font-medium transition-all ${\n isEditing ? 'bg-accent-amber text-stage-900' : 'bg-stage-700 text-gray-300 hover:bg-stage-600'\n }`}\n >\n {isEditing ? 'Visualizar' : 'Editar'}\n <\/button>\n <\/div>\n <\/div>\n\n {\/* Controles de Transposi\u00e7\u00e3o *\/}\n <div className=\"flex items-center justify-between mb-4 p-3 bg-stage-700\/50 rounded-lg\">\n <div className=\"flex items-center gap-4\">\n <span className=\"text-sm text-gray-400\">Transposi\u00e7\u00e3o:<\/span>\n <div className=\"flex items-center gap-2\">\n <button\n onClick={() => handleTranspose(-1)}\n className=\"p-1 hover:bg-stage-600 rounded text-accent-amber transition-colors\"\n >\n <svg className=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 9l-7 7-7-7\" \/>\n <\/svg>\n <\/button>\n <span className={`w-12 text-center font-mono font-bold text-lg ${\n transpose === 0 ? 'text-gray-400' : transpose > 0 ? 'text-accent-red' : 'text-accent-blue'\n }`}>\n {transpose > 0 ? `+${transpose}` : transpose}\n <\/span>\n <button\n onClick={() => handleTranspose(1)}\n className=\"p-1 hover:bg-stage-600 rounded text-accent-amber transition-colors\"\n >\n <svg className=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" \/>\n <\/svg>\n <\/button>\n <\/div>\n <span className=\"text-xs text-gray-500\">semitons<\/span>\n <\/div>\n\n {transpose !== 0 && (\n <button\n onClick={resetTranspose}\n className=\"flex items-center gap-1 text-xs text-gray-400 hover:text-white transition-colors\"\n >\n <svg className=\"w-3 h-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\" \/>\n <\/svg>\n Voltar ao original\n <\/button>\n )}\n <\/div>\n\n {\/* \u00c1rea de Edi\u00e7\u00e3o\/Visualiza\u00e7\u00e3o *\/}\n <div className=\"bg-stage-900 rounded-xl p-4 min-h-[300px] max-h-[400px] overflow-auto\">\n {isEditing ? (\n <textarea\n value={content}\n onChange={(e) => setContent(e.target.value)}\n className=\"w-full h-full min-h-[300px] bg-transparent text-gray-300 font-mono text-base leading-relaxed resize-none focus:outline-none\"\n placeholder=\"Cole ou digite a cifra aqui...\"\n \/>\n ) : (\n <div className=\"font-mono\">\n {renderChordChart(displayContent)}\n <\/div>\n )}\n <\/div>\n\n {\/* Status *\/}\n <div className=\"mt-4 flex items-center justify-between text-xs text-gray-500\">\n <span>Tom original: C<\/span>\n <span className={transpose !== 0 ? 'text-accent-amber' : ''}>\n Tom atual: {transpose === 0 ? 'C' : transpose > 0 ? `C (+${transpose})` : `C (${transpose})`}\n <\/span>\n <\/div>\n <\/div>\n );\n };\n\n \/\/ ============================================\n \/\/ APP PRINCIPAL\n \/\/ ============================================\n const App = () => {\n const [activeTab, setActiveTab] = useState('tuner');\n\n const tabs = [\n { id: 'tuner', label: 'Afinador', icon: 'tuner' },\n { id: 'chord', label: 'Cifragem Auto', icon: 'chord' },\n { id: 'editor', label: 'Editor', icon: 'editor' },\n ];\n\n const renderIcon = (icon) => {\n const icons = {\n tuner: <svg className=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3\" \/><\/svg>,\n chord: <svg className=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M13 10V3L4 14h7v7l9-11h-7z\" \/><\/svg>,\n editor: <svg className=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\" \/><\/svg>,\n };\n return icons[icon];\n };\n\n return (\n <div className=\"min-h-screen bg-stage-950\">\n {\/* Header *\/}\n <header className=\"bg-stage-900 border-b border-stage-700 sticky top-0 z-50\">\n <div className=\"max-w-6xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div className=\"flex items-center justify-between h-16\">\n <div className=\"flex items-center gap-3\">\n <div className=\"w-10 h-10 bg-gradient-to-br from-accent-amber to-accent-gold rounded-xl flex items-center justify-center shadow-lg\">\n <svg className=\"w-6 h-6 text-stage-900\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z\"\/>\n <\/svg>\n <\/div>\n <div>\n <h1 className=\"text-xl font-bold text-white\">CifraStage<\/h1>\n <p className=\"text-xs text-accent-amber font-medium\">Pro<\/p>\n <\/div>\n <\/div>\n\n <div className=\"flex items-center gap-2\">\n <span className=\"text-xs text-gray-500 hidden sm:block\">v2.0<\/span>\n <button className=\"p-2 hover:bg-stage-800 rounded-lg transition-colors\">\n <svg className=\"w-5 h-5 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z\" \/>\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\" \/>\n <\/svg>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/header>\n\n {\/* Navigation *\/}\n <nav className=\"bg-stage-900 border-b border-stage-700\">\n <div className=\"max-w-6xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div className=\"flex space-x-1 overflow-x-auto\">\n {tabs.map((tab) => (\n <button\n key={tab.id}\n onClick={() => setActiveTab(tab.id)}\n className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-all whitespace-nowrap ${\n activeTab === tab.id \n ? 'border-accent-amber text-accent-amber' \n : 'border-transparent text-gray-400 hover:text-white hover:border-stage-600'\n }`}\n >\n {renderIcon(tab.icon)}\n {tab.label}\n <\/button>\n ))}\n <\/div>\n <\/div>\n <\/nav>\n\n {\/* Main Content *\/}\n <main className=\"max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8\">\n <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n {activeTab === 'tuner' && (\n <>\n <Tuner \/>\n <div className=\"space-y-6\">\n <div className=\"bg-stage-800 rounded-2xl p-6 border border-stage-600\">\n <h3 className=\"font-bold text-white mb-3\">Como usar o Afinador<\/h3>\n <ul className=\"space-y-2 text-sm text-gray-400\">\n <li className=\"flex items-start gap-2\">\n <span className=\"text-accent-amber\">1.<\/span>\n Clique em \"Ativar\" e permita o acesso ao microfone\n <\/li>\n <li className=\"flex items-start gap-2\">\n <span className=\"text-accent-amber\">2.<\/span>\n Toque uma nota no seu instrumento\n <\/li>\n <li className=\"flex items-start gap-2\">\n <span className=\"text-accent-amber\">3.<\/span>\n Ajuste at\u00e9 o ponteiro ficar verde (0 cents)\n <\/li>\n <\/ul>\n <\/div>\n <div className=\"bg-gradient-to-br from-accent-amber\/10 to-accent-gold\/10 rounded-2xl p-6 border border-accent-amber\/20\">\n <h4 className=\"font-bold text-accent-amber mb-2\">\ud83d\udca1 Dica Pro<\/h4>\n <p className=\"text-sm text-gray-300\">\n Em ambientes barulhentos, aproxime o microfone do instrumento para melhor precis\u00e3o.\n <\/p>\n <\/div>\n <\/div>\n <\/>\n )}\n\n {activeTab === 'chord' && (\n <>\n <AutoChord \/>\n <div className=\"space-y-6\">\n <div className=\"bg-stage-800 rounded-2xl p-6 border border-stage-600\">\n <h3 className=\"font-bold text-white mb-3\">Cifragem por IA<\/h3>\n <p className=\"text-sm text-gray-400 mb-4\">\n Nossa tecnologia analisa o espectro de frequ\u00eancias do \u00e1udio e identifica os acordes em tempo real usando algoritmos de Cromagrama (PCP).\n <\/p>\n <div className=\"flex flex-wrap gap-2\">\n <span className=\"px-2 py-1 bg-stage-700 rounded text-xs text-gray-400\">Maiores<\/span>\n <span className=\"px-2 py-1 bg-stage-700 rounded text-xs text-gray-400\">Menores<\/span>\n <span className=\"px-2 py-1 bg-stage-700 rounded text-xs text-gray-400\">Com baixo<\/span>\n <span className=\"px-2 py-1 bg-stage-700 rounded text-xs text-gray-400\">7\u00aa<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/>\n )}\n\n {activeTab === 'editor' && (\n <>\n <ChordEditor \/>\n <div className=\"space-y-6\">\n <div className=\"bg-stage-800 rounded-2xl p-6 border border-stage-600\">\n <h3 className=\"font-bold text-white mb-3\">Atalhos do Editor<\/h3>\n <div className=\"space-y-2 text-sm\">\n <div className=\"flex justify-between text-gray-400\">\n <span>Transpor +1<\/span>\n <span className=\"font-mono text-accent-amber\">\u2191<\/span>\n <\/div>\n <div className=\"flex justify-between text-gray-400\">\n <span>Transpor -1<\/span>\n <span className=\"font-mono text-accent-amber\">\u2193<\/span>\n <\/div>\n <div className=\"flex justify-between text-gray-400\">\n <span>Modo Editar\/Visualizar<\/span>\n <span className=\"font-mono text-accent-amber\">Tab<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/>\n )}\n <\/div>\n <\/main>\n\n {\/* Footer *\/}\n <footer className=\"bg-stage-900 border-t border-stage-700 mt-12\">\n <div className=\"max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6\">\n <div className=\"flex flex-col sm:flex-row items-center justify-between gap-4\">\n <p className=\"text-sm text-gray-500\">\n CifraStage Pro \u00a9 2024 \u2014 Ferramenta profissional para m\u00fasicos\n <\/p>\n <div className=\"flex items-center gap-4\">\n <span className=\"text-xs text-gray-600\">Web Audio API<\/span>\n <span className=\"text-xs text-gray-600\">React<\/span>\n <span className=\"text-xs text-gray-600\">Tailwind<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/footer>\n <\/div>\n );\n };\n\n \/\/ Render\n const root = ReactDOM.createRoot(document.getElementById('root'));\n root.render(<App \/>);\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>CifraStage Pro – Afinador e Cifragem Autom\u00e1tica<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/solucaoweb.online\/cifrastage\/wp-json\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solucaoweb.online\/cifrastage\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/solucaoweb.online\/cifrastage\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/solucaoweb.online\/cifrastage\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solucaoweb.online\/cifrastage\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":7,"href":"https:\/\/solucaoweb.online\/cifrastage\/wp-json\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":17,"href":"https:\/\/solucaoweb.online\/cifrastage\/wp-json\/wp\/v2\/pages\/9\/revisions\/17"}],"wp:attachment":[{"href":"https:\/\/solucaoweb.online\/cifrastage\/wp-json\/wp\/v2\/media?parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n CifraStage Pro - Afinador e Cifragem Autom\u00e1tica<\/title>\n <script src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n background: #0a0a0a;\n color: #ffffff;\n -webkit-font-smoothing: antialiased;\n }\n\n .font-mono {\n font-family: 'JetBrains Mono', 'Fira Code', monospace;\n }\n\n \/* Custom Scrollbar *\/\n ::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n }\n\n ::-webkit-scrollbar-track {\n background: #1a1a1a;\n }\n\n ::-webkit-scrollbar-thumb {\n background: #3a3a3a;\n border-radius: 3px;\n }\n\n ::-webkit-scrollbar-thumb:hover {\n background: #4a4a4a;\n }\n\n \/* Glow Effects *\/\n .glow-amber {\n box-shadow: 0 0 20px rgba(245, 166, 35, 0.3);\n }\n\n .glow-lime {\n box-shadow: 0 0 20px rgba(163, 230, 53, 0.4);\n }\n\n .glow-cyan {\n box-shadow: 0 0 20px rgba(0, 217, 255, 0.3);\n }\n\n \/* Tuner Needle Animation *\/\n .needle {\n transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);\n transform-origin: bottom center;\n }\n\n \/* Wave Animation for Audio *\/\n @keyframes sound-wave {\n 0%, 100% { transform: scale(1); opacity: 0.3; }\n 50% { transform: scale(1.1); opacity: 0.6; }\n }\n\n .sound-wave {\n animation: sound-wave 1.5s ease-in-out infinite;\n }\n\n \/* Chord detection pulse *\/\n @keyframes chord-pulse {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.05); }\n }\n\n .chord-active {\n animation: chord-pulse 0.3s ease-in-out;\n }\n\n \/* Gradient Text *\/\n .text-gradient {\n background: linear-gradient(135deg, #F5A623 0%, #D4AF37 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n <\/style>\n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n stage: {\n 950: '#0a0a0a',\n 900: '#0D0D0D',\n 800: '#111111',\n 700: '#1a1a1a',\n 600: '#2a2a2a',\n 500: '#3a3a3a',\n },\n accent: {\n amber: '#F5A623',\n gold: '#D4AF37',\n lime: '#A3E635',\n cyan: '#00D9FF',\n red: '#EF4444',\n blue: '#3B82F6',\n }\n }\n }\n }\n }\n <\/script>\n<\/head>\n<body>\n <div id=\"root\"><\/div>\n\n <script type=\"text\/babel\">\n const { useState, useEffect, useRef, useCallback } = React;\n\n \/\/ ============================================\n \/\/ UTILIT\u00c1RIOS DE \u00c1UDIO\n \/\/ ============================================\n\n \/\/ Algoritmo de Autocorrela\u00e7\u00e3o para Pitch Detection\n class PitchDetector {\n constructor(audioContext, analyser) {\n this.audioContext = audioContext;\n this.analyser = analyser;\n this.bufferLength = analyser.fftSize;\n this.buffer = new Float32Array(this.bufferLength);\n this.noteStrings = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];\n }\n\n autoCorrelate(buf, sampleRate) {\n let SIZE = buf.length;\n let rms = 0;\n\n for (let i = 0; i < SIZE; i++) {\n const val = buf[i];\n rms += val * val;\n }\n rms = Math.sqrt(rms \/ SIZE);\n\n if (rms < 0.01) return -1;\n\n let r1 = 0, r2 = SIZE - 1, thres = 0.2;\n for (let i = 0; i < SIZE \/ 2; i++) {\n if (Math.abs(buf[i]) < thres) { r1 = i; break; }\n }\n for (let i = 1; i < SIZE \/ 2; i++) {\n if (Math.abs(buf[SIZE - i]) < thres) { r2 = SIZE - i; break; }\n }\n\n buf = buf.slice(r1, r2);\n SIZE = buf.length;\n\n let c = new Array(SIZE).fill(0);\n for (let i = 0; i < SIZE; i++) {\n for (let j = 0; j < SIZE - i; j++) {\n c[i] = c[i] + buf[j] * buf[j + i];\n }\n }\n\n let d = 0;\n while (c[d] > c[d + 1]) d++;\n let maxval = -1, maxpos = -1;\n for (let i = d; i < SIZE; i++) {\n if (c[i] > maxval) {\n maxval = c[i];\n maxpos = i;\n }\n }\n let T0 = maxpos;\n\n \/\/ Interpola\u00e7\u00e3o parab\u00f3lica\n if (T0 > 0 && T0 < c.length - 1) {\n let x1 = c[T0 - 1], x2 = c[T0], x3 = c[T0 + 1];\n let a = (x1 + x3 - 2 * x2) \/ 2;\n let b = (x3 - x1) \/ 2;\n if (a) T0 = T0 - b \/ (2 * a);\n }\n\n return sampleRate \/ T0;\n }\n\n detectPitch() {\n this.analyser.getFloatTimeDomainData(this.buffer);\n const frequency = this.autoCorrelate(this.buffer, this.audioContext.sampleRate);\n\n if (frequency === -1) return null;\n\n const noteNum = 12 * (Math.log(frequency \/ 440) \/ Math.log(2));\n const midiNum = Math.round(noteNum) + 69;\n const noteName = this.noteStrings[midiNum % 12];\n const octave = Math.floor(midiNum \/ 12) - 1;\n\n const expectedFreq = 440 * Math.pow(2, (midiNum - 69) \/ 12);\n const cents = 1200 * Math.log2(frequency \/ expectedFreq);\n\n return {\n frequency: Math.round(frequency * 10) \/ 10,\n note: noteName,\n octave: octave,\n cents: Math.round(cents * 10) \/ 10,\n midi: midiNum,\n detuned: Math.abs(cents) > 5\n };\n }\n }\n\n \/\/ Detector de Acordes usando Cromagrama\n class ChordDetector {\n constructor(audioContext, analyser) {\n this.audioContext = audioContext;\n this.analyser = analyser;\n this.fftSize = analyser.fftSize;\n this.frequencyData = new Float32Array(this.analyser.frequencyBinCount);\n this.fref = 261.63; \/\/ C4\n\n this.chordTemplates = {\n 'C': [1,0,0,0,1,0,0,1,0,0,0,0],\n 'C#': [0,1,0,0,0,1,0,0,1,0,0,0],\n 'D': [0,0,1,0,0,0,1,0,0,1,0,0],\n 'D#': [0,0,0,1,0,0,0,1,0,0,1,0],\n 'E': [0,0,0,0,1,0,0,0,1,0,0,1],\n 'F': [1,0,0,0,0,1,0,0,0,1,0,0],\n 'F#': [0,1,0,0,0,0,1,0,0,0,1,0],\n 'G': [0,0,1,0,0,0,0,1,0,0,0,1],\n 'G#': [1,0,0,1,0,0,0,0,1,0,0,0],\n 'A': [0,1,0,0,1,0,0,0,0,1,0,0],\n 'A#': [0,0,1,0,0,1,0,0,0,0,1,0],\n 'B': [0,0,0,1,0,0,1,0,0,0,0,1],\n 'Cm': [1,0,0,1,0,0,0,1,0,0,0,0],\n 'C#m':[0,1,0,0,1,0,0,0,1,0,0,0],\n 'Dm': [0,0,1,0,0,1,0,0,0,1,0,0],\n 'D#m':[0,0,0,1,0,0,1,0,0,0,1,0],\n 'Em': [0,0,0,0,1,0,0,1,0,0,0,1],\n 'Fm': [1,0,0,0,0,1,0,0,1,0,0,0],\n 'F#m':[0,1,0,0,0,0,1,0,0,1,0,0],\n 'Gm': [0,0,1,0,0,0,0,1,0,0,1,0],\n 'G#m':[0,0,0,1,0,0,0,0,1,0,0,1],\n 'Am': [1,0,0,0,1,0,0,0,0,1,0,0],\n 'A#m':[0,1,0,0,0,1,0,0,0,0,1,0],\n 'Bm': [0,0,1,0,0,0,1,0,0,0,0,1],\n };\n }\n\n computeChromagram() {\n this.analyser.getFloatFrequencyData(this.frequencyData);\n const fs = this.audioContext.sampleRate;\n const N = this.fftSize;\n\n let PCP = new Array(12).fill(0);\n\n for (let l = 0; l < this.analyser.frequencyBinCount; l++) {\n const frequency = (l * fs) \/ N;\n if (frequency > 0 && frequency < 5000) {\n const pitchClass = Math.round(12 * Math.log2(frequency \/ this.fref)) % 12;\n if (pitchClass >= 0 && pitchClass < 12) {\n const magnitude = Math.pow(10, this.frequencyData[l] \/ 20);\n PCP[pitchClass] += magnitude;\n }\n }\n }\n\n const maxVal = Math.max(...PCP);\n if (maxVal > 0) {\n PCP = PCP.map(v => v \/ maxVal);\n }\n\n return PCP;\n }\n\n detectChord() {\n const chromagram = this.computeChromagram();\n let bestChord = null;\n let bestScore = -1;\n\n for (const [chordName, template] of Object.entries(this.chordTemplates)) {\n let score = 0;\n for (let i = 0; i < 12; i++) {\n score += chromagram[i] * template[i];\n }\n\n if (score > bestScore) {\n bestScore = score;\n bestChord = chordName;\n }\n }\n\n if (bestScore < 0.2) return null;\n\n return {\n chord: bestChord,\n confidence: Math.round(bestScore * 100),\n chromagram: chromagram\n };\n }\n }\n\n \/\/ Transposi\u00e7\u00e3o de acordes\n const transposeChord = (chord, semitones) => {\n const notes = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];\n const flatToSharp = { 'Db': 'C#', 'Eb': 'D#', 'Gb': 'F#', 'Ab': 'G#', 'Bb': 'A#' };\n\n const match = chord.match(\/^([A-G][#b]?)(.*)$\/);\n if (!match) return chord;\n\n let [_, root, suffix] = match;\n if (flatToSharp[root]) root = flatToSharp[root];\n\n const noteIndex = notes.indexOf(root);\n if (noteIndex === -1) return chord;\n\n const newIndex = (noteIndex + semitones + 12) % 12;\n return notes[newIndex] + suffix;\n };\n\n const transposeText = (text, semitones) => {\n const chordRegex = \/\b([A-G][#b]?(?:m(?:aj7?|in)?|sus[24]?|dim|aug|add[29]|m?7|\u00b0|\\+)?(?:\\\/[A-G][#b]?)?)\b\/g;\n return text.replace(chordRegex, (match) => transposeChord(match, semitones));\n };\n\n \/\/ ============================================\n \/\/ COMPONENTE: AFINADOR\n \/\/ ============================================\n const Tuner = () => {\n const [isActive, setIsActive] = useState(false);\n const [pitch, setPitch] = useState(null);\n const [error, setError] = useState(null);\n const audioContextRef = useRef(null);\n const analyserRef = useRef(null);\n const detectorRef = useRef(null);\n const animationRef = useRef(null);\n const streamRef = useRef(null);\n\n const startTuner = async () => {\n try {\n setError(null);\n const stream = await navigator.mediaDevices.getUserMedia({ audio: true });\n streamRef.current = stream;\n\n audioContextRef.current = new (window.AudioContext || window.webkitAudioContext)();\n const source = audioContextRef.current.createMediaStreamSource(stream);\n analyserRef.current = audioContextRef.current.createAnalyser();\n analyserRef.current.fftSize = 2048;\n\n source.connect(analyserRef.current);\n detectorRef.current = new PitchDetector(audioContextRef.current, analyserRef.current);\n\n setIsActive(true);\n detectPitch();\n } catch (err) {\n setError('Permiss\u00e3o de microfone negada ou n\u00e3o dispon\u00edvel');\n }\n };\n\n const stopTuner = () => {\n if (animationRef.current) cancelAnimationFrame(animationRef.current);\n if (streamRef.current) {\n streamRef.current.getTracks().forEach(track => track.stop());\n }\n if (audioContextRef.current) {\n audioContextRef.current.close();\n }\n setIsActive(false);\n setPitch(null);\n };\n\n const detectPitch = useCallback(() => {\n if (!detectorRef.current || !isActive) return;\n\n const result = detectorRef.current.detectPitch();\n if (result) {\n setPitch(result);\n }\n animationRef.current = requestAnimationFrame(detectPitch);\n }, [isActive]);\n\n useEffect(() => {\n return () => stopTuner();\n }, []);\n\n const getPointerRotation = () => {\n if (!pitch) return 0;\n const cents = Math.max(-50, Math.min(50, pitch.cents));\n return (cents \/ 50) * 45;\n };\n\n const getTuningStatus = () => {\n if (!pitch) return 'neutral';\n if (Math.abs(pitch.cents) < 5) return 'perfect';\n if (pitch.cents < 0) return 'flat';\n return 'sharp';\n };\n\n const status = getTuningStatus();\n const rotation = getPointerRotation();\n\n return (\n <div className=\"bg-stage-800 rounded-2xl p-6 border border-stage-600 shadow-2xl\">\n <div className=\"flex items-center justify-between mb-6\">\n <div className=\"flex items-center gap-3\">\n <div className=\"w-10 h-10 rounded-xl bg-accent-amber\/20 flex items-center justify-center\">\n <svg className=\"w-6 h-6 text-accent-amber\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3\" \/>\n <\/svg>\n <\/div>\n <div>\n <h2 className=\"text-xl font-bold text-white\">Afinador Crom\u00e1tico<\/h2>\n <p className=\"text-xs text-gray-400\">Detec\u00e7\u00e3o em tempo real<\/p>\n <\/div>\n <\/div>\n\n <button\n onClick={isActive ? stopTuner : startTuner}\n className={`flex items-center gap-2 px-4 py-2 rounded-full font-medium transition-all ${\n isActive \n ? 'bg-red-500\/20 text-red-400 hover:bg-red-500\/30 border border-red-500\/30' \n : 'bg-accent-amber\/20 text-accent-amber hover:bg-accent-amber\/30 border border-accent-amber\/30'\n }`}\n >\n {isActive ? (\n <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" \/>\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z\" \/>\n <\/svg>\n ) : (\n <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z\" \/>\n <\/svg>\n )}\n {isActive ? 'Parar' : 'Ativar'}\n <\/button>\n <\/div>\n\n {error && (\n <div className=\"mb-4 p-3 bg-red-500\/10 border border-red-500\/30 rounded-lg text-red-400 text-sm\">\n {error}\n <\/div>\n )}\n\n {\/* Display do Afinador *\/}\n <div className=\"relative h-56 flex items-center justify-center mb-6\">\n {\/* Arco de fundo *\/}\n <div className=\"absolute w-56 h-28 overflow-hidden\">\n <div className=\"w-56 h-56 rounded-full border-8 border-stage-600 border-b-0\"><\/div>\n <\/div>\n\n {\/* Marcadores *\/}\n <div className=\"absolute w-48 h-24\">\n {[-50, -25, 0, 25, 50].map((mark) => (\n <div\n key={mark}\n className=\"absolute bottom-0 left-1\/2 w-0.5 origin-bottom\"\n style={{ \n transform: `rotate(${(mark \/ 50) * 45}deg) translateX(-50%)`,\n height: mark === 0 ? '20px' : '12px',\n backgroundColor: mark === 0 ? '#F5A623' : '#3a3a3a'\n }}\n >\n <span className=\"absolute -top-5 left-1\/2 -translate-x-1\/2 text-[10px] text-gray-500\">\n {mark === 0 ? '0' : mark}\n <\/span>\n <\/div>\n ))}\n <\/div>\n\n {\/* Ponteiro *\/}\n <div\n className={`absolute w-1 h-24 origin-bottom rounded-full needle ${\n status === 'perfect' ? 'bg-accent-lime glow-lime' : 'bg-accent-amber'\n }`}\n style={{ \n transform: `rotate(${rotation}deg)`,\n bottom: '50%'\n }}\n >\n <div className=\"absolute -top-1 left-1\/2 -translate-x-1\/2 w-2 h-2 rounded-full bg-current\"><\/div>\n <\/div>\n\n {\/* Centro *\/}\n <div className=\"absolute w-3 h-3 bg-stage-700 rounded-full border-2 border-stage-500\"><\/div>\n <\/div>\n\n {\/* Display de Nota *\/}\n <div className=\"text-center\">\n {pitch ? (\n <div className=\"space-y-2\">\n <div className=\"flex items-center justify-center gap-2\">\n <span className={`text-6xl font-bold font-mono ${\n status === 'perfect' ? 'text-accent-lime' : \n status === 'flat' ? 'text-accent-blue' : \n status === 'sharp' ? 'text-accent-red' : 'text-white'\n }`}>\n {pitch.note}\n <\/span>\n <span className=\"text-2xl text-gray-400\">{pitch.octave}<\/span>\n <\/div>\n <p className=\"text-2xl font-mono text-accent-amber\">{pitch.frequency} Hz<\/p>\n <p className={`text-sm font-medium ${\n status === 'perfect' ? 'text-accent-lime' : \n status === 'flat' ? 'text-accent-blue' : 'text-accent-red'\n }`}>\n {status === 'perfect' ? '\u2713 Perfeitamente afinado' : \n status === 'flat' ? `\u266d Baixo (${pitch.cents} cents)` : \n `\u266f Alto (${pitch.cents} cents)`}\n <\/p>\n <\/div>\n ) : (\n <div className=\"text-gray-500 flex flex-col items-center gap-2 py-8\">\n <svg className=\"w-12 h-12 opacity-30\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3\" \/>\n <\/svg>\n <p className=\"text-sm\">{isActive ? 'Aguardando \u00e1udio...' : 'Ative o microfone para come\u00e7ar'}<\/p>\n <\/div>\n )}\n <\/div>\n\n {\/* Status *\/}\n <div className=\"mt-6 flex items-center justify-center gap-2\">\n <div className={`w-2 h-2 rounded-full ${isActive ? 'bg-accent-lime animate-pulse' : 'bg-stage-600'}`}><\/div>\n <span className=\"text-xs text-gray-400\">\n {isActive ? 'Analisando frequ\u00eancias...' : 'Standby'}\n <\/span>\n <\/div>\n <\/div>\n );\n };\n\n \/\/ ============================================\n \/\/ COMPONENTE: CIFRADOR AUTOM\u00c1TICO\n \/\/ ============================================\n const AutoChord = () => {\n const [mode, setMode] = useState('mic');\n const [isListening, setIsListening] = useState(false);\n const [detectedChords, setDetectedChords] = useState([]);\n const [currentChord, setCurrentChord] = useState(null);\n const [audioFile, setAudioFile] = useState(null);\n const [isProcessing, setIsProcessing] = useState(false);\n\n const audioContextRef = useRef(null);\n const analyserRef = useRef(null);\n const detectorRef = useRef(null);\n const animationRef = useRef(null);\n const streamRef = useRef(null);\n\n const startMicDetection = async () => {\n try {\n const stream = await navigator.mediaDevices.getUserMedia({ audio: true });\n streamRef.current = stream;\n\n audioContextRef.current = new (window.AudioContext || window.webkitAudioContext)();\n const source = audioContextRef.current.createMediaStreamSource(stream);\n analyserRef.current = audioContextRef.current.createAnalyser();\n analyserRef.current.fftSize = 4096;\n\n source.connect(analyserRef.current);\n detectorRef.current = new ChordDetector(audioContextRef.current, analyserRef.current);\n\n setIsListening(true);\n detectChords();\n } catch (err) {\n alert('N\u00e3o foi poss\u00edvel acessar o microfone');\n }\n };\n\n const processAudioFile = async (file) => {\n setIsProcessing(true);\n setAudioFile(file);\n\n \/\/ Simula\u00e7\u00e3o de processamento - em produ\u00e7\u00e3o seria an\u00e1lise real\n await new Promise(r => setTimeout(r, 2000));\n\n const simulatedChords = [\n { time: '0:00', chord: 'C', confidence: 85 },\n { time: '0:04', chord: 'G', confidence: 78 },\n { time: '0:08', chord: 'Am', confidence: 82 },\n { time: '0:12', chord: 'F', confidence: 80 },\n { time: '0:16', chord: 'C', confidence: 88 },\n { time: '0:20', chord: 'G\/B', confidence: 75 },\n { time: '0:24', chord: 'Am', confidence: 83 },\n { time: '0:28', chord: 'G', confidence: 79 },\n ];\n\n setDetectedChords(simulatedChords);\n setIsProcessing(false);\n };\n\n const detectChords = useCallback(() => {\n if (!detectorRef.current || !isListening) return;\n\n const result = detectorRef.current.detectChord();\n if (result && result.confidence > 50) {\n setCurrentChord(result);\n\n setDetectedChords(prev => {\n const last = prev[prev.length - 1];\n if (!last || last.chord !== result.chord) {\n const newEntry = { \n time: new Date().toLocaleTimeString().slice(0,5), \n chord: result.chord, \n confidence: result.confidence \n };\n return [...prev.slice(-19), newEntry];\n }\n return prev;\n });\n }\n\n animationRef.current = requestAnimationFrame(detectChords);\n }, [isListening]);\n\n const stopDetection = () => {\n if (animationRef.current) cancelAnimationFrame(animationRef.current);\n if (streamRef.current) {\n streamRef.current.getTracks().forEach(track => track.stop());\n }\n setIsListening(false);\n setCurrentChord(null);\n };\n\n useEffect(() => {\n return () => stopDetection();\n }, []);\n\n const handleFileUpload = (e) => {\n const file = e.target.files[0];\n if (file) processAudioFile(file);\n };\n\n return (\n <div className=\"bg-stage-800 rounded-2xl p-6 border border-stage-600 shadow-2xl\">\n <div className=\"flex items-center justify-between mb-6\">\n <div className=\"flex items-center gap-3\">\n <div className=\"w-10 h-10 rounded-xl bg-accent-cyan\/20 flex items-center justify-center\">\n <svg className=\"w-6 h-6 text-accent-cyan\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M13 10V3L4 14h7v7l9-11h-7z\" \/>\n <\/svg>\n <\/div>\n <div>\n <h2 className=\"text-xl font-bold text-white\">Cifragem Autom\u00e1tica<\/h2>\n <p className=\"text-xs text-gray-400\">IA detecta acordes em tempo real<\/p>\n <\/div>\n <\/div>\n\n <div className=\"flex bg-stage-700 rounded-lg p-1\">\n <button\n onClick={() => { setMode('mic'); setDetectedChords([]); stopDetection(); }}\n className={`flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium transition-all ${\n mode === 'mic' ? 'bg-accent-cyan text-stage-900' : 'text-gray-400 hover:text-white'\n }`}\n >\n <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z\" \/>\n <\/svg>\n Mic\n <\/button>\n <button\n onClick={() => { setMode('file'); setDetectedChords([]); stopDetection(); }}\n className={`flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium transition-all ${\n mode === 'file' ? 'bg-accent-cyan text-stage-900' : 'text-gray-400 hover:text-white'\n }`}\n >\n <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12\" \/>\n <\/svg>\n Arquivo\n <\/button>\n <\/div>\n <\/div>\n\n {mode === 'mic' ? (\n <div className=\"space-y-4\">\n <div className=\"flex justify-center\">\n <button\n onClick={isListening ? stopDetection : startMicDetection}\n className={`relative w-24 h-24 rounded-full flex items-center justify-center transition-all ${\n isListening \n ? 'bg-red-500\/20 text-red-400 border-4 border-red-500' \n : 'bg-accent-cyan\/20 text-accent-cyan border-4 border-accent-cyan hover:bg-accent-cyan\/30'\n }`}\n >\n {isListening ? (\n <svg className=\"w-10 h-10\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M6 4h4v16H6V4zm8 0h4v16h-4V4z\"\/>\n <\/svg>\n ) : (\n <svg className=\"w-10 h-10\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z\" \/>\n <\/svg>\n )}\n\n {isListening && (\n <>\n <div className=\"absolute inset-0 rounded-full border-4 border-red-500 animate-ping opacity-20\"><\/div>\n <div className=\"absolute -inset-4 rounded-full border-2 border-red-400 animate-ping opacity-10\" style={{animationDelay: '0.1s'}}><\/div>\n <\/>\n )}\n <\/button>\n <\/div>\n\n <p className=\"text-center text-gray-400 text-sm\">\n {isListening \n ? 'Toque seu instrumento pr\u00f3ximo ao microfone...' \n : 'Clique para ativar e come\u00e7ar a tocar'}\n <\/p>\n\n {\/* Acorde Atual *\/}\n {currentChord && (\n <div className=\"text-center p-4 bg-stage-700\/50 rounded-xl border border-accent-cyan\/30 chord-active\">\n <p className=\"text-gray-400 text-sm mb-1\">Acorde detectado<\/p>\n <p className=\"text-5xl font-bold text-accent-cyan font-mono\">{currentChord.chord}<\/p>\n <div className=\"flex items-center justify-center gap-2 mt-2\">\n <div className=\"w-24 h-2 bg-stage-600 rounded-full overflow-hidden\">\n <div \n className=\"h-full bg-accent-cyan transition-all duration-300\"\n style={{ width: `${currentChord.confidence}%` }}\n ><\/div>\n <\/div>\n <span className=\"text-xs text-gray-400\">{currentChord.confidence}%<\/span>\n <\/div>\n <\/div>\n )}\n <\/div>\n ) : (\n <div className=\"space-y-4\">\n <label className=\"flex flex-col items-center justify-center w-full h-32 border-2 border-dashed border-stage-500 rounded-xl cursor-pointer hover:border-accent-cyan hover:bg-stage-700\/30 transition-all\">\n <div className=\"flex flex-col items-center justify-center pt-5 pb-6\">\n <svg className=\"w-8 h-8 text-gray-400 mb-2\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12\" \/>\n <\/svg>\n <p className=\"text-sm text-gray-400\">Clique para enviar MP3\/WAV<\/p>\n <p className=\"text-xs text-gray-500 mt-1\">ou arraste o arquivo aqui<\/p>\n <\/div>\n <input type=\"file\" className=\"hidden\" accept=\"audio\/*\" onChange={handleFileUpload} \/>\n <\/label>\n\n {isProcessing && (\n <div className=\"flex items-center justify-center gap-2 text-accent-cyan\">\n <svg className=\"w-5 h-5 animate-spin\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\"><\/circle>\n <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"><\/path>\n <\/svg>\n <span className=\"text-sm\">Analisando \u00e1udio com IA...<\/span>\n <\/div>\n )}\n\n {audioFile && !isProcessing && (\n <p className=\"text-center text-sm text-gray-400\">\n Arquivo: <span className=\"text-white\">{audioFile.name}<\/span>\n <\/p>\n )}\n <\/div>\n )}\n\n {\/* Hist\u00f3rico de Acordes *\/}\n {detectedChords.length > 0 && (\n <div className=\"mt-6\">\n <h3 className=\"text-sm font-medium text-gray-400 mb-3 flex items-center gap-2\">\n <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3\" \/>\n <\/svg>\n Progress\u00e3o detectada\n <\/h3>\n <div className=\"flex flex-wrap gap-2 max-h-40 overflow-y-auto p-2 bg-stage-900\/50 rounded-lg\">\n {detectedChords.map((item, idx) => (\n <div \n key={idx}\n className={`px-3 py-2 rounded-lg font-mono font-bold text-sm transition-all ${\n idx === detectedChords.length - 1 && isListening\n ? 'bg-accent-cyan text-stage-900 ring-2 ring-accent-cyan scale-105' \n : 'bg-stage-700 text-gray-300 hover:bg-stage-600'\n }`}\n >\n {item.chord}\n <span className=\"block text-xs font-normal opacity-70\">{item.time}<\/span>\n <\/div>\n ))}\n <\/div>\n\n <button\n onClick={() => {\n const chordText = detectedChords.map(c => c.chord).join(' | ');\n navigator.clipboard.writeText(chordText);\n alert('Sequ\u00eancia copiada!');\n }}\n className=\"mt-3 w-full py-2 bg-stage-700 hover:bg-stage-600 text-gray-300 rounded-lg text-sm transition-colors flex items-center justify-center gap-2\"\n >\n <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3\" \/>\n <\/svg>\n Copiar sequ\u00eancia\n <\/button>\n <\/div>\n )}\n <\/div>\n );\n };\n\n \/\/ ============================================\n \/\/ COMPONENTE: EDITOR DE CIFRAS\n \/\/ ============================================\n const ChordEditor = () => {\n const [content, setContent] = useState(\n` C G\nEssa \u00e9 uma m\u00fasica de exemplo\n Am F\nPara demonstrar o editor de cifras\n\n C G\/B Am\nVoc\u00ea pode transpor os acordes\n F G C\nUsando os controles acima`\n );\n const [transpose, setTranspose] = useState(0);\n const [isEditing, setIsEditing] = useState(false);\n\n useEffect(() => {\n \/\/ Atualiza display quando muda transposi\u00e7\u00e3o\n }, [content, transpose]);\n\n const handleTranspose = (direction) => {\n setTranspose(prev => {\n const newVal = prev + direction;\n return Math.max(-11, Math.min(11, newVal));\n });\n };\n\n const resetTranspose = () => setTranspose(0);\n\n const displayContent = transpose === 0 ? content : transposeText(content, transpose);\n\n \/\/ Renderiza cifra com destaque nos acordes\n const renderChordChart = (text) => {\n const lines = text.split('\\n');\n\n return lines.map((line, lineIdx) => {\n const chordRegex = \/\b([A-G][#b]?(?:m(?:aj7?|in)?|sus[24]?|dim|aug|add[29]|m?7|\u00b0|\\+)?(?:\\\/[A-G][#b]?)?)\b\/g;\n\n if (line.match(chordRegex) && !line.match(\/[a-z]{3,}\/i)) {\n const parts = [];\n let lastIndex = 0;\n let match;\n\n while ((match = chordRegex.exec(line)) !== null) {\n if (match.index > lastIndex) {\n parts.push(\n <span key={`text-${lineIdx}-${lastIndex}`} className=\"text-gray-300\">\n {line.slice(lastIndex, match.index)}\n <\/span>\n );\n }\n parts.push(\n <span key={`chord-${lineIdx}-${match.index}`} className=\"text-accent-amber font-bold\">\n {match[0]}\n <\/span>\n );\n lastIndex = match.index + match[0].length;\n }\n\n if (lastIndex < line.length) {\n parts.push(\n <span key={`end-${lineIdx}`} className=\"text-gray-300\">\n {line.slice(lastIndex)}\n <\/span>\n );\n }\n\n return (\n <div key={lineIdx} className=\"font-mono text-lg leading-relaxed whitespace-pre\">\n {parts}\n <\/div>\n );\n }\n\n return (\n <div key={lineIdx} className=\"text-gray-300 leading-relaxed whitespace-pre\">\n {line}\n <\/div>\n );\n });\n };\n\n return (\n <div className=\"bg-stage-800 rounded-2xl p-6 border border-stage-600 shadow-2xl\">\n <div className=\"flex items-center justify-between mb-4\">\n <div className=\"flex items-center gap-3\">\n <div className=\"w-10 h-10 rounded-xl bg-accent-amber\/20 flex items-center justify-center\">\n <svg className=\"w-6 h-6 text-accent-amber\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\" \/>\n <\/svg>\n <\/div>\n <div>\n <h2 className=\"text-xl font-bold text-white\">Editor de Cifras<\/h2>\n <p className=\"text-xs text-gray-400\">Transposi\u00e7\u00e3o em tempo real<\/p>\n <\/div>\n <\/div>\n\n <div className=\"flex items-center gap-2\">\n <button\n onClick={() => setIsEditing(!isEditing)}\n className={`px-4 py-2 rounded-lg font-medium transition-all ${\n isEditing ? 'bg-accent-amber text-stage-900' : 'bg-stage-700 text-gray-300 hover:bg-stage-600'\n }`}\n >\n {isEditing ? 'Visualizar' : 'Editar'}\n <\/button>\n <\/div>\n <\/div>\n\n {\/* Controles de Transposi\u00e7\u00e3o *\/}\n <div className=\"flex items-center justify-between mb-4 p-3 bg-stage-700\/50 rounded-lg\">\n <div className=\"flex items-center gap-4\">\n <span className=\"text-sm text-gray-400\">Transposi\u00e7\u00e3o:<\/span>\n <div className=\"flex items-center gap-2\">\n <button\n onClick={() => handleTranspose(-1)}\n className=\"p-1 hover:bg-stage-600 rounded text-accent-amber transition-colors\"\n >\n <svg className=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 9l-7 7-7-7\" \/>\n <\/svg>\n <\/button>\n <span className={`w-12 text-center font-mono font-bold text-lg ${\n transpose === 0 ? 'text-gray-400' : transpose > 0 ? 'text-accent-red' : 'text-accent-blue'\n }`}>\n {transpose > 0 ? `+${transpose}` : transpose}\n <\/span>\n <button\n onClick={() => handleTranspose(1)}\n className=\"p-1 hover:bg-stage-600 rounded text-accent-amber transition-colors\"\n >\n <svg className=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" \/>\n <\/svg>\n <\/button>\n <\/div>\n <span className=\"text-xs text-gray-500\">semitons<\/span>\n <\/div>\n\n {transpose !== 0 && (\n <button\n onClick={resetTranspose}\n className=\"flex items-center gap-1 text-xs text-gray-400 hover:text-white transition-colors\"\n >\n <svg className=\"w-3 h-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\" \/>\n <\/svg>\n Voltar ao original\n <\/button>\n )}\n <\/div>\n\n {\/* \u00c1rea de Edi\u00e7\u00e3o\/Visualiza\u00e7\u00e3o *\/}\n <div className=\"bg-stage-900 rounded-xl p-4 min-h-[300px] max-h-[400px] overflow-auto\">\n {isEditing ? (\n <textarea\n value={content}\n onChange={(e) => setContent(e.target.value)}\n className=\"w-full h-full min-h-[300px] bg-transparent text-gray-300 font-mono text-base leading-relaxed resize-none focus:outline-none\"\n placeholder=\"Cole ou digite a cifra aqui...\"\n \/>\n ) : (\n <div className=\"font-mono\">\n {renderChordChart(displayContent)}\n <\/div>\n )}\n <\/div>\n\n {\/* Status *\/}\n <div className=\"mt-4 flex items-center justify-between text-xs text-gray-500\">\n <span>Tom original: C<\/span>\n <span className={transpose !== 0 ? 'text-accent-amber' : ''}>\n Tom atual: {transpose === 0 ? 'C' : transpose > 0 ? `C (+${transpose})` : `C (${transpose})`}\n <\/span>\n <\/div>\n <\/div>\n );\n };\n\n \/\/ ============================================\n \/\/ APP PRINCIPAL\n \/\/ ============================================\n const App = () => {\n const [activeTab, setActiveTab] = useState('tuner');\n\n const tabs = [\n { id: 'tuner', label: 'Afinador', icon: 'tuner' },\n { id: 'chord', label: 'Cifragem Auto', icon: 'chord' },\n { id: 'editor', label: 'Editor', icon: 'editor' },\n ];\n\n const renderIcon = (icon) => {\n const icons = {\n tuner: <svg className=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3\" \/><\/svg>,\n chord: <svg className=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M13 10V3L4 14h7v7l9-11h-7z\" \/><\/svg>,\n editor: <svg className=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\" \/><\/svg>,\n };\n return icons[icon];\n };\n\n return (\n <div className=\"min-h-screen bg-stage-950\">\n {\/* Header *\/}\n <header className=\"bg-stage-900 border-b border-stage-700 sticky top-0 z-50\">\n <div className=\"max-w-6xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div className=\"flex items-center justify-between h-16\">\n <div className=\"flex items-center gap-3\">\n <div className=\"w-10 h-10 bg-gradient-to-br from-accent-amber to-accent-gold rounded-xl flex items-center justify-center shadow-lg\">\n <svg className=\"w-6 h-6 text-stage-900\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z\"\/>\n <\/svg>\n <\/div>\n <div>\n <h1 className=\"text-xl font-bold text-white\">CifraStage<\/h1>\n <p className=\"text-xs text-accent-amber font-medium\">Pro<\/p>\n <\/div>\n <\/div>\n\n <div className=\"flex items-center gap-2\">\n <span className=\"text-xs text-gray-500 hidden sm:block\">v2.0<\/span>\n <button className=\"p-2 hover:bg-stage-800 rounded-lg transition-colors\">\n <svg className=\"w-5 h-5 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z\" \/>\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\" \/>\n <\/svg>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/header>\n\n {\/* Navigation *\/}\n <nav className=\"bg-stage-900 border-b border-stage-700\">\n <div className=\"max-w-6xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div className=\"flex space-x-1 overflow-x-auto\">\n {tabs.map((tab) => (\n <button\n key={tab.id}\n onClick={() => setActiveTab(tab.id)}\n className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-all whitespace-nowrap ${\n activeTab === tab.id \n ? 'border-accent-amber text-accent-amber' \n : 'border-transparent text-gray-400 hover:text-white hover:border-stage-600'\n }`}\n >\n {renderIcon(tab.icon)}\n {tab.label}\n <\/button>\n ))}\n <\/div>\n <\/div>\n <\/nav>\n\n {\/* Main Content *\/}\n <main className=\"max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8\">\n <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n {activeTab === 'tuner' && (\n <>\n <Tuner \/>\n <div className=\"space-y-6\">\n <div className=\"bg-stage-800 rounded-2xl p-6 border border-stage-600\">\n <h3 className=\"font-bold text-white mb-3\">Como usar o Afinador<\/h3>\n <ul className=\"space-y-2 text-sm text-gray-400\">\n <li className=\"flex items-start gap-2\">\n <span className=\"text-accent-amber\">1.<\/span>\n Clique em \"Ativar\" e permita o acesso ao microfone\n <\/li>\n <li className=\"flex items-start gap-2\">\n <span className=\"text-accent-amber\">2.<\/span>\n Toque uma nota no seu instrumento\n <\/li>\n <li className=\"flex items-start gap-2\">\n <span className=\"text-accent-amber\">3.<\/span>\n Ajuste at\u00e9 o ponteiro ficar verde (0 cents)\n <\/li>\n <\/ul>\n <\/div>\n <div className=\"bg-gradient-to-br from-accent-amber\/10 to-accent-gold\/10 rounded-2xl p-6 border border-accent-amber\/20\">\n <h4 className=\"font-bold text-accent-amber mb-2\">\ud83d\udca1 Dica Pro<\/h4>\n <p className=\"text-sm text-gray-300\">\n Em ambientes barulhentos, aproxime o microfone do instrumento para melhor precis\u00e3o.\n <\/p>\n <\/div>\n <\/div>\n <\/>\n )}\n\n {activeTab === 'chord' && (\n <>\n <AutoChord \/>\n <div className=\"space-y-6\">\n <div className=\"bg-stage-800 rounded-2xl p-6 border border-stage-600\">\n <h3 className=\"font-bold text-white mb-3\">Cifragem por IA<\/h3>\n <p className=\"text-sm text-gray-400 mb-4\">\n Nossa tecnologia analisa o espectro de frequ\u00eancias do \u00e1udio e identifica os acordes em tempo real usando algoritmos de Cromagrama (PCP).\n <\/p>\n <div className=\"flex flex-wrap gap-2\">\n <span className=\"px-2 py-1 bg-stage-700 rounded text-xs text-gray-400\">Maiores<\/span>\n <span className=\"px-2 py-1 bg-stage-700 rounded text-xs text-gray-400\">Menores<\/span>\n <span className=\"px-2 py-1 bg-stage-700 rounded text-xs text-gray-400\">Com baixo<\/span>\n <span className=\"px-2 py-1 bg-stage-700 rounded text-xs text-gray-400\">7\u00aa<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/>\n )}\n\n {activeTab === 'editor' && (\n <>\n <ChordEditor \/>\n <div className=\"space-y-6\">\n <div className=\"bg-stage-800 rounded-2xl p-6 border border-stage-600\">\n <h3 className=\"font-bold text-white mb-3\">Atalhos do Editor<\/h3>\n <div className=\"space-y-2 text-sm\">\n <div className=\"flex justify-between text-gray-400\">\n <span>Transpor +1<\/span>\n <span className=\"font-mono text-accent-amber\">\u2191<\/span>\n <\/div>\n <div className=\"flex justify-between text-gray-400\">\n <span>Transpor -1<\/span>\n <span className=\"font-mono text-accent-amber\">\u2193<\/span>\n <\/div>\n <div className=\"flex justify-between text-gray-400\">\n <span>Modo Editar\/Visualizar<\/span>\n <span className=\"font-mono text-accent-amber\">Tab<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/>\n )}\n <\/div>\n <\/main>\n\n {\/* Footer *\/}\n <footer className=\"bg-stage-900 border-t border-stage-700 mt-12\">\n <div className=\"max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6\">\n <div className=\"flex flex-col sm:flex-row items-center justify-between gap-4\">\n <p className=\"text-sm text-gray-500\">\n CifraStage Pro \u00a9 2024 \u2014 Ferramenta profissional para m\u00fasicos\n <\/p>\n <div className=\"flex items-center gap-4\">\n <span className=\"text-xs text-gray-600\">Web Audio API<\/span>\n <span className=\"text-xs text-gray-600\">React<\/span>\n <span className=\"text-xs text-gray-600\">Tailwind<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/footer>\n <\/div>\n );\n };\n\n \/\/ Render\n const root = ReactDOM.createRoot(document.getElementById('root'));\n root.render(<App \/>);\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>CifraStage Pro – Afinador e Cifragem Autom\u00e1tica<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/solucaoweb.online\/cifrastage\/wp-json\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solucaoweb.online\/cifrastage\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/solucaoweb.online\/cifrastage\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/solucaoweb.online\/cifrastage\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solucaoweb.online\/cifrastage\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":7,"href":"https:\/\/solucaoweb.online\/cifrastage\/wp-json\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":17,"href":"https:\/\/solucaoweb.online\/cifrastage\/wp-json\/wp\/v2\/pages\/9\/revisions\/17"}],"wp:attachment":[{"href":"https:\/\/solucaoweb.online\/cifrastage\/wp-json\/wp\/v2\/media?parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}