// 手繪線條 SVG 圖示
const NODE_ICONS = {
  wafer: (
    <g className="node-icon">
      <circle cx="0" cy="0" r="18" />
      <circle cx="0" cy="0" r="13" />
      <circle cx="0" cy="0" r="8" />
      <line x1="-20" y1="-2" x2="20" y2="-2" />
      <path d="M -16 11 L -2 -3" />
    </g>
  ),
  gear: (
    <g className="node-icon">
      <circle cx="0" cy="0" r="8" />
      <path d="M 0 -18 L 0 -12 M 0 12 L 0 18 M -18 0 L -12 0 M 12 0 L 18 0 M -13 -13 L -8.5 -8.5 M 8.5 8.5 L 13 13 M 13 -13 L 8.5 -8.5 M -8.5 8.5 L -13 13" />
    </g>
  ),
  flask: (
    <g className="node-icon">
      <path d="M -7 -16 L -7 -8 L -17 12 Q -17 18 -12 18 L 12 18 Q 17 18 17 12 L 7 -8 L 7 -16 Z" />
      <line x1="-9" y1="-16" x2="9" y2="-16" />
      <line x1="-13" y1="4" x2="13" y2="4" />
      <circle cx="-4" cy="11" r="1.6" />
      <circle cx="5" cy="9" r="1.6" />
    </g>
  ),
  circuit: (
    <g className="node-icon">
      <rect x="-16" y="-16" width="32" height="32" />
      <circle cx="-8" cy="-8" r="3" />
      <circle cx="8" cy="-8" r="3" />
      <circle cx="-8" cy="8" r="3" />
      <circle cx="8" cy="8" r="3" />
      <path d="M -8 -5 L -8 5 M 8 -5 L 8 5 M -5 -8 L 5 -8 M -5 8 L 5 8" />
    </g>
  ),
  "chip-design": (
    <g className="node-icon">
      <rect x="-14" y="-14" width="28" height="28" />
      <rect x="-7" y="-7" width="14" height="14" />
      <path d="M -14 -8 L -19 -8 M -14 -2 L -19 -2 M -14 4 L -19 4 M -14 10 L -19 10
                M 14 -8 L 19 -8 M 14 -2 L 19 -2 M 14 4 L 19 4 M 14 10 L 19 10
                M -8 -14 L -8 -19 M -2 -14 L -2 -19 M 4 -14 L 4 -19 M 10 -14 L 10 -19
                M -8 14 L -8 19 M -2 14 L -2 19 M 4 14 L 4 19 M 10 14 L 10 19" />
    </g>
  ),
  "wafer-foundry": (
    <g className="node-icon">
      <ellipse cx="0" cy="8" rx="20" ry="6" />
      <ellipse cx="0" cy="0" rx="20" ry="6" />
      <ellipse cx="0" cy="-8" rx="20" ry="6" />
      <path d="M -20 -8 L -20 8 M 20 -8 L 20 8" />
    </g>
  ),
  memory: (
    <g className="node-icon">
      <rect x="-18" y="-12" width="36" height="24" />
      <line x1="-18" y1="-4" x2="18" y2="-4" />
      <line x1="-18" y1="4"  x2="18" y2="4" />
      <path d="M -12 -12 L -12 -16 M -4 -12 L -4 -16 M 4 -12 L 4 -16 M 12 -12 L 12 -16
                M -12 12 L -12 16 M -4 12 L -4 16 M 4 12 L 4 16 M 12 12 L 12 16" />
    </g>
  ),
  package: (
    <g className="node-icon">
      <path d="M 0 -16 L 18 -8 L 18 12 L 0 20 L -18 12 L -18 -8 Z" />
      <path d="M 0 -16 L 0 4 M 0 4 L 18 -8 M 0 4 L -18 -8" />
      <line x1="-18" y1="-8" x2="0" y2="0" strokeDasharray="2 3" />
    </g>
  ),
  board: (
    <g className="node-icon">
      <rect x="-18" y="-13" width="36" height="26" />
      <circle cx="-10" cy="-5" r="1.6" />
      <circle cx="0" cy="-5" r="1.6" />
      <circle cx="10" cy="-5" r="1.6" />
      <circle cx="-10" cy="5" r="1.6" />
      <circle cx="0" cy="5" r="1.6" />
      <circle cx="10" cy="5" r="1.6" />
      <path d="M -10 -5 L -10 5 M 0 -5 L 0 5 M 10 -5 L 10 5" />
    </g>
  ),
  device: (
    <g className="node-icon">
      <rect x="-12" y="-18" width="24" height="36" rx="3" />
      <line x1="-12" y1="-12" x2="12" y2="-12" />
      <line x1="-12" y1="12" x2="12" y2="12" />
      <circle cx="0" cy="15" r="1.6" />
    </g>
  ),
};

