// زمام — الفيديو التشويقي: المشاهد ١–٤ (الافتتاح، البحر، المنخل، الدرع)
// يعتمد على animations.jsx (Stage/Sprite/Easing/animate/clamp على window)

const ZV = {
  gold: '#c79a3a',
  goldSoft: '#e3c069',
  ink: '#15131d',
  bgDark: '#0B0A12',
  paper: '#fbfbfd',
  red: '#b0473d',
  amber: '#b97f2e',
  green: '#4a7c59',
  slate: '#5a6c7d',
  head: "'Tajawal', sans-serif",
  body: "'IBM Plex Sans Arabic', sans-serif",
};

// تلاشي دخول/خروج موحّد
function zFade(lt, dur, inD, outD) {
  inD = inD || 0.5; outD = outD || 0.45;
  const a = Easing.easeOutCubic(clamp(lt / inD, 0, 1));
  const b = 1 - Easing.easeInCubic(clamp((lt - (dur - outD)) / outD, 0, 1));
  return Math.min(a, b);
}

// نص مركزي يدخل بانزياح ويخرج بتلاشٍ
function ZText({ start, end, y, size, color, weight, font, children, maxW, lh, glow, delay }) {
  size = size || 64; color = color || '#fff'; weight = weight || 700;
  font = font || ZV.head; maxW = maxW || 920; lh = lh || 1.55; delay = delay || 0;
  return (
    <Sprite start={start} end={end}>
      {({ localTime, duration }) => {
        const lt = Math.max(0, localTime - delay);
        if (localTime < delay) return null;
        const op = zFade(lt, duration - delay, 0.55, 0.45);
        const rise = (1 - Easing.easeOutCubic(clamp(lt / 0.7, 0, 1))) * 34;
        return (
          <div style={{ position: 'absolute', top: y, left: 0, right: 0, display: 'flex', justifyContent: 'center', opacity: op, pointerEvents: 'none' }}>
            <div style={{ maxWidth: maxW, textAlign: 'center', direction: 'rtl', fontFamily: font, fontSize: size, fontWeight: weight, color: color, lineHeight: lh, transform: 'translateY(' + rise + 'px)', textWrap: 'balance', textShadow: glow ? '0 0 70px rgba(199,154,58,0.4)' : 'none' }}>{children}</div>
          </div>
        );
      }}
    </Sprite>
  );
}

// توهج ذهبي خلفي ثابت
function GoldGlow({ y, opacity }) {
  return (
    <div style={{ position: 'absolute', left: '50%', top: y, width: 1200, height: 1200, transform: 'translate(-50%,-50%)', background: 'radial-gradient(circle, rgba(199,154,58,' + (opacity || 0.13) + ') 0%, rgba(199,154,58,0) 62%)', pointerEvents: 'none' }}></div>
  );
}

// ───────── المشهد ١: الافتتاح ─────────
function SceneOpen() {
  return (
    <Sprite start={0} end={9}>
      {({ localTime: lt }) => {
        const op = zFade(lt, 9, 0.8, 0.7);
        const pulse = 1 + 0.04 * Math.sin(lt * 2.4);
        return (
          <div data-screen-label="الافتتاح" style={{ position: 'absolute', inset: 0, opacity: op }}>
            <GoldGlow y={820} opacity={0.16}></GoldGlow>
            <div style={{ position: 'absolute', left: '50%', top: 360, transform: 'translateX(-50%) scale(' + pulse + ')', width: 14, height: 14, borderRadius: 7, background: ZV.gold, boxShadow: '0 0 40px 8px rgba(199,154,58,0.55)' }}></div>
            <ZText start={0.6} end={4.6} y={680} size={88} weight={800} glow={true}>كم صوتاً يتكلم عن مؤسستك الآن؟</ZText>
            <ZText start={4.4} end={8.6} y={700} size={80} weight={800} color={ZV.goldSoft} glow={true}>…وأنت لا تسمع أكثره</ZText>
            <ZText start={1.2} end={8.6} y={1560} size={40} weight={500} color={'rgba(255,255,255,0.45)'} font={ZV.body}>زمام — حيث يُمسَك زمام السمعة</ZText>
          </div>
        );
      }}
    </Sprite>
  );
}

