// Features 5-8: AI, Doctors, Samples, Payroll — each ~13s

// F5: Ask Fajr AI
function Feature5_AI() {
  const { localTime } = useSprite();
  const question = 'شنو أداء فريق بغداد هاي الأسبوع؟';
  const qChars = Math.floor(clamp((localTime - 1.5) / 2.0, 0, 1) * question.length);
  const qShown = question.slice(0, qChars);

  const thinking = localTime > 4.0 && localTime < 5.5;
  const answerStart = 5.5;
  const answer = [
    { text: 'فريق بغداد حقق 87% من التارغت هذا الأسبوع', appearAt: answerStart + 0.5 },
    { text: '📈 أعلى مندوب: سارة (92%)', appearAt: answerStart + 1.3 },
    { text: '📊 إجمالي الزيارات: 156 زيارة', appearAt: answerStart + 2.0 },
    { text: '💰 التحصيل: 12.4 مليون دينار', appearAt: answerStart + 2.7 },
  ];

  const lastQ = React.useRef(0);
  React.useEffect(() => {
    if (qChars > lastQ.current) {
      if (window.FajrAudio) window.FajrAudio.play('soft-tick', { freq: 1400 + Math.random() * 500, gain: 0.05 });
    }
    lastQ.current = qChars;
  }, [qChars]);

  return (
    <>
      <FeatureKicker num="05" problem="تحليل يدوي متعب ومعقّد" />
      <div style={{ position: 'absolute', top: 210, left: 0, right: 0, display: 'flex', justifyContent: 'center' }}>
        <div style={{
          width: 820, padding: 28,
          background: `linear-gradient(160deg, ${FAJR.navy700}, ${FAJR.navy800})`,
          border: `1px solid ${FAJR.line}`, borderRadius: 18,
          boxShadow: '0 40px 100px -30px rgba(0,0,0,.6)',
          opacity: clamp((localTime - 1.0) / 0.5, 0, 1),
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 20, paddingBottom: 14, borderBottom: `1px solid ${FAJR.lineDark}` }}>
            <div style={{ width: 40, height: 40, borderRadius: 10, background: `linear-gradient(135deg, ${FAJR.gold}, #a67d33)`, display: 'grid', placeItems: 'center', fontSize: 20 }}>✨</div>
            <div>
              <div style={{ fontSize: 17, color: FAJR.ivory, fontWeight: 600 }}>اسأل فجر</div>
              <div style={{ fontSize: 11, color: FAJR.goldDim, fontFamily: 'IBM Plex Mono, monospace', direction: 'ltr' }}>AI ASSISTANT · ONLINE</div>
            </div>
          </div>

          {/* User question */}
          <div style={{ display: 'flex', justifyContent: 'flex-start', marginBottom: 16, opacity: clamp((localTime - 1.3) / 0.3, 0, 1) }}>
            <div style={{ maxWidth: '75%', padding: '12px 18px', borderRadius: '16px 16px 16px 2px', background: 'rgba(91,155,213,.15)', border: '1px solid rgba(91,155,213,.25)', color: FAJR.ivory, fontSize: 16, direction: 'rtl' }}>
              {qShown}{qChars < question.length && localTime > 1.5 ? '▊' : ''}
            </div>
          </div>

          {/* Thinking dots */}
          {thinking && (
            <div style={{ display: 'flex', gap: 6, padding: '8px 18px', marginBottom: 12 }}>
              {[0,1,2].map(i => (
                <div key={i} style={{
                  width: 8, height: 8, borderRadius: '50%', background: FAJR.gold,
                  opacity: 0.3 + 0.7 * Math.abs(Math.sin((localTime + i * 0.3) * 4)),
                }} />
              ))}
            </div>
          )}

          {/* AI Answer */}
          {localTime > answerStart && (
            <div style={{ display: 'flex', justifyContent: 'flex-end', opacity: clamp((localTime - answerStart) / 0.3, 0, 1) }}>
              <div style={{ maxWidth: '80%', padding: '16px 20px', borderRadius: '16px 16px 2px 16px', background: `linear-gradient(135deg, rgba(212,168,83,.18), rgba(212,168,83,.08))`, border: `1px solid ${FAJR.line}`, direction: 'rtl' }}>
                {answer.map((a, i) => {
                  if (localTime < a.appearAt) return null;
                  const t = clamp((localTime - a.appearAt) / 0.3, 0, 1);
                  return (
                    <div key={i} style={{
                      fontSize: 15, color: FAJR.ivory, marginBottom: i === answer.length - 1 ? 0 : 10,
                      opacity: t, transform: `translateY(${(1 - t) * 8}px)`,
                      fontWeight: i === 0 ? 600 : 400,
                    }}>{a.text}</div>
                  );
                })}
              </div>
            </div>
          )}
        </div>
      </div>
      <FeaturePayoff text="مساعدك الذكي — يفهم شركتك ويجاوب فوراً" appearAt={9.5} />
    </>
  );
}