window.NODE_ICONS = NODE_ICONS;

// ── AI / 雲端 / 金融科技 獨立圖示元件 ──────────────────────

function AiChipIcon({ size = 20, color = 'currentColor', strokeWidth = 1.5 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
         stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
      {/* 外框 */}
      <rect x="4" y="4" width="16" height="16" rx="2" />
      {/* 中央菱形 */}
      <polygon points="12,8 16,12 12,16 8,12" />
      {/* 腳位 — 上下左右各 2 條 */}
      <line x1="9"  y1="4"  x2="9"  y2="2"  />
      <line x1="15" y1="4"  x2="15" y2="2"  />
      <line x1="9"  y1="20" x2="9"  y2="22" />
      <line x1="15" y1="20" x2="15" y2="22" />
      <line x1="4"  y1="9"  x2="2"  y2="9"  />
      <line x1="4"  y1="15" x2="2"  y2="15" />
      <line x1="20" y1="9"  x2="22" y2="9"  />
      <line x1="20" y1="15" x2="22" y2="15" />
    </svg>
  );
}

function CloudIcon({ size = 20, color = 'currentColor', strokeWidth = 1.5 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
         stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
      <path d="M18 10a6 6 0 0 0-11.74-1.76A4 4 0 1 0 6 17h12a4 4 0 0 0 0-7z" />
    </svg>
  );
}

function NeuralIcon({ size = 20, color = 'currentColor', strokeWidth = 1.5 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
         stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
      {/* 三層：輸入(左)、隱層(中)、輸出(右) */}
      <circle cx="4"  cy="8"  r="2" />
      <circle cx="4"  cy="16" r="2" />
      <circle cx="12" cy="6"  r="2" />
      <circle cx="12" cy="12" r="2" />
      <circle cx="12" cy="18" r="2" />
      <circle cx="20" cy="12" r="2" />
      {/* 連線 */}
      <line x1="6"  y1="8"  x2="10" y2="6"  />
      <line x1="6"  y1="8"  x2="10" y2="12" />
      <line x1="6"  y1="8"  x2="10" y2="18" />
      <line x1="6"  y1="16" x2="10" y2="6"  />
      <line x1="6"  y1="16" x2="10" y2="12" />
      <line x1="6"  y1="16" x2="10" y2="18" />
      <line x1="14" y1="6"  x2="18" y2="12" />
      <line x1="14" y1="12" x2="18" y2="12" />
      <line x1="14" y1="18" x2="18" y2="12" />
    </svg>
  );
}

function DataPipelineIcon({ size = 20, color = 'currentColor', strokeWidth = 1.5 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
         stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
      {/* 中央圓柱 */}
      <ellipse cx="12" cy="9"  rx="4" ry="2" />
      <line x1="8"  y1="9"  x2="8"  y2="15" />
      <line x1="16" y1="9"  x2="16" y2="15" />
      <ellipse cx="12" cy="15" rx="4" ry="2" />
      {/* 左箭頭流入 */}
      <line x1="2" y1="12" x2="7" y2="12" />
      <polyline points="5,10 7,12 5,14" />
      {/* 右箭頭流出 */}
      <line x1="17" y1="12" x2="22" y2="12" />
      <polyline points="20,10 22,12 20,14" />
    </svg>
  );
}

function SecurityIcon({ size = 20, color = 'currentColor', strokeWidth = 1.5 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
         stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
      {/* 盾牌 */}
      <path d="M12 2L4 6v6c0 5 4 9 8 10 4-1 8-5 8-10V6l-8-4z" />
      {/* 鎖體 */}
      <rect x="9" y="12" width="6" height="5" rx="1" />
      {/* 鎖弓 */}
      <path d="M10 12V10a2 2 0 0 1 4 0v2" />
    </svg>
  );
}

