function DataConverter() {
    const [bytes, setBytes] = useState('');
    const [kilobytes, setKilobytes] = useState('');
    const [megabytes, setMegabytes] = useState('');
    const [gigabytes, setGigabytes] = useState('');
    const [terabytes, setTerabytes] = useState('');

    const updateFromBytes = (value) => {
        setBytes(value);
        if (value === '') {
            setKilobytes('');
            setMegabytes('');
            setGigabytes('');
            setTerabytes('');
        } else {
            const b = parseFloat(value);
            setKilobytes((b / 1024).toFixed(2));
            setMegabytes((b / (1024 * 1024)).toFixed(4));
            setGigabytes((b / (1024 * 1024 * 1024)).toFixed(6));
            setTerabytes((b / (1024 * 1024 * 1024 * 1024)).toFixed(9));
        }
    };

    const updateFromKilobytes = (value) => {
        setKilobytes(value);
        if (value === '') {
            setBytes('');
            setMegabytes('');
            setGigabytes('');
            setTerabytes('');
        } else {
            const kb = parseFloat(value);
            const b = kb * 1024;
            setBytes(b.toFixed(2));
            setMegabytes((kb / 1024).toFixed(4));
            setGigabytes((kb / (1024 * 1024)).toFixed(6));
            setTerabytes((kb / (1024 * 1024 * 1024)).toFixed(9));
        }
    };

    const updateFromMegabytes = (value) => {
        setMegabytes(value);
        if (value === '') {
            setBytes('');
            setKilobytes('');
            setGigabytes('');
            setTerabytes('');
        } else {
            const mb = parseFloat(value);
            const b = mb * 1024 * 1024;
            setBytes(b.toFixed(2));
            setKilobytes((mb * 1024).toFixed(2));
            setGigabytes((mb / 1024).toFixed(6));
            setTerabytes((mb / (1024 * 1024)).toFixed(9));
        }
    };

    const updateFromGigabytes = (value) => {
        setGigabytes(value);
        if (value === '') {
            setBytes('');
            setKilobytes('');
            setMegabytes('');
            setTerabytes('');
        } else {
            const gb = parseFloat(value);
            const b = gb * 1024 * 1024 * 1024;
            setBytes(b.toFixed(2));
            setKilobytes((gb * 1024 * 1024).toFixed(2));
            setMegabytes((gb * 1024).toFixed(4));
            setTerabytes((gb / 1024).toFixed(9));
        }
    };

    const updateFromTerabytes = (value) => {
        setTerabytes(value);
        if (value === '') {
            setBytes('');
            setKilobytes('');
            setMegabytes('');
            setGigabytes('');
        } else {
            const tb = parseFloat(value);
            const b = tb * 1024 * 1024 * 1024 * 1024;
            setBytes(b.toFixed(2));
            setKilobytes((tb * 1024 * 1024 * 1024).toFixed(2));
            setMegabytes((tb * 1024 * 1024).toFixed(4));
            setGigabytes((tb * 1024).toFixed(6));
        }
    };

    return (
        <div className="card">
            <h3 style={{ marginBottom: '16px' }}>💾 Data Size Converter</h3>
            <p style={{ color: 'var(--text-secondary)', fontSize: '14px', marginBottom: '16px' }}>
                Enter a value in any field for real-time conversion
            </p>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px' }}>
                <div className="form-group" style={{ marginBottom: '0' }}>
                    <label className="form-label">Bytes (B)</label>
                    <input type="number" className="form-input" value={bytes} onChange={(e) => updateFromBytes(e.target.value)} placeholder="1024" />
                </div>
                <div className="form-group" style={{ marginBottom: '0' }}>
                    <label className="form-label">Kilobytes (KB)</label>
                    <input type="number" className="form-input" value={kilobytes} onChange={(e) => updateFromKilobytes(e.target.value)} placeholder="1" />
                </div>
                <div className="form-group" style={{ marginBottom: '0' }}>
                    <label className="form-label">Megabytes (MB)</label>
                    <input type="number" className="form-input" value={megabytes} onChange={(e) => updateFromMegabytes(e.target.value)} placeholder="0.001" />
                </div>
                <div className="form-group" style={{ marginBottom: '0' }}>
                    <label className="form-label">Gigabytes (GB)</label>
                    <input type="number" className="form-input" value={gigabytes} onChange={(e) => updateFromGigabytes(e.target.value)} placeholder="0.000001" />
                </div>
                <div className="form-group" style={{ marginBottom: '0' }}>
                    <label className="form-label">Terabytes (TB)</label>
                    <input type="number" className="form-input" value={terabytes} onChange={(e) => updateFromTerabytes(e.target.value)} placeholder="0.000000001" />
                </div>
            </div>
        </div>
    );
}

// Export to global registry
window.DataConverter = DataConverter;