/* ULC circle infographic — Figma "ULC circle infografika_prazno 1" (764×522):
   a three-sector dialogue circle, nine numbered stations, nine outer stage labels. */
const ULC_CX = 372, ULC_CY = 262, ULC_R = 196, ULC_DOT = 15.5;
const pt = (deg, r) => [ULC_CX + r * Math.sin((deg * Math.PI) / 180), ULC_CY - r * Math.cos((deg * Math.PI) / 180)];

const ULC_STATIONS = [
  { n: 9, a: 0, label: "FULL ENDING", anchor: "middle", lx: 372, ly: 40 },
  { n: 1, a: 40, label: "NEW START", anchor: "start", lx: 528, ly: 117 },
  { n: 2, a: 80, label: "ENCOUNTER", anchor: "start", lx: 589, ly: 233 },
  { n: 3, a: 120, label: "TRANSFORMATION", anchor: "start", lx: 566, ly: 365 },
  { n: 4, a: 160, label: "MOVEMENT", anchor: "middle", lx: 507, ly: 494 },
  { n: 5, a: 200, label: "EVALUATION", anchor: "middle", lx: 254, ly: 494 },
  { n: 6, a: 240, label: "IMPLEMENTATION", anchor: "end", lx: 178, ly: 365 },
  { n: 7, a: 280, label: "COMMUNITY", anchor: "end", lx: 155, ly: 233 },
  { n: 8, a: 320, label: "EMBRACEMENT", anchor: "end", lx: 216, ly: 117 },
];

const ULC_SECTORS = [
  { lines: ["Leader’s Dream", "& Questions"], x: 467, y: 199 },
  { lines: ["Community", "& Execution"], x: 277, y: 199 },
  { lines: ["Decisions & Answers"], x: 372, y: 372 },
];

function UlcDiagram({ style }) {
  const outer = { fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 14, fill: "#0051FF" };
  const inner = { fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 20, fill: "#0051FF" };
  return (
    <svg width="764" height="522" viewBox="0 0 764 522" preserveAspectRatio="xMidYMid meet" fill="none" role="img" aria-label="The Universal Life Cycle: nine stages of dialogue around three phases" style={{ width: "100%", height: "auto", maxWidth: 764, display: "block", ...style }}>
      <circle cx={ULC_CX} cy={ULC_CY} r={ULC_R} stroke="#000000" strokeWidth="1.5" fill="none" />
      {[0, 120, 240].map((a) => {
        const [x, y] = pt(a, ULC_R);
        return <line key={a} x1={ULC_CX} y1={ULC_CY} x2={x} y2={y} stroke="#000000" strokeWidth="1.5" />;
      })}
      <path d="M 517 147 L 537 157 L 529 179" stroke="#000000" strokeWidth="1.5" fill="none" strokeLinecap="round" />
      {ULC_SECTORS.map((s) => (
        <text key={s.x + s.lines[0]} x={s.x} y={s.y} textAnchor="middle" style={inner}>
          {s.lines.map((l, i) => <tspan key={l} x={s.x} dy={i === 0 ? 0 : 26}>{l}</tspan>)}
        </text>
      ))}
      {ULC_STATIONS.map((s) => {
        const [x, y] = pt(s.a, ULC_R);
        return (
          <g key={s.n}>
            <text x={s.lx} y={s.ly} textAnchor={s.anchor} style={outer}>{s.label}</text>
            <circle cx={x} cy={y} r={ULC_DOT} fill="#FF834D" />
            <text x={x} y={y + 5} textAnchor="middle" style={{ fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 14, fill: "#FFFFFF" }}>{s.n}</text>
          </g>
        );
      })}
    </svg>
  );
}

Object.assign(window, { UlcDiagram });