/* icons.jsx — icon set + shared atoms (window exports) */
const Svg = ({ size = 22, children, fill = "none", sw = 1.8, ...p }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke="currentColor"
       strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" {...p}>{children}</svg>
);
const IconHome = (p) => (<Svg {...p}><path d="M4 11.5 12 4l8 7.5M6 10v9.5h12V10" /><path d="M10 19.5v-5h4v5" /></Svg>);
const IconSchedule = (p) => (<Svg {...p}><rect x="3.5" y="5" width="17" height="15.5" rx="2.4" /><path d="M3.5 9.5h17M8 3.2v3.4M16 3.2v3.4M7.5 13h3M7.5 16.5h6" /></Svg>);
const IconOar = (p) => (<Svg {...p}><path d="M4 20 20 4M14.5 4H20v5.5M9.5 12.2l2.3 2.3" /><path d="M4.4 16.2c-1.3 1.3-1.4 3-.6 3.9.9.8 2.6.7 3.9-.6l2-2-3.3-3.3z" /></Svg>);
const IconMedal = (p) => (<Svg {...p}><path d="M8 3h3l2 4M16 3h-3M9 7 7.5 4" /><circle cx="12" cy="15" r="5.5" /><path d="M12 12.5l.9 1.8 2 .3-1.4 1.4.3 2-1.8-1-1.8 1 .3-2L9.1 14.6l2-.3z" /></Svg>);
const IconTeams = (p) => (<Svg {...p}><circle cx="9" cy="8" r="3" /><path d="M3.5 19.5a5.5 5.5 0 0 1 11 0M16 6.2a3 3 0 0 1 0 5.6M17.5 19.5a5.5 5.5 0 0 0-3.2-5" /></Svg>);
const IconSearch = (p) => (<Svg {...p}><circle cx="11" cy="11" r="6.5" /><path d="m20 20-3.6-3.6" /></Svg>);
const IconClock = (p) => (<Svg {...p}><circle cx="12" cy="12" r="8.5" /><path d="M12 7.5V12l3 2" /></Svg>);
const IconChevron = ({ dir = "down", ...p }) => (<Svg {...p} style={{ transform: dir === "up" ? "rotate(180deg)" : "none" }}><path d="m6 9 6 6 6-6" /></Svg>);
const IconArrow = (p) => (<Svg {...p}><path d="M5 12h13M13 6l6 6-6 6" /></Svg>);
const IconPin = (p) => (<Svg {...p}><path d="M12 21s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11Z" /><circle cx="12" cy="10" r="2.5" /></Svg>);
const IconCal = (p) => (<Svg {...p}><rect x="3.5" y="5" width="17" height="15.5" rx="2.2" /><path d="M3.5 9.5h17M8 3.4v3.2M16 3.4v3.2" /></Svg>);
const IconFlame = (p) => (<Svg {...p}><path d="M12 3c1 3-1.5 4-1.5 6.5A1.5 1.5 0 0 0 12 11c1 0 1.7-.8 1.7-1.7C15.5 11 17 13 17 15.5a5 5 0 0 1-10 0C7 12 9 9.5 12 3Z" /></Svg>);
const IconTrophy = (p) => (<Svg {...p}><path d="M7 4h10v4a5 5 0 0 1-10 0V4Z" /><path d="M7 5H4v2a3 3 0 0 0 3 3M17 5h3v2a3 3 0 0 1-3 3M9 20h6M12 14v6" /></Svg>);
const IconRule = (p) => (<Svg {...p}><rect x="4.5" y="3.5" width="15" height="17" rx="2.2" /><path d="M8 8.5l1.4 1.4 2.2-2.4M8 14l1.4 1.4 2.2-2.4M14.5 8.7h3M14.5 14.2h3" /></Svg>);
const IconSurvey = (p) => (<Svg {...p}><path d="M20 15a1.6 1.6 0 0 1-1.6 1.6H8.5L4.4 20v-3.4A1.6 1.6 0 0 1 4 15V6.6A1.6 1.6 0 0 1 5.6 5h12.8A1.6 1.6 0 0 1 20 6.6z" /><path d="M8 9h8M8 12.2h5" /></Svg>);

const StarBtn = ({ on, onClick, size = 20 }) => (
  <button className={"starbtn" + (on ? " on" : "")} aria-pressed={on}
          aria-label={on ? "お気に入り解除" : "お気に入りに追加"}
          onClick={(e) => { e.stopPropagation(); onClick(); }}>
    <svg width={size} height={size} viewBox="0 0 24 24" fill={on ? "currentColor" : "none"}
         stroke="currentColor" strokeWidth="1.7" strokeLinejoin="round">
      <path d="m12 3.2 2.6 5.6 6 .7-4.5 4.1 1.2 6L12 17l-5.3 2.6 1.2-6L3.4 9.5l6-.7z" /></svg>
  </button>
);
const Star = ({ size = 12, color = "currentColor" }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={color}><path d="m12 3.2 2.6 5.6 6 .7-4.5 4.1 1.2 6L12 17l-5.3 2.6 1.2-6L3.4 9.5l6-.7z" /></svg>
);

// 浜寺杯・マスターズは karal 表記の記号（HmM1X / MsM1X）に一体化。× は X 表記に合わせる。
function evCodeLabel(ev) {
  const pfx = ev.div === "hamadera" ? "Hm" : ev.div === "masters" ? "Ms" : "";
  return pfx ? pfx + String(ev.code).replace(/×/g, "X") : ev.code;
}
const Code = ({ ev }) => {
  const dcls = ev.div === "hamadera" ? " hm" : ev.div === "masters" ? " ms" : (ev.cat === "w" ? " w" : "");
  return <span className={"code" + dcls}>{evCodeLabel(ev)}</span>;
};
// 区分（浜寺杯/マスターズ）は Code の記号に統合したため、独立した緑/紫チップは表示しない。
const DivChip = () => null;
const MedalDisc = ({ rank, size = 20 }) => {
  const col = rank === 1 ? "linear-gradient(160deg,#f6d676,#d9a318)" : rank === 2 ? "linear-gradient(160deg,#e6ebf2,#aab4c2)" : "linear-gradient(160deg,#e6b07a,#bb7a44)";
  return (
    <span style={{ width: size, height: size, borderRadius: "50%", background: col, color: "#fff",
      display: "inline-flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--cond)",
      fontStyle: "italic", fontWeight: 800, fontSize: size * 0.55, flex: "none", boxShadow: "inset 0 -2px 3px rgba(0,0,0,.2)" }}>{rank}</span>
  );
};

Object.assign(window, {
  Svg, IconHome, IconSchedule, IconOar, IconMedal, IconTeams, IconSearch, IconClock,
  IconChevron, IconArrow, IconPin, IconCal, IconFlame, IconTrophy, IconRule, IconSurvey,
  StarBtn, Star, Code, DivChip, MedalDisc, evCodeLabel,
});
