import React, { useState } from 'react';

export default function M46Eclipse() {
  const [camouflaged, setCamouflaged] = useState(false);

  return (
    <div style={{animation: 'fadeIn 0.5s ease-out'}}>
      <h2 style={{color: camouflaged ? 'var(--accent-green)' : 'var(--accent-red)', marginBottom: '15px', textShadow: `0 0 10px ${camouflaged ? 'var(--accent-green)' : 'var(--accent-red)'}`}}>
        M46: ECLIPSE DPI DISGUISER
      </h2>
      <p style={{color: 'var(--text-muted)', marginBottom: '20px'}}>
        Sistem Kamuflase *Deep Packet Inspection* (DPI). Jika aktif, aliran video VVIP akan dienkripsi dan disamarkan sebagai trafik *Game Online* agar lolos dari pemblokiran *Firewall* Nasional.
      </p>

      <div className="glass-panel" style={{padding: '30px', textAlign: 'center', borderColor: camouflaged ? 'var(--accent-green)' : 'var(--accent-red)'}}>
        <div style={{fontSize: '1.5rem', marginBottom: '30px', color: camouflaged ? 'var(--accent-green)' : 'var(--accent-red)'}}>
          STATUS KAMUFLASE: {camouflaged ? 'AKTIF (UNDETECTED)' : 'MATI (EXPOSED)'}
        </div>
        
        <button 
          className={camouflaged ? 'btn-primary' : 'btn-danger'}
          style={{padding: '20px 40px', fontSize: '1.2rem', fontWeight: 'bold', borderRadius: '50px'}}
          onClick={() => setCamouflaged(!camouflaged)}
        >
          {camouflaged ? '🛡️ NONAKTIFKAN ECLIPSE' : '🔥 AKTIFKAN ECLIPSE MATRIX'}
        </button>

        <div style={{marginTop: '40px', padding: '20px', background: 'rgba(0,0,0,0.5)', borderRadius: '8px', border: '1px solid #333'}}>
          <div style={{display: 'flex', justifyContent: 'space-between', marginBottom: '10px', color: 'var(--text-muted)'}}>
            <span>Server VVIP (XCU)</span>
            <span>ISP Nasional (Telkom)</span>
          </div>
          
          <div style={{position: 'relative', height: '40px', background: '#111', borderRadius: '20px', overflow: 'hidden'}}>
            {/* Packet Animation */}
            <div style={{
              position: 'absolute', top: '10px', left: 0, width: '20px', height: '20px', 
              background: camouflaged ? 'var(--accent-green)' : 'var(--accent-red)', 
              borderRadius: '50%',
              boxShadow: `0 0 15px ${camouflaged ? 'var(--accent-green)' : 'var(--accent-red)'}`,
              animation: 'moveRight 2s infinite linear'
            }}></div>
            <style>{`
              @keyframes moveRight {
                0% { left: 0; opacity: 0; }
                10% { opacity: 1; }
                90% { opacity: 1; }
                100% { left: 100%; opacity: 0; }
              }
            `}</style>
          </div>
          
          <div style={{marginTop: '15px', fontSize: '0.9rem', color: camouflaged ? 'var(--accent-green)' : 'var(--accent-red)'}}>
            METADATA TERDETEKSI: {camouflaged ? '[UDP PORT 10011: MOBILE LEGENDS TRAFFIC]' : '[UDP PORT 8443: XCU VVIP MEDIA OVER QUIC]'}
          </div>
        </div>
      </div>
    </div>
  );
}
