graph LR
  A[用戶來訪] --> B[註冊]
  B --> C{填問卷}
  C -->|完成| D[個人化試用]
  C -->|跳過| E[標準試用]
  D --> F[付費轉換]
  E --> F

export function Onboarding({ step }: { step: number }) {
  const steps = ['註冊', '驗證', '個人化', '完成'];
  return (
    <div className="flex gap-2">
      {steps.map((s, i) => (
        <div key={i} className={cn(
          'flex-1 px-3 py-2 rounded-lg text-sm',
          i < step ? 'bg-blue-600 text-white'
          : i === step ? 'border-2 border-blue-600'
          : 'bg-slate-100'
        )}>{s}</div>
      ))}
    </div>
  );
}