// talon-icons.jsx — category glyphs (single 1.5px stroke, currentColor).
// Each is a 24x24 viewBox React component.

const _ic = (paths) => (props) => (
  <svg viewBox="0 0 24 24" width={props.size || 16} height={props.size || 16}
       fill="none" stroke="currentColor" strokeWidth="1.5"
       strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    {paths}
  </svg>
);

const CityIcon = _ic(<>
  <path d="M4 20V11l3-2 3 2V8l4-3 4 3v12" />
  <path d="M4 20h16" />
  <path d="M9 20v-4h3v4" />
  <path d="M16 12v0M16 16v0" />
</>);

const RuinIcon = _ic(<>
  <path d="M5 21V8l3 2 1-3 2 3 1-2v9" />
  <path d="M13 21V12l3 2V9l3 2v9" />
  <path d="M4 21h17" />
</>);

const LandmarkIcon = _ic(<>
  <path d="M3 19h18" />
  <path d="M6 19l5-11 3 6 2-3 3 8" />
  <path d="M9.5 12.5l1.5-1 1.5 2" />
</>);

const CharacterIcon = _ic(<>
  <circle cx="12" cy="8" r="3.2" />
  <path d="M5.5 20a6.5 6.5 0 0 1 13 0" />
</>);

const RegionIcon = _ic(<>
  <path d="M9 4l6 2 6-2v14l-6 2-6-2-6 2V6z" />
  <path d="M9 4v14M15 6v14" />
</>);

const DotIcon = _ic(<>
  <circle cx="12" cy="12" r="3.5" />
</>);

// brand / site mark — a talon-like triangle
const TalonMark = (props) => (
  <svg viewBox="0 0 24 24" width={props.size || 18} height={props.size || 18}
       fill="none" stroke="currentColor" strokeWidth={props.weight || 1.6}
       strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M12 3l7 16-7-4-7 4z" />
    <path d="M12 3v8" />
  </svg>
);

const ICONS = {
  city: CityIcon,
  ruin: RuinIcon,
  landmark: LandmarkIcon,
  character: CharacterIcon,
  region: RegionIcon,
  default: DotIcon,
};

const iconFor = (cat) => ICONS[cat] || ICONS.default;

Object.assign(window, { ICONS, iconFor, TalonMark, CityIcon, RuinIcon, LandmarkIcon, CharacterIcon, RegionIcon, DotIcon });