// Act 1 (Problem) + Act 2 (Solution intro) — 0-30s
// Time map:
//   0-5s   Shot 1: WhatsApp chaos
//   5-10s  Shot 2: Fake visit at cafe
//   10-15s Shot 3: Paper receipts tampering
//   15-20s Shot 4: 4-quadrant montage "is this your company?"
//   20-30s Shot 5: Solution reveal — logo builds

// ══════════════════════════════════════════════════════════
// SHOT 1: WhatsApp Chaos
// ══════════════════════════════════════════════════════════
function Shot1_Chaos() {
  const { localTime } = useSprite();

  // 20+ whatsapp bubbles that pile up rapidly
  const bubbles = React.useMemo(() => {
    const texts = [
      'وين الطلب؟', 'أحمد راسل', 'صار التحصيل؟', 'د. سارة وين',
      'الخصم كم؟', 'اتصل بيّ', 'ممكن تحديث؟', 'التقرير لهسة ما وصل',
      'مشكلة بالصيدلية', 'أكد الزيارة', 'راح أشوف', 'هسة أرجع',
      'محتاج توقيع', 'الكمية قليلة', 'ما أقدر اليوم', 'بكرة يمعود',
      'صار؟ شبيك ساكت', 'الطلب ضايع', 'الإيصال وين', 'جواب لو سمحت',
    ];
    return texts.map((text, i) => ({
      text,
      // deterministic positions (no random to avoid re-renders)
      x: 80 + ((i * 127) % 1100),
      y: 130 + ((i * 83) % 520),
      appearAt: 0.15 + i * 0.2,
      isOwn: i % 2 === 0,
    }));
  }, []);

  // Counter increases
  const counterN = Math.min(Math.floor(localTime * 6) + 2, 89);

  // Exit fade last 0.5s of shot (shot is 5s total)
  const exitT = localTime > 4.5 ? (localTime - 4.5) / 0.5 : 0;
  const exitFade = 1 - exitT;

  // End-of-shot question appears
  const qT = clamp((localTime - 3.5) / 0.7, 0, 1);

  // Tick sound on each new bubble
  const lastCount = React.useRef(0);
  React.useEffect(() => {
    const shown = bubbles.filter(b => localTime >= b.appearAt).length;
    if (shown > lastCount.current) {
      if (window.FajrAudio) window.FajrAudio.play('soft-tick', { freq: 1400 + Math.random() * 600, gain: 0.05 });
    }
    lastCount.current = shown;
  }, [localTime, bubbles]);

  return (
    <div style={{
      position: 'absolute', inset: 0, opacity: exitFade,
      background: '#0a1720',
      overflow: 'hidden',
    }}>
      {/* Faux phone messages background */}
      {bubbles.map((b, i) => {
        if (localTime < b.appearAt) return null;
        const t = clamp((localTime - b.appearAt) / 0.35, 0, 1);
        const jitter = Math.sin((localTime + i) * 3) * 2;
        return (
          <div key={i} style={{
            position: 'absolute',
            left: b.x, top: b.y + jitter,
            padding: '10px 14px',
            borderRadius: b.isOwn ? '12px 12px 0 12px' : '12px 12px 12px 0',
            background: b.isOwn ? '#0a5f42' : '#1f2d34',
            color: '#e7e7e7',
            fontSize: 14,
            fontFamily: 'Tajawal, sans-serif',
            maxWidth: 200,
            opacity: t,
            transform: `scale(${0.6 + 0.4 * t}) rotate(${(i % 7 - 3) * 1}deg)`,
            boxShadow: '0 4px 12px rgba(0,0,0,.4)',
            zIndex: i,
            direction: 'rtl',
          }}>
            {b.text}
          </div>
        );
      })}

      {/* Darkening overlay */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(circle at 50% 50%, rgba(10,23,32,0.3) 0%, rgba(10,23,32,0.85) 80%)',
      }} />

      {/* Counter top-center */}
      <div style={{
        position: 'absolute', top: 50, left: '50%', transform: 'translateX(-50%)',
        padding: '10px 20px', borderRadius: 30,
        background: 'rgba(232,93,93,.15)',
        border: '1px solid rgba(232,93,93,.4)',
        color: FAJR.red,
        fontFamily: 'IBM Plex Mono, monospace',
        fontSize: 18, fontWeight: 600,
        direction: 'ltr',
        fontVariantNumeric: 'tabular-nums',
      }}>
        {counterN} رسالة غير مقروءة
      </div>

      {/* Question */}
      <div style={{
        position: 'absolute', bottom: 90, left: 0, right: 0,
        textAlign: 'center',
        opacity: qT,
        transform: `translateY(${(1 - qT) * 20}px)`,
      }}>
        <div style={{
          fontSize: 36, fontWeight: 700,
          color: FAJR.ivory, textShadow: '0 2px 20px rgba(0,0,0,.8)',
        }}>
          شركتك تدير عملياتها بالواتساب؟
        </div>
      </div>
    </div>
  );
}

