import React from 'react';
import { SYSTEM_VERSION } from '../version';
import { useI18n } from '../context/I18nContext';

export default function About() {
  const { t } = useI18n();
  
  return (
    <div style={{ padding: '20px', color: '#fff' }}>
      <h2 style={{ marginBottom: '20px', color: 'var(--accent-cyan)' }}>{t('about')} XCU Ultra</h2>
      <div className="glass-panel" style={{ padding: '30px' }}>
        <h3 style={{ marginBottom: '10px' }}>SYSTEM SPECIFICATIONS</h3>
        <ul style={{ listStyle: 'none', padding: 0, lineHeight: '2' }}>
          <li><strong style={{ color: '#a855f7' }}>Engine:</strong> Rust (Glommio, eBPF, WebTransport)</li>
          <li><strong style={{ color: '#a855f7' }}>Frontend:</strong> React, WASM, Holographic Canvas</li>
          <li><strong style={{ color: '#a855f7' }}>Billing Matrix:</strong> DuckDB Embedded Analytics</li>
          <li><strong style={{ color: '#a855f7' }}>IAM Gatekeeper:</strong> Zero-Database Stateless JWT</li>
          <li><strong style={{ color: '#a855f7' }}>Security Protocol:</strong> Cerberus Quantum Firewall</li>
          <li><strong style={{ color: '#a855f7' }}>Self-Destruct Mechanism:</strong> Ouroboros Protocol</li>
        </ul>
        
        <div style={{ marginTop: '40px', padding: '15px', background: 'rgba(0,0,0,0.5)', borderLeft: '4px solid var(--accent-cyan)' }}>
          <h4 style={{ margin: 0, color: 'var(--text-muted)', fontSize: '0.9rem' }}>ABSOLUTE VERSIONING (ANTIGRAVITY UID)</h4>
          <p style={{ margin: '10px 0 0 0', fontFamily: 'monospace', fontSize: '1.2rem', color: '#fff' }}>
            {SYSTEM_VERSION}
          </p>
        </div>
      </div>
    </div>
  );
}
