// scene2_zoom.jsx — Zoom on one injustice (extended pacing for clarity)

function Scene2Zoom() {
  const { localTime, duration } = useSprite();

  // Beats across ~12s — snappier card entrances with springy easing
  // 0.0–0.6   title pops in
  // 0.7–1.3   LEFT card snaps in (fast)
  // 1.5–1.9   LEFT "UNDERPAID" stamp punches
  // 1.9–4.8   hold — let viewer read
  // 4.8–5.4   RIGHT card snaps in (fast)
  // 5.6–6.0   RIGHT "OVERPAID" stamp punches
  // 6.0–8.8   hold — let viewer read
  // 8.8–9.6   verdict banner pops up below cards
  // 9.6–12.0  final hold + fade out

  const t = localTime;
  const titleP   = clamp(t / 0.6, 0, 1);
  const leftIn   = clamp((t - 0.7) / 0.6, 0, 1);
  const leftStamp= clamp((t - 1.5) / 0.4, 0, 1);
  const rightIn  = clamp((t - 4.8) / 0.6, 0, 1);
  const rightStamp= clamp((t - 5.6) / 0.4, 0, 1);
  const bannerP  = clamp((t - 8.8) / 0.7, 0, 1);
  const enterP   = clamp(t / 1.5, 0, 1);          // scene fade-in 0 → 1.5s
  const exitP    = clamp((t - 38.3) / 1.5, 0, 1); // scene fade-out 38.3 → 39.8s

  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: ASI_COLORS.canvas,
      overflow: 'hidden',
      opacity: enterP * (1 - exitP),
      transform: `scale(${1 - exitP * 0.12})`, // exit: scale down
    }}>
      <div style={{
        position:'absolute', inset:0,
        backgroundImage: 'radial-gradient(#d4d7dc 1px, transparent 1px)',
        backgroundSize: '28px 28px',
        opacity: 0.3,
      }}/>

      {/* Title */}
      <div style={{
        position: 'absolute', top: 56, left: 96, right: 96,
        opacity: titleP,
      }}>
        <div style={{
          fontSize: 16, fontWeight: 600, letterSpacing: '0.06em',
          textTransform: 'uppercase', color: ASI_COLORS.accent,
          marginBottom: 8,
        }}>The blind spot</div>
        <div style={{
          fontSize: 52, fontWeight: 600, letterSpacing: '-0.02em',
          color: ASI_COLORS.ink, lineHeight: 1.1,
        }}>
          Two employees. Both rated <span style={{color: ASI_COLORS.perfHigh}}>High</span>.{' '}
          <span style={{ color: ASI_COLORS.inkSoft }}>Opposite outcomes.</span>
        </div>
      </div>

      {/* LEFT card — underpaid high performer */}
      <EmployeeZoomCard
        name="Ife Adeyemi"
        role="Eng · Security · France"
        tier="High"
        compa={0.82}
        base={88300}
        merit={2.15}
        badgeText="UNDERPAID · BELOW BAND"
        narrative="High performer. Salary below range. Manager granted a small increase — widening the gap."
        verdictTone="risk"
        side="left"
        slideP={Easing.easeOutBack ? Easing.easeOutBack(leftIn) : Easing.easeOutCubic(leftIn)}
        stampP={leftStamp}
      />

      {/* RIGHT card — overpaid top performer above range */}
      <EmployeeZoomCard
        name="Jonas Müller"
        role="Design · France"
        tier="High"
        compa={1.22}
        base={212500}
        merit={4.10}
        badgeText="OVERPAID · ABOVE RANGE"
        narrative="Also a high performer — but already above the range. Got a bigger increase, pushing further past ceiling."
        verdictTone="warn"
        side="right"
        slideP={Easing.easeOutBack ? Easing.easeOutBack(rightIn) : Easing.easeOutCubic(rightIn)}
        stampP={rightStamp}
      />

      {/* Verdict banner — positioned BELOW the cards */}
      <div style={{
        position: 'absolute', top: 880, left: '50%',
        transform: `translateX(-50%) translateY(${(1-bannerP)*16}px)`,
        display: 'flex', flexDirection: 'column', alignItems: 'center',
        gap: 12,
        opacity: bannerP,
        width: 1100,
      }}>
        <div style={{
          background: ASI_COLORS.riskBg, color: ASI_COLORS.risk,
          padding: '14px 28px', borderRadius: 999,
          fontSize: 18, fontWeight: 600, letterSpacing: '-0.005em',
          textAlign: 'center',
        }}>Pay-equity blind spot · compa-ratio is not in the equation</div>

        <div style={{
          marginTop: 6,
          fontSize: 20, color: ASI_COLORS.inkSoft,
          textAlign: 'center', maxWidth: 980, lineHeight: 1.5,
        }}>
          The high performer at 0.82 compa-ratio should be rewarded <em style={{color: ASI_COLORS.ink, fontStyle: 'normal', fontWeight: 600}}>more</em> — not the one already above range.
        </div>
      </div>
    </div>
  );
}

