/* global React */
// Top-down UAV silhouettes. Solid, symmetric, abstract — readable at 24px and 120px.
window.NicheIcon = function NicheIcon({ kind, fill = "currentColor" }) {
  const c = { fill, stroke: "none" };
  switch (kind) {

    case "plane-recon": return (
      <svg viewBox="0 0 100 100" {...c}>
        <rect x="6" y="46" width="88" height="6"/>
        <path d="M48 14 Q47 12 50 12 Q53 12 52 14 L52 78 L48 78 Z"/>
        <rect x="34" y="74" width="32" height="5"/>
        <rect x="32" y="72" width="3" height="10"/>
        <rect x="65" y="72" width="3" height="10"/>
      </svg>
    );

    case "plane-photo": return (
      <svg viewBox="0 0 100 100" {...c}>
        <rect x="8" y="44" width="84" height="6"/>
        <path d="M46 16 Q46 12 50 12 Q54 12 54 16 L54 80 L46 80 Z"/>
        <rect x="36" y="76" width="28" height="5"/>
        <circle cx="50" cy="55" r="5"/>
      </svg>
    );

    case "plane-kami": return (
      <svg viewBox="0 0 100 100" {...c}>
        <path d="M50 24 L92 56 L92 60 L50 50 L8 60 L8 56 Z"/>
        <path d="M47 12 Q47 8 50 8 Q53 8 53 12 L53 84 L47 84 Z"/>
        <rect x="40" y="80" width="20" height="4"/>
      </svg>
    );

    case "fpv": return (
      <svg viewBox="0 0 100 100" {...c}>
        <rect x="46" y="14" width="8" height="72" transform="rotate(45 50 50)"/>
        <rect x="46" y="14" width="8" height="72" transform="rotate(-45 50 50)"/>
        <circle cx="20" cy="20" r="14"/>
        <circle cx="80" cy="20" r="14"/>
        <circle cx="20" cy="80" r="14"/>
        <circle cx="80" cy="80" r="14"/>
        <rect x="40" y="40" width="20" height="20"/>
      </svg>
    );

    case "fiber": return (
      <svg viewBox="0 0 100 100" {...c}>
        <rect x="46" y="14" width="8" height="72" transform="rotate(45 50 50)"/>
        <rect x="46" y="14" width="8" height="72" transform="rotate(-45 50 50)"/>
        <circle cx="20" cy="20" r="13"/>
        <circle cx="80" cy="20" r="13"/>
        <circle cx="20" cy="80" r="13"/>
        <circle cx="80" cy="80" r="13"/>
        <rect x="40" y="40" width="20" height="20"/>
        <circle cx="50" cy="50" r="6" fill="none" stroke={fill} strokeWidth="2"/>
      </svg>
    );

    case "bomber": return (
      <svg viewBox="0 0 100 100" {...c}>
        {[0, 60, 120, 180, 240, 300].map(deg => (
          <rect key={deg} x="47" y="20" width="6" height="60" transform={`rotate(${deg} 50 50)`}/>
        ))}
        {[0, 60, 120, 180, 240, 300].map(deg => {
          const rad = (deg - 90) * Math.PI / 180;
          const cx = 50 + Math.cos(rad) * 32;
          const cy = 50 + Math.sin(rad) * 32;
          return <circle key={deg} cx={cx} cy={cy} r="11"/>;
        })}
        <rect x="38" y="38" width="24" height="24"/>
      </svg>
    );

    case "interceptor-c": return (
      <svg viewBox="0 0 100 100" {...c}>
        <rect x="47" y="20" width="6" height="60" transform="rotate(30 50 50)"/>
        <rect x="47" y="20" width="6" height="60" transform="rotate(-30 50 50)"/>
        <circle cx="28" cy="30" r="11"/>
        <circle cx="72" cy="30" r="11"/>
        <circle cx="28" cy="70" r="11"/>
        <circle cx="72" cy="70" r="11"/>
        <rect x="44" y="32" width="12" height="36"/>
      </svg>
    );

    case "interceptor-p": return (
      <svg viewBox="0 0 100 100" {...c}>
        <rect x="10" y="48" width="80" height="5"/>
        <path d="M48 8 Q47 4 50 4 Q53 4 52 8 L52 82 L48 82 Z"/>
        <rect x="38" y="78" width="24" height="4"/>
      </svg>
    );

    case "mothership": return (
      <svg viewBox="0 0 100 100" {...c}>
        <rect x="4" y="46" width="92" height="7"/>
        <path d="M46 12 Q46 8 50 8 Q54 8 54 12 L54 82 L46 82 Z"/>
        <rect x="34" y="78" width="32" height="5"/>
        <circle cx="22" cy="58" r="4"/>
        <circle cx="78" cy="58" r="4"/>
      </svg>
    );

    case "copter-recon": return (
      <svg viewBox="0 0 100 100" {...c}>
        <rect x="46" y="14" width="8" height="72" transform="rotate(45 50 50)"/>
        <rect x="46" y="14" width="8" height="72" transform="rotate(-45 50 50)"/>
        <circle cx="20" cy="20" r="13"/>
        <circle cx="80" cy="20" r="13"/>
        <circle cx="20" cy="80" r="13"/>
        <circle cx="80" cy="80" r="13"/>
        <rect x="38" y="38" width="24" height="24"/>
        <circle cx="50" cy="58" r="5" fill="none" stroke={fill} strokeWidth="2.5"/>
      </svg>
    );

    case "plane-bomber": return (
      <svg viewBox="0 0 100 100" {...c}>
        <rect x="6" y="44" width="88" height="7"/>
        <path d="M46 14 Q46 10 50 10 Q54 10 54 14 L54 82 L46 82 Z"/>
        <rect x="34" y="78" width="32" height="5"/>
        <circle cx="26" cy="56" r="3"/>
        <circle cx="74" cy="56" r="3"/>
        <circle cx="50" cy="68" r="3"/>
      </svg>
    );

    case "relay": return (
      <svg viewBox="0 0 100 100" {...c}>
        <rect x="10" y="46" width="80" height="6"/>
        <path d="M47 16 Q47 12 50 12 Q53 12 53 16 L53 80 L47 80 Z"/>
        <rect x="36" y="76" width="28" height="5"/>
        <rect x="49" y="22" width="2" height="14"/>
        <circle cx="50" cy="22" r="3"/>
      </svg>
    );

    case "aerostat": return (
      <svg viewBox="0 0 100 100" {...c}>
        <ellipse cx="50" cy="40" rx="32" ry="24"/>
        <path d="M40 62 L50 88 L60 62 Z"/>
      </svg>
    );

    case "decoy": return (
      <svg viewBox="0 0 100 100" {...c}>
        <g opacity="0.45">
          <rect x="10" y="46" width="80" height="6"/>
          <path d="M47 14 Q47 10 50 10 Q53 10 53 14 L53 80 L47 80 Z"/>
          <rect x="36" y="76" width="28" height="5"/>
        </g>
        <text x="50" y="58" fontSize="26" fontWeight="800" textAnchor="middle"
              fill={fill} stroke="none" fontFamily="JetBrains Mono, monospace">?</text>
      </svg>
    );

    default: return <svg viewBox="0 0 100 100"/>;
  }
};