function ScreenOnboarding({ playing = false }) {
  const [t, setT] = useStateFS(0);

  React.useEffect(() => {
    if (!playing) {
      setT(0);
      return;
    }
    let startTime = performance.now();
    let rafId;
    const loop = (now) => {
      const elapsed = (now - startTime) / 1000;
      setT(elapsed % 7.2);
      rafId = requestAnimationFrame(loop);
    };
    rafId = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(rafId);
  }, [playing]);

  const easeOut = (p) => 1 - Math.pow(1 - p, 3);
  const clamp01 = (v) => Math.max(0, Math.min(1, v));

  // Soft fade at the loop boundary so the reset doesn't jolt back.
  // Fade in over the first 0.35s, hold, then fade out from 6.5 to 7.2.
  const fadeOpacity = t < 0.35
    ? easeOut(t / 0.35)
    : t > 6.5
      ? clamp01((7.2 - t) / 0.7)
      : 1;

  // Sarah arrives in HRIS feed: 0.6 → 1.4
  const sarahProgress = easeOut(clamp01((t - 0.6) / 0.8));

  // Connector line draws: 1.6 → 2.3
  const connectorProgress = easeOut(clamp01((t - 1.6) / 0.7));

  // Right-panel header + Auto-enrolled badge: 2.1 → 2.6
  const headerProgress = easeOut(clamp01((t - 2.1) / 0.5));

  // Milestones cascade in
  const milestoneStarts = [2.6, 3.1, 3.6, 4.1, 4.6];

  // Footer summary: 5.4 →
  const footerProgress = easeOut(clamp01((t - 5.4) / 0.5));

  const milestones = [
    { day: '1',   date: '24 May', title: 'Welcome email',          sub: 'Plus week-one survey scheduled', tint: 'blue' },
    { day: '7',   date: '31 May', title: 'Manager check-in',       sub: 'Prompt sent to line manager',     tint: 'blue' },
    { day: '30',  date: '23 Jun', title: 'First-month survey',     sub: 'Onboarding pulse',                tint: 'indigo' },
    { day: '90',  date: '22 Aug', title: 'Probation pulse',        sub: 'Benchmarked against sector',      tint: 'indigo' },
    { day: '180', date: '20 Nov', title: 'Anchor survey',          sub: 'Retention flag if at risk',       tint: 'emerald' },
  ];

  const tintMap = {
    blue:    { ring: 'border-blue-600',    text: 'text-blue-700',    bg: 'bg-blue-50' },
    indigo:  { ring: 'border-indigo-500',  text: 'text-indigo-700',  bg: 'bg-indigo-50' },
    emerald: { ring: 'border-emerald-600', text: 'text-emerald-700', bg: 'bg-emerald-50' },
  };

  const priorJoiners = [
    { initials: 'JM', name: 'James Miller',    role: 'Repairs',   date: '10 May' },
    { initials: 'AK', name: 'Aisha Khan',      role: 'Lettings',  date: '03 May' },
    { initials: 'RP', name: 'Ravi Patel',      role: 'Care Manager',  date: '28 Apr' },
  ];

  return (
    <FSFrame label="Journeys · Auto-enrol new starters">
      <div className="relative w-full h-full bg-[#f8fafc] flex overflow-hidden select-none font-sans text-slate-700" style={{ pointerEvents: 'none', opacity: fadeOpacity, transition: 'none' }}>

        {/* LEFT — HRIS feed */}
        <div className="w-[38%] p-3 flex flex-col gap-2 border-r border-slate-200 bg-white shrink-0">
          <div className="flex items-center justify-between pb-2 border-b border-slate-100">
            <div className="flex items-center gap-1.5">
              <span className="h-5 w-5 rounded bg-emerald-100 text-emerald-700 flex items-center justify-center">
                <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2.5">
                  <path strokeLinecap="round" strokeLinejoin="round" d="M3 7l9-4 9 4-9 4-9-4zm0 5l9 4 9-4M3 17l9 4 9-4" />
                </svg>
              </span>
              <div>
                <div className="text-[10px] font-bold text-slate-800">HR System</div>
                <div className="text-[8px] text-slate-400 font-medium">AnyHR · Live sync</div>
              </div>
            </div>
            <span className="flex items-center gap-1 text-[8px] font-semibold text-emerald-700 bg-emerald-50 border border-emerald-200/70 px-1.5 py-0.5 rounded-full">
              <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" />
              SYNCED
            </span>
          </div>

          <div className="text-[8px] uppercase tracking-wider font-bold text-slate-400 mt-1">New starters</div>

          {/* Sarah — new joiner, slides in */}
          <div
            className="relative flex items-center gap-2 p-2 rounded-lg border border-blue-200 bg-blue-50/50 shadow-sm"
            style={{
              opacity: sarahProgress,
              transform: `translateY(${(1 - sarahProgress) * -10}px)`,
              transition: 'none',
            }}
          >
            <span className="h-7 w-7 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 text-white text-[10px] font-bold flex items-center justify-center shrink-0">
              SB
            </span>
            <div className="flex-1 min-w-0">
              <div className="text-[10px] font-bold text-slate-900 truncate">Sarah Bennett</div>
              <div className="text-[8.5px] text-slate-500 truncate">Patching Team · Start 24 May</div>
            </div>
            <span className="text-[7.5px] font-bold text-white bg-blue-600 px-1.5 py-0.5 rounded uppercase tracking-wider shrink-0">New</span>
          </div>

          {/* Prior joiners (static, dimmed) */}
          <div className="flex flex-col gap-1.5 opacity-60">
            {priorJoiners.map((p) => (
              <div key={p.initials} className="flex items-center gap-2 p-1.5 rounded border border-slate-100">
                <span className="h-6 w-6 rounded-full bg-slate-200 text-slate-600 text-[9px] font-bold flex items-center justify-center shrink-0">
                  {p.initials}
                </span>
                <div className="flex-1 min-w-0">
                  <div className="text-[9.5px] font-semibold text-slate-700 truncate">{p.name}</div>
                  <div className="text-[8px] text-slate-400 truncate">{p.role} · {p.date}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* CONNECTOR — line draws from Sarah's card across into right panel */}
        <div className="absolute z-10 pointer-events-none" style={{ left: '38%', top: '78px', width: '8%', height: '2px' }}>
          <div
            className="h-full bg-gradient-to-r from-blue-500 to-indigo-500 rounded-full origin-left"
            style={{ transform: `scaleX(${connectorProgress})`, transition: 'none' }}
          />
          <div
            className="absolute -top-1 w-2 h-2 rounded-full bg-indigo-500 shadow-[0_0_8px_rgba(99,102,241,0.6)]"
            style={{ left: `calc(${connectorProgress * 100}% - 4px)`, opacity: connectorProgress, transition: 'none' }}
          />
        </div>

        {/* RIGHT — Journey timeline */}
        <div className="flex-1 p-3 flex flex-col gap-2 min-w-0 bg-[#fafbff]">
          <div
            className="flex items-center justify-between pb-2 border-b border-slate-100"
            style={{
              opacity: headerProgress,
              transform: `translateY(${(1 - headerProgress) * -4}px)`,
              transition: 'none',
            }}
          >
            <div className="flex items-center gap-1.5 min-w-0">
              <span className="h-5 w-5 rounded bg-blue-100 text-blue-700 flex items-center justify-center shrink-0">
                <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2.5">
                  <path strokeLinecap="round" strokeLinejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                </svg>
              </span>
              <div className="min-w-0">
                <div className="text-[10px] font-bold text-slate-800 truncate">Onboarding journey · Sarah Bennett</div>
                <div className="text-[8px] text-slate-400 font-medium">Configured once · Runs for every new starter</div>
              </div>
            </div>
            <span
              className="flex items-center gap-1 text-[8px] font-bold text-emerald-700 bg-emerald-50 border border-emerald-200 px-1.5 py-0.5 rounded-full shrink-0"
              style={{ transform: `scale(${0.85 + 0.15 * headerProgress})`, transition: 'none' }}
            >
              <svg className="w-2.5 h-2.5" fill="currentColor" viewBox="0 0 20 20">
                <path fillRule="evenodd" d="M16.7 5.3a1 1 0 010 1.4l-8 8a1 1 0 01-1.4 0l-4-4a1 1 0 011.4-1.4L8 12.6l7.3-7.3a1 1 0 011.4 0z" clipRule="evenodd" />
              </svg>
              AUTO-ENROLLED
            </span>
          </div>

          {/* Milestones */}
          <div className="relative flex-1 flex flex-col gap-1.5 pt-0.5">
            {/* vertical track */}
            <div className="absolute left-[14px] top-2 bottom-2 w-px bg-slate-200" />

            {milestones.map((m, idx) => {
              const start = milestoneStarts[idx];
              const p = easeOut(clamp01((t - start) / 0.45));
              const tint = tintMap[m.tint];
              return (
                <div
                  key={m.day}
                  className="relative flex items-center gap-2.5"
                  style={{
                    opacity: p,
                    transform: `translateX(${(1 - p) * 12}px)`,
                    transition: 'none',
                  }}
                >
                  <div className={`relative z-10 h-7 w-7 rounded-full bg-white border-2 ${tint.ring} ${tint.text} text-[9px] font-bold flex items-center justify-center shrink-0 shadow-sm`}>
                    {m.day}
                  </div>
                  <div className={`flex-1 rounded-lg bg-white border border-slate-200 px-2.5 py-1.5 flex items-center gap-2 min-w-0 shadow-card`}>
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-1.5">
                        <span className={`text-[8px] uppercase tracking-wider font-bold ${tint.text}`}>Day {m.day}</span>
                        <span className="text-[8px] font-semibold text-slate-400">· {m.date}</span>
                      </div>
                      <div className="text-[10.5px] font-semibold text-slate-800 leading-tight truncate">{m.title}</div>
                      <div className="text-[8.5px] text-slate-500 truncate">{m.sub}</div>
                    </div>
                    <span className={`text-[7.5px] font-bold ${tint.text} ${tint.bg} px-1.5 py-0.5 rounded uppercase tracking-wider shrink-0`}>
                      Scheduled
                    </span>
                  </div>
                </div>
              );
            })}
          </div>

          {/* Footer summary */}
          <div
            className="flex items-center justify-between pt-1.5 mt-0.5 border-t border-slate-100"
            style={{
              opacity: footerProgress,
              transform: `translateY(${(1 - footerProgress) * 4}px)`,
              transition: 'none',
            }}
          >
            <div className="flex items-center gap-1.5">
              <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" />
              <span className="text-[9px] font-bold text-slate-700">Journey active</span>
              <span className="text-[8.5px] text-slate-400">· 5 surveys scheduled · 0 manual steps</span>
            </div>
            <span className="text-[8px] font-semibold text-slate-400">Through 20 Nov</span>
          </div>
        </div>

      </div>
    </FSFrame>
  );
}