function EmployeeZoomCard({ name, role, tier, compa, base, merit, badgeText, narrative, verdictTone, side, slideP, stampP }) {
  // Symmetric layout: 1920 stage, 620-wide cards, 160 gap → 260 outer margin
  // on each side. Cards now read as balanced around the horizontal center.
  const startX = side === 'left' ? -500 : 2420;
  const endX = side === 'left' ? 260 : 1040;
  const x = startX + (endX - startX) * slideP;
  const opacity = slideP;

  const tierColor = tier === 'High' ? ASI_COLORS.perfHigh
                 : tier === 'Meets' ? ASI_COLORS.perfMeets : ASI_COLORS.perfLow;

  const meritColor = verdictTone === 'risk' ? ASI_COLORS.risk : ASI_COLORS.warn;
  const bgBadge = verdictTone === 'risk' ? ASI_COLORS.riskBg : ASI_COLORS.warnBg;

  return (
    <div style={{
      position: 'absolute', left: x, top: 180,
      width: 620,
      background: '#fff', borderRadius: 18,
      padding: '24px 30px',
      boxShadow: '0 2px 8px rgba(0,0,0,0.04), 0 20px 48px rgba(0,0,0,0.08)',
      opacity,
      fontFamily: 'Inter, sans-serif',
      color: ASI_COLORS.ink,
      fontVariantNumeric: 'tabular-nums',
      border: stampP > 0 ? `2px solid ${meritColor}` : '2px solid transparent',
      transition: 'border 300ms',
      transform: `scale(${0.96 + 0.04 * slideP})`,
      transformOrigin: side === 'left' ? 'left center' : 'right center',
    }}>
      {/* Header */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 16 }}>
        <div style={{
          width: 48, height: 48, borderRadius: 999,
          background: ASI_COLORS.paper,
          display: 'grid', placeItems: 'center',
          fontSize: 18, fontWeight: 600, color: ASI_COLORS.inkSoft,
        }}>{name.split(' ').map(s=>s[0]).slice(0,2).join('')}</div>
        <div>
          <div style={{ fontSize: 20, fontWeight: 600, letterSpacing: '-0.01em' }}>{name}</div>
          <div style={{ fontSize: 20, color: ASI_COLORS.inkSoft, marginTop: 2 }}>{role}</div>
        </div>
        <span style={{ flex: 1 }}/>
        <span style={{
          display:'inline-flex', alignItems: 'center', gap: 6,
          background: ASI_COLORS.paper, padding: '5px 10px',
          borderRadius: 999, fontSize: 16, fontWeight: 600,
          color: tierColor,
        }}>
          <TierGlyph tier={tier} size={14}/> {tier}
        </span>
      </div>

      {/* Big callout BADGE */}
      <div style={{
        background: bgBadge, color: meritColor,
        padding: '8px 14px', borderRadius: 8,
        fontSize: 16, fontWeight: 700, letterSpacing: '0.06em',
        display: 'inline-block',
        marginBottom: 14,
        opacity: stampP,
        transform: `scale(${0.9 + 0.1 * stampP})`,
      }}>{badgeText}</div>

      {/* Two-up stats */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, marginBottom: 16 }}>
        <StatBlock label="Current base" value={`$${base.toLocaleString()}`} sub="Annualized, LCY"/>
        <StatBlock
          label="Compa-ratio"
          value={compa.toFixed(2)}
          sub={compa < 0.9 ? 'Below range' : compa > 1.15 ? 'Above range' : compa > 1.1 ? 'Near range' : 'In range'}
          sub_tone={compa < 0.9 ? 'risk' : compa > 1.1 ? 'warn' : 'safe'}
        />
      </div>

      {/* Band strip */}
      <div style={{ marginBottom: 16 }}>
        <SectionLabel style={{ marginBottom: 8 }}>Pay-position band</SectionLabel>
        <BandStripMini compa={compa} width={556} showLabels/>
      </div>

      {/* Merit grant */}
      <div style={{
        background: bgBadge,
        borderRadius: 12,
        padding: '14px 18px',
        display: 'flex', alignItems: 'center', gap: 16,
      }}>
        <div style={{
          fontSize: 16, fontWeight: 600, letterSpacing: '0.04em',
          textTransform: 'uppercase', color: meritColor,
          whiteSpace: 'nowrap',
        }}>Manager<br/>granted</div>
        <div style={{ fontSize: 46, fontWeight: 700, color: meritColor,
                      letterSpacing: '-0.02em', lineHeight: 1 }}>
          {merit.toFixed(2)}%
        </div>
        <div style={{ flex: 1 }}/>
        <div style={{
          textAlign: 'right',
          fontSize: 16, color: meritColor, fontWeight: 500,
          maxWidth: 220, lineHeight: 1.4,
        }}>{narrative}</div>
      </div>
    </div>
  );
}

function StatBlock({ label, value, sub, sub_tone }) {
  const toneColor = sub_tone === 'risk' ? ASI_COLORS.risk
                  : sub_tone === 'warn' ? ASI_COLORS.warn
                  : sub_tone === 'safe' ? ASI_COLORS.safe : ASI_COLORS.inkMuted;
  return (
    <div>
      <SectionLabel style={{ marginBottom: 6 }}>{label}</SectionLabel>
      <div style={{ fontSize: 28, fontWeight: 600, letterSpacing: '-0.01em', lineHeight: 1 }}>
        {value}
      </div>
      <div style={{ fontSize: 16, color: toneColor, marginTop: 6, fontWeight: 500 }}>{sub}</div>
    </div>
  );
}

Object.assign(window, { Scene2Zoom });