const ExternalLink = ({ size = 24, className }) => (
  <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
    <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
    <polyline points="15 3 21 3 21 9" />
    <line x1="10" x2="21" y1="14" y2="3" />
  </svg>
);

const BannerBlindnessDemo = () => {
  const [clickCount, setClickCount] = useState({ banner: 0, text: 0 });
  const [showHighlight, setShowHighlight] = useState(false);

  return (
    <div className="p-6 bg-card rounded-xl shadow-lg border max-w-2xl mx-auto">
      <h3 className="font-bold text-lg mb-4 text-center">視線誘導の実験</h3>
      <p className="text-sm text-muted-foreground mb-6 text-center">
        ユーザーは「記事」を読みに来ています。下記のコンテンツの中で、<br/>
        「関連情報」がどこにあるか探してみてください。
      </p>

      <div className="flex flex-col md:flex-row gap-6">
        
        {/* メインコンテンツエリア */}
        <div className="flex-1 space-y-4">
          <h4 className="text-xl font-bold border-b pb-2">最新のUXトレンドについて</h4>
          <p className="text-sm leading-relaxed">
            近年のデザイントレンドは、装飾を削ぎ落としたフラットデザインから、奥行きや質感を重視するニューモーフィズムへと移行しつつあります。
            しかし、最も重要なのはユーザーの可読性です。<br/>
            <span 
              className="text-primary font-bold underline cursor-pointer hover:opacity-80 inline-flex items-center gap-1"
              onClick={() => setClickCount(p => ({...p, text: p.text + 1}))}
            >
              詳細なレポートを読む <ExternalLink size={12}/>
            </span>
            <br/>
            ユーザーは文字を読む速度を上げており、流し読み（スキャニング）に適したレイアウトが求められています。
          </p>
          <p className="text-sm leading-relaxed">
             色のコントラスト比や、行間の調整もアクセシビリティの観点から必須項目となっています。
          </p>
        </div>

        {/* サイドバー（広告っぽいエリア） */}
        <div className="w-full md:w-48 flex flex-col gap-4">
          
          {/* 明らかにバナーっぽい要素 */}
          <div 
            className="bg-gradient-to-br from-yellow-400 to-orange-500 p-4 text-white text-center rounded-lg shadow-md hover:shadow-lg transition-shadow cursor-pointer transform hover:scale-105 transition-transform"
            onClick={() => setClickCount(p => ({...p, banner: p.banner + 1}))}
          >
            <p className="text-xs font-bold bg-white text-orange-500 inline-block px-1 rounded mb-2">PICK UP</p>
            <p className="font-black text-lg leading-tight mb-2">詳細レポート<br/>公開中！</p>
            <div className="bg-white text-orange-600 text-xs font-bold py-1 px-2 rounded-full mx-auto w-max">
              今すぐチェック ▶
            </div>
          </div>

          <div className="bg-muted h-32 rounded flex items-center justify-center text-xs text-muted-foreground">
            その他の広告枠
          </div>
        </div>

      </div>

      {/* 結果表示エリア */}
      <div className="mt-8 pt-6 border-t">
        <div className="grid grid-cols-2 gap-4 text-center">
          <div className={`p-3 rounded transition-colors ${clickCount.text > clickCount.banner ? 'bg-primary/10' : ''}`}>
            <p className="text-sm font-bold text-muted-foreground">テキストリンク</p>
            <p className="text-2xl font-black text-primary">{clickCount.text}</p>
          </div>
          <div className={`p-3 rounded transition-colors ${clickCount.banner > clickCount.text ? 'bg-orange-100 dark:bg-orange-900/20' : ''}`}>
            <p className="text-sm font-bold text-muted-foreground">バナー広告風</p>
            <p className="text-2xl font-black text-orange-500">{clickCount.banner}</p>
          </div>
        </div>
        
        <div className="mt-4 text-center">
          <button 
            onClick={() => setShowHighlight(!showHighlight)}
            className="text-xs text-muted-foreground hover:text-primary underline"
          >
            {showHighlight ? '解説を隠す' : 'なぜバナーは無視される？'}
          </button>
          
          {showHighlight && (
            <p className="text-xs mt-2 text-left bg-muted p-3 rounded animate-in fade-in slide-in-from-top-2">
              <strong>解説:</strong> 右のバナーは色も動きもあり目立ちますが、ユーザーの脳はこれを「メインコンテンツとは無関係なノイズ」として処理しがちです。
              一方、文中のリンクは「コンテンツの一部」として認識されるため、文脈に沿って自然にクリックされやすくなります。
            </p>
          )}
        </div>
      </div>
    </div>
  );
};

render(<BannerBlindnessDemo />);