const ParkinsonsTimer = () => {
  const [timeLeft, setTimeLeft] = useState(15);
  const [isActive, setIsActive] = useState(false);
  const [completed, setCompleted] = useState(false);

  useEffect(() => {
    let interval = null;
    if (isActive && timeLeft > 0) {
      interval = setInterval(() => {
        setTimeLeft(timeLeft - 1);
      }, 1000);
    } else if (timeLeft === 0) {
      clearInterval(interval);
      setIsActive(false);
    }
    return () => clearInterval(interval);
  }, [isActive, timeLeft]);

  const reset = () => {
    setTimeLeft(15);
    setIsActive(true);
    setCompleted(false);
  };

  return (
    <div className="p-8 bg-card rounded-xl flex flex-col items-center shadow-lg border-b-4 border-border">
      
      <div className="mb-6 text-center">
        <h3 className="text-muted-foreground font-bold text-sm mb-2">LIMITED TIME DEAL</h3>
        <div className={`text-5xl font-black font-mono tracking-widest ${timeLeft < 5 ? 'text-destructive animate-pulse' : 'text-card-foreground'}`}>
          00:{timeLeft.toString().padStart(2, '0')}
        </div>
        <p className="text-xs text-muted-foreground mt-2">
          {isActive ? "Closing soon..." : "Offer expired."}
        </p>
      </div>

      {!completed ? (
        <button
          onClick={() => setCompleted(true)}
          disabled={!isActive}
          className={`
            w-full py-3 rounded-lg font-bold text-lg transition-transform active:scale-95
            ${isActive 
              ? 'bg-primary text-primary-foreground hover:bg-primary/90 shadow-lg' 
              : 'bg-gray-300 text-muted-foreground cursor-not-allowed'
            }
          `}
        >
          {isActive ? 'Buy Now!' : 'Too Late'}
        </button>
      ) : (
        <div className="w-full py-3 bg-green-100 dark:bg-green-950 text-green-700 dark:text-green-200 font-bold text-center rounded-lg animate-in zoom-in">
          🎉 Purchase Completed!
        </div>
      )}

      <div className="mt-8 pt-4 border-t w-full flex justify-center">
        <button 
          onClick={reset}
          className="text-xs text-blue-500 underline hover:text-blue-700"
        >
          Restart Timer
        </button>
      </div>
      
      <p className="text-[10px] text-muted-foreground mt-4 text-center max-w-xs">
        タイマーが動いている間、あなたの注意は「購入ボタン」に釘付けになりませんでしたか？これがパーキンソンの法則の応用です。
      </p>
    </div>
  );
};

render(<ParkinsonsTimer />);