const GoalGradientDemo = () => {
  const [progress, setProgress] = useState(0);
  const [visible, setVisible] = useState(true);
  
  // Auto-increment for demo purposes
  useEffect(() => {
    if (progress < 100 && progress > 0) {
      const timer = setTimeout(() => setProgress(p => p + 1), 50); // Simulate action
      return () => clearTimeout(timer);
    }
  }, [progress]);

  const start = () => setProgress(1);
  const reset = () => setProgress(0);

  return (
    <div className="p-8 bg-card rounded-xl shadow-lg border max-w-md mx-auto text-center">
      <h3 className="font-bold text-card-foreground mb-6">ファイル・アップロード</h3>

      <div className="flex justify-center gap-4 mb-8">
        <button 
           onClick={() => {setVisible(false); reset();}}
           className={`px-4 py-2 rounded text-sm font-bold ${!visible ? 'bg-secondary text-secondary-foreground' : 'bg-muted'}`}
        >
          A. スピナー (見えない)
        </button>
        <button 
           onClick={() => {setVisible(true); reset();}}
           className={`px-4 py-2 rounded text-sm font-bold ${visible ? 'bg-green-600 text-white' : 'bg-muted'}`}
        >
          B. プログレスバー
        </button>
      </div>

      <div className="h-32 flex flex-col items-center justify-center bg-muted/30 rounded-xl border border-dashed border-border mb-6">
        
        {progress === 0 && (
          <button onClick={start} className="bg-primary/100 text-white px-8 py-3 rounded-full font-bold shadow-lg hover:bg-primary">
            アップロード開始
          </button>
        )}

        {progress > 0 && progress < 100 && (
          <div className="w-full px-8">
            {visible ? (
              <>
                <div className="flex justify-between text-xs font-bold text-muted-foreground mb-2">
                  <span>Uploading...</span>
                  <span>{progress}%</span>
                </div>
                <div className="w-full bg-muted rounded-full h-4 overflow-hidden relative">
                   <div 
                     className="bg-green-600 h-full rounded-full transition-all duration-75 relative" 
                     style={{width: `${progress}%`}}
                   >
                     {/* Glossy effect */}
                     <div className="absolute top-0 left-0 w-full h-1/2 bg-card opacity-30"></div>
                   </div>
                </div>
                {progress > 80 && (
                   <div className="text-green-500 font-bold text-xs mt-2 animate-bounce">あと少し！頑張れ！</div>
                )}
              </>
            ) : (
              <div className="flex flex-col items-center">
                 <div className="w-10 h-10 border-4 border-border border-t-blue-500 rounded-full animate-spin mb-4"></div>
                 <div className="text-muted-foreground text-xs">処理中...（いつ終わるの？）</div>
              </div>
            )}
          </div>
        )}

        {progress === 100 && (
          <div className="animate-in zoom-in text-green-500 font-bold">
            <div className="text-4xl mb-2">✅</div>
            完了しました！
          </div>
        )}
      </div>

      <p className="mt-4 text-xs text-muted-foreground">
        {visible 
          ? "「80%...90%...」とゴールが近づくと、待つのが苦ではなくなり、ワクワクさえします。" 
          : "進捗が見えないと、不安になり、「フリーズした？」と疑って画面を閉じたくなります。"}
      </p>

    </div>
  );
};

render(<GoalGradientDemo />);