const SpacingEffectDemo = () => {
  const [method, setMethod] = useState('cramming'); // 'cramming' or 'spacing'
  const [step, setStep] = useState(0);

  const tips = [
    "Tip 1: Use shortcuts (Cmd+K) to open the menu.",
    "Tip 2: Double click to edit text directly.",
    "Tip 3: Drag and drop files to upload instantly.",
    "Tip 4: Right click for context options.",
    "Tip 5: Use dark mode for night work."
  ];

  const handleNext = () => {
    if (step < tips.length - 1) setStep(step + 1);
  };

  const handleReset = () => {
    setStep(0);
  };

  return (
    <div className="p-8 bg-card rounded-xl shadow-lg border max-w-md mx-auto h-96 flex flex-col">
      
      <div className="flex justify-center gap-4 mb-6">
        <button
          onClick={() => { setMethod('cramming'); handleReset(); }}
          className={`text-xs px-3 py-1 rounded-full border ${method === 'cramming' ? 'bg-red-100 dark:bg-red-900/50 text-red-700 dark:text-red-200 border-red-300 dark:border-red-800 font-bold' : 'text-muted-foreground'}`}
        >
          Massed (Cramming)
        </button>
        <button
          onClick={() => { setMethod('spacing'); handleReset(); }}
          className={`text-xs px-3 py-1 rounded-full border ${method === 'spacing' ? 'bg-primary/20 dark:bg-blue-900/50 text-blue-700 dark:text-blue-200 border-blue-300 dark:border-blue-800 font-bold' : 'text-muted-foreground'}`}
        >
          Spaced (Step-by-Step)
        </button>
      </div>

      <div className="flex-grow flex items-center justify-center">
        {method === 'cramming' ? (
          // Cramming Mode: Overwhelming amount of info at once
          <div className="bg-yellow-50 dark:bg-yellow-950 p-6 rounded-lg border border-yellow-200 dark:border-yellow-800 w-full animate-in zoom-in duration-300">
            <h3 className="font-bold text-yellow-800 dark:text-yellow-200 mb-4 border-b border-yellow-200 dark:border-yellow-800 pb-2">Welcome! Here is EVERYTHING:</h3>
            <ul className="list-disc pl-5 space-y-2 text-sm text-yellow-900 dark:text-yellow-100">
              {tips.map((tip, i) => (
                <li key={i}>{tip}</li>
              ))}
            </ul>
            <p className="text-xs text-yellow-600 dark:text-yellow-400 mt-4 italic text-center">(脳の負荷が高く、覚えにくい)</p>
          </div>
        ) : (
          // Spaced Mode: Bite-sized info
          <div className="w-full text-center">
            <div className="mb-2 text-xs font-bold text-muted-foreground uppercase tracking-widest">Daily Tip {step + 1} of {tips.length}</div>
            <div className="bg-primary/10 p-8 rounded-2xl border-2 border-blue-100 shadow-sm min-h-[160px] flex items-center justify-center animate-in slide-in-from-right-8 fade-in duration-300 key={step}">
              <p className="text-xl font-medium text-foreground leading-snug">
                {tips[step]}
              </p>
            </div>
            
            <div className="mt-8">
              {step < tips.length - 1 ? (
                <button 
                  onClick={handleNext}
                  className="bg-primary text-primary-foreground px-8 py-3 rounded-full font-bold shadow-lg hover:bg-primary/90 hover:scale-105 transition-all"
                >
                  Got it, show me next (tomorrow)
                </button>
              ) : (
                <div className="text-green-500 font-bold animate-bounce">
                  All tips mastered! 🎉
                </div>
              )}
            </div>
          </div>
        )}
      </div>

    </div>
  );
};

render(<SpacingEffectDemo />);