const CuriosityGapDemo = () => {
  const [isRevealed, setIsRevealed] = useState(false);

  return (
    <div className="p-8 bg-card rounded-xl shadow-lg border max-w-md mx-auto">
      <h3 className="text-center font-bold text-card-foreground mb-6">どちらをクリックしたいですか？</h3>

      {/* Case A: No Gap */}
      <div className="mb-6 opacity-70">
        <div className="text-sm font-bold text-muted-foreground mb-1">A. 全てネタバレしているボタン</div>
        <button disabled className="w-full text-left bg-muted p-4 rounded border cursor-not-allowed">
          <div className="font-bold text-card-foreground">1+1の答えは「2」です</div>
          <div className="text-xs text-muted-foreground">クリックしても新しい情報は得られません。</div>
        </button>
      </div>

      {/* Case B: Curiosity Gap */}
      <div>
        <div className="text-sm font-bold text-primary mb-1">B. 情報の空白があるボタン</div>
        <button 
          onClick={() => setIsRevealed(true)}
          disabled={isRevealed}
          className={`
            w-full text-left p-4 rounded border transition-all relative overflow-hidden group
            ${isRevealed ? 'bg-card border-primary/30' : 'bg-primary/10 border-primary/30 hover:shadow-md cursor-pointer'}
          `}
        >
          {!isRevealed ? (
            <>
               <div className="flex justify-between items-center">
                 <div className="font-bold text-foreground">1+1の答え、実は...</div>
                 <div className="bg-primary text-primary-foreground text-xs px-2 py-1 rounded">見る</div>
               </div>
               <div className="text-xs text-blue-800 mt-1 blur-[2px] group-hover:blur-sm transition-all duration-500">
                 エジソンは泥団子を合わせて「1つ」と言いました。数学的な...
               </div>
               <div className="absolute inset-0 bg-gradient-to-t from-blue-100/80 to-transparent"></div>
            </>
          ) : (
            <div className="animate-in fade-in">
              <div className="font-bold text-card-foreground mb-1">答え: 文脈によります</div>
              <p className="text-xs text-muted-foreground">
                数学的には「2」ですが、泥団子を合わせれば大きな「1」になります。<br/>
                このように、視点を変えることがUXデザインでは重要です。
              </p>
              <div className="mt-2 text-right">
                <span className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">空白が埋まりました！</span>
              </div>
            </div>
          )}
        </button>
      </div>
      
      {isRevealed && (
         <div className="mt-6 text-center text-xs text-muted-foreground">
           <button onClick={() => setIsRevealed(false)} className="underline">リセット</button>
         </div>
      )}
    </div>
  );
};

render(<CuriosityGapDemo />);