// Organization chart — spatial node canvas with kinetic tendrils
function OrgChart() {
  // nodes positioned on a 1200x720 virtual canvas
  const main = { x: 600, y: 140, label: "Prime", role: "Orchestrator · Claude Sonnet" };
  const subs = [
    { x: 220, y: 420, label: "Market Sentry", role: "Markets & risk", color: "gold", tasks: 4 },
    { x: 440, y: 520, label: "Creative Director", role: "Brand & copy", color: "cyan", tasks: 2 },
    { x: 760, y: 520, label: "Research Specialist", role: "Primary research", color: "cyan", tasks: 3 },
    { x: 980, y: 420, label: "Ops Steward", role: "Infra & secrets", color: "cyan", tasks: 1 },
  ];
  const leaves = [
    { parent: 0, x: 100, y: 640, label: "Tape Reader" },
    { parent: 0, x: 240, y: 680, label: "Risk Officer" },
    { parent: 1, x: 420, y: 660, label: "Scribe" },
    { parent: 2, x: 740, y: 680, label: "Fact-checker" },
    { parent: 2, x: 860, y: 640, label: "Archivist" },
    { parent: 3, x: 1080, y: 640, label: "Key Rotator" },
  ];

  return (
    <div style={{ padding: "40px 48px 60px", position: "relative" }}>
      <div className="bg-aurora"/>
      <SectionHead
        eyebrow="Organization · Charter v0.4"
        title="The Gastronaut team, as nodes."
        sub="Prime orchestrates four department leads. Each lead coordinates its own sub-agents. Edges carry task handoffs; luminance dots travel with live messages."
        action={<div style={{ display: "flex", gap: 8 }}>
          <button className="btn"><Icon.Plus size={13}/> Add role</button>
          <button className="btn">Export <Icon.ArrowRight size={12}/></button>
        </div>}
      />

      <Card style={{ padding: 0, overflow: "hidden", marginTop: 10 }}>
        <div style={{ position: "relative", height: 760, width: "100%" }}>
          {/* canvas background */}
          <div style={{
            position: "absolute", inset: 0,
            backgroundImage: "radial-gradient(var(--line-1) 1px, transparent 1px)",
            backgroundSize: "28px 28px",
            maskImage: "radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 100%)",
            WebkitMaskImage: "radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 100%)",
          }}/>
          {/* subtle compass eyebrow */}
          <div className="mono" style={{ position: "absolute", top: 14, left: 18, fontSize: 10.5, color: "var(--ink-3)", letterSpacing: "0.12em" }}>CHARTER ∙ 21 APR 2026</div>
          <div className="mono" style={{ position: "absolute", top: 14, right: 18, fontSize: 10.5, color: "var(--ink-3)", letterSpacing: "0.12em" }}>NODES 11 · EDGES 10</div>

          <svg viewBox="0 0 1200 760" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
            <defs>
              <linearGradient id="edge-cyan" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0" stopColor="oklch(0.82 0.16 220)" stopOpacity="0.9"/>
                <stop offset="1" stopColor="oklch(0.82 0.16 220)" stopOpacity="0.05"/>
              </linearGradient>
              <linearGradient id="edge-gold" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0" stopColor="oklch(0.82 0.14 80)" stopOpacity="0.9"/>
                <stop offset="1" stopColor="oklch(0.82 0.14 80)" stopOpacity="0.05"/>
              </linearGradient>
              <radialGradient id="halo" cx="0.5" cy="0.5" r="0.5">
                <stop offset="0" stopColor="oklch(0.82 0.16 220)" stopOpacity="0.4"/>
                <stop offset="1" stopColor="oklch(0.82 0.16 220)" stopOpacity="0"/>
              </radialGradient>
            </defs>

            {/* halo behind main */}
            <circle cx={main.x} cy={main.y} r="160" fill="url(#halo)"/>

            {/* edges: main -> subs */}
            {subs.map((s, i) => {
              const id = `e${i}`;
              const c = s.color === "gold" ? "url(#edge-gold)" : "url(#edge-cyan)";
              const cp1x = main.x, cp1y = main.y + 180;
              const cp2x = s.x, cp2y = s.y - 180;
              return (
                <g key={id}>
                  <path id={id} d={`M${main.x} ${main.y + 30} C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${s.x} ${s.y - 30}`} stroke={c} strokeWidth="1.2" fill="none" strokeDasharray="2 6" style={{ animation: "flow 6s linear infinite" }}/>
                  {/* traveling dot */}
                  <circle r="2.5" fill={s.color === "gold" ? "var(--gold)" : "var(--accent)"}>
                    <animateMotion dur={`${6 + i}s`} repeatCount="indefinite">
                      <mpath href={`#${id}`}/>
                    </animateMotion>
                  </circle>
                </g>
              );
            })}

            {/* edges: subs -> leaves */}
            {leaves.map((l, i) => {
              const p = subs[l.parent];
              const color = p.color === "gold" ? "url(#edge-gold)" : "url(#edge-cyan)";
              return (
                <path key={`l${i}`} d={`M${p.x} ${p.y + 22} Q ${(p.x + l.x)/2} ${(p.y + l.y)/2 + 30}, ${l.x} ${l.y - 14}`} stroke={color} strokeOpacity="0.5" strokeWidth="1" fill="none"/>
              );
            })}
          </svg>

          {/* Main orb */}
          <NodePrime x={main.x} y={main.y} label={main.label} role={main.role}/>

          {/* Sub nodes */}
          {subs.map((s, i) => <NodeSub key={i} {...s}/>)}

          {/* Leaf nodes */}
          {leaves.map((l, i) => <NodeLeaf key={i} {...l} color={subs[l.parent].color}/>)}
        </div>
      </Card>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14, marginTop: 20 }}>
        <LegendBlock title="Edges" lines={["Cyan tendrils: agent handoffs", "Gold tendrils: market & risk", "Dot travel = live message in transit"]}/>
        <LegendBlock title="Nodes" lines={["Prime: orchestrator, Sonnet 4.5", "Sub-agents: Haiku 4.5 by default", "Leaves: ephemeral, spun per task"]}/>
        <LegendBlock title="Authority" lines={["Prime holds charter + budgets", "Subs hold domain tools only", "Leaves see scoped secrets"]}/>
      </div>
    </div>
  );
}