// F6: Doctors DB
function Feature6_Doctors() {
  const { localTime } = useSprite();
  const pins = [
    { x: 25, y: 30, appearAt: 1.5, name: 'د. أحمد', field: 'باطنية', active: true },
    { x: 55, y: 45, appearAt: 1.8, name: 'ص. النور', field: 'صيدلية' },
    { x: 40, y: 60, appearAt: 2.1, name: 'د. سارة', field: 'جلدية' },
    { x: 70, y: 25, appearAt: 2.4, name: 'ص. الحياة', field: 'صيدلية' },
    { x: 20, y: 60, appearAt: 2.7, name: 'د. محمد', field: 'أطفال' },
    { x: 60, y: 70, appearAt: 3.0, name: 'ص. الشفاء', field: 'صيدلية' },
    { x: 80, y: 50, appearAt: 3.3, name: 'د. علي', field: 'قلبية' },
    { x: 35, y: 20, appearAt: 3.6, name: 'د. ليلى', field: 'عيون' },
  ];

  return (
    <>
      <FeatureKicker num="06" problem="معلومات الأطباء متفرّقة" />
      <div style={{ position: 'absolute', top: 200, left: 0, right: 0, display: 'flex', justifyContent: 'center', gap: 24 }}>
        {/* Map */}
        <div style={{
          width: 560, height: 420, padding: 20,
          background: `linear-gradient(160deg, ${FAJR.navy700}, ${FAJR.navy800})`,
          border: `1px solid ${FAJR.line}`, borderRadius: 16,
          boxShadow: '0 40px 100px -30px rgba(0,0,0,.6)',
          opacity: clamp((localTime - 1.0) / 0.5, 0, 1),
        }}>
          <div style={{ fontFamily: 'IBM Plex Mono, monospace', fontSize: 11, color: FAJR.goldDim, letterSpacing: '.2em', direction: 'ltr', marginBottom: 12 }}>
            DOCTORS & PHARMACIES · BAGHDAD
          </div>
          <div style={{
            position: 'relative', height: 360,
            background: 'rgba(10,20,28,.7)', 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', overflow: 'hidden',
          }}>
            {pins.map((p, i) => {
              if (localTime < p.appearAt) return null;
              const t = clamp((localTime - p.appearAt) / 0.4, 0, 1);
              return (
                <div key={i} style={{
                  position: 'absolute', left: `${p.x}%`, top: `${p.y}%`,
                  transform: `translate(-50%, -50%) scale(${Easing.easeOutBack(t)})`,
                  opacity: t,
                }}>
                  <div style={{
                    width: p.active ? 18 : 12, height: p.active ? 18 : 12, borderRadius: '50%',
                    background: p.active ? FAJR.gold : FAJR.green,
                    boxShadow: p.active ? `0 0 0 5px rgba(212,168,83,.25), 0 0 20px ${FAJR.gold}` : `0 0 0 3px rgba(127,193,138,.2)`,
                  }} />
                </div>
              );
            })}
            {/* Counter */}
            <div style={{
              position: 'absolute', top: 14, right: 14,
              padding: '6px 14px', borderRadius: 20,
              background: 'rgba(15,31,43,.7)', border: `1px solid ${FAJR.line}`,
              color: FAJR.goldSoft, fontSize: 13, fontWeight: 600,
              fontFamily: 'IBM Plex Mono, monospace', direction: 'ltr',
            }}>
              {pins.filter(p => localTime >= p.appearAt).length} / 247 LOCATIONS
            </div>
          </div>
        </div>

        {/* Detail card (after 4.5s) */}
        {localTime > 4.5 && (() => {
          const t = clamp((localTime - 4.5) / 0.6, 0, 1);
          return (
            <div style={{
              width: 300, padding: 24,
              background: `linear-gradient(160deg, ${FAJR.navy700}, ${FAJR.navy800})`,
              border: `1px solid ${FAJR.gold}`, borderRadius: 16,
              boxShadow: `0 40px 100px -30px rgba(0,0,0,.6), 0 0 30px rgba(212,168,83,.15)`,
              opacity: t, transform: `translateX(${(1 - t) * 30}px) scale(${0.95 + 0.05 * t})`,
            }}>
              <div style={{ width: 60, height: 60, borderRadius: '50%', background: `linear-gradient(135deg, ${FAJR.gold}, #a67d33)`, display: 'grid', placeItems: 'center', fontSize: 24, fontWeight: 700, color: FAJR.navy900, marginBottom: 14 }}>د.أ</div>
              <div style={{ fontSize: 18, fontWeight: 700, color: FAJR.ivory }}>د. أحمد الجبوري</div>
              <div style={{ fontSize: 12, color: FAJR.goldDim, marginTop: 3 }}>باطنية — مستشفى اليرموك</div>
              <div style={{ marginTop: 18, padding: 12, borderRadius: 8, background: 'rgba(15,31,43,.5)', border: `1px solid ${FAJR.lineDark}` }}>
                <div style={{ fontSize: 11, color: 'rgba(245,241,232,.5)', fontFamily: 'IBM Plex Mono, monospace', direction: 'ltr', marginBottom: 5 }}>LOCATION</div>
                <div style={{ fontSize: 13, color: FAJR.ivory, direction: 'rtl' }}>الكرادة — شارع الرواد</div>
                <div style={{ fontSize: 11, color: FAJR.goldSoft, fontFamily: 'IBM Plex Mono, monospace', direction: 'ltr', marginTop: 4 }}>33.3152°N · 44.3661°E</div>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginTop: 12 }}>
                <div style={{ padding: 10, borderRadius: 8, background: 'rgba(15,31,43,.5)', textAlign: 'center' }}>
                  <div style={{ fontSize: 17, color: FAJR.gold, fontWeight: 700, fontFamily: 'IBM Plex Mono, monospace' }}>14</div>
                  <div style={{ fontSize: 10, color: 'rgba(245,241,232,.5)' }}>زيارة</div>
                </div>
                <div style={{ padding: 10, borderRadius: 8, background: 'rgba(15,31,43,.5)', textAlign: 'center' }}>
                  <div style={{ fontSize: 17, color: FAJR.green, fontWeight: 700, fontFamily: 'IBM Plex Mono, monospace' }}>92%</div>
                  <div style={{ fontSize: 10, color: 'rgba(245,241,232,.5)' }}>انتظام</div>
                </div>
              </div>
              {localTime > 6.5 && (
                <div style={{
                  marginTop: 12, padding: '10px 14px', borderRadius: 8,
                  background: FAJR.gold, color: FAJR.navy900,
                  textAlign: 'center', fontSize: 13, fontWeight: 600,
                  opacity: clamp((localTime - 6.5) / 0.4, 0, 1),
                }}>
                  🗺️ ابدأ الملاحة
                </div>
              )}
            </div>
          );
        })()}
      </div>
      <FeaturePayoff text="قاعدة بيانات حيّة — كل عيادة، كل صيدلية" appearAt={9.5} />
    </>
  );
}

