// زمام — الفيديو التشويقي: المشاهد ٥–٨ (غرفة التحليل، الصوتان واليقين، الأثر، الختام)
// يعتمد على animations.jsx + فيديو-مشاهد-أ.jsx (ZV/zFade/ZText/GoldGlow على window)

// ───────── المشهد ٥: غرفة التحليل العميق ─────────
const ROOM_QUESTIONS = [
  { q: 'أين النزيف؟', c: ZV.red, p: 38 },
  { q: 'أين الارتكاز؟', c: ZV.gold, p: 71 },
  { q: 'أين الخطر؟', c: ZV.amber, p: 12 },
  { q: 'كيف التدفق؟', c: ZV.slate, p: 64 },
  { q: 'أين الفرص؟', c: ZV.green, p: 27 },
];

function SceneRoom() {
  return (
    <Sprite start={42.5} end={54.5}>
      {({ localTime: lt }) => {
        const op = zFade(lt, 12, 0.7, 0.7);
        return (
          <div data-screen-label="غرفة التحليل العميق" style={{ position: 'absolute', inset: 0, opacity: op }}>
            <ZText start={42.9} end={54} y={160} size={68} weight={800}>غرفة التحليل العميق</ZText>
            <ZText start={43.2} end={54} y={275} size={37} weight={400} color={'rgba(255,255,255,0.55)'} font={ZV.body}>خمسة أسئلة تشخّص حياة مؤسستك — من البحر الحي</ZText>
            <div style={{ position: 'absolute', left: 80, top: 410, width: 920, background: ZV.paper, borderRadius: 32, padding: '46px 50px', direction: 'rtl', boxShadow: '0 30px 90px rgba(0,0,0,0.5)' }}>
              {ROOM_QUESTIONS.map((r, i) => {
                const enter = 1.3 + i * 0.75;
                const t = clamp((lt - enter) / 0.5, 0, 1);
                const w = animate({ from: 0, to: r.p, start: enter + 0.2, end: enter + 1.3, ease: Easing.easeOutCubic })(lt);
                return (
                  <div key={i} style={{ opacity: t, transform: 'translateY(' + (1 - Easing.easeOutCubic(t)) * 22 + 'px)', marginBottom: i < 4 ? 44 : 0 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                      <div style={{ fontFamily: ZV.head, fontSize: 42, fontWeight: 700, color: ZV.ink }}>{r.q}</div>
                      <div style={{ fontFamily: ZV.body, fontSize: 32, fontWeight: 600, color: r.c, fontVariantNumeric: 'tabular-nums' }}>{Math.round(w)}٪</div>
                    </div>
                    <div style={{ marginTop: 14, height: 16, borderRadius: 8, background: 'rgba(21,19,29,0.08)', overflow: 'hidden' }}>
                      <div style={{ width: w + '%', height: '100%', borderRadius: 8, background: r.c }}></div>
                    </div>
                  </div>
                );
              })}
            </div>
            <ZText start={49.5} end={54} y={1620} size={36} weight={500} color={ZV.goldSoft} font={ZV.body}>لا استبيانات — أصواتُ جمهورك نفسها هي التشخيص</ZText>
          </div>
        );
      }}
    </Sprite>
  );
}

// ───────── المشهد ٦: ميزان الصوتين ثم تقرير اليقين ─────────
function SceneVoicesCert() {
  return (
    <Sprite start={54} end={66}>
      {({ localTime: lt }) => {
        const op = zFade(lt, 12, 0.7, 0.7);
        const beatB = lt > 5.6;
        const angle = 7 * Math.sin(lt * 2.1) * Math.exp(-lt * 0.5);
        const certT = clamp((lt - 6) / 0.9, 0, 1);
        const certY = 480 + (1 - Easing.easeOutCubic(certT)) * 220;
        return (
          <div data-screen-label="الصوتان وتقرير اليقين" style={{ position: 'absolute', inset: 0, opacity: op }}>
            {!beatB ? (
              <div>
                <ZText start={54.3} end={59.8} y={210} size={66} weight={800}>ميزان الصوتين</ZText>
                <ZText start={54.6} end={59.8} y={325} size={37} weight={400} color={'rgba(255,255,255,0.55)'} font={ZV.body}>صوت جمهورك في الخارج… وصوت فريقك في الداخل</ZText>
                <div style={{ position: 'absolute', left: 140, top: 700, width: 800, transform: 'rotate(' + angle + 'deg)', transformOrigin: 'center' }}>
                  <div style={{ position: 'absolute', left: '50%', top: -10, width: 8, height: 8, marginLeft: -4, borderRadius: 4, background: ZV.gold }}></div>
                  <div style={{ height: 6, background: ZV.gold, borderRadius: 3 }}></div>
                  <div style={{ position: 'absolute', right: 20, top: 6, width: 2, height: 90, background: 'rgba(199,154,58,0.6)' }}></div>
                  <div style={{ position: 'absolute', left: 20, top: 6, width: 2, height: 90, background: 'rgba(199,154,58,0.6)' }}></div>
                  <div style={{ position: 'absolute', right: -70, top: 96, width: 300, background: 'rgba(255,255,255,0.07)', border: '1px solid rgba(199,154,58,0.45)', borderRadius: 20, padding: '24px 26px', textAlign: 'center', direction: 'rtl', fontFamily: ZV.body }}>
                    <div style={{ fontSize: 31, color: '#fff', fontWeight: 700 }}>الصوت الخارجي</div>
                    <div style={{ fontSize: 26, color: 'rgba(255,255,255,0.55)', marginTop: 8 }}>تعليقات الجمهور</div>
                  </div>
                  <div style={{ position: 'absolute', left: -70, top: 96, width: 300, background: 'rgba(255,255,255,0.07)', border: '1px solid rgba(199,154,58,0.45)', borderRadius: 20, padding: '24px 26px', textAlign: 'center', direction: 'rtl', fontFamily: ZV.body }}>
                    <div style={{ fontSize: 31, color: '#fff', fontWeight: 700 }}>الصوت الداخلي</div>
                    <div style={{ fontSize: 26, color: 'rgba(255,255,255,0.55)', marginTop: 8 }}>بلاغات الفريق</div>
                  </div>
                </div>
                <ZText start={56.8} end={59.8} y={1280} size={42} weight={700} color={ZV.goldSoft}>…والصمتُ نفسه فجوة</ZText>
              </div>
            ) : (
              <div>
                <ZText start={60} end={65.6} y={210} size={66} weight={800}>تقرير اليقين</ZText>
                <ZText start={60.3} end={65.6} y={325} size={37} weight={400} color={'rgba(255,255,255,0.55)'} font={ZV.body}>وثيقة تُسلَّم للعميل بختم الخبير</ZText>
                <div style={{ position: 'absolute', left: 190, top: certY, width: 700, height: 980, background: '#fff', borderRadius: 20, opacity: certT, boxShadow: '0 40px 110px rgba(0,0,0,0.55)', padding: '56px 54px', direction: 'rtl' }}>
                  <div style={{ fontFamily: ZV.head, fontSize: 46, fontWeight: 800, color: ZV.ink }}>النبأ اليقين</div>
                  <div style={{ width: 120, height: 5, background: ZV.gold, borderRadius: 3, marginTop: 16 }}></div>
                  {[92, 100, 78, 96, 64, 88, 72].map((w, i) => (
                    <div key={i} style={{ height: 17, width: w + '%', borderRadius: 9, background: i % 3 === 0 ? 'rgba(199,154,58,0.25)' : 'rgba(21,19,29,0.09)', marginTop: i === 0 ? 48 : 26 }}></div>
                  ))}
                  <div style={{ position: 'absolute', bottom: 60, left: 60, width: 170, height: 170, borderRadius: 90, border: '3px solid ' + ZV.gold, display: 'flex', alignItems: 'center', justifyContent: 'center', transform: 'rotate(-12deg)', opacity: clamp((lt - 8) / 0.5, 0, 1) }}>
                    <div style={{ fontFamily: ZV.head, fontWeight: 800, fontSize: 44, color: ZV.gold }}>زِمام</div>
                  </div>
                </div>
              </div>
            )}
          </div>
        );
      }}
    </Sprite>
  );
}

// ───────── المشهد ٧: الأثر ─────────
const IMPACT_PHRASES = [
  'قاعدةٌ جماهيريةٌ تُبنى',
  'منجزاتٌ تُحمى',
  'عملٌ أذكى بجهدٍ أقل',
];

function SceneImpact() {
  return (
    <Sprite start={100.5} end={113.5}>
      {({ localTime: lt, duration }) => {
        const op = zFade(lt, 13, 0.6, 0.6);
        const prog = clamp(lt / duration, 0, 1);
        return (
          <div data-screen-label="الأثر" style={{ position: 'absolute', inset: 0, opacity: op }}>
            <GoldGlow y={900} opacity={0.12}></GoldGlow>
            <ZText start={100.8} end={113} y={300} size={38} weight={600} color={'rgba(255,255,255,0.5)'} font={ZV.body}>أثرُ زمام على منشأتك</ZText>
            {IMPACT_PHRASES.map((ph, i) => {
              const s = 101.5 + i * 3.6;
              return (
                <ZText key={i} start={s} end={s + 3.1} y={840} size={78} weight={800} color={i % 2 === 0 ? ZV.goldSoft : '#fff'} glow={i % 2 === 0} maxW={940}>{ph}</ZText>
              );
            })}
            <div style={{ position: 'absolute', left: 240, bottom: 320, width: 600, height: 4, background: 'rgba(255,255,255,0.12)', borderRadius: 2 }}>
              <div style={{ width: prog * 100 + '%', height: '100%', background: ZV.gold, borderRadius: 2 }}></div>
            </div>
          </div>
        );
      }}
    </Sprite>
  );
}

// ───────── المشهد ٨: الختام ─────────
function SceneClose() {
  return (
    <Sprite start={113} end={128}>
      {({ localTime: lt }) => {
        const op = Easing.easeOutCubic(clamp(lt / 0.8, 0, 1));
        const ringP = Easing.easeInOutCubic(clamp((lt - 0.5) / 2.2, 0, 1));
        const C = 2 * Math.PI * 190;
        return (
          <div data-screen-label="الختام" style={{ position: 'absolute', inset: 0, opacity: op }}>
            <GoldGlow y={820} opacity={0.18}></GoldGlow>
            <svg width="460" height="460" viewBox="0 0 460 460" style={{ position: 'absolute', left: 310, top: 590 }}>
              <circle cx="230" cy="230" r="190" fill="none" stroke={ZV.gold} strokeWidth="3.5" strokeDasharray={C} strokeDashoffset={C * (1 - ringP)} transform="rotate(-90 230 230)" strokeLinecap="round"></circle>
            </svg>
            <ZText start={114.3} end={128.5} y={715} size={150} weight={800} color={ZV.gold} glow={true}>زِمام</ZText>
            <ZText start={115.6} end={128.5} y={1130} size={46} weight={700} maxW={880}>منصةٌ تقيس حياةَ المؤسسات وحيويتَها</ZText>
            <ZText start={116.6} end={128.5} y={1242} size={46} weight={800} color={ZV.goldSoft}>— لا تنفيذَها</ZText>
            <ZText start={118.2} end={128.5} y={1370} size={40} weight={700} color={'#fff'} maxW={920} glow={true}>اثنتا عشرةَ سنةً من البحثِ والإصرار… تُقطَفُ اليومَ ثمرتُها</ZText>
            <ZText start={119.8} end={128.5} y={1520} size={52} weight={800} color={'#fff'}>بدر بن سليمان العنزي</ZText>
            <ZText start={120.2} end={128.5} y={1615} size={36} weight={600} color={ZV.goldSoft} font={ZV.body}>المجدِّد الاستراتيجي للأعمال</ZText>
            <ZText start={120.6} end={128.5} y={1700} size={31} weight={500} color={'rgba(255,255,255,0.6)'} font={ZV.body}>0530222822&nbsp;&nbsp;·&nbsp;&nbsp;Badr@arjaz.com</ZText>
          </div>
        );
      }}
    </Sprite>
  );
}

Object.assign(window, { SceneRoom, SceneVoicesCert, SceneImpact, SceneClose, ROOM_QUESTIONS, IMPACT_PHRASES, CornerMark });

// ───────── شعار الزاوية: بدر العنزي (يختفي عند الشريحة الأخيرة) ─────────
function CornerMark() {
  return (
    <Sprite start={0} end={113.4}>
      {({ localTime: lt, duration }) => {
        const fin = 1 - Easing.easeInCubic(clamp((lt - (duration - 0.6)) / 0.6, 0, 1));
        const op = Easing.easeOutCubic(clamp((lt - 0.6) / 1.0, 0, 1)) * fin;
        return (
          <div style={{ position: 'absolute', top: 46, right: 54, display: 'flex', alignItems: 'center', gap: 13, opacity: op * 0.92, direction: 'rtl', pointerEvents: 'none' }}>
            <div style={{ textAlign: 'right', lineHeight: 1.25 }}>
              <div style={{ fontFamily: ZV.head, fontWeight: 800, fontSize: 30, color: ZV.gold, letterSpacing: '-0.3px' }}>بدر العنزي</div>
              <div style={{ fontFamily: ZV.body, fontWeight: 500, fontSize: 15.5, color: 'rgba(255,255,255,0.5)', marginTop: 1 }}>المجدِّد الاستراتيجي للأعمال</div>
            </div>
            <div style={{ width: 2, height: 40, background: 'linear-gradient(180deg, rgba(199,154,58,0) 0%, rgba(199,154,58,0.7) 50%, rgba(199,154,58,0) 100%)' }}></div>
          </div>
        );
      }}
    </Sprite>
  );
}

Object.assign(window, { CornerMark });