// ══════════════════════════════════════════════════════════
// SHOT 2: Fake visit from cafe
// ══════════════════════════════════════════════════════════
function Shot2_FakeVisit() {
  const { localTime } = useSprite();

  // Types "زرت د. أحمد — الكرادة ✓" progressively
  const typedText = 'زرت د. أحمد — الكرادة ✓';
  const chars = Math.floor(clamp((localTime - 1.0) / 1.5, 0, 1) * typedText.length);
  const shown = typedText.slice(0, chars);

  // Dashed red line draws between cafe and clinic after 2.8s
  const lineT = clamp((localTime - 2.8) / 1.0, 0, 1);

  // Alert appears at 3.8s
  const alertT = clamp((localTime - 3.8) / 0.5, 0, 1);

  // Exit
  const exitT = localTime > 4.5 ? (localTime - 4.5) / 0.5 : 0;
  const exitFade = 1 - exitT;

  // Typing sounds
  const lastChars = React.useRef(0);
  React.useEffect(() => {
    if (chars > lastChars.current) {
      if (window.FajrAudio) window.FajrAudio.play('soft-tick', { freq: 1600 + Math.random() * 400, gain: 0.07 });
    }
    lastChars.current = chars;
  }, [chars]);

  return (
    <div style={{
      position: 'absolute', inset: 0, opacity: exitFade,
      background: FAJR.navy900,
    }}>
      <SceneBG />

      {/* Left: Phone mockup (at cafe) */}
      <div style={{
        position: 'absolute', left: 180, top: 220,
        width: 300,
        background: `linear-gradient(160deg, ${FAJR.navy700}, ${FAJR.navy800})`,
        border: `1px solid ${FAJR.lineDark}`,
        borderRadius: 30, padding: 14,
        boxShadow: '0 40px 80px -20px rgba(0,0,0,.6)',
      }}>
        <div style={{ width: 100, height: 5, borderRadius: 3, background: 'rgba(245,241,232,.12)', margin: '0 auto 14px' }} />
        <div style={{
          background: 'rgba(15,31,43,.7)',
          borderRadius: 16, padding: 18, minHeight: 260,
        }}>
          <div style={{ fontSize: 11, color: 'rgba(245,241,232,.5)', marginBottom: 10, fontFamily: 'IBM Plex Mono, monospace', direction: 'ltr' }}>
            NEW VISIT LOG
          </div>
          <div style={{
            padding: 14, borderRadius: 8,
            background: 'rgba(15,31,43,.5)',
            border: `1px solid ${FAJR.lineDark}`,
            color: FAJR.ivory, fontSize: 15,
            minHeight: 90, direction: 'rtl',
          }}>
            {shown}
            {chars < typedText.length && localTime > 1.0 && (
              <span style={{ borderRight: `2px solid ${FAJR.gold}`, marginRight: 2, animation: 'none' }}>&nbsp;</span>
            )}
          </div>
          {chars >= typedText.length && (
            <div style={{
              marginTop: 14, padding: '10px 14px',
              background: FAJR.gold, color: FAJR.navy900,
              borderRadius: 8, textAlign: 'center',
              fontWeight: 600, fontSize: 14,
            }}>
              حفظ الزيارة
            </div>
          )}
        </div>
        {/* "at cafe" label */}
        <div style={{
          marginTop: 14, textAlign: 'center',
          fontSize: 13, color: 'rgba(245,241,232,.5)',
        }}>
          ☕ المندوب في مقهى
        </div>
      </div>

      {/* Right: Map */}
      <div style={{
        position: 'absolute', right: 180, top: 180,
        width: 460, height: 360,
        background: 'rgba(15,31,43,.6)',
        border: `1px solid ${FAJR.lineDark}`,
        borderRadius: 14, padding: 20,
        boxShadow: '0 40px 80px -20px rgba(0,0,0,.6)',
      }}>
        <div style={{ fontSize: 11, color: 'rgba(245,241,232,.5)', marginBottom: 12, fontFamily: 'IBM Plex Mono, monospace', direction: 'ltr' }}>
          LIVE LOCATION MAP
        </div>
        <div style={{
          position: 'relative', height: 280,
          background: 'rgba(10,20,28,.8)',
          borderRadius: 10,
          backgroundImage: `
            linear-gradient(rgba(212,168,83,.06) 1px, transparent 1px),
            linear-gradient(90deg, rgba(212,168,83,.06) 1px, transparent 1px)`,
          backgroundSize: '30px 30px',
        }}>
          {/* Cafe pin (where rep actually is) — bottom-left */}
          <div style={{
            position: 'absolute', left: 40, bottom: 40,
          }}>
            <div style={{
              width: 16, height: 16, borderRadius: '50%',
              background: FAJR.red,
              boxShadow: `0 0 0 6px rgba(232,93,93,.2), 0 0 0 14px rgba(232,93,93,.08)`,
            }} />
            <div style={{
              position: 'absolute', top: 22, left: -20, width: 60,
              textAlign: 'center', fontSize: 11, color: FAJR.red,
              fontFamily: 'IBM Plex Mono, monospace', direction: 'ltr',
            }}>CAFE</div>
          </div>

          {/* Clinic pin (where visit was claimed) — top-right */}
          <div style={{
            position: 'absolute', right: 60, top: 40,
          }}>
            <div style={{
              width: 16, height: 16, borderRadius: '50%',
              background: FAJR.green,
              boxShadow: `0 0 0 6px rgba(127,193,138,.2), 0 0 0 14px rgba(127,193,138,.08)`,
            }} />
            <div style={{
              position: 'absolute', top: 22, left: -30, width: 80,
              textAlign: 'center', fontSize: 11, color: FAJR.green,
              fontFamily: 'IBM Plex Mono, monospace', direction: 'ltr',
            }}>CLINIC</div>
          </div>

          {/* Dashed red line between */}
          <svg style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }} width="100%" height="100%">
            <defs>
              <marker id="arr" markerWidth="8" markerHeight="8" refX="4" refY="4" orient="auto">
                <path d="M0,0 L8,4 L0,8 Z" fill={FAJR.red} />
              </marker>
            </defs>
            <line
              x1="48" y1="232"
              x2={48 + (370 - 48) * lineT}
              y2={232 + (56 - 232) * lineT}
              stroke={FAJR.red}
              strokeWidth="3"
              strokeDasharray="8 6"
              opacity={lineT}
            />
            {lineT > 0.9 && (
              <text
                x={(48 + 370) / 2} y={(232 + 56) / 2 - 10}
                fill={FAJR.red}
                fontSize="14"
                fontFamily="IBM Plex Mono, monospace"
                textAnchor="middle"
                fontWeight="600"
              >5.2 km</text>
            )}
          </svg>
        </div>
      </div>

      {/* Alert at bottom */}
      <div style={{
        position: 'absolute', bottom: 90, left: 0, right: 0,
        textAlign: 'center',
        opacity: alertT,
        transform: `translateY(${(1 - alertT) * 20}px)`,
      }}>
        <div style={{
          fontSize: 34, fontWeight: 700,
          color: FAJR.ivory,
        }}>
          مندوبك يسجّل زيارات <span style={{ color: FAJR.red }}>ما صارت</span>؟
        </div>
      </div>
    </div>
  );
}

