// Act 3 — The 8 features, each ~13s
// Each follows the same pattern: kicker (2s) → mock animates (8s) → payoff (2s)
// Feature timings within the act (starting at global 30s):
//   30-43s  F1: GPS
//   43-56s  F2: Approvals
//   56-69s  F3: Collections
//   69-82s  F4: KPI
//   82-95s  F5: Ask Fajr (AI)
//  95-108s  F6: Doctors database
// 108-121s  F7: Samples
// 121-134s  F8: Payroll

// ══════════ Feature scaffold: header + payoff reused across shots ══════════
function FeatureKicker({ num, problem, appearAt = 0 }) {
  const { localTime } = useSprite();
  const t = clamp((localTime - appearAt) / 0.6, 0, 1);
  return (
    <div style={{
      position: 'absolute', top: 50, right: 60, left: 60,
      display: 'flex', flexDirection: 'column', alignItems: 'center',
      opacity: t,
      transform: `translateY(${(1 - t) * 14}px)`,
      zIndex: 5,
    }}>
      <div style={{
        padding: '10px 24px', borderRadius: 30,
        background: 'rgba(232,93,93,.12)',
        border: `1px solid rgba(232,93,93,.25)`,
        color: FAJR.red, fontSize: 17, fontWeight: 500,
        whiteSpace: 'nowrap',
      }}>
        المشكلة: {problem}
      </div>
    </div>
  );
}

function FeaturePayoff({ text, appearAt }) {
  const { localTime } = useSprite();
  if (localTime < appearAt) return null;
  const t = clamp((localTime - appearAt) / 0.6, 0, 1);
  return (
    <div style={{
      position: 'absolute', bottom: 60, left: 0, right: 0,
      textAlign: 'center',
      opacity: t,
      transform: `translateY(${(1 - Easing.easeOutCubic(t)) * 20}px)`,
    }}>
      <div style={{
        display: 'inline-block',
        padding: '16px 36px', borderRadius: 50,
        background: `linear-gradient(135deg, rgba(212,168,83,.2), rgba(212,168,83,.08))`,
        border: `1px solid ${FAJR.gold}`,
        boxShadow: `0 20px 50px -15px rgba(212,168,83,.4)`,
        fontSize: 26, fontWeight: 700,
        color: FAJR.ivory,
      }}>
        ✓ {text}
      </div>
    </div>
  );
}

