// PillarWheel — interactive "Four Pillars of Supervision" wheel.
// Replaces clinicians/layout-10 (which Relume rendered as a static split block).
// The sitemap calls for: "Interactive 'Four Pillars' wheel for Clinical
// Supervision (Clinical, Professional, Organisational, Personal) with detail
// panel for each."

const PILLARS = [
  {
    id: "clinical",
    label: "Clinical",
    color: "var(--kl-plum)",
    colorBg: "var(--kl-plum-lighter)",
    onColor: "#fff",
    colorText: "var(--kl-plum)",
    icon: "psychology",
    body: "Assessment, clinical reasoning, and evidence-based decision making across paediatric OT presentations.",
    bullets: [
      "Assessment",
      "Clinical reasoning",
      "Case formulation",
      "Goal setting",
      "Therapy planning",
      "Report writing",
      "Evidence-based practice",
      "Stakeholder engagement",
      "Specific practice areas",
    ],
  },
  {
    id: "professional",
    label: "Professional",
    color: "var(--kl-leaf)",
    colorBg: "var(--kl-leaf-lighter)",
    onColor: "var(--kl-leaf-darkest)",
    colorText: "var(--kl-leaf-darker)",
    icon: "school",
    body: "Communication, ethics, and professional identity for early-career through senior OTs.",
    bullets: [
      "Communication",
      "Feedback",
      "Conflict resolution",
      "Boundary management",
      "Ethics",
      "Self-leadership",
      "Advocacy",
      "Career development",
    ],
  },
  {
    id: "organisational",
    label: "Organisational",
    color: "var(--kl-sun)",
    colorBg: "var(--kl-sun-lighter)",
    onColor: "var(--kl-sun-darkest)",
    colorText: "var(--kl-sun-dark)",
    icon: "handshake",
    body: "Working well inside a team, a practice, or a service: caseload, workload, and organisational expectations.",
    bullets: [
      "Caseload management",
      "Time and workload prioritisation",
      "Billable requirements",
      "Organisational expectations",
      "Private practice employment",
    ],
  },
  {
    id: "personal",
    label: "Personal",
    color: "var(--kl-plum-light)",
    colorBg: "var(--kl-plum-lightest)",
    onColor: "var(--kl-plum-darkest)",
    colorText: "var(--kl-plum-dark)",
    icon: "favorite",
    body: "Wellbeing, burnout prevention, and sustaining yourself in deeply emotional work with families.",
    bullets: [
      "Resilience",
      "Work-life balance",
      "Stress management",
      "Burnout",
      "Compassion fatigue",
      "Managing clinical demands",
    ],
  },
];

