// Icons using Emoji for simplicity
const Icons = {
  Frown: '😫',
  Meh: '😐',
  Smile: '😄',
  Heart: '😍',
};

const SurveyDemo = () => {
  const [score, setScore] = useState(null);
  const [comment, setComment] = useState('');
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    setSubmitted(true);
  };

  if (submitted) {
    return (
      <div className="p-8 bg-card rounded-xl shadow text-center animate-in fade-in zoom-in">
        <div className="text-4xl mb-4">🎉</div>
        <h3 className="text-xl font-bold mb-2">ご回答ありがとうございます！</h3>
        <p className="text-muted-foreground">貴重なご意見は、サービスの改善に役立てさせていただきます。</p>
        <button 
          onClick={() => { setSubmitted(false); setScore(null); setComment(''); }}
          className="mt-6 text-sm text-primary underline"
        >
          デモをリセット
        </button>
      </div>
    );
  }

  return (
    <div className="p-6 bg-card rounded-xl shadow-lg border max-w-lg mx-auto">
      <h3 className="font-bold text-lg mb-6 text-center">製品フィードバック</h3>
      
      <form onSubmit={handleSubmit} className="space-y-8">
        {/* 定量設問 (NPS風) */}
        <div className="space-y-3">
          <label className="block text-sm font-bold text-center">
            このサービスを友人に勧める可能性はどのくらいですか？<br/>
            <span className="text-xs font-normal text-muted-foreground">(0: 全く勧めない 〜 10: 強く勧める)</span>
          </label>
          
          <div className="flex justify-between gap-1">
            {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((num) => (
              <button
                key={num}
                type="button"
                onClick={() => setScore(num)}
                className={`flex-1 aspect-square rounded flex items-center justify-center text-sm font-bold transition-all ${
                  score === num 
                    ? 'bg-primary text-primary-foreground scale-110 shadow-lg ring-2 ring-primary ring-offset-2' 
                    : 'bg-muted hover:bg-muted/80 text-muted-foreground'
                }`}
              >
                {num}
              </button>
            ))}
          </div>
          <div className="flex justify-between text-xs text-muted-foreground px-1">
             <span>全く勧めない</span>
             <span>強く勧める</span>
          </div>
        </div>

        {/* 定性設問 */}
        {score !== null && (
          <div className="space-y-3 animate-in fade-in slide-in-from-bottom-2">
            <label className="block text-sm font-bold">
              そのスコアをつけた主な理由を教えてください
            </label>
            <textarea 
              value={comment}
              onChange={(e) => setComment(e.target.value)}
              className="w-full p-3 border rounded-md bg-background focus:ring-2 focus:ring-primary/50 outline-none min-h-[100px]"
              placeholder="例: 機能は便利ですが、画面が見づらいため..."
            />
          </div>
        )}

        <button 
          type="submit" 
          disabled={score === null}
          className="w-full py-3 bg-primary text-primary-foreground font-bold rounded-lg disabled:opacity-50 disabled:cursor-not-allowed hover:opacity-90 transition-opacity"
        >
          送信する
        </button>
      </form>
    </div>
  );
};

render(<SurveyDemo />);