const ZeigarnikTaskDemo = () => {
  const [tasks, setTasks] = useState([
    { id: 1, text: 'Sign up for account', done: true },
    { id: 2, text: 'Verify email address', done: true },
    { id: 3, text: 'Upload profile picture', done: false },
    { id: 4, text: 'Write first bio', done: false },
  ]);

  const toggleTask = (id) => {
    setTasks(tasks.map(t => t.id === id ? { ...t, done: !t.done } : t));
  };
  
  const completionRate = Math.round((tasks.filter(t => t.done).length / tasks.length) * 100);

  return (
    <div className="p-8 bg-card rounded-xl shadow-lg max-w-sm mx-auto">
      <div className="mb-6">
        <div className="flex justify-between items-end mb-2">
          <h3 className="font-bold text-card-foreground">Setup Progress</h3>
          <span className="text-2xl font-black text-primary">{completionRate}%</span>
        </div>
        
        {/* Progress Bar */}
        <div className="h-3 w-full bg-muted rounded-full overflow-hidden">
          <div 
            className="h-full bg-primary/100 transition-all duration-500 ease-out relative"
            style={{ width: `${completionRate}%` }}
          >
            {/* シマーエフェクト (光が走る) で注目を集める */}
            {completionRate < 100 && (
              <div className="absolute inset-0 bg-card opacity-20 w-full animate-shimmer"></div>
            )}
          </div>
        </div>
        
        {completionRate === 100 ? (
           <p className="text-xs text-green-500 mt-2 font-bold text-center">🎉 All set! You feel satisfied.</p>
        ) : (
           <p className="text-xs text-primary mt-2 font-medium">Complete {4 - tasks.filter(t => t.done).length} more to finish!</p>
        )}
      </div>

      <div className="space-y-3">
        {tasks.map(task => (
          <button
            key={task.id}
            onClick={() => toggleTask(task.id)}
            className={`w-full flex items-center p-3 rounded-lg border transition-all ${
              task.done 
                ? 'bg-muted/30 border-border/50 text-muted-foreground' 
                : 'bg-card border-primary/30 shadow-sm hover:translate-x-1'
            }`}
          >
            <div className={`w-5 h-5 rounded-full border mr-3 flex items-center justify-center ${
              task.done ? 'bg-green-600 border-green-500' : 'border-border'
            }`}>
              {task.done && <span className="text-white text-xs">✓</span>}
            </div>
            <span className={task.done ? 'line-through' : 'font-medium text-foreground'}>
              {task.text}
            </span>
            {!task.done && (
              <span className="ml-auto text-[10px] bg-red-100 text-destructive px-2 py-0.5 rounded-full font-bold">
                TODO
              </span>
            )}
          </button>
        ))}
      </div>
    </div>
  );
};

render(<ZeigarnikTaskDemo />);