function NodePrime({ x, y, label, role }) {
  return (
    <div style={{ position: "absolute", left: `${(x/1200)*100}%`, top: `${(y/760)*100}%`, transform: "translate(-50%, -50%)" }}>
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 10 }}>
        <Orb size={96} color="var(--accent)"/>
        <div style={{ textAlign: "center" }}>
          <div className="display" style={{ fontSize: 20, color: "var(--ink-1)" }}>{label}</div>
          <div className="mono" style={{ fontSize: 10.5, color: "var(--ink-3)", letterSpacing: "0.08em" }}>{role}</div>
        </div>
      </div>
    </div>
  );
}

function NodeSub({ x, y, label, role, color, tasks }) {
  const c = color === "gold" ? "var(--gold)" : "var(--accent)";
  return (
    <div style={{ position: "absolute", left: `${(x/1200)*100}%`, top: `${(y/760)*100}%`, transform: "translate(-50%, -50%)" }}>
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
        <Orb size={56} color={c} small/>
        <div style={{ textAlign: "center" }}>
          <div style={{ fontSize: 13, color: "var(--ink-1)" }}>{label}</div>
          <div className="mono" style={{ fontSize: 10, color: "var(--ink-3)", letterSpacing: "0.06em" }}>{role.toUpperCase()} · {tasks} OPEN</div>
        </div>
      </div>
    </div>
  );
}

function NodeLeaf({ x, y, label, color }) {
  const c = color === "gold" ? "var(--gold)" : "var(--accent)";
  return (
    <div style={{ position: "absolute", left: `${(x/1200)*100}%`, top: `${(y/760)*100}%`, transform: "translate(-50%, -50%)" }}>
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>
        <div style={{ width: 16, height: 16, borderRadius: "50%",
          background: `radial-gradient(circle at 35% 30%, ${c}, #0A0B0F 75%)`,
          border: "1px solid rgba(255,255,255,0.12)",
          boxShadow: `0 0 12px ${c}`, opacity: 0.85,
        }}/>
        <div className="mono" style={{ fontSize: 10, color: "var(--ink-3)" }}>{label}</div>
      </div>
    </div>
  );
}

function LegendBlock({ title, lines }) {
  return (
    <Card>
      <div className="eyebrow" style={{ marginBottom: 10 }}>{title}</div>
      <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 8 }}>
        {lines.map((l, i) => (
          <li key={i} style={{ fontSize: 12.5, color: "var(--ink-2)", display: "flex", gap: 8, alignItems: "flex-start" }}>
            <span style={{ color: "var(--ink-4)" }}>·</span> {l}
          </li>
        ))}
      </ul>
    </Card>
  );
}

window.OrgChart = OrgChart;