// ──────────────────────────────────────────────────────────
// F1: GPS — "زيارات وهمية"
// ──────────────────────────────────────────────────────────
function Feature1_GPS() {
  const { localTime } = useSprite();
  const distT = clamp((localTime - 4.0) / 2.5, 0, 1);
  const distance = Math.round(85 - (85 - 18) * Easing.easeOutCubic(distT));
  const verified = localTime > 7.0;
  const vT = clamp((localTime - 7.0) / 0.5, 0, 1);

  // scan
  const scanFired = React.useRef(false);
  React.useEffect(() => {
    if (localTime > 3.8 && localTime < 3.95 && !scanFired.current) {
      scanFired.current = true;
      if (window.FajrAudio) window.FajrAudio.play('scan');
    }
    if (localTime < 3.7) scanFired.current = false;
  }, [localTime]);

  const successFired = React.useRef(false);
  React.useEffect(() => {
    if (verified && localTime < 7.15 && !successFired.current) {
      successFired.current = true;
      if (window.FajrAudio) window.FajrAudio.play('success');
    }
    if (!verified) successFired.current = false;
  }, [localTime, verified]);

  const pulseT = (localTime * 1.3) % 1;
  const pulseSize = 1 + pulseT * 2.5;
  const pulseOpacity = 1 - pulseT;

  return (
    <>
      <FeatureKicker num="01" problem="زيارات ميدانية وهمية" />

      <div style={{
        position: 'absolute', top: 200, left: 0, right: 0,
        display: 'flex', justifyContent: 'center',
      }}>
        {/* Big map card */}
        <div style={{
          width: 880, height: 440,
          background: `linear-gradient(160deg, ${FAJR.navy700}, ${FAJR.navy800})`,
          border: `1px solid ${FAJR.line}`,
          borderRadius: 18, padding: 22,
          boxShadow: '0 40px 100px -30px rgba(0,0,0,.6)',
          opacity: clamp((localTime - 1.5) / 0.6, 0, 1),
        }}>
          <div style={{
            display: 'flex', justifyContent: 'space-between',
            marginBottom: 14,
          }}>
            <div style={{ fontFamily: 'IBM Plex Mono, monospace', fontSize: 12, color: FAJR.goldDim, letterSpacing: '.2em', direction: 'ltr' }}>
              LIVE GPS VERIFICATION
            </div>
            <div style={{
              padding: '4px 12px', borderRadius: 20,
              background: 'rgba(127,193,138,.15)',
              border: '1px solid rgba(127,193,138,.3)',
              color: FAJR.green, fontSize: 11,
              fontFamily: 'IBM Plex Mono, monospace', direction: 'ltr',
            }}>● LIVE</div>
          </div>

          <div style={{
            position: 'relative', height: 340,
            background: 'rgba(10,20,28,.7)',
            border: `1px solid ${FAJR.lineDark}`,
            borderRadius: 12,
            backgroundImage: `
              linear-gradient(rgba(212,168,83,.06) 1px, transparent 1px),
              linear-gradient(90deg, rgba(212,168,83,.06) 1px, transparent 1px)`,
            backgroundSize: '40px 40px',
            overflow: 'hidden',
          }}>
            {/* Scan sweep */}
            {localTime > 3.8 && localTime < 6.5 && (() => {
              const t = ((localTime - 3.8) / 1.8) % 1;
              return (
                <div style={{
                  position: 'absolute', left: 0, right: 0,
                  top: `${t * 100}%`, height: 2,
                  background: `linear-gradient(90deg, transparent, ${FAJR.gold}, transparent)`,
                  boxShadow: `0 0 30px ${FAJR.gold}`,
                  opacity: 0.7,
                }} />
              );
            })()}

            {/* Coords top-right */}
            <div style={{
              position: 'absolute', top: 12, right: 14,
              fontFamily: 'IBM Plex Mono, monospace',
              fontSize: 10, color: 'rgba(245,241,232,.45)', direction: 'ltr',
            }}>
              33.3152° N — 44.3661° E
            </div>

            {/* Current pin (user) */}
            {localTime > 2.0 && (() => {
              // Animate pin position from far to close
              const moveT = clamp((localTime - 2.0) / 3.0, 0, 1);
              const xPct = 25 + (45 - 25) * Easing.easeInOutCubic(moveT);
              const yPct = 65 + (50 - 65) * Easing.easeInOutCubic(moveT);
              return (
                <div style={{
                  position: 'absolute', left: `${xPct}%`, top: `${yPct}%`,
                  transform: 'translate(-50%, -50%)',
                }}>
                  <div style={{
                    position: 'absolute', inset: -25,
                    borderRadius: '50%',
                    border: `2px solid ${FAJR.gold}`,
                    transform: `scale(${pulseSize})`,
                    opacity: pulseOpacity,
                  }} />
                  <div style={{
                    width: 18, height: 18, borderRadius: '50%',
                    background: FAJR.gold,
                    boxShadow: `0 0 0 5px rgba(212,168,83,.25), 0 0 30px ${FAJR.gold}`,
                  }} />
                  <div style={{
                    position: 'absolute', top: 24, left: '50%',
                    transform: 'translateX(-50%)',
                    fontSize: 11, color: FAJR.goldSoft, whiteSpace: 'nowrap',
                    fontFamily: 'IBM Plex Mono, monospace', direction: 'ltr',
                  }}>REP</div>
                </div>
              );
            })()}

            {/* Clinic target pin */}
            <div style={{
              position: 'absolute', left: '50%', top: '48%',
              transform: 'translate(-50%, -50%)',
            }}>
              <div style={{
                width: 22, height: 22, borderRadius: '50%',
                background: FAJR.green,
                boxShadow: `0 0 0 6px rgba(127,193,138,.25)`,
              }} />
              <div style={{
                position: 'absolute', top: 30, left: '50%',
                transform: 'translateX(-50%)',
                fontSize: 12, color: FAJR.green, whiteSpace: 'nowrap',
                fontWeight: 500,
              }}>عيادة د. أحمد</div>
            </div>

            {/* Distance chip */}
            <div style={{
              position: 'absolute', bottom: 16, left: '50%',
              transform: 'translateX(-50%)',
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '10px 20px', borderRadius: 30,
              background: verified ? 'rgba(127,193,138,.18)' : 'rgba(212,168,83,.15)',
              border: `1px solid ${verified ? 'rgba(127,193,138,.4)' : 'rgba(212,168,83,.3)'}`,
              color: verified ? FAJR.green : FAJR.gold,
              fontFamily: 'IBM Plex Mono, monospace', direction: 'ltr',
              fontSize: 15, fontWeight: 600,
              opacity: clamp((localTime - 2.5) / 0.5, 0, 1),
            }}>
              📍 DISTANCE: {distance}m
            </div>

            {/* Verified stamp */}
            {verified && (
              <div style={{
                position: 'absolute', top: '35%', right: '12%',
                transform: `rotate(-10deg) scale(${0.5 + 0.5 * Easing.easeOutBack(vT)})`,
                padding: '10px 22px',
                border: `3px solid ${FAJR.green}`,
                borderRadius: 8,
                color: FAJR.green, fontWeight: 800,
                fontSize: 22,
                background: 'rgba(127,193,138,.1)',
                opacity: vT,
                letterSpacing: '.05em',
                fontFamily: 'IBM Plex Mono, monospace', direction: 'ltr',
              }}>
                ✓ VERIFIED
              </div>
            )}
          </div>
        </div>
      </div>

      <FeaturePayoff text="كل زيارة — موقع حقيقي، وقت حقيقي" appearAt={9.5} />
    </>
  );
}

