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

// ───────── المشهد ٩: محكمة الصراع ─────────
const COURT_PRAISE = ['طلبت العسل مرتين والصفاء ثابت ★★★★★', 'التغليف راقٍ والشحن سريع ★★★★★', 'يستاهل كل ريال بصراحة ★★★★★'];
const COURT_BLAME = ['أسوأ مكان لا أنصح فيه ★', 'نصب واحتيال لا تروحون ★', 'سيئ جداً جداً ★'];
const COURT_EVIDENCE = [
  '١٧ ذمّاً في ٤٨ ساعة فقط — تجمّعٌ مريب',
  'الذامّون يعمّمون… والمادحون يصفون التفاصيل',
  '٧ صياغات متطابقة من حسابات وُلدت أمس',
];

function SceneCourt() {
  return (
    <Sprite start={79} end={91}>
      {({ localTime: lt }) => {
        const op = zFade(lt, 12, 0.7, 0.7);
        const verdictT = clamp((lt - 7.2) / 0.55, 0, 1);
        const vScale = 1.6 - 0.6 * Easing.easeOutCubic(verdictT);
        return (
          <div data-screen-label="محكمة الصراع" style={{ position: 'absolute', inset: 0, opacity: op }}>
            <ZText start={79.4} end={90.5} y={150} size={66} weight={800}>⚖️ محكمة الصراع</ZText>
            <ZText start={79.7} end={90.5} y={265} size={36} weight={400} color={'rgba(255,255,255,0.55)'} font={ZV.body}>منتَجٌ واحد… والجمهور فريقان — من على الحق؟</ZText>
            {COURT_PRAISE.map((t, i) => {
              const enter = 1.2 + i * 0.5;
              const o = clamp((lt - enter) / 0.4, 0, 1) * (1 - verdictT * 0.65);
              return (
                <div key={'p' + i} style={{ position: 'absolute', right: 60, top: 420 + i * 150, width: 460, opacity: o, transform: 'translateX(' + (1 - o) * 60 + 'px)', background: 'rgba(74,124,89,0.13)', border: '1px solid rgba(74,124,89,0.55)', borderRadius: 18, padding: '20px 24px', direction: 'rtl', fontFamily: ZV.body, fontSize: 27, color: '#cfe3d6', lineHeight: 1.5 }}>{t}</div>
              );
            })}
            {COURT_BLAME.map((t, i) => {
              const enter = 1.45 + i * 0.5;
              const o = clamp((lt - enter) / 0.4, 0, 1) * (1 - verdictT * 0.65);
              return (
                <div key={'b' + i} style={{ position: 'absolute', left: 60, top: 420 + i * 150, width: 460, opacity: o, transform: 'translateX(' + (o - 1) * 60 + 'px)', background: 'rgba(176,71,61,0.13)', border: '1px solid rgba(176,71,61,0.55)', borderRadius: 18, padding: '20px 24px', direction: 'rtl', fontFamily: ZV.body, fontSize: 27, color: '#ecd2cf', lineHeight: 1.5 }}>{t}</div>
              );
            })}
            {COURT_EVIDENCE.map((t, i) => {
              const enter = 3.6 + i * 1.1;
              const o = clamp((lt - enter) / 0.5, 0, 1);
              return (
                <div key={'e' + i} style={{ position: 'absolute', left: 90, right: 90, top: 920 + i * 122, opacity: o, transform: 'translateY(' + (1 - o) * 24 + 'px)', background: 'rgba(199,154,58,0.08)', border: '1px solid rgba(199,154,58,0.4)', borderRadius: 16, padding: '20px 28px', direction: 'rtl', fontFamily: ZV.body, fontSize: 29, fontWeight: 600, color: '#e8d9b8', display: 'flex', alignItems: 'center', gap: 16 }}>
                  <span style={{ color: ZV.gold, fontSize: 26 }}>🔎</span>{t}
                </div>
              );
            })}
            {verdictT > 0 ? (
              <div style={{ position: 'absolute', left: 0, right: 0, top: 1340, display: 'flex', justifyContent: 'center', opacity: verdictT }}>
                <div style={{ transform: 'rotate(-7deg) scale(' + vScale + ')', border: '4px solid ' + ZV.red, borderRadius: 22, padding: '26px 46px', direction: 'rtl', textAlign: 'center', background: 'rgba(176,71,61,0.1)', boxShadow: '0 0 80px rgba(176,71,61,0.35)' }}>
                  <div style={{ fontFamily: ZV.head, fontSize: 52, fontWeight: 800, color: '#e08a80' }}>حملة كيدية بنسبة ٧٨ّ٪</div>
                  <div style={{ fontFamily: ZV.body, fontSize: 28, color: 'rgba(255,255,255,0.65)', marginTop: 10 }}>ذمٌّ مصطنع يستهدفك — وجمهورك الحقيقي راضٍ</div>
                </div>
              </div>
            ) : null}
            <ZText start={88} end={90.6} y={1700} size={34} weight={500} color={ZV.goldSoft} font={ZV.body}>المنصة تحرس سمعتك… تزن الأصوات وتكشف الكيد</ZText>
          </div>
        );
      }}
    </Sprite>
  );
}