// ══════════════════════════════════════════════════════════
// SHOT 3: Paper receipts tampering
// ══════════════════════════════════════════════════════════
function Shot3_PaperReceipts() {
  const { localTime } = useSprite();

  // Two paper receipts appear, both with same number (duplicate)
  const r1T = clamp(localTime / 0.6, 0, 1);
  const r2T = clamp((localTime - 1.0) / 0.6, 0, 1);
  // Red stamp appears on top showing "duplicate"
  const stampT = clamp((localTime - 2.0) / 0.5, 0, 1);
  // Excel shakes
  const shake = Math.sin(localTime * 30) * (localTime > 2.8 ? 3 : 0);
  // Alert
  const alertT = clamp((localTime - 3.5) / 0.5, 0, 1);
  // Exit
  const exitT = localTime > 4.5 ? (localTime - 4.5) / 0.5 : 0;
  const exitFade = 1 - exitT;

  // Stamp sound
  const stampFired = React.useRef(false);
  React.useEffect(() => {
    if (localTime > 2.0 && localTime < 2.1 && !stampFired.current) {
      stampFired.current = true;
      if (window.FajrAudio) window.FajrAudio.play('pop', { freq: 180, gain: 0.3 });
    }
    if (localTime < 1.9) stampFired.current = false;
  }, [localTime]);

  return (
    <div style={{
      position: 'absolute', inset: 0, opacity: exitFade,
      background: FAJR.navy900,
    }}>
      <SceneBG />

      {/* Receipt 1 — paper style */}
      <div style={{
        position: 'absolute', left: 200, top: 180,
        width: 280, height: 380,
        background: '#f5eccb',
        borderRadius: 3,
        padding: 24,
        transform: `rotate(-6deg) scale(${0.8 + 0.2 * r1T})`,
        opacity: r1T,
        boxShadow: '0 20px 50px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.1)',
        fontFamily: 'IBM Plex Mono, monospace',
        color: '#2a1810',
        direction: 'rtl',
      }}>
        <div style={{ fontSize: 12, opacity: 0.6, textAlign: 'center', borderBottom: '1px dashed #8a7248', paddingBottom: 10 }}>
          إيصال تحصيل
        </div>
        <div style={{ marginTop: 14, fontSize: 14, fontWeight: 600 }}>رقم: #RC-0847</div>
        <div style={{ marginTop: 20 }}>
          <div style={{ fontSize: 13, marginBottom: 8 }}>الصيدلية: النور</div>
          <div style={{ fontSize: 13, marginBottom: 8 }}>المبلغ: 500,000</div>
          <div style={{ fontSize: 13, marginBottom: 8 }}>التاريخ: 15/04</div>
        </div>
        <div style={{
          marginTop: 40, fontSize: 11, opacity: 0.5,
          borderTop: '1px dashed #8a7248', paddingTop: 10, textAlign: 'center',
        }}>
          ختم الصيدلية: _______
        </div>
      </div>

      {/* Receipt 2 — SAME number (duplicate/tampered) */}
      <div style={{
        position: 'absolute', left: 480, top: 220,
        width: 280, height: 380,
        background: '#ede4c0',
        borderRadius: 3,
        padding: 24,
        transform: `rotate(7deg) scale(${0.8 + 0.2 * r2T})`,
        opacity: r2T,
        boxShadow: '0 25px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.1)',
        fontFamily: 'IBM Plex Mono, monospace',
        color: '#2a1810',
        direction: 'rtl',
      }}>
        <div style={{ fontSize: 12, opacity: 0.6, textAlign: 'center', borderBottom: '1px dashed #8a7248', paddingBottom: 10 }}>
          إيصال تحصيل
        </div>
        <div style={{ marginTop: 14, fontSize: 14, fontWeight: 600 }}>رقم: #RC-0847</div>
        <div style={{ marginTop: 20 }}>
          <div style={{ fontSize: 13, marginBottom: 8 }}>الصيدلية: النور</div>
          <div style={{ fontSize: 13, marginBottom: 8 }}>
            المبلغ: <span style={{ textDecoration: 'line-through' }}>500,000</span> <span style={{ color: '#8b0000' }}>350,000</span>
          </div>
          <div style={{ fontSize: 13, marginBottom: 8 }}>التاريخ: 15/04</div>
        </div>
        <div style={{
          marginTop: 40, fontSize: 11, opacity: 0.5,
          borderTop: '1px dashed #8a7248', paddingTop: 10, textAlign: 'center',
        }}>
          ختم الصيدلية: _______
        </div>

        {/* RED STAMP overlay */}
        {stampT > 0 && (
          <div style={{
            position: 'absolute', top: '40%', left: '50%',
            transform: `translate(-50%, -50%) rotate(-15deg) scale(${0.5 + 0.5 * Easing.easeOutBack(stampT)})`,
            padding: '10px 22px',
            border: '4px solid #c23030',
            borderRadius: 6,
            color: '#c23030',
            fontSize: 26, fontWeight: 800,
            fontFamily: 'Tajawal, sans-serif',
            opacity: stampT,
            letterSpacing: '.05em',
            background: 'rgba(245,236,203,.3)',
          }}>
            مكرّر!
          </div>
        )}
      </div>

      {/* Excel card (right) */}
      <div style={{
        position: 'absolute', right: 140, top: 230,
        width: 320, height: 280,
        background: '#1e1e1e',
        borderRadius: 8,
        padding: 16,
        transform: `translateX(${shake}px)`,
        boxShadow: '0 30px 60px rgba(0,0,0,.6)',
        border: '1px solid #333',
      }}>
        <div style={{ fontSize: 11, color: '#4ec9b0', fontFamily: 'IBM Plex Mono, monospace', marginBottom: 10 }}>
          collections_april.xlsx
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 1, background: '#333' }}>
          {[
            ['الصيدلية', 'الرقم', 'المبلغ'],
            ['النور', '0847', '500,000'],
            ['النور', '0847', '350,000'],
            ['الحياة', '0848', '800,000'],
            ['الحياة', '0848', '?'],
            ['الشفاء', '0851', '420,000'],
          ].map((row, i) => (
            <React.Fragment key={i}>
              {row.map((cell, j) => (
                <div key={j} style={{
                  padding: '7px 10px',
                  background: i === 0 ? '#2d5a2d' : (i === 1 || i === 2 || i === 3 || i === 4) && j === 1 && cell.includes('0847') ? '#5a2d2d' : (i === 3 || i === 4) && j === 1 && cell.includes('0848') ? '#5a2d2d' : '#252526',
                  color: i === 0 ? '#fff' : '#d4d4d4',
                  fontSize: 12,
                  fontFamily: 'IBM Plex Mono, monospace',
                  fontWeight: i === 0 ? 600 : 400,
                  direction: j === 0 ? 'rtl' : 'ltr',
                  textAlign: j === 0 ? 'right' : 'left',
                }}>
                  {cell}
                </div>
              ))}
            </React.Fragment>
          ))}
        </div>
        <div style={{
          marginTop: 12, padding: 8,
          background: 'rgba(232,93,93,.15)',
          border: '1px solid rgba(232,93,93,.4)',
          borderRadius: 4,
          fontSize: 11, color: FAJR.red,
          fontFamily: 'IBM Plex Mono, monospace',
        }}>
          ⚠ 2 DUPLICATE ENTRIES
        </div>
      </div>

      {/* Alert */}
      <div style={{
        position: 'absolute', bottom: 90, left: 0, right: 0,
        textAlign: 'center',
        opacity: alertT,
        transform: `translateY(${(1 - alertT) * 20}px)`,
      }}>
        <div style={{
          fontSize: 34, fontWeight: 700,
          color: FAJR.ivory,
        }}>
          إيصالات ورقية <span style={{ color: FAJR.red }}>قابلة للتعديل</span>؟
        </div>
      </div>
    </div>
  );
}

