const QUICK_FLOW_STEPS = [
  {
    step: '1',
    label: 'Notice the Zone',
    description: 'Identify current zone',
    cardClassName: 'border-teal-200 bg-teal-100 text-teal-800',
    badgeClassName: 'bg-teal-50 text-teal-800',
  },
  {
    step: '2',
    label: 'Reduce Demands',
    description: 'Lower expectations immediately',
    cardClassName: 'border-blue-200 bg-blue-100 text-blue-800',
    badgeClassName: 'bg-blue-50 text-blue-800',
  },
  {
    step: '3',
    label: 'Offer Support',
    description: 'Signs, choices, or space',
    cardClassName: 'border-amber-200 bg-amber-100 text-amber-800',
    badgeClassName: 'bg-amber-50 text-amber-800',
  },
  {
    step: '4',
    label: 'Wait & Monitor',
    description: 'Give processing time',
    cardClassName: 'border-violet-200 bg-violet-100 text-violet-800',
    badgeClassName: 'bg-violet-50 text-violet-800',
  },
  {
    step: '5',
    label: 'Reconnect',
    description: 'Return to Green Zone',
    cardClassName: 'border-emerald-200 bg-emerald-100 text-emerald-800',
    badgeClassName: 'bg-emerald-50 text-emerald-800',
  },
] as const;

export function ZonesQuickFlow() {
  return (
    <section className="bg-white rounded-2xl border border-violet-100 shadow-sm p-5">
      <h3 className="font-semibold text-gray-800 mb-4">Quick Behavior Management Flow</h3>
      <div className="flex flex-col md:flex-row gap-3">
        {QUICK_FLOW_STEPS.map((step) => (
          <div key={step.step} className="flex-1">
            <div className={`rounded-xl p-4 border text-center h-full ${step.cardClassName}`}>
              <div
                className={[
                  'w-8 h-8 rounded-full flex items-center justify-center',
                  'mx-auto mb-2 font-bold text-sm',
                  step.badgeClassName,
                ].join(' ')}
              >
                {step.step}
              </div>
              <p className="font-semibold text-sm">{step.label}</p>
              <p className="text-[10px] mt-1 font-medium opacity-85">{step.description}</p>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}
