:root {
–primary-color: #2c3e50;
–accent-color: #e74c3c;
–bg-color: #f8f9fa;
–card-bg: #ffffff;
–text-color: #333;
–p-color: #27ae60; /* Active Power / Real */
–q-color: #2980b9; /* Reactive Power */
–s-color: #8e44ad; /* Apparent / Total */
}

body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
background-color: var(–bg-color);
color: var(–text-color);
margin: 0;
padding: 20px;
}

.container {
max-width: 1200px;
margin: 0 auto;
}

header {
text-align: center;
margin-bottom: 30px;
padding: 20px;
background-color: var(–primary-color);
color: white;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

header h1 { margin: 0 0 10px 0; font-size: 24px; }
header p { margin: 0; font-size: 16px; opacity: 0.9; }

.controls {
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 30px;
}

.btn {
padding: 12px 24px;
font-size: 16px;
font-weight: bold;
border: none;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn-lagging { background-color: #34495e; color: white; }
.btn-leading { background-color: #16a085; color: white; }
.btn-unity { background-color: #d35400; color: white; }

.btn:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
.btn.active { ring: 3px solid var(–accent-color); outline: 3px solid var(–accent-color); }

.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 25px;
}

.card {
background-color: var(–card-bg);
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
border-top: 5px solid var(–primary-color);
display: flex;
flex-direction: column;
align-items: center;
}

.card h2 {
margin-top: 0;
font-size: 20px;
color: var(–primary-color);
border-bottom: 2px solid #eee;
padding-bottom: 10px;
width: 100%;
text-align: center;
}

.svg-container {
width: 100%;
height: 300px;
margin: 20px 0;
}

svg {
width: 100%;
height: 100%;
}

.legend {
width: 100%;
display: flex;
flex-direction: column;
gap: 5px;
font-size: 14px;
margin-top: auto;
background: #f9f9f9;
padding: 10px;
border-radius: 5px;
}

.legend-item { display: flex; justify-content: space-between; align-items: center; }
.color-box { width: 15px; height: 15px; display: inline-block; border-radius: 3px; margin-left: 10px; }

.info-panel {
margin-top: 30px;
background-color: #e8f4f8;
padding: 20px;
border-radius: 8px;
border-right: 5px solid #2980b9;
}

const data = {
lagging: {
title: “معامل قدرة متأخر (Lagging Power Factor)”,
desc: “تحدث هذه الحالة عندما يكون الحمل حثياً (Inductive Load) مثل المحركات. هنا يتأخر التيار عن الجهد بزاوية (θ). تكون القدرة غير الفعالة موجبة وللأعلى.”,
ySign: -1 // Upwards in SVG coordinate system (y decreases)
},
leading: {
title: “معامل قدرة متقدم (Leading Power Factor)”,
desc: “تحدث هذه الحالة عندما يكون الحمل سفوياً (Capacitive Load) مثل المكثفات. هنا يتقدم التيار على الجهد بزاوية (θ). تكون القدرة غير الفعالة سالبة وللأسفل.”,
ySign: 1 // Downwards in SVG coordinate system (y increases)
},
unity: {
title: “معامل قدرة الوحدة (Unity Power Factor)”,
desc: “تحدث هذه الحالة عندما يكون الحمل مقاومياً خالصاً (Purely Resistive Load). تكون زاوية الطور (θ = 0)، وبالتالي لا توجد قدرة غير فعالة أو رادة سعوية/حثية.”,
ySign: 0
}
};

function drawTriangle(containerId, type, state) {
const container = document.getElementById(containerId);
const ySign = data[state].ySign;

let x0 = 50, y0 = (state === ‘leading’) ? 80 : 220;
let dx = 220, dy = (state === ‘unity’) ? 0 : 120 * ySign;

let x1 = x0 + dx;
let y1 = y0;
let x2 = x1;
let y2 = y0 + dy;

let labels = {};
if(type === ‘impedance’) {
labels = { base: ‘R (Ω)’, perp: (state===’leading’?’X_C’:’X_L’) + ‘ (Ω)’, hyp: ‘Z (Ω)’, angle: ‘θ’ };
} else if(type === ‘current’) {
labels = { base: ‘I_R (A)’, perp: (state===’leading’?’I_C’:’I_L’) + ‘ (A)’, hyp: ‘I_T (A)’, angle: ‘θ’ };
} else {
labels = { base: ‘P (W)’, perp: ‘Q (VAR)’, hyp: ‘S (VA)’, angle: ‘θ’ };
}

if(state === ‘unity’) { y2 = y0; x2 = x0 + dx; }

let svgHtml = `

${labels.base}
`;

if(state !== ‘unity’) {
svgHtml += `

${labels.perp}

${labels.hyp}

${labels.angle}
`;
} else {
// حالة Unity متطابقة تماماً على المحور الأفقي
svgHtml += `
${labels.hyp.split(‘ ‘)[0]} = ${labels.base.split(‘ ‘)[0]}

`;
}

svgHtml += “;
container.innerHTML = svgHtml;
}

function updateLegends(state) {
const impLabels = (state===’leading’) ?
{r:’المقاومة (Resistance – R)’, x:’الرادة السعوية (Capacitive Reactance – X_C)’, z:’المعاوقة الكلية (Impedance – Z)’} :
{r:’المقاومة (Resistance – R)’, x:’الرادة الحثية (Inductive Reactance – X_L)’, z:’المعاوقة الكلية (Impedance – Z)’};

document.getElementById(‘impedance-legend’).innerHTML = `

`;

document.getElementById(‘current-legend’).innerHTML = `

`;

document.getElementById(‘power-legend’).innerHTML = `

`;
}

function updateTriangles(state, btn) {
document.querySelectorAll(‘.btn’).forEach(b => b.classList.remove(‘active’));
if(btn) btn.classList.add(‘active’);

drawTriangle(‘impedance-svg’, ‘impedance’, state);
drawTriangle(‘current-svg’, ‘current’, state);
drawTriangle(‘power-svg’, ‘power’, state);

updateLegends(state);

document.getElementById(‘status-info’).innerHTML = `

الحالة الحالية: ${data[state].title}

${data[state].desc}

`;
}

// التشغيل المبدئي
updateTriangles(‘lagging’, null);