// ══════════════════════════════════════════════════════════
// SHOT 4: 4-quadrant montage
// ══════════════════════════════════════════════════════════
function Shot4_Montage() {
  const { localTime } = useSprite();

  // Question fades up
  const qT = clamp((localTime - 1.5) / 1.0, 0, 1);

  const quadrants = [
    { label: 'واتساب فوضى', color: FAJR.red },
    { label: 'زيارات مزوّرة', color: FAJR.red },
    { label: 'إيصالات مزوّرة', color: FAJR.red },
    { label: 'إكسل متشابك', color: FAJR.red },
  ];

  // Exit fade in last 0.5s
  const exitT = localTime > 4.5 ? (localTime - 4.5) / 0.5 : 0;
  const exitFade = 1 - exitT;

  return (
    <div style={{
      position: 'absolute', inset: 0, opacity: exitFade,
      background: FAJR.navy900,
    }}>
      <SceneBG />

      {/* 4 quadrants, desaturated */}
      <div style={{
        position: 'absolute', inset: 0,
        display: 'grid', gridTemplateColumns: '1fr 1fr', gridTemplateRows: '1fr 1fr',
        gap: 4, padding: 20,
        filter: 'grayscale(0.7) brightness(0.5)',
      }}>
        {quadrants.map((q, i) => {
          const appearT = clamp((localTime - i * 0.2) / 0.5, 0, 1);
          const shakeAmp = (localTime > 2.5 && localTime < 3.5) ? Math.sin(localTime * 40 + i) * 2 : 0;
          return (
            <div key={i} style={{
              background: `linear-gradient(135deg, ${FAJR.navy800}, #2a1a1a)`,
              border: `1px solid rgba(232,93,93,.3)`,
              borderRadius: 12,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              opacity: appearT,
              transform: `scale(${0.85 + 0.15 * appearT}) translate(${shakeAmp}px, ${shakeAmp / 2}px)`,
              position: 'relative',
            }}>
              <div style={{
                fontSize: 22, fontWeight: 600, color: 'rgba(245,241,232,.4)',
                textAlign: 'center',
              }}>
                <div style={{ fontSize: 50, marginBottom: 12, opacity: 0.4 }}>
                  {i === 0 ? '💬' : i === 1 ? '📍' : i === 2 ? '📄' : '📊'}
                </div>
                {q.label}
              </div>
              <div style={{
                position: 'absolute', inset: 0,
                background: `radial-gradient(circle, transparent 30%, rgba(0,0,0,.5) 100%)`,
                borderRadius: 12,
              }} />
            </div>
          );
        })}
      </div>

      {/* Overlay question at center */}
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        opacity: qT,
      }}>
        <div style={{
          padding: '48px 80px', borderRadius: 20,
          background: 'rgba(15,31,43,.92)',
          border: `1px solid ${FAJR.line}`,
          boxShadow: '0 40px 100px rgba(0,0,0,.8)',
          textAlign: 'center',
          transform: `scale(${0.85 + 0.15 * qT})`,
          backdropFilter: 'blur(10px)',
          maxWidth: 700,
        }}>
          <div style={{
            fontSize: 42, fontWeight: 700, color: FAJR.ivory,
            lineHeight: 1.4,
          }}>
            هل هذا يشبه <span style={{ color: FAJR.gold }}>شركتك؟</span>
          </div>
        </div>
      </div>
    </div>
  );
}