// F7: Samples
function Feature7_Samples() {
  const { localTime } = useSprite();
  const startBalance = 50;
  const events = [
    { doc: 'د. أحمد', qty: 10, at: 2.0 },
    { doc: 'د. سارة', qty: 8, at: 3.2 },
    { doc: 'د. محمد', qty: 12, at: 4.4 },
  ];
  let balance = startBalance;
  events.forEach(e => { if (localTime >= e.at) balance -= e.qty; });

  return (
    <>
      <FeatureKicker num="07" problem="ضياع مخزون العينات" />
      <div style={{ position: 'absolute', top: 200, left: 0, right: 0, display: 'flex', justifyContent: 'center', gap: 30 }}>
        {/* Balance card */}
        <div style={{
          width: 320, padding: 28,
          background: `linear-gradient(160deg, ${FAJR.navy700}, ${FAJR.navy800})`,
          border: `1px solid ${FAJR.line}`, borderRadius: 16,
          boxShadow: '0 40px 100px -30px rgba(0,0,0,.6)',
          opacity: clamp((localTime - 1.0) / 0.5, 0, 1),
          textAlign: 'center',
        }}>
          <div style={{ fontFamily: 'IBM Plex Mono, monospace', fontSize: 11, color: FAJR.goldDim, letterSpacing: '.2em', direction: 'ltr', marginBottom: 16 }}>
            SAMPLES BALANCE
          </div>
          <div style={{ fontSize: 76, fontWeight: 800, color: FAJR.gold, fontFamily: 'IBM Plex Mono, monospace', direction: 'ltr', fontVariantNumeric: 'tabular-nums', lineHeight: 1 }}>
            {balance}
          </div>
          <div style={{ fontSize: 14, color: 'rgba(245,241,232,.55)', marginTop: 6 }}>عيّنة متبقّية</div>
          <div style={{ marginTop: 20, padding: 14, borderRadius: 10, background: 'rgba(15,31,43,.5)', border: `1px solid ${FAJR.lineDark}` }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'rgba(245,241,232,.55)', marginBottom: 8 }}>
              <span>السحب الشهري</span>
              <span style={{ fontFamily: 'IBM Plex Mono, monospace', direction: 'ltr' }}>{startBalance}</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: FAJR.green }}>
              <span>المصروف</span>
              <span style={{ fontFamily: 'IBM Plex Mono, monospace', direction: 'ltr' }}>{startBalance - balance}</span>
            </div>
          </div>
        </div>

        {/* Distribution log */}
        <div style={{
          width: 440, padding: 24,
          background: `linear-gradient(160deg, ${FAJR.navy700}, ${FAJR.navy800})`,
          border: `1px solid ${FAJR.line}`, borderRadius: 16,
          boxShadow: '0 40px 100px -30px rgba(0,0,0,.6)',
          opacity: clamp((localTime - 1.5) / 0.5, 0, 1),
        }}>
          <div style={{ fontFamily: 'IBM Plex Mono, monospace', fontSize: 11, color: FAJR.goldDim, letterSpacing: '.2em', direction: 'ltr', marginBottom: 16 }}>
            DISTRIBUTION LOG
          </div>
          {events.map((e, i) => {
            if (localTime < e.at) return null;
            const t = clamp((localTime - e.at) / 0.4, 0, 1);
            return (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                padding: 14, borderRadius: 10,
                background: 'rgba(15,31,43,.5)',
                border: `1px solid ${FAJR.lineDark}`,
                marginBottom: 10,
                opacity: t, transform: `translateX(${(1 - t) * -20}px)`,
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <div style={{ width: 36, height: 36, borderRadius: '50%', background: 'rgba(212,168,83,.15)', display: 'grid', placeItems: 'center', color: FAJR.gold, fontWeight: 700 }}>💊</div>
                  <div>
                    <div style={{ color: FAJR.ivory, fontSize: 14 }}>{e.doc}</div>
                    <div style={{ fontSize: 11, color: 'rgba(245,241,232,.5)', fontFamily: 'IBM Plex Mono, monospace', direction: 'ltr', marginTop: 2 }}>
                      {['09:42', '11:18', '13:05'][i]}
                    </div>
                  </div>
                </div>
                <div style={{ padding: '6px 14px', borderRadius: 20, background: 'rgba(127,193,138,.15)', border: '1px solid rgba(127,193,138,.3)', color: FAJR.green, fontFamily: 'IBM Plex Mono, monospace', direction: 'ltr', fontSize: 13, fontWeight: 600 }}>
                  −{e.qty}
                </div>
              </div>
            );
          })}
        </div>
      </div>
      <FeaturePayoff text="كل عيّنة — سحبها معروف، صرفها موثّق" appearAt={9.5} />
    </>
  );
}