function FinanceIcon({ size = 20, color = 'currentColor', strokeWidth = 1.5 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
         stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
      {/* 折線圖 */}
      <polyline points="2,18 7,12 11,15 16,8 22,10" />
      {/* 幣符號（底部右側） */}
      <circle cx="19" cy="18" r="3" />
      <line x1="19" y1="15.5" x2="19" y2="14.5" />
      <line x1="19" y1="21.5" x2="19" y2="20.5" />
    </svg>
  );
}

// ── 雷達區專用圖示（2026-07-06）───────────────────────────────

// 雷達盤：同心圓+十字準星，掃描線可選擇旋轉（spin=true 時套用 .radar-sweep 動畫）
function RadarDialIcon({ size = 20, color = 'currentColor', strokeWidth = 1.5, spin = false, style }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={style}
         stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="9.5" />
      <circle cx="12" cy="12" r="6" />
      <circle cx="12" cy="12" r="1.1" fill={color} stroke="none" />
      <line x1="12" y1="2" x2="12" y2="4.3" />
      <line x1="12" y1="19.7" x2="12" y2="22" />
      <line x1="2" y1="12" x2="4.3" y2="12" />
      <line x1="19.7" y1="12" x2="22" y2="12" />
      <g className={spin ? 'radar-sweep' : ''}>
        <line x1="12" y1="12" x2="12" y2="3" />
      </g>
    </svg>
  );
}

// 黃金交叉：兩條交叉曲線 + 交叉點實心圓（均線黃金交叉的抽象化）
function GoldenCrossIcon({ size = 20, color = 'currentColor', strokeWidth = 1.5, style }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={style}
         stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 17 Q9 17 12 12 Q15 7 21 7" />
      <path d="M3 8 Q9 8 12 12 Q15 16 21 16" />
      <circle cx="12" cy="12" r="1.3" fill={color} stroke="none" />
    </svg>
  );
}

// 智慧雷達：放大鏡疊在簡化網格上
function SmartLensIcon({ size = 20, color = 'currentColor', strokeWidth = 1.5, style }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={style}
         stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 4h7M3 4v7M3 11h5M14 3.5v5M14 8.5h-4" opacity="0.55" />
      <circle cx="14.5" cy="14.5" r="5.2" />
      <line x1="18.3" y1="18.3" x2="21.5" y2="21.5" />
    </svg>
  );
}

// 券資比：天秤（資↔券兩端配重）
function ScaleBalanceIcon({ size = 20, color = 'currentColor', strokeWidth = 1.5, style }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={style}
         stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
      <line x1="12" y1="3" x2="12" y2="19" />
      <line x1="4" y1="7" x2="20" y2="7" />
      <path d="M4 7 L1.5 13 Q4 15.5 6.5 13 Z" />
      <path d="M20 7 L17.5 13 Q20 15.5 22.5 13 Z" />
      <line x1="8.5" y1="21" x2="15.5" y2="21" />
    </svg>
  );
}

// 籌碼：三條分岔的資金流（外資/投信/自營），呼應產業流域圖鑑的河流母題
function FlowDeltaIcon({ size = 20, color = 'currentColor', strokeWidth = 1.5, style }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={style}
         stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 4 Q3 10 8 12" />
      <path d="M3 12 Q6 12 8 12" />
      <path d="M3 20 Q3 14 8 12" />
      <path d="M8 12 Q16 12 21 12" strokeWidth={strokeWidth * 1.3} />
    </svg>
  );
}

window.AiChipIcon       = AiChipIcon;
window.CloudIcon        = CloudIcon;
window.NeuralIcon       = NeuralIcon;
window.DataPipelineIcon = DataPipelineIcon;
window.SecurityIcon     = SecurityIcon;
window.FinanceIcon      = FinanceIcon;
window.RadarDialIcon    = RadarDialIcon;
window.GoldenCrossIcon  = GoldenCrossIcon;
window.SmartLensIcon    = SmartLensIcon;
window.ScaleBalanceIcon = ScaleBalanceIcon;
window.FlowDeltaIcon    = FlowDeltaIcon;
