window.WcagTool = ({ theme, navigate }) => {
    const { useState, useMemo } = React;

    const [bg, setBg] = useState(theme === 'dark' ? '#0a0c10' : '#ffffff');
    const [fg, setFg] = useState('#11FFC9');

    // Funciones locales importadas de tu librería
    const getLuminance = (r, g, b) => { 
        let a=[r,g,b].map(v=>{ v/=255; return v<=0.03928?v/12.92:Math.pow((v+0.055)/1.055,2.4); }); 
        return a[0]*0.2126+a[1]*0.7152+a[2]*0.0722; 
    };
    const hexToRgb = (hex) => { 
        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); 
        return result ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)] : [0,0,0]; 
    };
    const getContrast = (l1, l2) => (Math.max(l1,l2)+0.05)/(Math.min(l1,l2)+0.05);

    const contrast = useMemo(() => {
        const bgL = getLuminance(...hexToRgb(bg));
        const fgL = getLuminance(...hexToRgb(fg));
        return getContrast(bgL, fgL);
    }, [bg, fg]);

    // Enviar color pivote al Ecosistema
    const sendToPalette = (colorHex) => {
        localStorage.setItem('orbity_pivot_color', colorHex);
        navigate('tool-palette', '/paletadecolor');
    };

    return (
        <div className="animate-fade-in max-w-5xl mx-auto px-6 text-inherit text-left">
            <button onClick={() => navigate('home', '/')} className="mb-10 flex items-center gap-2 text-[10px] font-black opacity-50 hover:opacity-100 uppercase tracking-widest transition-all">
                <window.Icon name="arrow-left" className="w-4 h-4" /> Dashboard
            </button>

            <div className="mb-12">
                <h2 className="text-4xl md:text-5xl font-extrabold tracking-tight mb-4 leading-none uppercase">Auditor WCAG</h2>
                <p className="opacity-60 max-w-2xl font-light text-xl leading-relaxed">Asegura que tus combinaciones de color sean legibles e inclusivas bajo los estándares internacionales de accesibilidad.</p>
            </div>

            <div className="grid md:grid-cols-2 gap-12 mb-12">
                {/* Configuración */}
                <div className="space-y-6">
                    <div className={`p-8 rounded-3xl border ${theme==='dark'?'bg-white/5 border-white/10 text-white':'bg-white border-slate-200 text-slate-900 shadow-sm'}`}>
                        <h3 className="font-bold mb-6 flex items-center gap-2 uppercase tracking-widest text-xs font-black"><window.Icon name="sliders" className="w-4 h-4 text-emerald-500" /> Colores</h3>
                        <div className="space-y-6">
                            <div>
                                <label className="text-[10px] font-black text-gray-500 uppercase block mb-2 tracking-widest">Color de Fondo</label>
                                <div className="flex gap-4">
                                    <input type="color" value={bg} onChange={e=>setBg(e.target.value)} className="w-16 h-12 rounded-xl bg-transparent cursor-pointer border border-white/10 shadow-sm shrink-0"/>
                                    <input type="text" value={bg.toUpperCase()} onChange={e=>setBg(e.target.value)} className={`w-full border rounded-xl px-4 py-2 font-mono text-sm outline-none ${theme==='dark'?'bg-[#16181d] border-white/10':'bg-slate-50 border-slate-200'}`} />
                                </div>
                            </div>
                            <div>
                                <label className="text-[10px] font-black text-gray-500 uppercase block mb-2 tracking-widest">Color de Texto</label>
                                <div className="flex gap-4">
                                    <input type="color" value={fg} onChange={e=>setFg(e.target.value)} className="w-16 h-12 rounded-xl bg-transparent cursor-pointer border border-white/10 shadow-sm shrink-0"/>
                                    <input type="text" value={fg.toUpperCase()} onChange={e=>setFg(e.target.value)} className={`w-full border rounded-xl px-4 py-2 font-mono text-sm outline-none ${theme==='dark'?'bg-[#16181d] border-white/10':'bg-slate-50 border-slate-200'}`} />
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    {/* Botón Ecosistema */}
                    <div className="p-6 rounded-3xl border border-dashed border-emerald-500/50 bg-emerald-500/5 hover:bg-emerald-500/10 transition-colors cursor-pointer group" onClick={() => sendToPalette(bg)}>
                        <div className="flex items-center gap-4">
                            <div className="p-3 bg-emerald-600 rounded-xl text-white shadow-lg group-hover:scale-110 transition-transform">
                                <window.Icon name="palette" className="w-5 h-5" />
                            </div>
                            <div>
                                <h4 className="font-bold text-sm uppercase tracking-widest text-inherit">Construir Paleta</h4>
                                <p className="text-xs opacity-60 mt-1">Generar armonía completa basada en el fondo.</p>
                            </div>
                            <window.Icon name="arrow-right" className="w-4 h-4 ml-auto opacity-50 group-hover:translate-x-1 transition-transform" />
                        </div>
                    </div>
                </div>

                {/* Previsualización en Vivo */}
                <div className="rounded-3xl p-10 flex flex-col justify-center transition-all duration-300 border border-white/10 shadow-2xl relative overflow-hidden" style={{backgroundColor: bg, color: fg}}>
                    <div className="text-7xl font-black mb-4 tracking-tighter leading-none">{contrast.toFixed(2)}:1</div>
                    <p className="text-2xl font-bold mb-10 leading-tight uppercase tracking-tighter">La ingeniería creativa <br/> es para todos.</p>
                    <div className="flex flex-wrap gap-3">
                        <span className={`px-4 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest ${contrast >= 4.5 ? 'bg-green-500 text-white' : 'bg-red-500 text-white'}`}>
                            AA {contrast >= 4.5 ? 'PASS' : 'FAIL'}
                        </span>
                        <span className={`px-4 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest ${contrast >= 7 ? 'bg-green-500 text-white' : 'bg-red-500 text-white'}`}>
                            AAA {contrast >= 7 ? 'PASS' : 'FAIL'}
                        </span>
                    </div>
                </div>
            </div>

            {/* Teoría WCAG */}
            <div className={`p-8 rounded-3xl border ${theme==='dark'?'bg-white/5 border-white/10':'bg-white border-slate-200 shadow-sm'}`}>
                <h3 className="text-xl font-bold mb-6 flex items-center gap-2 uppercase tracking-tighter"><window.Icon name="book-open" className="w-5 h-5 text-emerald-500" /> Interpretación de Resultados</h3>
                <div className="grid md:grid-cols-2 gap-8 text-sm leading-relaxed opacity-80">
                    <div>
                        <h4 className="font-black uppercase tracking-widest mb-2 text-emerald-500 text-[10px]">Nivel AA (Mínimo Estándar)</h4>
                        <p className="mb-4">Requiere un ratio de contraste de al menos <strong>4.5:1</strong> para texto normal y <strong>3:1</strong> para textos grandes (más de 18pt o 14pt en negrita). Es el requisito legal para la mayoría de plataformas digitales.</p>
                    </div>
                    <div>
                        <h4 className="font-black uppercase tracking-widest mb-2 text-emerald-500 text-[10px]">Nivel AAA (Excelencia Inclusiva)</h4>
                        <p>Requiere un ratio de <strong>7:1</strong> para texto normal y <strong>4.5:1</strong> para texto grande. Garantiza accesibilidad incluso para usuarios con pérdida de visión severa.</p>
                    </div>
                </div>
            </div>
        </div>
    );
};