// F8: Payroll tied to performance
function Feature8_Payroll() {
  const { localTime } = useSprite();
  const rows = [
    { label: 'الراتب الأساسي', val: 600000, color: 'rgba(245,241,232,.85)', at: 1.8 },
    { label: 'مكافأة الزيارات', sub: '(92%)', val: 180000, color: FAJR.green, at: 3.0 },
    { label: 'مكافأة التارغت', sub: '(87%)', val: 220000, color: FAJR.green, at: 4.2 },
  ];
  const totalAt = 6.0;
  const totalT = clamp((localTime - totalAt) / 1.0, 0, 1);
  const total = Math.round(1000000 * Easing.easeOutCubic(totalT));

  return (
    <>
      <FeatureKicker num="08" problem="راتب ثابت بلا عدالة" />
      <div style={{ position: 'absolute', top: 210, left: 0, right: 0, display: 'flex', justifyContent: 'center' }}>
        <div style={{
          width: 640, padding: 34,
          background: `linear-gradient(160deg, ${FAJR.navy700}, ${FAJR.navy800})`,
          border: `1px solid ${FAJR.line}`, borderRadius: 18,
          boxShadow: '0 40px 100px -30px rgba(0,0,0,.6)',
          opacity: clamp((localTime - 1.0) / 0.5, 0, 1),
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 24, paddingBottom: 16, borderBottom: `1px solid ${FAJR.lineDark}` }}>
            <div>
              <div style={{ fontSize: 17, color: FAJR.ivory, fontWeight: 700 }}>أحمد حسين</div>
              <div style={{ fontSize: 11, color: FAJR.goldDim, fontFamily: 'IBM Plex Mono, monospace', direction: 'ltr', marginTop: 3 }}>PAYSLIP · APRIL 2026</div>
            </div>
            <div style={{ padding: '5px 12px', borderRadius: 20, background: 'rgba(127,193,138,.12)', border: '1px solid rgba(127,193,138,.25)', color: FAJR.green, fontSize: 11, fontFamily: 'IBM Plex Mono, monospace', direction: 'ltr', alignSelf: 'flex-start' }}>
              AUTO-CALCULATED
            </div>
          </div>
          {rows.map((r, i) => {
            if (localTime < r.at) return null;
            const t = clamp((localTime - r.at) / 0.5, 0, 1);
            const val = Math.round(r.val * Easing.easeOutCubic(t));
            return (
              <div key={i} style={{
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                padding: '14px 0', borderBottom: `1px solid ${FAJR.lineDark}`,
                opacity: t, transform: `translateX(${(1 - t) * -16}px)`,
              }}>
                <div>
                  <span style={{ fontSize: 15, color: FAJR.ivory }}>{r.label}</span>
                  {r.sub && <span style={{ fontSize: 12, color: r.color, marginRight: 8, fontFamily: 'IBM Plex Mono, monospace', direction: 'ltr' }}>{r.sub}</span>}
                </div>
                <div style={{ fontSize: 19, color: r.color, fontWeight: 700, fontFamily: 'IBM Plex Mono, monospace', direction: 'ltr', fontVariantNumeric: 'tabular-nums' }}>
                  +{val.toLocaleString()}
                </div>
              </div>
            );
          })}
          {/* Total */}
          {localTime > totalAt && (
            <div style={{
              marginTop: 20, padding: 22, borderRadius: 12,
              background: `linear-gradient(135deg, rgba(212,168,83,.22), rgba(212,168,83,.1))`,
              border: `1px solid ${FAJR.gold}`,
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              opacity: clamp((localTime - totalAt) / 0.4, 0, 1),
              boxShadow: `0 0 40px rgba(212,168,83,.2)`,
            }}>
              <div>
                <div style={{ fontSize: 11, color: FAJR.goldDim, fontFamily: 'IBM Plex Mono, monospace', direction: 'ltr', letterSpacing: '.2em', marginBottom: 4 }}>TOTAL · NET</div>
                <div style={{ fontSize: 14, color: FAJR.goldSoft }}>الإجمالي</div>
              </div>
              <div style={{ fontSize: 32, color: FAJR.gold, fontWeight: 800, fontFamily: 'IBM Plex Mono, monospace', direction: 'ltr', fontVariantNumeric: 'tabular-nums' }}>
                {total.toLocaleString()}
              </div>
            </div>
          )}
        </div>
      </div>
      <FeaturePayoff text="أداء عادل — راتب عادل" appearAt={9.5} />
    </>
  );
}

