// 業務メニューカード用イラスト — 施工図・土木断面図テイスト（オリジナルSVG）
// 共通言語: 地表線＋地面ハッチング / 図面のトンボ（照準マーク） / 寸法線
// 配色: スレート線画＋ケミコブルー＋セーフティイエロー。図面数量照査のみ青焼き図面（ダーク地）。
const MENU_ART_BG = {
  search:   '#EDF3FB',   // 青図紙
  report:   '#F6F3EA',   // クラフト紙
  ict:      '#E9F2EF',
  estimate: '#FAF1E6',
  drawing:  '#16406F',   // 青焼き図面
  masterdb: '#F0F1F5',
  admin:    '#EAF1F8',
};

const MenuArt = ({ id }) => {
  const LN   = '#2b3a55';   // スレート線
  const BL   = '#0b57c4';   // ケミコブルー
  const LB   = '#cfe0f7';   // ライトブルー
  const SF   = '#f2a93b';   // セーフティイエロー
  const s    = { stroke:LN, strokeWidth:2.2, fill:'none', strokeLinecap:'round', strokeLinejoin:'round' };
  const sb   = { ...s, stroke:BL };

  // 図面のトンボ（照準マーク）
  const Reg = ({x, y, r=6, color=LN, op=.4}) => (
    <g stroke={color} strokeWidth="1.2" opacity={op} fill="none">
      <line x1={x-r} y1={y} x2={x+r} y2={y}/>
      <line x1={x} y1={y-r} x2={x} y2={y+r}/>
      <circle cx={x} cy={y} r={r*0.55}/>
    </g>
  );

  // 地表線＋地面ハッチング（土木断面図の記法）
  const Ground = ({x1, x2, y, color=LN, n=6}) => (
    <g stroke={color} strokeLinecap="round">
      <line x1={x1} y1={y} x2={x2} y2={y} strokeWidth="2.4"/>
      {Array.from({length:n}).map((_,i)=>{
        const x = x1 + (i+0.7)*(x2-x1)/n;
        return <line key={i} x1={x} y1={y} x2={x-6} y2={y+7} strokeWidth="1.4" opacity=".65"/>;
      })}
    </g>
  );

  // 寸法線（両端矢印）
  const Dim = ({x1, x2, y, color=LN, op=.75}) => (
    <g stroke={color} strokeWidth="1.4" opacity={op} fill="none" strokeLinecap="round">
      <line x1={x1} y1={y} x2={x2} y2={y}/>
      <path d={`M${x1+5} ${y-3} L${x1} ${y} L${x1+5} ${y+3}`}/>
      <path d={`M${x2-5} ${y-3} L${x2} ${y} L${x2-5} ${y+3}`}/>
      <line x1={x1} y1={y-5} x2={x1} y2={y+5}/>
      <line x1={x2} y1={y-5} x2={x2} y2={y+5}/>
    </g>
  );

  const arts = {
    // AI検索基盤: ボーリング柱状図（地層ストライプの帳票）＋虫めがね
    search: (
      <g>
        <rect x="54" y="12" width="46" height="60" rx="4" {...s} fill="#fff"/>
        <rect x="60" y="24" width="34" height="9"  fill={LB}/>
        <rect x="60" y="37" width="34" height="9"  fill="#e8dcc4"/>
        <rect x="60" y="50" width="34" height="9"  fill="#d7e5dc"/>
        <line x1="60" y1="18" x2="86" y2="18" {...s} strokeWidth="1.6"/>
        <g stroke={LN} strokeWidth="1" opacity=".55">
          <line x1="63" y1="26" x2="69" y2="31"/><line x1="72" y1="26" x2="78" y2="31"/><line x1="81" y1="26" x2="87" y2="31"/>
          <circle cx="66" cy="41" r="1.2" fill={LN}/><circle cx="75" cy="43" r="1.2" fill={LN}/><circle cx="84" cy="41" r="1.2" fill={LN}/>
        </g>
        <circle cx="121" cy="48" r="17" {...sb} strokeWidth="3" fill="#fff" fillOpacity=".72"/>
        <line x1="134" y1="61" x2="147" y2="74" {...sb} strokeWidth="4.2"/>
        <path d="m114 48 5 5 9-9" {...sb} strokeWidth="2.4"/>
        <Reg x="166" y="22" color={BL} op=".5"/>
        <Reg x="180" y="62" r="4.5"/>
      </g>
    ),
    // 工事作成ツール: 日報クリップボード＋クレーン＋地表線
    report: (
      <g>
        <path d="M142 72V30l32-9M174 21v14M174 27l-22 17" {...s} strokeWidth="2"/>
        <line x1="168" y1="23" x2="168" y2="40" {...s} strokeWidth="1.4"/>
        <path d="M164 40h8v7h-8z" {...s} strokeWidth="1.6" fill={SF}/>
        <Ground x1="128" x2="188" y="72"/>
        <rect x="56" y="14" width="52" height="60" rx="5" {...s} fill="#fff"/>
        <rect x="72" y="9" width="20" height="10" rx="3" {...s} fill={SF}/>
        <line x1="66" y1="30" x2="98" y2="30" {...s} strokeWidth="1.7"/>
        <line x1="66" y1="40" x2="98" y2="40" {...s} strokeWidth="1.7"/>
        <line x1="66" y1="50" x2="86" y2="50" {...s} strokeWidth="1.7"/>
        <circle cx="102" cy="60" r="13" fill={BL} stroke="none"/>
        <path d="m96 60 4.5 4.5 8-9" stroke="#fff" strokeWidth="2.8" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
        <Reg x="34" y="24" r="5"/>
      </g>
    ),
    // ICT地盤改良工ツール: 地盤改良機（リーダー＋オーガ）＋地中の改良体＋通信波
    ict: (
      <g>
        <Ground x1="24" x2="182" y="58" n={9}/>
        <rect x="104" y="58" width="18" height="26" fill={LB} stroke={BL} strokeWidth="1.8"/>
        <g stroke={BL} strokeWidth="1" opacity=".6">
          <line x1="107" y1="62" x2="119" y2="62"/><line x1="107" y1="68" x2="119" y2="68"/>
          <line x1="107" y1="74" x2="119" y2="74"/><line x1="107" y1="80" x2="119" y2="80"/>
        </g>
        <line x1="113" y1="14" x2="113" y2="58" {...s} strokeWidth="3"/>
        <path d="M113 14l-32 30" {...s} strokeWidth="2"/>
        <rect x="66" y="42" width="26" height="14" rx="3" {...s} fill="#fff"/>
        <rect x="60" y="54" width="38" height="7" rx="3.5" {...s} fill={LN}/>
        <line x1="107" y1="22" x2="119" y2="22" {...s} strokeWidth="2"/>
        <line x1="107" y1="30" x2="119" y2="30" {...s} strokeWidth="2"/>
        <g stroke={SF} strokeWidth="2" fill="none" strokeLinecap="round">
          <path d="M140 30a12 12 0 0 1 0 17"/>
          <path d="M147 23a22 22 0 0 1 0 31"/>
        </g>
        <circle cx="134" cy="38" r="2.6" fill={SF}/>
        <Reg x="176" y="20" color={BL} op=".5"/>
      </g>
    ),
    // 見積業務効率化: 見積書（¥）＋承認印＋巻き図面＋寸法線
    estimate: (
      <g>
        <rect x="56" y="12" width="50" height="60" rx="5" {...s} fill="#fff"/>
        <line x1="65" y1="24" x2="97" y2="24" {...s} strokeWidth="1.7"/>
        <line x1="65" y1="33" x2="97" y2="33" {...s} strokeWidth="1.7"/>
        <text x="81" y="60" textAnchor="middle" fontSize="22" fontWeight="800" fill={BL} fontFamily="sans-serif">¥</text>
        <circle cx="118" cy="58" r="12" stroke="#d0543c" strokeWidth="2.2" fill="#fff" fillOpacity=".85"/>
        <circle cx="118" cy="58" r="8" stroke="#d0543c" strokeWidth="1" fill="none" opacity=".6"/>
        <line x1="112" y1="58" x2="124" y2="58" stroke="#d0543c" strokeWidth="1.6"/>
        <g {...s}>
          <rect x="138" y="20" width="40" height="13" rx="6.5" fill="#fff"/>
          <ellipse cx="178" cy="26.5" rx="4.5" ry="6.5" fill={LB}/>
          <ellipse cx="138" cy="26.5" rx="4.5" ry="6.5" fill="#fff"/>
        </g>
        <Dim x1="140" x2="180" y="52"/>
        <Reg x="36" y="66" r="5"/>
      </g>
    ),
    // 図面数量照査: 青焼き図面（杭伏図）＋照査マーク
    drawing: (
      <g>
        <g stroke="#ffffff" opacity=".22" strokeWidth=".8">
          <line x1="0" y1="22" x2="200" y2="22"/><line x1="0" y1="44" x2="200" y2="44"/><line x1="0" y1="66" x2="200" y2="66"/>
          <line x1="40" y1="0" x2="40" y2="88"/><line x1="80" y1="0" x2="80" y2="88"/>
          <line x1="120" y1="0" x2="120" y2="88"/><line x1="160" y1="0" x2="160" y2="88"/>
        </g>
        <g stroke="#cfe0f7" strokeWidth="1.8" fill="none">
          <circle cx="60" cy="33" r="7"/><circle cx="100" cy="33" r="7"/><circle cx="140" cy="33" r="7"/>
          <circle cx="60" cy="59" r="7"/><circle cx="140" cy="59" r="7"/>
          <line x1="53" y1="33" x2="67" y2="33" opacity=".6"/><line x1="60" y1="26" x2="60" y2="40" opacity=".6"/>
        </g>
        <path d="m95 55 5 5 9-9" stroke="#7fe0a8" strokeWidth="2.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
        <path d="M173 51l7 13h-14z" fill={SF} stroke="none"/>
        <text x="173" y="62.5" textAnchor="middle" fontSize="9" fontWeight="800" fill="#16406F" fontFamily="sans-serif">!</text>
        <rect x="148" y="72" width="44" height="12" fill="none" stroke="#cfe0f7" strokeWidth="1"/>
        <line x1="163" y1="72" x2="163" y2="84" stroke="#cfe0f7" strokeWidth="1"/>
        <Reg x="22" y="16" color="#cfe0f7" op=".7"/>
      </g>
    ),
    // マスターデータ管理: 地層断面×データノード（柱状図とリレーション）
    masterdb: (
      <g>
        <Ground x1="24" x2="182" y="24" n={9}/>
        <path d="M32 40c22-5 44 5 66 0s44 5 76 0" stroke={LN} strokeWidth="1.4" fill="none" opacity=".5"/>
        <path d="M32 58c22-5 44 5 66 0s44 5 76 0" stroke={LN} strokeWidth="1.4" fill="none" opacity=".5"/>
        <rect x="32" y="28" width="150" height="10" fill={LB} opacity=".55"/>
        <rect x="32" y="44" width="150" height="10" fill="#e8dcc4" opacity=".7"/>
        <rect x="32" y="62" width="150" height="10" fill="#d7e5dc" opacity=".8"/>
        <line x1="140" y1="30" x2="140" y2="70" {...sb} strokeWidth="2"/>
        <circle cx="140" cy="33" r="5.5" fill="#fff" {...sb} strokeWidth="2.2"/>
        <circle cx="140" cy="49" r="5.5" fill="#fff" stroke={SF} strokeWidth="2.2"/>
        <circle cx="140" cy="67" r="5.5" fill="#fff" {...s} strokeWidth="2.2"/>
        <g fontFamily="sans-serif" fontSize="8" fontWeight="700" fill={LN} opacity=".8">
          <text x="44" y="36">物件</text>
          <text x="44" y="52">取引先</text>
          <text x="44" y="70">社員</text>
        </g>
        <Reg x="176" y="78" r="5"/>
      </g>
    ),
    // プラットフォーム管理: ヘルメット＋シールド＋地表線
    admin: (
      <g>
        <Ground x1="30" x2="186" y="70" n={9}/>
        <path d="M70 56a26 26 0 0 1 52 0" fill={SF} {...s}/>
        <path d="M62 56h68" {...s} strokeWidth="2.6"/>
        <path d="M90 30h12v-6h-12z" {...s} strokeWidth="1.8" fill="#fff"/>
        <line x1="96" y1="34" x2="96" y2="52" stroke="#fff" strokeWidth="3" opacity=".85"/>
        <path d="M152 24l18 6.5V44c0 12-7.6 20-18 24-10.4-4-18-12-18-24V30.5Z" {...sb} strokeWidth="2.6" fill="#fff"/>
        <path d="m144 43 6 6 10-11" {...sb} strokeWidth="2.6"/>
        <Reg x="40" y="20" r="5"/>
      </g>
    ),
  };

  return (
    <svg viewBox="0 0 200 88" preserveAspectRatio="xMidYMid meet" style={{width:'100%',height:'100%'}}>
      {arts[id] || null}
    </svg>
  );
};
window.MenuArt = MenuArt;
window.MENU_ART_BG = MENU_ART_BG;
