function ScreenSurvey() {
  return (
    <FSFrame label="Pulse · Q3 · response #4127">
      <div className="p-5 sm:p-6 bg-slate-50/60">
        <div className="rounded-xl bg-white border border-slate-200 p-6 sm:p-7">
          <div className="flex items-center justify-between mb-5">
            <span className="text-[11px] uppercase tracking-wider font-semibold text-slate-500">Question 4 of 10</span>
            <span className="inline-flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-blue-700 bg-blue-50 border border-blue-200 rounded-full px-2.5 py-1">
              <IconLock size={11} className="text-blue-600" />
              Anonymous
            </span>
          </div>
          <div className="h-1.5 bg-slate-100 rounded-full overflow-hidden mb-6">
            <div className="h-full bg-blue-600" style={{ width: '40%' }} />
          </div>
          <div className="text-[18px] sm:text-[19px] font-semibold text-slate-900 leading-snug">
            How would you rate your overall wellbeing at work this month?
          </div>
          <div className="mt-5 grid grid-cols-10 gap-1.5">
            {[1,2,3,4,5,6,7,8,9,10].map((n) => {
              const colors = {
                1: '#c0392b', 2: '#e74c3c',
                3: '#e67e22', 4: '#f39c12',
                5: '#f1c40f', 6: '#cddc39', 7: '#9acd32',
                8: '#7cb342', 9: '#4caf50', 10: '#2e7d32',
              };
              const isSelected = n === 8;
              return (
                <button
                  key={n}
                  type="button"
                  tabIndex={-1}
                  className={`h-10 sm:h-11 rounded-md text-[13px] font-semibold flex items-center justify-center text-white transition-shadow ${isSelected ? 'ring-2 ring-offset-2 ring-slate-900 shadow' : ''}`}
                  style={{ backgroundColor: colors[n] }}
                >{n}</button>
              );
            })}
          </div>
          <div className="mt-3 flex justify-between text-[11px] text-slate-500">
            <span>Not likely</span>
            <span>Extremely likely</span>
          </div>
          <div className="mt-6 rounded-lg bg-slate-50 border border-slate-200 p-3 flex items-start gap-2.5">
            <IconLock size={14} className="text-slate-400 mt-0.5 shrink-0" />
            <p className="text-[12px] leading-snug text-slate-600">
              From <strong className="text-slate-800">colleaguepulse.co.uk</strong>, not your employer's domain. Your responses are anonymous.
            </p>
          </div>
        </div>
      </div>
    </FSFrame>
  );
}