// Interconnect web — disciplines connected to a central narrative
function InterconnectWeb({ accent = "#e9a54a" }) {
  // node positions in % so it's responsive
  const nodes = [
    { id: "arch",   label: "Architecture",       k: "01", x: 12, y: 18, d: "Spatial systems, mass, scale." },
    { id: "urban",  label: "Urban Design",       k: "02", x: 12, y: 76, d: "Cities as living patterns." },
    { id: "prod",   label: "Product Manufacturing", k: "03", x: 88, y: 18, d: "Precision, materials, finish." },
    { id: "narr",   label: "Personal Narrative", k: "04", x: 88, y: 76, d: "Memory, place, meaning." },
    { id: "core",   label: "Studio WIBI",        k: "00", x: 50, y: 47, d: "The interconnected output." },
  ];

  // edges (from -> to)
  const edges = [
    ["arch", "core"], ["urban", "core"], ["prod", "core"], ["narr", "core"],
    ["arch", "urban"], ["prod", "narr"], ["arch", "prod"],
  ];

  const byId = Object.fromEntries(nodes.map(n => [n.id, n]));

  return (
    <div className="web">
      <svg viewBox="0 0 100 100" preserveAspectRatio="none" style={{ width: "100%", height: "100%" }}>
        {edges.map(([a, b], i) => {
          const A = byId[a], B = byId[b];
          const isCore = a === "core" || b === "core";
          return (
            <line
              key={i}
              x1={A.x} y1={A.y} x2={B.x} y2={B.y}
              stroke={isCore ? accent : "#b8b4a8"}
              strokeWidth={isCore ? "0.18" : "0.12"}
              strokeDasharray={isCore ? "none" : "0.6 0.6"}
              opacity={isCore ? 0.85 : 0.55}
              vectorEffect="non-scaling-stroke"
            />
          );
        })}
        {/* small endpoint dots */}
        {nodes.map(n => (
          <circle key={n.id} cx={n.x} cy={n.y} r="0.4" fill={n.id === "core" ? accent : "#777"} vectorEffect="non-scaling-stroke" />
        ))}
      </svg>

      {nodes.map(n => (
        <div
          key={n.id}
          className={`node ${n.id === "core" ? "center" : ""}`}
          style={{ left: `${n.x}%`, top: `${n.y}%` }}
        >
          <div className="k">{n.k} — Discipline</div>
          <div className="v">{n.label}</div>
          <div className="d">{n.d}</div>
        </div>
      ))}
    </div>
  );
}
window.InterconnectWeb = InterconnectWeb;