function PillarWheel() {
  const [active, setActive] = useState("clinical");
  const current = PILLARS.find((p) => p.id === active);

  // Geometry — 4 quadrants of an SVG circle, gap of ~6° between wedges.
  const cx = 200, cy = 200, r = 188, ir = 66;
  const gap = 3; // degrees between wedges

  // Wedge arc: start = i*90+gap/2, end = (i+1)*90-gap/2.
  // Quadrants in reading order: top-left, top-right, bottom-right, bottom-left.
  // We rotate so the first wedge sits at the top-left (start -135°).
  const wedgePath = (i) => {
    const start = -135 + i * 90 + gap / 2;
    const end   = -135 + (i + 1) * 90 - gap / 2;
    const sRad = (start * Math.PI) / 180;
    const eRad = (end * Math.PI) / 180;
    const x1 = cx + r * Math.cos(sRad), y1 = cy + r * Math.sin(sRad);
    const x2 = cx + r * Math.cos(eRad), y2 = cy + r * Math.sin(eRad);
    const x3 = cx + ir * Math.cos(eRad), y3 = cy + ir * Math.sin(eRad);
    const x4 = cx + ir * Math.cos(sRad), y4 = cy + ir * Math.sin(sRad);
    return [
      `M ${x1} ${y1}`,
      `A ${r} ${r} 0 0 1 ${x2} ${y2}`,
      `L ${x3} ${y3}`,
      `A ${ir} ${ir} 0 0 0 ${x4} ${y4}`,
      "Z",
    ].join(" ");
  };

  // Label position — midpoint of the wedge, radius (r+ir)/2.
  const labelXY = (i) => {
    const mid = -135 + i * 90 + 45;
    const rad = (mid * Math.PI) / 180;
    const lr = (r + ir) / 2;
    return { x: cx + lr * Math.cos(rad), y: cy + lr * Math.sin(rad) };
  };

  return (
    <Section scheme="scheme-2">
      <div className="kl-split" style={{ gap: 96, alignItems: "center" }}>
        {/* Left — heading + wheel */}
        <div>
          <p style={{ fontWeight: 600, marginBottom: 16 }}>Clinical Supervision</p>
          <h2 style={{ fontSize: "var(--kl-text-h2)", marginBottom: 24, maxWidth: "14ch" }}>
            Supervision can cover
          </h2>
          <p style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.5, marginBottom: 48, maxWidth: "36ch" }}>
            Supervision is shaped around four pillars that work together to strengthen your clinical work and your wellbeing. Click any pillar to see what it can include.
          </p>

          <svg viewBox="0 0 400 400" width="100%" style={{ display: "block", maxWidth: 400, height: "auto" }}>
            {PILLARS.map((p, i) => {
              const isActive = p.id === active;
              return (
                <path
                  key={p.id}
                  d={wedgePath(i)}
                  fill={isActive ? p.color : p.colorBg}
                  stroke={isActive ? p.color : "rgba(11,12,11,0.08)"}
                  strokeWidth="1"
                  onClick={() => setActive(p.id)}
                  style={{
                    cursor: "pointer",
                    transition: "fill 200ms var(--kl-ease)",
                  }}
                />
              );
            })}
            {PILLARS.map((p, i) => {
              const { x, y } = labelXY(i);
              const isActive = p.id === active;
              return (
                <text
                  key={p.id + "-l"}
                  x={x} y={y}
                  textAnchor="middle"
                  dominantBaseline="middle"
                  pointerEvents="none"
                  style={{
                    fontFamily: "var(--kl-font-display)",
                    fontWeight: 600,
                    fontSize: 15,
                    fill: isActive ? p.onColor : "var(--kl-neutral-darkest)",
                    letterSpacing: "-0.02em",
                  }}
                >
                  {p.label}
                </text>
              );
            })}
            {/* Center hub */}
            <circle cx={cx} cy={cy} r={ir - 4} fill="var(--kl-white)" stroke="rgba(11,12,11,0.08)" strokeWidth="1" />
            <text
              x={cx} y={cy - 6}
              textAnchor="middle" dominantBaseline="middle"
              style={{ fontFamily: "var(--kl-font-body)", fontWeight: 600, fontSize: 12, fill: "var(--kl-fg-2)", textTransform: "uppercase", letterSpacing: "0.06em" }}
            >Four pillars</text>
            <text
              x={cx} y={cy + 16}
              textAnchor="middle" dominantBaseline="middle"
              style={{ fontFamily: "var(--kl-font-display)", fontWeight: 600, fontSize: 14, fill: current.colorText, letterSpacing: "-0.02em" }}
            >{current.label}</text>
          </svg>
        </div>

        {/* Right — detail panel */}
        <div style={{ background: "var(--kl-card-bg)", border: "var(--kl-card-border)", borderRadius: "var(--kl-radius-card-lg)", boxShadow: "var(--kl-card-shadow)", padding: 48, minHeight: 480 }}>
          <div style={{ marginBottom: 24 }}>
            <MIcon name={current.icon} size={48} />
          </div>
          <h3 style={{ fontSize: "var(--kl-text-h3)", marginBottom: 16, lineHeight: 1.15 }}>
            {current.label} supervision
          </h3>
          <p style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.5, marginBottom: 32 }}>
            {current.body}
          </p>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, marginBottom: 32 }}>
            {current.bullets.map((b) => (
              <li key={b} style={{
                display: "flex", alignItems: "flex-start", gap: 12,
                padding: "8px 0", fontSize: "var(--kl-text-regular)", lineHeight: 1.5,
                borderBottom: "1px solid rgba(11,12,11,0.08)",
              }}>
                <span aria-hidden="true" style={{
                  display: "inline-block", width: 8, height: 8, borderRadius: "50%",
                  background: current.color, marginTop: 8, flexShrink: 0,
                }} />
                {b}
              </li>
            ))}
          </ul>
          <div style={{ display: "flex", gap: 16 }}>
            <Button variant="primary" onClick={() => window.open(SPLOSE_SUPERVISION_URL, "_blank", "noopener,noreferrer")}>Book Supervision</Button>
          </div>
        </div>
      </div>
    </Section>
  );
}

window.PillarWheel = PillarWheel;