// ══ ACT 4: Ecosystem + CTA ══
function Act4_Ecosystem() {
  const { localTime } = useSprite();
  const icons = [
    { label: 'GPS', icon: '📍' },
    { label: 'الموافقات', icon: '✓' },
    { label: 'التحصيل', icon: '💵' },
    { label: 'KPI', icon: '📊' },
    { label: 'اسأل فجر', icon: '✨' },
    { label: 'الأطباء', icon: '🏥' },
    { label: 'العينات', icon: '💊' },
    { label: 'الرواتب', icon: '💰' },
  ];

  const logoT = clamp(localTime / 0.8, 0, 1);
  const iconsAt = 0.5;
  const titleT = clamp((localTime - 4.5) / 0.6, 0, 1);
  const exitT = localTime > 7.0 ? (localTime - 7.0) / 1.0 : 0;
  const exitFade = 1 - exitT;

  return (
    <div style={{ position: 'absolute', inset: 0, opacity: exitFade }}>
      <SceneBG />
      <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <div style={{ position: 'relative', width: 600, height: 600 }}>
          {/* Center logo */}
          <div style={{
            position: 'absolute', left: '50%', top: '50%',
            transform: `translate(-50%, -50%) scale(${Easing.easeOutBack(logoT)})`,
            width: 160, height: 160, 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 0 80px rgba(212,168,83,.25)`,
            zIndex: 2,
          }}>
            <img src="assets/fajrone-logo-transparent.png" alt=""
              style={{ width: 110, height: 110, objectFit: 'contain' }}
              onError={(e) => { e.target.outerHTML = '<span style="font-size:64px;font-weight:800;color:#d4a853">ف</span>'; }} />
          </div>

          {/* 8 icons in circle */}
          {icons.map((ic, i) => {
            const angle = (i / 8) * Math.PI * 2 - Math.PI / 2 + (localTime * 0.15);
            const r = 240;
            const x = 300 + Math.cos(angle) * r;
            const y = 300 + Math.sin(angle) * r;
            const appearT = clamp((localTime - iconsAt - i * 0.12) / 0.5, 0, 1);
            return (
              <React.Fragment key={i}>
                {/* Line from center */}
                <svg style={{ position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 1 }} width="600" height="600">
                  <line x1="300" y1="300" x2={x} y2={y} stroke={FAJR.gold} strokeWidth="1" strokeDasharray="3 3" opacity={appearT * 0.35} />
                </svg>
                <div style={{
                  position: 'absolute', left: x, top: y,
                  transform: `translate(-50%, -50%) scale(${Easing.easeOutBack(appearT)})`,
                  width: 86, height: 86, borderRadius: '50%',
                  background: `linear-gradient(135deg, rgba(212,168,83,.22), rgba(212,168,83,.06))`,
                  border: `1px solid ${FAJR.gold}`,
                  display: 'flex', flexDirection: 'column',
                  alignItems: 'center', justifyContent: 'center',
                  gap: 3,
                  opacity: appearT, zIndex: 3,
                  boxShadow: `0 10px 30px -5px rgba(212,168,83,.3)`,
                }}>
                  <div style={{ fontSize: 26 }}>{ic.icon}</div>
                  <div style={{ fontSize: 10, color: FAJR.goldSoft, fontWeight: 600 }}>{ic.label}</div>
                </div>
              </React.Fragment>
            );
          })}
        </div>
      </div>

      {/* Bottom title */}
      <div style={{
        position: 'absolute', bottom: 80, left: 0, right: 0,
        textAlign: 'center', opacity: titleT,
        transform: `translateY(${(1 - titleT) * 14}px)`,
      }}>
        <div style={{ fontSize: 40, fontWeight: 700, color: FAJR.ivory }}>
          نظام واحد <span style={{ color: FAJR.gold }}>—</span> لكل عملياتك الميدانية
        </div>
      </div>
    </div>
  );
}

// CTA
function Act4_CTA() {
  const { localTime } = useSprite();
  const logoT = clamp(localTime / 0.7, 0, 1);
  const titleT = clamp((localTime - 0.8) / 0.7, 0, 1);
  const subT = clamp((localTime - 1.5) / 0.7, 0, 1);
  const btnT = clamp((localTime - 2.3) / 0.6, 0, 1);
  const pulse = 1 + Math.sin((localTime - 2.5) * 2.5) * 0.03;

  const chimeFired = React.useRef(false);
  React.useEffect(() => {
    if (localTime > 2.3 && localTime < 2.4 && !chimeFired.current) {
      chimeFired.current = true;
      if (window.FajrAudio) window.FajrAudio.play('chime');
    }
    if (localTime < 2.2) chimeFired.current = false;
  }, [localTime]);

  return (
    <div style={{ position: 'absolute', inset: 0 }}>
      <SceneBG />
      <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 80px -20px rgba(212,168,83,.5)`,
          marginBottom: 34, opacity: logoT,
          transform: `scale(${0.6 + 0.4 * Easing.easeOutBack(logoT)})`,
        }}>
          <img src="assets/fajrone-logo-transparent.png" alt=""
            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: 54, fontWeight: 800, color: FAJR.ivory,
          letterSpacing: '-0.02em', opacity: titleT,
          transform: `translateY(${(1 - titleT) * 14}px)`,
        }}>
          فجر <span style={{ color: FAJR.gold }}>ون</span>
        </div>

        <div style={{
          fontSize: 18, fontWeight: 300, color: 'rgba(245,241,232,.65)',
          marginTop: 10, opacity: subT,
          transform: `translateY(${(1 - subT) * 10}px)`,
        }}>
          شاهد النظام على بياناتك الحقيقية
        </div>

        {/* CTA Button */}
        <div style={{
          padding: '18px 52px', borderRadius: 14,
          background: FAJR.gold, color: FAJR.navy900,
          fontSize: 22, fontWeight: 700, marginTop: 38,
          opacity: btnT,
          transform: `translateY(${(1 - btnT) * 14}px) scale(${pulse})`,
          boxShadow: `0 20px 60px -10px rgba(212,168,83,.55)`,
        }}>
          احجز عرضاً تجريبياً ←
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  Feature5_AI, Feature6_Doctors, Feature7_Samples, Feature8_Payroll,
  Act4_Ecosystem, Act4_CTA,
});