// 業務メニューカード用イラスト パターン2 — 「現場フォト風」
// グラデーション・逆光シルエット・粒状感（feTurbulence）で写真のような空気感を出したフルブリードシーン。
// パターン1（施工図テイスト: MenuArt.jsx）と Tweaks で切替できる。
const MenuArt2 = ({ id }) => {
  const p = `ma2-${id}`;   // グラデーション等の id 衝突防止プレフィックス

  // 共通: 粒状感＋ビネット
  const Film = () => (
    <g>
      <rect width="200" height="88" filter={`url(#${p}-grain)`} opacity=".16"/>
      <rect width="200" height="88" fill={`url(#${p}-vig)`}/>
    </g>
  );
  const CommonDefs = () => (
    <>
      <filter id={`${p}-grain`} x="0" y="0" width="100%" height="100%">
        <feTurbulence type="fractalNoise" baseFrequency=".9" numOctaves="2" result="n"/>
        <feColorMatrix in="n" type="matrix" values="0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 .5 0"/>
      </filter>
      <radialGradient id={`${p}-vig`} cx="50%" cy="46%" r="75%">
        <stop offset="62%" stopColor="#000" stopOpacity="0"/>
        <stop offset="100%" stopColor="#000" stopOpacity=".34"/>
      </radialGradient>
    </>
  );

  const scenes = {
    // AI検索基盤: 地層断面のリアル土質＋ボーリング孔＋レンズ
    search: (
      <g>
        <defs>
          <CommonDefs/>
          <linearGradient id={`${p}-sky`} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#cfe3f5"/><stop offset="1" stopColor="#9ec3e6"/>
          </linearGradient>
          <linearGradient id={`${p}-top`} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#6b5138"/><stop offset="1" stopColor="#503a25"/>
          </linearGradient>
          <linearGradient id={`${p}-clay`} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#93744c"/><stop offset="1" stopColor="#75593a"/>
          </linearGradient>
          <linearGradient id={`${p}-sand`} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#b29668"/><stop offset="1" stopColor="#957a50"/>
          </linearGradient>
          <radialGradient id={`${p}-lens`} cx="38%" cy="34%" r="80%">
            <stop offset="0" stopColor="#ffffff" stopOpacity=".9"/>
            <stop offset="45%" stopColor="#dceafc" stopOpacity=".55"/>
            <stop offset="100%" stopColor="#8fb4e2" stopOpacity=".35"/>
          </radialGradient>
        </defs>
        <rect width="200" height="16" fill={`url(#${p}-sky)`}/>
        <rect y="16" width="200" height="20" fill={`url(#${p}-top)`}/>
        <rect y="36" width="200" height="26" fill={`url(#${p}-clay)`}/>
        <rect y="62" width="200" height="26" fill={`url(#${p}-sand)`}/>
        <g fill="#5f4930" opacity=".8">
          <ellipse cx="30" cy="70" rx="3.4" ry="2.2"/><ellipse cx="62" cy="78" rx="2.8" ry="1.8"/>
          <ellipse cx="120" cy="74" rx="3.2" ry="2"/><ellipse cx="168" cy="80" rx="2.6" ry="1.7"/>
          <ellipse cx="90" cy="82" rx="2.2" ry="1.5"/>
        </g>
        <rect x="92" y="16" width="12" height="72" fill="#e9eef4" opacity=".92"/>
        <g fill="none" stroke="#9fb0c4" strokeWidth="1.4">
          <line x1="92" y1="36" x2="104" y2="36"/><line x1="92" y1="62" x2="104" y2="62"/>
        </g>
        <circle cx="138" cy="46" r="21" fill={`url(#${p}-lens)`} stroke="#2b3a55" strokeWidth="4"/>
        <line x1="154" y1="62" x2="172" y2="80" stroke="#2b3a55" strokeWidth="6" strokeLinecap="round"/>
        <line x1="126" y1="34" x2="134" y2="30" stroke="#fff" strokeWidth="2.4" opacity=".85" strokeLinecap="round"/>
        <Film/>
      </g>
    ),
    // 工事作成ツール: 朝焼けのタワークレーンと日報カード
    report: (
      <g>
        <defs>
          <CommonDefs/>
          <linearGradient id={`${p}-sky`} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#1e3a6e"/><stop offset=".55" stopColor="#7a6899"/>
            <stop offset=".8" stopColor="#e08d5a"/><stop offset="1" stopColor="#f2b269"/>
          </linearGradient>
          <radialGradient id={`${p}-sun`} cx="50%" cy="50%" r="50%">
            <stop offset="0" stopColor="#ffe6b0" stopOpacity=".95"/>
            <stop offset="100%" stopColor="#ffce7a" stopOpacity="0"/>
          </radialGradient>
        </defs>
        <rect width="200" height="88" fill={`url(#${p}-sky)`}/>
        <circle cx="150" cy="66" r="26" fill={`url(#${p}-sun)`}/>
        <g stroke="#101b30" strokeWidth="2.4" fill="none" strokeLinecap="round">
          <line x1="120" y1="80" x2="120" y2="18"/>
          <line x1="88" y1="24" x2="172" y2="20"/>
          <line x1="120" y1="10" x2="120" y2="18"/>
          <path d="M120 10 88 24M120 10l52 10"/>
          <line x1="96" y1="24" x2="96" y2="34"/>
          <line x1="160" y1="21" x2="160" y2="44"/>
        </g>
        <rect x="155" y="44" width="10" height="7" fill="#101b30"/>
        <rect x="114" y="76" width="12" height="6" fill="#101b30"/>
        <rect y="80" width="200" height="8" fill="#101b30"/>
        <g stroke="#101b30" strokeWidth="1.2" opacity=".9">
          <path d="m34 26 5 2 5-2" fill="none"/><path d="m50 18 4 1.6 4-1.6" fill="none"/>
        </g>
        <g>
          <rect x="18" y="34" width="42" height="46" rx="4" fill="#f7f4ee" opacity=".97"/>
          <rect x="18" y="34" width="42" height="46" rx="4" fill="none" stroke="#101b30" strokeOpacity=".2"/>
          <rect x="30" y="30" width="18" height="8" rx="2.5" fill="#f2a93b"/>
          <line x1="25" y1="48" x2="53" y2="48" stroke="#8b8f99" strokeWidth="1.6"/>
          <line x1="25" y1="56" x2="53" y2="56" stroke="#8b8f99" strokeWidth="1.6"/>
          <line x1="25" y1="64" x2="43" y2="64" stroke="#8b8f99" strokeWidth="1.6"/>
          <circle cx="50" cy="70" r="7" fill="#0b57c4"/>
          <path d="m47 70 2.4 2.4 4.2-4.8" stroke="#fff" strokeWidth="1.8" fill="none" strokeLinecap="round"/>
        </g>
        <Film/>
      </g>
    ),
    // ICT地盤改良工ツール: 夕景の地盤改良機シルエット＋データ光
    ict: (
      <g>
        <defs>
          <CommonDefs/>
          <linearGradient id={`${p}-sky`} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#16305e"/><stop offset=".6" stopColor="#3c5d96"/>
            <stop offset=".85" stopColor="#d97e52"/><stop offset="1" stopColor="#f0a763"/>
          </linearGradient>
          <radialGradient id={`${p}-glow`} cx="50%" cy="50%" r="50%">
            <stop offset="0" stopColor="#ffd9a0" stopOpacity=".8"/><stop offset="100%" stopColor="#ffd9a0" stopOpacity="0"/>
          </radialGradient>
        </defs>
        <rect width="200" height="88" fill={`url(#${p}-sky)`}/>
        <circle cx="60" cy="70" r="24" fill={`url(#${p}-glow)`}/>
        <rect y="74" width="200" height="14" fill="#131c2e"/>
        <g fill="#131c2e">
          <rect x="118" y="12" width="7" height="62"/>
          <path d="M125 16 96 52l6 4 27-36z"/>
          <rect x="92" y="52" width="34" height="15" rx="3"/>
          <path d="M86 66h48l4 8H82z"/>
          <rect x="128" y="20" width="10" height="4"/><rect x="128" y="32" width="10" height="4"/>
        </g>
        <rect x="98" y="56" width="9" height="6" fill="#ffca6e" opacity=".95"/>
        <g stroke="#79d6f2" strokeWidth="2" fill="none" strokeLinecap="round" opacity=".9">
          <path d="M152 30a12 12 0 0 1 0 17"/>
          <path d="M159 23a22 22 0 0 1 0 31"/>
        </g>
        <circle cx="146" cy="38" r="2.6" fill="#79d6f2"/>
        <Film/>
      </g>
    ),
    // 見積業務効率化: 夕方のデスク。巻き図面と電卓、金色のボケ
    estimate: (
      <g>
        <defs>
          <CommonDefs/>
          <linearGradient id={`${p}-bg`} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#3a2f22"/><stop offset=".7" stopColor="#7c5d38"/>
            <stop offset="1" stopColor="#a97f49"/>
          </linearGradient>
          <linearGradient id={`${p}-roll`} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#f2ede3"/><stop offset=".5" stopColor="#cbc2ae"/>
            <stop offset="1" stopColor="#8f8672"/>
          </linearGradient>
          <linearGradient id={`${p}-desk`} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#584022"/><stop offset="1" stopColor="#33250f"/>
          </linearGradient>
        </defs>
        <rect width="200" height="88" fill={`url(#${p}-bg)`}/>
        <g fill="#ffd98c">
          <circle cx="40" cy="22" r="7" opacity=".35"/><circle cx="66" cy="14" r="4.5" opacity=".28"/>
          <circle cx="160" cy="18" r="8" opacity=".3"/><circle cx="184" cy="34" r="5" opacity=".25"/>
          <circle cx="120" cy="10" r="3.6" opacity=".25"/>
        </g>
        <rect y="58" width="200" height="30" fill={`url(#${p}-desk)`}/>
        <g>
          <rect x="34" y="40" width="70" height="16" rx="8" fill={`url(#${p}-roll)`}/>
          <ellipse cx="104" cy="48" rx="6.5" ry="8" fill="#efe9db"/>
          <ellipse cx="104" cy="48" rx="3" ry="4.4" fill="#b0a68e"/>
          <rect x="26" y="52" width="70" height="14" rx="7" fill={`url(#${p}-roll)`} opacity=".92"/>
          <ellipse cx="96" cy="59" rx="6" ry="7" fill="#efe9db"/>
          <ellipse cx="96" cy="59" rx="2.7" ry="3.9" fill="#b0a68e"/>
        </g>
        <g>
          <rect x="128" y="46" width="34" height="24" rx="4" fill="#1d2433"/>
          <rect x="132" y="50" width="26" height="7" rx="1.5" fill="#9fe8c8" opacity=".95"/>
          <g fill="#3c465c">
            <rect x="132" y="60" width="5.5" height="4" rx="1"/><rect x="140" y="60" width="5.5" height="4" rx="1"/>
            <rect x="148" y="60" width="5.5" height="4" rx="1"/><rect x="132" y="65.5" width="5.5" height="4" rx="1"/>
            <rect x="140" y="65.5" width="5.5" height="4" rx="1"/><rect x="148" y="65.5" width="5.5" height="4" rx="1"/>
          </g>
          <text x="156" y="56.5" textAnchor="end" fontSize="6.5" fontWeight="700" fill="#12301f" fontFamily="ui-monospace,monospace">¥38,200,000</text>
        </g>
        <Film/>
      </g>
    ),
    // 図面数量照査: 使い込まれた青焼き図面（紙の質感・折り目・杭伏図）
    drawing: (
      <g>
        <defs>
          <CommonDefs/>
          <linearGradient id={`${p}-paper`} x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stopColor="#1b4a86"/><stop offset=".5" stopColor="#123763"/>
            <stop offset="1" stopColor="#0d2c52"/>
          </linearGradient>
          <linearGradient id={`${p}-fold`} x1="0" y1="0" x2="1" y2="0">
            <stop offset="0" stopColor="#fff" stopOpacity="0"/><stop offset=".5" stopColor="#fff" stopOpacity=".14"/>
            <stop offset="1" stopColor="#fff" stopOpacity="0"/>
          </linearGradient>
          <filter id={`${p}-tex`} x="0" y="0" width="100%" height="100%">
            <feTurbulence type="fractalNoise" baseFrequency=".06 .09" numOctaves="3" result="n"/>
            <feColorMatrix in="n" type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0"/>
          </filter>
        </defs>
        <rect width="200" height="88" fill={`url(#${p}-paper)`}/>
        <rect width="200" height="88" filter={`url(#${p}-tex)`}/>
        <rect x="64" width="10" height="88" fill={`url(#${p}-fold)`}/>
        <rect x="138" width="8" height="88" fill={`url(#${p}-fold)`} opacity=".7"/>
        <g stroke="#dce9fb" strokeWidth="1.6" fill="none" opacity=".95">
          <circle cx="52" cy="30" r="8"/><circle cx="92" cy="30" r="8"/><circle cx="132" cy="30" r="8"/>
          <circle cx="52" cy="60" r="8"/><circle cx="132" cy="60" r="8"/>
          <line x1="44" y1="30" x2="60" y2="30" opacity=".6"/><line x1="52" y1="22" x2="52" y2="38" opacity=".6"/>
        </g>
        <g stroke="#dce9fb" strokeWidth=".7" opacity=".4">
          <line x1="30" y1="14" x2="30" y2="76"/><line x1="30" y1="76" x2="170" y2="76"/>
          <line x1="30" y1="14" x2="170" y2="14"/><line x1="170" y1="14" x2="170" y2="76"/>
        </g>
        <path d="m86 56 6 6 10-11" stroke="#7fe0a8" strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
        <circle cx="92" cy="60" r="13" stroke="#7fe0a8" strokeWidth="1.4" fill="none" opacity=".6"/>
        <path d="M165 48l8 15h-16z" fill="#f2a93b"/>
        <text x="165" y="61" textAnchor="middle" fontSize="10" fontWeight="800" fill="#12315b" fontFamily="sans-serif">!</text>
        <circle cx="176" cy="22" r="9" stroke="#c8b48a" strokeWidth="2.4" fill="none" opacity=".5"/>
        <Film/>
      </g>
    ),
    // マスターデータ管理: サーバールームの奥行きとLEDの光
    masterdb: (
      <g>
        <defs>
          <CommonDefs/>
          <linearGradient id={`${p}-bg`} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#0a1220"/><stop offset="1" stopColor="#101d33"/>
          </linearGradient>
          <linearGradient id={`${p}-floor`} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#22344f"/><stop offset="1" stopColor="#0c1526"/>
          </linearGradient>
          <radialGradient id={`${p}-aisle`} cx="50%" cy="30%" r="70%">
            <stop offset="0" stopColor="#3f6db3" stopOpacity=".55"/><stop offset="100%" stopColor="#3f6db3" stopOpacity="0"/>
          </radialGradient>
        </defs>
        <rect width="200" height="88" fill={`url(#${p}-bg)`}/>
        <rect y="62" width="200" height="26" fill={`url(#${p}-floor)`}/>
        <ellipse cx="100" cy="50" rx="70" ry="40" fill={`url(#${p}-aisle)`}/>
        <g>
          <path d="M12 8h44v66l-24 -6V14z" fill="#16233a"/>
          <path d="M188 8h-44v66l24-6V14z" fill="#16233a"/>
          <path d="M62 14h26v52l-12-3V18z" fill="#1a2942"/>
          <path d="M138 14h-26v52l12-3V18z" fill="#1a2942"/>
        </g>
        {Array.from({length:6}).map((_,r)=>(
          <g key={r}>
            <circle cx="22" cy={16+r*9} r="1.5" fill={r%3?'#57c7f0':'#f2a93b'} opacity=".9"/>
            <circle cx="30" cy={16+r*9} r="1.5" fill={r%2?'#3f87e0':'#57c7f0'} opacity=".8"/>
            <circle cx="178" cy={16+r*9} r="1.5" fill={r%3?'#57c7f0':'#f2a93b'} opacity=".9"/>
            <circle cx="170" cy={16+r*9} r="1.5" fill={r%2?'#3f87e0':'#57c7f0'} opacity=".8"/>
            <circle cx="70" cy={20+r*7.6} r="1.1" fill="#57c7f0" opacity=".75"/>
            <circle cx="130" cy={20+r*7.6} r="1.1" fill="#57c7f0" opacity=".75"/>
          </g>
        ))}
        <rect x="94" y="26" width="12" height="34" rx="2" fill="#233a5e"/>
        <circle cx="100" cy="32" r="1.6" fill="#7fe0a8"/><circle cx="100" cy="40" r="1.6" fill="#57c7f0"/>
        <circle cx="100" cy="48" r="1.6" fill="#57c7f0"/>
        <Film/>
      </g>
    ),
    // プラットフォーム管理: 朝の窓明かりとヘルメット
    admin: (
      <g>
        <defs>
          <CommonDefs/>
          <linearGradient id={`${p}-bg`} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#b8cde4"/>
            <stop offset="1" stopColor="#7fa3c9"/>
          </linearGradient>
          <radialGradient id={`${p}-hel`} cx="38%" cy="26%" r="85%">
            <stop offset="0" stopColor="#ffe08a"/><stop offset=".45" stopColor="#f6be4f"/>
            <stop offset="1" stopColor="#c98f1f"/>
          </radialGradient>
          <linearGradient id={`${p}-desk`} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#8c9aab"/><stop offset="1" stopColor="#5d6c80"/>
          </linearGradient>
        </defs>
        <rect width="200" height="88" fill={`url(#${p}-bg)`}/>
        <g opacity=".55">
          <rect x="118" y="8" width="30" height="38" rx="2" fill="#dfeafc"/>
          <rect x="154" y="8" width="30" height="38" rx="2" fill="#d3e2f7"/>
          <rect x="122" y="14" width="9" height="5" fill="#8fb2dd"/><rect x="134" y="14" width="9" height="5" fill="#a8c4e6"/>
          <rect x="122" y="24" width="21" height="4" fill="#9dbbe2"/>
          <rect x="158" y="14" width="22" height="10" fill="#a8c4e6"/>
          <rect x="158" y="30" width="10" height="9" fill="#8fb2dd"/>
        </g>
        <rect y="64" width="200" height="24" fill={`url(#${p}-desk)`}/>
        <ellipse cx="70" cy="70" rx="40" ry="7" fill="#31435c" opacity=".4"/>
        <path d="M38 64a32 32 0 0 1 64 0z" fill={`url(#${p}-hel)`}/>
        <path d="M30 64h80a4 4 0 0 1-4 5H34a4 4 0 0 1-4-5z" fill="#e5b23e"/>
        <path d="M50 42a24 24 0 0 1 14-8" stroke="#fff" strokeWidth="3.4" fill="none" opacity=".8" strokeLinecap="round"/>
        <rect x="64" y="30" width="12" height="7" rx="2" fill="#f6d27a"/>
        <Film/>
      </g>
    ),
  };

  return (
    <svg viewBox="0 0 200 88" preserveAspectRatio="xMidYMid slice" style={{width:'100%',height:'100%',display:'block'}}>
      {scenes[id] || null}
    </svg>
  );
};
window.MenuArt2 = MenuArt2;