// ──────────────────────────────────────────────────────────
// F2: Approvals chain
// ──────────────────────────────────────────────────────────
function Feature2_Approvals() {
  const { localTime } = useSprite();

  const stages = [
    { name: 'المندوب',       role: 'REP',         doneAt: 2.2 },
    { name: 'المشرف',        role: 'SUPERVISOR',  doneAt: 3.4 },
    { name: 'المدير التجاري', role: 'COMMERCIAL',  doneAt: 4.6 },
    { name: 'المدير العام',   role: 'GENERAL',     doneAt: 5.8 },
  ];

  return (
    <>
      <FeatureKicker num="02" problem="طلبات تضيع في الواتساب" />

      <div style={{
        position: 'absolute', top: 220, left: 0, right: 0,
        display: 'flex', justifyContent: 'center',
      }}>
        <div style={{
          width: 960, padding: 40,
          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.2) / 0.6, 0, 1),
        }}>
          <div style={{
            display: 'flex', justifyContent: 'space-between',
            marginBottom: 30,
          }}>
            <div style={{ fontFamily: 'IBM Plex Mono, monospace', fontSize: 12, color: FAJR.goldDim, letterSpacing: '.2em', direction: 'ltr' }}>
              ORDER #ORD-2026-01247 · APPROVAL CHAIN
            </div>
            <div style={{
              padding: '4px 12px', borderRadius: 20,
              background: 'rgba(212,168,83,.15)',
              color: FAJR.gold, fontSize: 11,
              fontFamily: 'IBM Plex Mono, monospace', direction: 'ltr',
            }}>PROCESSING</div>
          </div>

          {/* Chain */}
          <div style={{
            display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between',
            direction: 'ltr', padding: '10px 20px',
          }}>
            {stages.map((s, i) => {
              const isDone = localTime >= s.doneAt;
              const t = isDone ? clamp((localTime - s.doneAt) / 0.4, 0, 1) : 0;

              return (
                <React.Fragment key={i}>
                  <div style={{
                    display: 'flex', flexDirection: 'column', alignItems: 'center',
                    gap: 12, minWidth: 160, flexShrink: 0,
                  }}>
                    <div style={{
                      width: 72, height: 72, borderRadius: '50%',
                      display: 'grid', placeItems: 'center',
                      fontSize: 30, fontWeight: 700,
                      border: `3px solid ${isDone ? FAJR.green : 'rgba(245,241,232,.12)'}`,
                      background: isDone
                        ? `radial-gradient(circle, rgba(127,193,138,.25), rgba(127,193,138,.08))`
                        : 'rgba(15,31,43,.6)',
                      color: isDone ? FAJR.green : 'rgba(245,241,232,.35)',
                      transform: `scale(${isDone ? 1 + (1 - t) * 0.5 : 1})`,
                      boxShadow: isDone ? `0 0 30px rgba(127,193,138,.3)` : 'none',
                      transition: 'all 0.4s',
                    }}>
                      {isDone ? '✓' : i + 1}
                    </div>
                    <div style={{ textAlign: 'center', direction: 'rtl' }}>
                      <div style={{ fontSize: 16, fontWeight: 600, color: FAJR.ivory }}>
                        {s.name}
                      </div>
                      <div style={{
                        fontSize: 10, color: isDone ? FAJR.green : 'rgba(245,241,232,.4)',
                        fontFamily: 'IBM Plex Mono, monospace', direction: 'ltr',
                        marginTop: 4, letterSpacing: '.1em',
                        whiteSpace: 'nowrap',
                      }}>
                        {s.role}
                      </div>
                      {isDone && (
                        <div style={{
                          marginTop: 6, fontSize: 10,
                          color: 'rgba(245,241,232,.5)',
                          fontFamily: 'IBM Plex Mono, monospace', direction: 'ltr',
                        }}>
                          {['09:12','09:45','10:23','11:04'][i]}
                        </div>
                      )}
                    </div>
                  </div>
                  {i < stages.length - 1 && (
                    <div style={{
                      flex: 1, height: 3, marginTop: 34, marginLeft: 12, marginRight: 12,
                      background: 'rgba(245,241,232,.08)',
                      position: 'relative', borderRadius: 2,
                      overflow: 'hidden',
                    }}>
                      <div style={{
                        position: 'absolute', inset: 0,
                        background: `linear-gradient(90deg, ${FAJR.green}, ${FAJR.green})`,
                        width: `${isDone ? 100 : 0}%`,
                        transition: 'width 0.4s',
                      }} />
                    </div>
                  )}
                </React.Fragment>
              );
            })}
          </div>

          {/* Duration badge */}
          {localTime > 6.5 && (() => {
            const t = clamp((localTime - 6.5) / 0.5, 0, 1);
            return (
              <div style={{
                marginTop: 36, textAlign: 'center',
                opacity: t,
                transform: `translateY(${(1 - t) * 10}px)`,
              }}>
                <div style={{
                  display: 'inline-flex', alignItems: 'center', gap: 16,
                  padding: '14px 28px', borderRadius: 12,
                  background: 'rgba(127,193,138,.1)',
                  border: '1px solid rgba(127,193,138,.25)',
                }}>
                  <span style={{
                    fontFamily: 'IBM Plex Mono, monospace', direction: 'ltr',
                    fontSize: 14, color: 'rgba(245,241,232,.55)',
                    textDecoration: 'line-through',
                  }}>
                    3 DAYS
                  </span>
                  <span style={{ color: FAJR.gold, fontSize: 20 }}>→</span>
                  <span style={{
                    fontFamily: 'IBM Plex Mono, monospace', direction: 'ltr',
                    fontSize: 22, color: FAJR.green, fontWeight: 700,
                  }}>
                    1h 52m
                  </span>
                </div>
              </div>
            );
          })()}
        </div>
      </div>

      <FeaturePayoff text="مسار موثّق — بلا ضياع، بلا تأخير" appearAt={9.5} />
    </>
  );
}