// ───────── المشهد ٢: البحر ─────────
const SEA_COMMENTS = [
  { name: 'عبدالله', stars: '★★★★★', text: 'عسل أصلي صافي والطعم فوق الوصف' },
  { name: 'نـ***', stars: '★★', text: 'الشحنة تأخرت علينا كثير' },
  { name: 'سعد', stars: '★★★★★', text: 'أسرع توصيل وأروع تعامل مرّ علي' },
  { name: 'أم فهد', stars: '★', text: 'وصلني المنتج ناقصاً عن الوصف' },
  { name: 'مـ***', stars: '★★★★', text: 'السعر أعلى شي لكن الجودة تستاهل' },
  { name: 'ريم', stars: '★★★★★', text: 'ليتكم توصّلون للمنطقة الشمالية' },
];

function SeaCard({ c, x, y, fade }) {
  return (
    <div style={{ position: 'absolute', left: x, top: y, width: 470, background: 'rgba(255,255,255,0.97)', borderRadius: 22, padding: '26px 30px', opacity: fade, direction: 'rtl', boxShadow: '0 14px 44px rgba(0,0,0,0.4)' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12, fontFamily: ZV.body }}>
        <div style={{ fontWeight: 600, fontSize: 30, color: ZV.ink }}>{c.name}</div>
        <div style={{ color: ZV.gold, fontSize: 28, letterSpacing: '2px' }}>{c.stars}</div>
      </div>
      <div style={{ marginTop: 12, fontFamily: ZV.body, fontSize: 31, lineHeight: 1.55, color: '#3c3a44' }}>{c.text}</div>
    </div>
  );
}

function SceneSea() {
  return (
    <Sprite start={8.5} end={20.5}>
      {({ localTime: lt }) => {
        const op = zFade(lt, 12, 0.7, 0.7);
        const count = Math.round(animate({ from: 0, to: 359, start: 1, end: 9.5, ease: Easing.easeOutCubic })(lt));
        return (
          <div data-screen-label="البحر" style={{ position: 'absolute', inset: 0, opacity: op }}>
            <GoldGlow y={300} opacity={0.1}></GoldGlow>
            <div style={{ position: 'absolute', top: 150, left: 0, right: 0, textAlign: 'center', direction: 'rtl' }}>
              <div style={{ fontFamily: ZV.head, fontWeight: 800, fontSize: 70, color: '#fff' }}>البحر</div>
              <div style={{ fontFamily: ZV.body, fontSize: 37, color: 'rgba(255,255,255,0.55)', marginTop: 10 }}>كل ما قاله جمهورك — في مكانٍ واحد</div>
              <div style={{ fontFamily: ZV.head, fontSize: 118, fontWeight: 800, color: ZV.gold, marginTop: 22, fontVariantNumeric: 'tabular-nums' }}>{count}<span style={{ fontSize: 42, color: 'rgba(255,255,255,0.6)', fontWeight: 500 }}> تعليقاً حياً</span></div>
            </div>
            {SEA_COMMENTS.map((c, i) => {
              const enter = 1 + i * 1.15;
              if (lt < enter) return null;
              const t = lt - enter;
              const y = 1960 - t * 215;
              if (y < 540) return null;
              const x = i % 2 === 0 ? 55 : 555;
              const fade = Math.min(1, t / 0.5) * clamp((y - 560) / 220, 0, 1);
              return <SeaCard key={i} c={c} x={x} y={y} fade={fade}></SeaCard>;
            })}
          </div>
        );
      }}
    </Sprite>
  );
}

// ───────── المشهد ٣: المنخل الدقيق ─────────
const SIEVE_CHIPS = [
  { icon: '✅', label: 'ثناء محفوظ', n: 212, c: ZV.green },
  { icon: '🩸', label: 'جرح مرصود', n: 96, c: ZV.red },
  { icon: '💡', label: 'فرصة خفية', n: 18, c: ZV.amber },
  { icon: '↺', label: 'مكرر مستبعد', n: 44, c: ZV.slate },
];

