const AnchoringDemo = () => {
  const [anchor, setAnchor] = useState('none'); // none, high
  
  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={() => setAnchor('none')}
           className={`px-4 py-2 rounded text-sm font-bold ${anchor === 'none' ? 'bg-gray-600 text-white' : 'bg-muted'}`}
        >
          A. 単品表示
        </button>
        <button 
           onClick={() => setAnchor('high')}
           className={`px-4 py-2 rounded text-sm font-bold ${anchor === 'high' ? 'bg-destructive text-destructive-foreground' : 'bg-muted'}`}
        >
          B. アンカーあり
        </button>
      </div>

      <div className="flex items-center justify-center gap-4 min-h-[120px]">
        
        {/* The Anchor (High Price) */}
        {anchor === 'high' && (
          <div className="opacity-50 scale-90 grayscale transition-all duration-500 animate-in slide-in-from-left">
            <div className="text-xs font-bold text-muted-foreground mb-1">通常プラン</div>
            <div className="text-xl font-bold line-through text-muted-foreground">¥2,980<span className="text-xs">/月</span></div>
          </div>
        )}

        {/* The Target (Sales Price) */}
        <div className={`
          border-2 rounded-xl p-6 transition-all duration-300
          ${anchor === 'high' ? 'border-destructive bg-destructive/10 shadow-xl scale-110' : 'border-primary/30 bg-primary/10'}
        `}>
          <div className="text-sm font-bold text-muted-foreground mb-1">特別プラン</div>
          <div className={`font-black tracking-tight ${anchor === 'high' ? 'text-destructive text-4xl' : 'text-foreground text-3xl'}`}>
            ¥980<span className="text-sm font-normal text-muted-foreground">/月</span>
          </div>
          {anchor === 'high' && (
            <div className="bg-destructive text-destructive-foreground text-[10px] font-bold px-2 py-0.5 rounded-full inline-block mt-2">
              67% OFF
            </div>
          )}
        </div>
      </div>

      <p className="mt-8 text-xs text-muted-foreground">
        {anchor === 'none' 
          ? "「980円か...安いのか高いのか分からないな」" 
          : "「2,980円が980円！？安すぎる！今買わなきゃ！」"}
      </p>

    </div>
  );
};

render(<AnchoringDemo />);