// ──────────────────────────────────────────────────────────
// F3: Collections with unique receipt
// ──────────────────────────────────────────────────────────
function Feature3_Collections() {
  const { localTime } = useSprite();

  const receiptT = clamp((localTime - 1.5) / 0.8, 0, 1);
  const numberT = clamp((localTime - 2.5) / 1.0, 0, 1);
  const stampT = clamp((localTime - 3.8) / 0.4, 0, 1);
  const uploadT = clamp((localTime - 5.0) / 0.8, 0, 1);
  const matchT = clamp((localTime - 7.0) / 0.5, 0, 1);

  const stampFired = React.useRef(false);
  React.useEffect(() => {
    if (localTime > 3.8 && localTime < 3.95 && !stampFired.current) {
      stampFired.current = true;
      if (window.FajrAudio) window.FajrAudio.play('pop', { freq: 200, gain: 0.3 });
    }
    if (localTime < 3.7) stampFired.current = false;
  }, [localTime]);

  const matchFired = React.useRef(false);
  React.useEffect(() => {
    if (localTime > 7.0 && localTime < 7.15 && !matchFired.current) {
      matchFired.current = true;
      if (window.FajrAudio) window.FajrAudio.play('success');
    }
    if (localTime < 6.9) matchFired.current = false;
  }, [localTime]);

  const receiptNumber = 'RC-2026-0847';
  const charsShown = Math.floor(numberT * receiptNumber.length);
  const shownNumber = receiptNumber.slice(0, charsShown);

  return (
    <>
      <FeatureKicker num="03" problem="إيصالات ورقية قابلة للتعديل" />

      <div style={{
        position: 'absolute', top: 200, left: 0, right: 0,
        display: 'flex', justifyContent: 'center', gap: 36,
      }}>
        {/* Left: system generated receipt */}
        <div style={{
          width: 380,
          background: `linear-gradient(160deg, ${FAJR.navy700}, ${FAJR.navy800})`,
          border: `1px solid ${FAJR.line}`,
          borderRadius: 16, padding: 26,
          boxShadow: '0 40px 100px -30px rgba(0,0,0,.6)',
          opacity: receiptT,
          transform: `scale(${0.9 + 0.1 * receiptT})`,
        }}>
          <div style={{
            fontFamily: 'IBM Plex Mono, monospace',
            fontSize: 11, color: FAJR.goldDim, letterSpacing: '.2em',
            direction: 'ltr', marginBottom: 18, textAlign: 'center',
          }}>
            SYSTEM-GENERATED RECEIPT
          </div>

          <div style={{
            padding: 20, borderRadius: 10,
            background: 'rgba(15,31,43,.7)',
            border: `1px solid ${FAJR.lineDark}`,
            marginBottom: 16,
          }}>
            <div style={{
              fontFamily: 'IBM Plex Mono, monospace', direction: 'ltr',
              fontSize: 28, color: FAJR.gold, fontWeight: 700,
              textAlign: 'center', letterSpacing: '.05em',
            }}>
              #{shownNumber}
              {charsShown < receiptNumber.length && <span style={{ color: FAJR.goldSoft }}>▊</span>}
            </div>
            <div style={{
              marginTop: 10, fontSize: 12,
              color: 'rgba(245,241,232,.45)',
              textAlign: 'center', direction: 'ltr',
              fontFamily: 'IBM Plex Mono, monospace',
            }}>
              HASH: a7f3 · b921 · c4d8
            </div>
          </div>

          <div style={{
            display: 'flex', justifyContent: 'space-between',
            padding: '10px 14px', marginBottom: 8,
            fontSize: 13, color: 'rgba(245,241,232,.75)',
          }}>
            <span>الصيدلية</span>
            <span style={{ color: FAJR.ivory, fontWeight: 500 }}>صيدلية النور</span>
          </div>
          <div style={{
            display: 'flex', justifyContent: 'space-between',
            padding: '10px 14px', marginBottom: 8,
            fontSize: 13, color: 'rgba(245,241,232,.75)',
            borderTop: `1px solid ${FAJR.lineDark}`,
          }}>
            <span>المبلغ</span>
            <span style={{ color: FAJR.gold, fontWeight: 700, fontFamily: 'IBM Plex Mono, monospace', direction: 'ltr' }}>
              500,000 IQD
            </span>
          </div>

          {/* System stamp */}
          {stampT > 0 && (
            <div style={{
              marginTop: 14, padding: '10px 14px',
              background: 'rgba(232,93,93,.1)',
              border: '1px solid rgba(232,93,93,.25)',
              borderRadius: 8,
              textAlign: 'center',
              color: FAJR.red,
              fontSize: 12, fontWeight: 600,
              opacity: stampT,
              transform: `scale(${0.9 + 0.1 * stampT})`,
            }}>
              🔒 غير قابل للتعديل · SYSTEM-LOCKED
            </div>
          )}
        </div>

        {/* Right: upload stamped receipt photo */}
        <div style={{
          width: 380,
          background: `linear-gradient(160deg, ${FAJR.navy700}, ${FAJR.navy800})`,
          border: `1px solid ${FAJR.line}`,
          borderRadius: 16, padding: 26,
          boxShadow: '0 40px 100px -30px rgba(0,0,0,.6)',
          opacity: clamp((localTime - 4.2) / 0.5, 0, 1),
        }}>
          <div style={{
            fontFamily: 'IBM Plex Mono, monospace',
            fontSize: 11, color: FAJR.goldDim, letterSpacing: '.2em',
            direction: 'ltr', marginBottom: 18, textAlign: 'center',
          }}>
            UPLOADED PHARMACY RECEIPT
          </div>

          {/* Fake photo of paper receipt */}
          <div style={{
            height: 220, borderRadius: 10, overflow: 'hidden',
            background: '#f5eccb',
            position: 'relative',
            border: `2px dashed ${FAJR.lineDark}`,
            padding: 18,
            opacity: uploadT,
            transform: `scale(${0.8 + 0.2 * uploadT})`,
          }}>
            <div style={{
              fontFamily: 'IBM Plex Mono, monospace',
              fontSize: 11, color: '#8a6d34',
              textAlign: 'center', borderBottom: '1px dashed #8a6d34',
              paddingBottom: 8, direction: 'rtl',
            }}>
              صيدلية النور — إيصال
            </div>
            <div style={{
              marginTop: 14, fontSize: 13, color: '#2a1810',
              fontFamily: 'IBM Plex Mono, monospace', direction: 'ltr',
              lineHeight: 1.9,
            }}>
              <div>RC# RC-2026-0847</div>
              <div>AMOUNT: 500,000 IQD</div>
              <div>DATE: 15/04/2026</div>
            </div>
            {/* Pharmacy stamp */}
            {uploadT > 0.5 && (
              <div style={{
                position: 'absolute', bottom: 20, right: 20,
                width: 90, height: 90, borderRadius: '50%',
                border: `3px solid #2a4a7a`, color: '#2a4a7a',
                display: 'grid', placeItems: 'center',
                fontSize: 10, fontWeight: 700,
                textAlign: 'center', lineHeight: 1.2,
                transform: `rotate(-12deg) scale(${clamp((localTime - 5.6) / 0.4, 0, 1)})`,
                background: 'rgba(245,236,203,.5)',
                fontFamily: 'IBM Plex Mono, monospace',
              }}>
                PHARMACY<br/>STAMP<br/>✓
              </div>
            )}
          </div>

          {/* Match indicator */}
          {matchT > 0 && (
            <div style={{
              marginTop: 16, padding: '12px 14px',
              background: 'rgba(127,193,138,.12)',
              border: '1px solid rgba(127,193,138,.3)',
              borderRadius: 8,
              textAlign: 'center',
              color: FAJR.green, fontSize: 14, fontWeight: 600,
              opacity: matchT,
              transform: `scale(${0.9 + 0.1 * matchT})`,
            }}>
              ✓ المبلغ مطابق — 500,000 IQD
            </div>
          )}
        </div>
      </div>

      <FeaturePayoff text="كل دينار محصّل — موثّق ومختوم" appearAt={9.5} />
    </>
  );
}

