// scene3_timeline.jsx — Old process steps vs New process steps, side by side

const OLD_STEPS = [
  { n: 1, title: 'Total Rewards sets a budget envelope', sub: 'A top-down ceiling — no per-employee market anchors' },
  { n: 2, title: 'Finance negotiates what can be spent',  sub: 'Affordability-driven, with no link to individual pay positions' },
  { n: 3, title: 'Managers decide alone — in the dark',  sub: 'No compa-ratio, no matrix, no pay-equity check' },
];

const NEW_STEPS = [
  { n: 1, title: 'Every employee has a compa-ratio',     sub: 'Pay ranges defined per country × job family × level — anchoring every individual to the market' },
  { n: 2, title: 'Merit matrix drives every recommendation', sub: 'Performance × compa-ratio → a defined % in every cell, market-anchored to the country rate' },
  { n: 3, title: 'Budget calibrates automatically',      sub: 'A scale factor aligns the matrix to the country target — no negotiation, no back-and-forth' },
  { n: 4, title: 'Every manager guided, not guessing',   sub: 'Recommended %, allowed range, and exception flags — ready to upload to Oracle' },
];

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

  const titleP = clamp(localTime / 1.2, 0, 1);
  const enterP = clamp(localTime / 1.5, 0, 1);          // scene fade-in 0 → 1.5s
  const exitP  = clamp((localTime - 27.1) / 1.5, 0, 1); // scene fade-out 27.1 → 28.6s

  // ── Per-step reveal timing ──────────────────────────────────────────────
  // Locked to VO_3 narration (scene local times, VO starts at local 1.5s):
  //   3.0s  "Today, three steps..."           → step 1 (Total Rewards)
  //   7.0s  "...Finance calculates..."         → step 2
  //  11.0s  "...managers allocate..."          → step 3
  //  14.0s  arrow transitions in
  //  15.5s  "With ASI:"                         → step 1 new (pay ranges)
  //  17.5s  "A merit matrix."                   → step 2 new
  //  19.5s  "Automatic budget calibration."     → step 3 new
  //  21.5s  "...guided experience..."           → step 4 new
  const oldStepP  = [3.0, 7.0, 11.0].map(t => clamp((localTime - t) / 0.9, 0, 1));
  const arrowP    = clamp((localTime - 14.0) / 1.2, 0, 1);
  const newStepP  = [15.5, 17.5, 19.5, 21.5].map(t => clamp((localTime - t) / 0.9, 0, 1));

  // Column headers: old appears early, new appears at arrow time so viewer's
  // eye is led from the today-side to the ASI-side sequentially.
  const oldHeaderP = clamp((localTime - 1.8) / 0.8, 0, 1);
  const newHeaderP = clamp((localTime - 13.5) / 0.8, 0, 1);

  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: ASI_COLORS.canvas,
      overflow: 'hidden',
      opacity: enterP * (1 - exitP),
      filter: `blur(${exitP * 8}px)`, // exit: blur out
    }}>
      {/* Title */}
      <div style={{
        position: 'absolute', top: 64, left: 96, right: 96,
        display: 'flex', alignItems: 'baseline', gap: 20,
        opacity: titleP,
      }}>
        <div style={{
          fontSize: 16, fontWeight: 600, letterSpacing: '0.06em',
          textTransform: 'uppercase', color: ASI_COLORS.accent,
        }}>Until today · and what changes now</div>
        <div style={{
          fontSize: 52, fontWeight: 600, letterSpacing: '-0.02em',
          color: ASI_COLORS.ink,
        }}>Rebuilding the ASI cycle</div>
      </div>

      {/* Column headers — large FROM / TO badges so viewers instantly read the slide intent */}
      <div style={{
        position: 'absolute', top: 148, left: 96, right: 96,
        display: 'grid', gridTemplateColumns: '1fr 48px 1fr', gap: 32,
      }}>
        {/* FROM */}
        <div style={{
          display: 'flex', flexDirection: 'column', gap: 8,
          opacity: oldHeaderP,
          transform: `translateX(${(1 - oldHeaderP) * -40}px)`,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{
              fontSize: 20, fontWeight: 800, letterSpacing: '0.04em',
              textTransform: 'uppercase',
              color: '#fff',
              background: ASI_COLORS.ink,
              padding: '6px 18px', borderRadius: 8,
              lineHeight: 1.35, whiteSpace: 'nowrap',
            }}>As of today</div>
            <span style={{
              fontSize: 22, fontWeight: 600, color: ASI_COLORS.inkSoft,
              letterSpacing: '-0.005em',
            }}>The manual ASI cycle</span>
          </div>
          <div style={{
            fontSize: 17, color: ASI_COLORS.inkMuted,
            letterSpacing: '0.01em',
          }}>How it's always worked — manager discretion, no market anchors, no equity checks</div>
        </div>

        <span/>

        {/* TO */}
        <div style={{
          display: 'flex', flexDirection: 'column', gap: 8,
          opacity: newHeaderP,
          transform: `translateX(${(1 - newHeaderP) * 40}px)`,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{
              fontSize: 20, fontWeight: 800, letterSpacing: '0.04em',
              textTransform: 'uppercase',
              color: '#fff',
              background: ASI_COLORS.accent,
              padding: '6px 18px', borderRadius: 8,
              lineHeight: 1.35, whiteSpace: 'nowrap',
            }}>From today</div>
            <span style={{
              fontSize: 22, fontWeight: 600, color: ASI_COLORS.accent,
              letterSpacing: '-0.005em',
            }}>The data-driven ASI</span>
          </div>
          <div style={{
            fontSize: 17, color: ASI_COLORS.inkMuted,
            letterSpacing: '0.01em',
          }}>Market-anchored, compa-ratio-guided, every decision instrumented and auditable</div>
        </div>
      </div>

      {/* Steps grid */}
      <div style={{
        position: 'absolute', top: 256, left: 96, right: 96, bottom: 80,
        display: 'grid', gridTemplateColumns: '1fr 48px 1fr', gap: 32,
      }}>
        {/* Old column — warm tint reinforces "this is the problem" side */}
        <div style={{
          display: 'flex', flexDirection: 'column', gap: 14,
          background: 'rgba(200, 195, 190, 0.10)',
          borderRadius: 16, padding: '16px 14px',
          opacity: clamp(oldHeaderP * 1.5, 0, 1),
        }}>
          {OLD_STEPS.map((s, i) => (
            <ProcessStep key={i} step={s} tone="old" appearP={oldStepP[i]}/>
          ))}
        </div>

        {/* Arrow — transitions in at local 14s, the "beat" between sides */}
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          opacity: arrowP,
          transform: `scale(${0.6 + 0.4 * arrowP})`,
        }}>
          <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
            <circle cx="24" cy="24" r="22" fill={ASI_COLORS.accentTint}/>
            <path d="M16 24h18M28 18l6 6-6 6"
                  stroke={ASI_COLORS.accent} strokeWidth="2"
                  strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>

        {/* New column — accent tint reinforces "this is the solution" side */}
        <div style={{
          display: 'flex', flexDirection: 'column', gap: 14,
          background: 'rgba(127, 53, 178, 0.055)',
          borderRadius: 16, padding: '16px 14px',
          opacity: clamp(newHeaderP * 1.5, 0, 1),
        }}>
          {NEW_STEPS.map((s, i) => (
            <ProcessStep key={i} step={s} tone="new" appearP={newStepP[i]}/>
          ))}
        </div>
      </div>
    </div>
  );
}