// ══════════════════════════════════════════════════════════
// SHOT 5: Solution reveal — logo builds
// ══════════════════════════════════════════════════════════
function Shot5_Reveal() {
  const { localTime } = useSprite();

  // Gold sweep wipes from right (0 to 0.8s)
  const sweepT = clamp(localTime / 0.8, 0, 1);
  // Logo appears at 1.0s
  const logoT = clamp((localTime - 1.2) / 1.0, 0, 1);
  const logoEased = Easing.easeOutBack(logoT);
  // Brand name
  const nameT = clamp((localTime - 2.5) / 0.8, 0, 1);
  // Tagline
  const taglineT = clamp((localTime - 3.5) / 0.8, 0, 1);
  // Pulse hold
  const breathe = 1 + Math.sin((localTime - 2) * 2) * 0.015;

  // Reveal chime at 1.2s
  const chimeFired = React.useRef(false);
  React.useEffect(() => {
    if (localTime > 1.0 && localTime < 1.1 && !chimeFired.current) {
      chimeFired.current = true;
      if (window.FajrAudio) window.FajrAudio.play('chime');
    }
    if (localTime < 0.9) chimeFired.current = false;
  }, [localTime]);

  // Exit fade
  const exitT = localTime > 9.0 ? (localTime - 9.0) / 1.0 : 0;
  const exitFade = 1 - exitT;

  return (
    <div style={{
      position: 'absolute', inset: 0, opacity: exitFade,
      background: FAJR.navy900,
    }}>
      <SceneBG />

      {/* Gold sweep */}
      {sweepT < 1 && (
        <div style={{
          position: 'absolute', inset: 0,
          background: `linear-gradient(90deg, transparent 0%, ${FAJR.gold} ${sweepT * 100 - 10}%, ${FAJR.goldSoft} ${sweepT * 100}%, ${FAJR.gold} ${sweepT * 100 + 10}%, transparent ${sweepT * 100 + 40}%)`,
          opacity: 0.9,
        }} />
      )}

      {/* Center content */}
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center',
      }}>
        {/* Logo */}
        <div style={{
          width: 150, height: 150, borderRadius: 32,
          background: `radial-gradient(circle at 30% 30%, ${FAJR.navy700}, ${FAJR.navy900})`,
          display: 'grid', placeItems: 'center',
          boxShadow: `0 0 0 1px ${FAJR.line}, 0 30px 90px -20px rgba(212,168,83,.5)`,
          marginBottom: 36,
          opacity: logoT,
          transform: `scale(${(0.4 + 0.6 * logoEased) * breathe})`,
        }}>
          <img src="assets/fajrone-logo-transparent.png" alt="logo"
            style={{ width: 100, height: 100, objectFit: 'contain' }}
            onError={(e) => { e.target.outerHTML = '<span style="font-size:64px;font-weight:800;color:#d4a853">ف</span>'; }}
          />
        </div>

        {/* Brand name */}
        <div style={{
          fontSize: 72, fontWeight: 800, color: FAJR.ivory,
          letterSpacing: '-0.02em', lineHeight: 1,
          opacity: nameT,
          transform: `translateY(${(1 - Easing.easeOutCubic(nameT)) * 16}px)`,
        }}>
          فجر <span style={{ color: FAJR.gold }}>ون</span>
        </div>

        {/* Tagline */}
        <div style={{
          fontSize: 22, fontWeight: 300, color: 'rgba(245,241,232,.75)',
          marginTop: 22, textAlign: 'center', letterSpacing: '0.02em',
          opacity: taglineT,
          transform: `translateY(${(1 - Easing.easeOutCubic(taglineT)) * 12}px)`,
        }}>
          نظام واحد <span style={{ color: FAJR.gold }}>—</span> يدير كل شي.
        </div>

        {/* Subtitle with mono label */}
        <div style={{
          marginTop: 16,
          opacity: clamp((localTime - 4.3) / 0.7, 0, 1),
          fontFamily: 'IBM Plex Mono, monospace',
          fontSize: 13, color: FAJR.goldDim,
          letterSpacing: '.25em', direction: 'ltr',
        }}>
          FIELD OPERATIONS · SUITE
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  Shot1_Chaos, Shot2_FakeVisit, Shot3_PaperReceipts, Shot4_Montage, Shot5_Reveal,
});