// ──────────────────────────────────────────────────────────
// F4: KPI
// ──────────────────────────────────────────────────────────
function Feature4_KPI() {
  const { localTime } = useSprite();

  const reps = [
    { name: 'أحمد', target: 87, color: FAJR.gold, appearAt: 2.0 },
    { name: 'سارة', target: 92, color: FAJR.green, appearAt: 2.6, best: true },
    { name: 'خالد', target: 64, color: FAJR.orange, appearAt: 3.2 },
  ];

  return (
    <>
      <FeatureKicker num="04" problem="ما تعرف منو شغّال فعلاً" />

      <div style={{
        position: 'absolute', top: 220, left: 0, right: 0,
        display: 'flex', justifyContent: 'center',
      }}>
        <div style={{
          width: 960, padding: 30,
          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.2) / 0.6, 0, 1),
        }}>
          <div style={{
            display: 'flex', justifyContent: 'space-between',
            marginBottom: 24,
          }}>
            <div style={{ fontFamily: 'IBM Plex Mono, monospace', fontSize: 12, color: FAJR.goldDim, letterSpacing: '.2em', direction: 'ltr' }}>
              PERFORMANCE KPI · APRIL 2026
            </div>
          </div>

          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 22,
          }}>
            {reps.map((r, i) => {
              const t = clamp((localTime - r.appearAt) / 1.0, 0, 1);
              const val = Math.round(r.target * Easing.easeOutCubic(t));
              const rank = ['+1', '1', '+2'][i];

              return (
                <div key={i} style={{
                  padding: 22, borderRadius: 12,
                  background: r.best ? 'rgba(127,193,138,.08)' : 'rgba(15,31,43,.55)',
                  border: `1px solid ${r.best && localTime > 6 ? FAJR.green : FAJR.lineDark}`,
                  position: 'relative',
                  opacity: clamp((localTime - r.appearAt) / 0.4, 0, 1),
                  transform: `translateY(${(1 - clamp((localTime - r.appearAt) / 0.4, 0, 1)) * 20}px)`,
                  boxShadow: r.best && localTime > 6.0 ? `0 0 40px rgba(127,193,138,.2)` : 'none',
                  transition: 'all 0.6s',
                }}>
                  {/* Star for best */}
                  {r.best && localTime > 6.0 && (
                    <div style={{
                      position: 'absolute', top: -14, right: 20,
                      width: 36, height: 36, borderRadius: '50%',
                      background: FAJR.gold,
                      display: 'grid', placeItems: 'center',
                      fontSize: 18,
                      boxShadow: `0 8px 20px rgba(212,168,83,.5)`,
                      transform: `scale(${Easing.easeOutBack(clamp((localTime - 6.0) / 0.4, 0, 1))})`,
                    }}>⭐</div>
                  )}

                  {/* Avatar */}
                  <div style={{
                    width: 56, height: 56, borderRadius: '50%',
                    background: `linear-gradient(135deg, ${FAJR.gold}, #a67d33)`,
                    display: 'grid', placeItems: 'center',
                    fontSize: 22, fontWeight: 700, color: FAJR.navy900,
                    marginBottom: 14,
                  }}>
                    {r.name[0]}
                  </div>

                  <div style={{ fontSize: 18, color: FAJR.ivory, fontWeight: 600, marginBottom: 2 }}>
                    {r.name}
                  </div>
                  <div style={{ fontSize: 11, color: 'rgba(245,241,232,.5)', fontFamily: 'IBM Plex Mono, monospace', direction: 'ltr', marginBottom: 18 }}>
                    SALES REP
                  </div>

                  {/* Bar */}
                  <div style={{
                    height: 10, borderRadius: 5,
                    background: 'rgba(245,241,232,.06)', overflow: 'hidden',
                    marginBottom: 10,
                  }}>
                    <div style={{
                      height: '100%', borderRadius: 5,
                      width: `${val}%`,
                      background: `linear-gradient(90deg, ${r.color}, ${r.color}cc)`,
                    }} />
                  </div>
                  <div style={{
                    display: 'flex', justifyContent: 'space-between',
                    fontSize: 13,
                  }}>
                    <span style={{ color: 'rgba(245,241,232,.6)' }}>PERFORMANCE</span>
                    <span style={{
                      color: r.color, fontWeight: 700,
                      fontFamily: 'IBM Plex Mono, monospace', direction: 'ltr',
                      fontVariantNumeric: 'tabular-nums',
                    }}>
                      {val}%
                    </span>
                  </div>

                  {/* Stats grid */}
                  <div style={{
                    marginTop: 16, paddingTop: 14,
                    borderTop: `1px solid ${FAJR.lineDark}`,
                    display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10,
                  }}>
                    <div>
                      <div style={{ fontSize: 18, fontWeight: 700, color: FAJR.ivory, fontFamily: 'IBM Plex Mono, monospace', direction: 'ltr' }}>
                        {[84, 96, 52][i]}
                      </div>
                      <div style={{ fontSize: 10, color: 'rgba(245,241,232,.5)' }}>زيارة</div>
                    </div>
                    <div>
                      <div style={{ fontSize: 18, fontWeight: 700, color: FAJR.ivory, fontFamily: 'IBM Plex Mono, monospace', direction: 'ltr' }}>
                        {[78, 91, 61][i]}%
                      </div>
                      <div style={{ fontSize: 10, color: 'rgba(245,241,232,.5)' }}>تارغت</div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      <FeaturePayoff text="أرقام حقيقية — بلا مجاملات، بلا تلاعب" appearAt={9.5} />
    </>
  );
}

Object.assign(window, {
  FeatureKicker, FeaturePayoff,
  Feature1_GPS, Feature2_Approvals, Feature3_Collections, Feature4_KPI,
});