function ProcessStep({ step, tone, appearP }) {
  const ease = Easing.easeOutCubic(appearP);
  const isNew = tone === 'new';
  // Directional slide: today cards enter from the left, ASI cards from the
  // right — reinforces the "from → to" narrative direction.
  const slideFrom = isNew ? 60 : -60;
  const tx = (1 - ease) * slideFrom;
  const ty = (1 - ease) * 8;
  const opacity = ease;

  return (
    <div style={{
      background: '#fff',
      borderRadius: 14,
      padding: '18px 22px',
      display: 'flex', alignItems: 'center', gap: 16,
      boxShadow: '0 1px 3px rgba(0,0,0,0.04)',
      transform: `translate(${tx}px, ${ty}px)`,
      opacity,
      flex: 1,
      minHeight: 0,
      borderLeft: isNew ? `3px solid ${ASI_COLORS.accent}` : '3px solid transparent',
    }}>
      <div style={{
        width: 32, height: 32, borderRadius: 999, flexShrink: 0,
        background: isNew ? ASI_COLORS.accentTint : ASI_COLORS.paper,
        color: isNew ? ASI_COLORS.accent : ASI_COLORS.inkSoft,
        display: 'grid', placeItems: 'center',
        fontSize: 20, fontWeight: 700,
        fontVariantNumeric: 'tabular-nums',
      }}>{step.n}</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{
          fontSize: 20, fontWeight: 600,
          color: ASI_COLORS.ink,
          letterSpacing: '-0.005em',
        }}>{step.title}</div>
        <div style={{
          fontSize: 20, color: ASI_COLORS.inkSoft, marginTop: 3,
          lineHeight: 1.4,
        }}>{step.sub}</div>
      </div>
      {isNew && (
        <div style={{
          fontSize: 16, fontWeight: 600, letterSpacing: '0.04em',
          textTransform: 'uppercase', color: ASI_COLORS.accent,
          background: ASI_COLORS.accentTint,
          padding: '4px 9px', borderRadius: 999,
        }}>New</div>
      )}
    </div>
  );
}

Object.assign(window, { Scene3Timeline });