function ScreenExitTrigger() {
  return (
    <FSFrame label="Surveys · exit · automation">
      <div className="p-4 sm:p-5 bg-slate-50/60 h-full flex flex-col">
        <div className="text-[11px] uppercase tracking-wider font-semibold text-slate-500 mb-1.5">Trigger</div>
        <div className="rounded-lg bg-white border border-slate-200 p-3 flex items-center gap-3">
          <div className="inline-flex items-center justify-center h-10 w-10 rounded-lg bg-blue-50 text-blue-600 shrink-0">
            <IconCalendarClock size={20} />
          </div>
          <div>
            <div className="text-[14px] font-semibold text-slate-900">10 days before leave date</div>
            <div className="text-[12px] text-slate-500">Synced from your HR system every night</div>
          </div>
        </div>

        {/* Response rate comparison */}
        <div className="mt-2.5 text-[11px] uppercase tracking-wider font-semibold text-slate-500">Response rate by trigger timing</div>
        <div className="mt-1.5 rounded-lg bg-white border border-slate-200 p-3">
          <div className="space-y-2.5">
            <div>
              <div className="flex items-center justify-between mb-1 text-[12px] text-slate-600">
                <span>Last-day trigger</span>
                <span className="font-semibold text-slate-700 tabular-nums">11%</span>
              </div>
              <div className="h-2.5 bg-slate-100 rounded">
                <div className="h-full rounded bg-slate-300" style={{ width: '11%' }} />
              </div>
            </div>
            <div>
              <div className="flex items-center justify-between mb-1 text-[12px] text-slate-600">
                <span>10 days before (Colleague Pulse)</span>
                <span className="font-semibold text-emerald-700 tabular-nums">32%</span>
              </div>
              <div className="h-2.5 bg-slate-100 rounded">
                <div className="h-full rounded bg-emerald-500" style={{ width: '32%' }} />
              </div>
            </div>
          </div>
          <div className="mt-2.5 pt-2.5 border-t border-slate-100 text-[12px] text-slate-600 leading-snug">
            Replies land while answers are still honest, before the post-handover wind-down sets in.
          </div>
        </div>

        {/* Recent automation log */}
        <div className="mt-2.5 text-[11px] uppercase tracking-wider font-semibold text-slate-500">Recent triggers</div>
        <div className="mt-1.5 rounded-lg bg-white border border-slate-200 divide-y divide-slate-100 flex-1 min-h-0 overflow-hidden">
          {[
            ['J. Vale',     'Housing Officer',     '21 Mar', 'Sent'],
            ['R. Marsh',    'Tenancy Sustainment', '14 Mar', 'Responded'],
          ].map((r) => (
            <div key={r[0]} className="px-3.5 py-1.5 flex items-center justify-between text-[12px]">
              <div className="flex items-center gap-2.5 min-w-0">
                <span className="font-medium text-slate-800 truncate">{r[0]}</span>
                <span className="text-slate-400">·</span>
                <span className="text-slate-500 truncate">{r[1]}</span>
              </div>
              <div className="flex items-center gap-3 shrink-0">
                <span className="text-slate-500 tabular-nums">{r[2]}</span>
                <span className={`text-[10px] font-semibold uppercase tracking-wider rounded px-1.5 py-0.5 ${r[3] === 'Responded' ? 'text-emerald-700 bg-emerald-50 border border-emerald-100' : 'text-blue-700 bg-blue-50 border border-blue-100'}`}>{r[3]}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </FSFrame>
  );
}