const VisualAnchorDemo = () => {
  const [hasAnchor, setHasAnchor] = useState(false);

  return (
    <div className="p-8 bg-card rounded-xl shadow-lg border max-w-md mx-auto">
      <div className="flex justify-between items-center mb-6">
         <h3 className="font-bold text-card-foreground">視線の足がかり実験</h3>
         <button 
           onClick={() => setHasAnchor(!hasAnchor)}
           className={`text-xs px-3 py-1 rounded border ${hasAnchor ? 'bg-primary text-primary-foreground' : 'bg-muted'}`}
         >
           {hasAnchor ? 'アンカーあり (ON)' : 'アンカーなし (OFF)'}
         </button>
      </div>

      <div className="space-y-6 text-sm text-muted-foreground leading-relaxed">
        {/* Section 1 */}
        <div className="flex gap-4">
          {hasAnchor && <div className="text-3xl">🚀</div>}
          <div>
            {hasAnchor && <h4 className="font-bold text-black mb-1 text-lg">スピードが命</h4>}
            <p>
               Webサイトの表示速度は非常に重要です。研究によると、3秒以上かかると40%のユーザーが離脱します。
               {!hasAnchor && "特にモバイル環境ではその傾向が顕著であり、パフォーマンス最適化は必須の要件となります。"}
            </p>
          </div>
        </div>

        {/* Section 2 */}
        <div className="flex gap-4">
          {hasAnchor && <div className="text-3xl">📱</div>}
          <div>
            {hasAnchor && <h4 className="font-bold text-black mb-1 text-lg">スマホ対応</h4>}
            <p>
              レスポンシブデザインはもはや選択肢ではありません。Googleはモバイルファーストインデックスを採用しており、
              スマホで見にくいサイトは検索順位も下がります。
            </p>
          </div>
        </div>

        {/* Section 3 */}
        <div className="flex gap-4">
           {hasAnchor && <div className="text-3xl">🔒</div>}
           <div>
             {hasAnchor && <h4 className="font-bold text-black mb-1 text-lg">セキュリティ</h4>}
             <p>
               SSL化されていないサイトは、ブラウザで「保護されていません」と表示され、
               ユーザーに不安を与え、信頼性を大きく損なう原因となります。
             </p>
           </div>
        </div>
      </div>

      <div className="mt-8 p-4 bg-muted/30 text-xs text-muted-foreground rounded">
        <strong>解説:</strong><br/>
        {hasAnchor 
          ? 'アイコンと見出しが「アンカー」となり、流し読みでも各セクションの要点が瞬時に伝わります。視線が止まります。' 
          : 'アンカーがないと、全ての文字が同じ重みで見えるため、視線が滑ってしまい、内容が頭に入ってきません（グレーの壁）。'}
      </div>
    </div>
  );
};

render(<VisualAnchorDemo />);