// زمام — الفيديو التشويقي: مشهد النزيف الصامت (ضربة الألم)
// يعتمد على animations.jsx + فيديو-مشاهد-أ.jsx (ZV/zFade/ZText/GoldGlow على window)

// ───────── المشهد: النزيف الصامت ─────────
// عملاء يظهرون ثم ينطفئون بصمت — لا يكتبون شيئاً، فقط يختفون
const SILENT_DOTS = [];
(function () {
  let s = 7;
  const rnd = () => { s = (s * 1103515245 + 12345) & 0x7fffffff; return s / 0x7fffffff; };
  for (let i = 0; i < 84; i++) {
    SILENT_DOTS.push({
      x: 90 + rnd() * 900,
      y: 560 + rnd() * 760,
      r: 5 + rnd() * 4,
      off: 2.2 + rnd() * 5.2,      // متى ينطفئ
      gone: rnd() < 0.34,          // ثلثهم يغادر بصمت
      ph: rnd() * 6.28,
    });
  }
})();

function SceneSilent() {
  return (
    <Sprite start={66} end={79}>
      {({ localTime: lt }) => {
        const op = zFade(lt, 13, 0.7, 0.7);
        // عدّ المغادرين بصمت
        let lost = 0;
        for (const d of SILENT_DOTS) { if (d.gone && lt > d.off + 0.4) lost++; }
        const lostPct = Math.round((lost / SILENT_DOTS.length) * 100);
        const showStat = lt > 8.2;
        return (
          <div data-screen-label="النزيف الصامت" style={{ position: 'absolute', inset: 0, opacity: op }}>
            <ZText start={66.4} end={78.4} y={150} size={64} weight={800}>النزيف الصامت</ZText>
            <ZText start={66.8} end={78.4} y={268} size={35} weight={400} color={'rgba(255,255,255,0.55)'} font={ZV.body}>ليس الغاضبُ من يقتل مؤسستك… بل مَن مشى بلا كلمة</ZText>

            <svg width="1080" height="800" viewBox="0 0 1080 800" style={{ position: 'absolute', left: 0, top: 460 }}>
              {SILENT_DOTS.map((d, i) => {
                const t = lt - 1.0;
                const appear = clamp((t - i * 0.018) / 0.5, 0, 1);
                let o, col, glow;
                if (d.gone && lt > d.off) {
                  // يغادر بصمت: يخفت ببطء إلى رماد
                  const fade = clamp((lt - d.off) / 1.1, 0, 1);
                  o = appear * (1 - fade) * (0.5 + 0.5 * Math.sin(lt * 2 + d.ph));
                  col = '#6b7280';
                  glow = 0;
                } else {
                  const breathe = 0.55 + 0.45 * Math.sin(lt * 1.8 + d.ph);
                  o = appear * breathe;
                  col = ZV.gold;
                  glow = 4;
                }
                return <circle key={i} cx={d.x} cy={d.y} r={d.r} fill={col} opacity={o} style={glow ? { filter: 'drop-shadow(0 0 ' + glow + 'px rgba(199,154,58,0.7))' } : null}></circle>;
              })}
            </svg>

            {showStat ? (
              <div style={{ position: 'absolute', left: 90, right: 90, top: 1380, display: 'flex', justifyContent: 'center', opacity: clamp((lt - 8.2) / 0.6, 0, 1) }}>
                <div style={{ textAlign: 'center', direction: 'rtl' }}>
                  <div style={{ fontFamily: ZV.head, fontSize: 130, fontWeight: 800, color: ZV.red, lineHeight: 1, fontVariantNumeric: 'tabular-nums' }}>{lostPct}٪</div>
                  <div style={{ fontFamily: ZV.body, fontSize: 36, color: 'rgba(255,255,255,0.6)', marginTop: 14 }}>غادروك دون أن يكتبوا حرفاً</div>
                </div>
              </div>
            ) : null}
            <ZText start={74.4} end={78.6} y={1700} size={34} weight={500} color={ZV.goldSoft} font={ZV.body}>خسارةٌ لا تعرف حتى أنها حدثت — حتى يكشفها زمام</ZText>
          </div>
        );
      }}
    </Sprite>
  );
}

Object.assign(window, { SceneSilent });