function SceneSieve() {
  return (
    <Sprite start={20} end={31.5}>
      {({ localTime: lt }) => {
        const op = zFade(lt, 11.5, 0.7, 0.7);
        const wobble = Math.sin(lt * 3.2) * 2.5;
        return (
          <div data-screen-label="المنخل الدقيق" style={{ position: 'absolute', inset: 0, opacity: op }}>
            <GoldGlow y={760} opacity={0.13}></GoldGlow>
            <ZText start={20.4} end={31} y={170} size={70} weight={800}>المنخل الدقيق</ZText>
            <ZText start={20.7} end={31} y={290} size={37} weight={400} color={'rgba(255,255,255,0.55)'} font={ZV.body}>يفصل الدقيق عن النخالة — بلا شفقة</ZText>
            {[0, 1, 2, 3, 4].map((j) => {
              const enter = 1.2 + j * 1.05;
              if (lt < enter) return null;
              const p = clamp((lt - enter) / 1.5, 0, 1);
              if (p >= 1) return null;
              const e = Easing.easeInQuad(p);
              const y = 380 + e * 420;
              const sc = 1 - e * 0.72;
              const o = 1 - e * 0.85;
              const x = 540 + (j % 2 === 0 ? -1 : 1) * (90 - e * 80);
              return (
                <div key={j} style={{ position: 'absolute', left: x, top: y, transform: 'translateX(-50%) scale(' + sc + ')', opacity: o, width: 330, background: '#fff', borderRadius: 16, padding: '18px 22px', direction: 'rtl', fontFamily: ZV.body, fontSize: 26, color: ZV.ink, boxShadow: '0 10px 30px rgba(0,0,0,0.35)' }}>
                  {SEA_COMMENTS[j % SEA_COMMENTS.length].text}
                </div>
              );
            })}
            <svg width="300" height="300" viewBox="0 0 300 300" style={{ position: 'absolute', left: 390, top: 700, transform: 'rotate(' + wobble + 'deg)' }}>
              <defs>
                <clipPath id="sieveClip"><circle cx="150" cy="150" r="118"></circle></clipPath>
              </defs>
              <circle cx="150" cy="150" r="124" fill="rgba(199,154,58,0.06)" stroke={ZV.gold} strokeWidth="5"></circle>
              <g clipPath="url(#sieveClip)" stroke="rgba(199,154,58,0.5)" strokeWidth="2">
                <line x1="0" y1="90" x2="300" y2="90"></line><line x1="0" y1="150" x2="300" y2="150"></line><line x1="0" y1="210" x2="300" y2="210"></line>
                <line x1="90" y1="0" x2="90" y2="300"></line><line x1="150" y1="0" x2="150" y2="300"></line><line x1="210" y1="0" x2="210" y2="300"></line>
              </g>
            </svg>
            {SIEVE_CHIPS.map((ch, i) => {
              const enter = 4.6 + i * 0.85;
              if (lt < enter) return null;
              const t = clamp((lt - enter) / 0.55, 0, 1);
              const sc = 0.5 + 0.5 * Easing.easeOutBack(t);
              const col = i % 2; const row = Math.floor(i / 2);
              const x = col === 0 ? 110 : 560;
              const y = 1180 + row * 165;
              const cnt = Math.round(animate({ from: 0, to: ch.n, start: enter + 0.3, end: enter + 1.6, ease: Easing.easeOutCubic })(lt));
              return (
                <div key={i} style={{ position: 'absolute', left: x, top: y, width: 410, opacity: t, transform: 'scale(' + sc + ')', background: 'rgba(255,255,255,0.06)', border: '1px solid ' + ch.c, borderRadius: 60, padding: '22px 30px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14, direction: 'rtl', fontFamily: ZV.body }}>
                  <div style={{ fontSize: 31, color: '#fff', fontWeight: 600 }}>{ch.icon} {ch.label}</div>
                  <div style={{ fontSize: 38, color: ch.c, fontWeight: 700, fontVariantNumeric: 'tabular-nums' }}>{cnt}</div>
                </div>
              );
            })}
            <ZText start={26.8} end={31} y={1610} size={36} weight={400} color={'rgba(255,255,255,0.55)'} font={ZV.body}>359 صوتاً دخلت — وكل صوتٍ عرف موضعه</ZText>
          </div>
        );
      }}
    </Sprite>
  );
}

// ───────── المشهد ٤: درع الفحص (رادار مبكر + كاشف نمط) ─────────
const SHIELD_ROWS = [
  { t: 'العسل وصل بجودة والتغليف متقن', state: 'ok' },
  { t: 'تجربة سيئة وبدأ الناس يتناقلونها', state: 'urgent', at: 3.4, badge: '🔴 جرحٌ ينتشر — تدخّلٌ عاجل' },
  { t: 'الخدمة ممتازة والرد سريع', state: 'ok' },
  { t: 'ثالث طلبٍ من نفس الفرع يصل ناقصاً', state: 'pattern', at: 5.6, badge: '🟠 نمطٌ متكرر — فرعٌ واحد، ٥ هذا الشهر' },
  { t: 'المنتج يستحق التكرار بصراحة', state: 'ok' },
];

function SceneShield() {
  return (
    <Sprite start={31} end={43}>
      {({ localTime: lt }) => {
        const op = zFade(lt, 12, 0.7, 0.7);
        const panelTop = 430, panelH = 1010;
        const scanY = panelTop + ((lt * 380) % panelH);
        const checked = Math.round(animate({ from: 0, to: 169, start: 1, end: 8, ease: Easing.easeOutCubic })(lt));
        return (
          <div data-screen-label="درع الفحص" style={{ position: 'absolute', inset: 0, opacity: op }}>
            <ZText start={31.4} end={42.5} y={170} size={70} weight={800}>🛡️ درع الفحص</ZText>
            <ZText start={31.7} end={42.5} y={290} size={37} weight={400} color={'rgba(255,255,255,0.55)'} font={ZV.body}>يمسك الجرح الخطير قبل أن ينتشر — ويكشف النمط قبل أن يصير أزمة</ZText>
            <div style={{ position: 'absolute', left: 100, top: panelTop, width: 880, height: panelH, background: '#13111c', border: '1px solid rgba(199,154,58,0.35)', borderRadius: 28, overflow: 'hidden', direction: 'rtl' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '26px 34px', borderBottom: '1px solid rgba(255,255,255,0.07)', fontFamily: ZV.body }}>
                <div style={{ color: 'rgba(255,255,255,0.75)', fontSize: 29 }}>فحص حي للبحر</div>
                <div style={{ color: ZV.gold, fontSize: 31, fontWeight: 700, fontVariantNumeric: 'tabular-nums' }}>فُحص {checked}</div>
              </div>
              {SHIELD_ROWS.map((r, i) => {
                const hot = r.at && lt > r.at;
                const bd = hot ? (r.state === 'urgent' ? ZV.red : ZV.amber) : 'rgba(255,255,255,0.08)';
                return (
                  <div key={i} style={{ margin: '20px 30px', padding: '20px 26px', borderRadius: 18, border: '1.5px solid ' + bd, background: hot ? (r.state === 'urgent' ? 'rgba(176,71,61,0.12)' : 'rgba(185,127,46,0.1)') : 'rgba(255,255,255,0.03)', fontFamily: ZV.body, transition: 'all 300ms' }}>
                    <div style={{ fontSize: 29, color: hot ? '#fff' : 'rgba(255,255,255,0.6)', lineHeight: 1.5 }}>{r.t}</div>
                    {hot ? <div style={{ marginTop: 10, fontSize: 26, fontWeight: 700, color: r.state === 'urgent' ? '#e08a80' : '#dfb36b' }}>{r.badge}</div> : null}
                  </div>
                );
              })}
              <div style={{ position: 'absolute', left: 0, right: 0, top: scanY - panelTop, height: 90, background: 'linear-gradient(180deg, rgba(199,154,58,0) 0%, rgba(199,154,58,0.16) 50%, rgba(199,154,58,0) 100%)', borderTop: '1px solid rgba(199,154,58,0.5)', pointerEvents: 'none' }}></div>
            </div>
            <ZText start={38} end={42.6} y={1530} size={38} weight={500} color={ZV.goldSoft} font={ZV.body}>إنذارٌ مبكرٌ واحد يساوي أزمةً مؤجّلة — والقرار لك دائماً</ZText>
          </div>
        );
      }}
    </Sprite>
  );
}

Object.assign(window, { ZV, zFade, ZText, GoldGlow, SceneOpen, SceneSea, SceneSieve, SceneShield });