// ───────── المشهد ١٠: أرقام تُقال لأول مرة ─────────
const FIRST_NUMBERS = [
  { label: 'جمهورك الحقيقي', val: 64, suffix: '٪', c: ZV.gold, note: 'بعد عزل المستأجر والمجامل والكيدي' },
  { label: 'نسبة الفقد السنوية', val: 12, suffix: '٪', c: ZV.red, note: 'من قالوا «لن أعود» أو انقطعوا' },
  { label: 'تكلفة العميل الجديد', val: 80, suffix: ' ر.س', c: ZV.slate, note: 'تقديراً من إنفاقك التسويقي' },
];

function SceneNumbers() {
  return (
    <Sprite start={90.5} end={101}>
      {({ localTime: lt }) => {
        const op = zFade(lt, 10.5, 0.7, 0.7);
        return (
          <div data-screen-label="أرقام تُقال لأول مرة" style={{ position: 'absolute', inset: 0, opacity: op }}>
            <GoldGlow y={760} opacity={0.1}></GoldGlow>
            <ZText start={90.9} end={100.5} y={170} size={62} weight={800} maxW={940}>أرقامٌ تُقال لأول مرة</ZText>
            <ZText start={91.2} end={100.5} y={285} size={35} weight={400} color={'rgba(255,255,255,0.55)'} font={ZV.body}>لا يملكها أحدٌ غير بحرك نفسه</ZText>
            {FIRST_NUMBERS.map((n, i) => {
              const enter = 1.1 + i * 1.4;
              const o = clamp((lt - enter) / 0.5, 0, 1);
              const cnt = Math.round(animate({ from: 0, to: n.val, start: enter + 0.2, end: enter + 1.3, ease: Easing.easeOutCubic })(lt));
              return (
                <div key={i} style={{ position: 'absolute', left: 90, right: 90, top: 430 + i * 290, opacity: o, transform: 'translateY(' + (1 - o) * 30 + 'px)', background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.12)', borderRight: '5px solid ' + n.c, borderRadius: 24, padding: '34px 40px', direction: 'rtl', fontFamily: ZV.body }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <div style={{ fontSize: 36, fontWeight: 700, color: '#fff', fontFamily: ZV.head }}>{n.label}</div>
                    <div style={{ fontSize: 76, fontWeight: 800, color: n.c, fontVariantNumeric: 'tabular-nums', fontFamily: ZV.head }}>{cnt}<span style={{ fontSize: 38 }}>{n.suffix}</span></div>
                  </div>
                  <div style={{ fontSize: 27, color: 'rgba(255,255,255,0.5)', marginTop: 8 }}>{n.note}</div>
                </div>
              );
            })}
            <ZText start={97.2} end={100.6} y={1430} size={44} weight={800} color={ZV.goldSoft} glow={true} maxW={920}>واستردادُ الجريح يكلّفك رداً واحداً محترفاً</ZText>
          </div>
        );
      }}
    </Sprite>
  );
}

Object.assign(window, { SceneCourt, SceneNumbers });