// stack.jsx — two visual treatments for the Stack section.
// Exports: StackLogos, StackConstellation, ToolIcon

// Logo with a fallback chain: custom srcs → simpleicons CDN → monogram
function ToolIcon({ tool, size = 28, mono = false }) {
  const candidates = React.useMemo(() => {
    const list = [];
    if (tool.srcs) list.push(...tool.srcs);
    else if (tool.slug) list.push(`https://cdn.simpleicons.org/${tool.slug}/${mono ? "b6c2d6" : tool.color}`);
    return list;
  }, [tool, mono]);
  const [idx, setIdx] = React.useState(0);
  const monogram = tool.name.replace(/[^A-Za-z0-9]/g, "").slice(0, 2);
  if (idx >= candidates.length) {
    return (
      <div
        style={{
          width: size, height: size, borderRadius: 8, flexShrink: 0,
          background: mono ? "rgba(255,255,255,0.08)" : `#${tool.color}14`,
          color: mono ? "#b6c2d6" : `#${tool.color}`,
          display: "flex", alignItems: "center", justifyContent: "center",
          fontFamily: "'JetBrains Mono', monospace", fontSize: size * 0.38, fontWeight: 600,
        }}
      >
        {monogram}
      </div>
    );
  }
  return (
    <img
      src={candidates[idx]}
      alt={tool.name}
      width={size}
      height={size}
      style={{ display: "block", flexShrink: 0, objectFit: "contain" }}
      onError={() => setIdx(idx + 1)}
    />
  );
}

// ── Variant 1: light cards with real logos, grouped by category ──────────
function StackLogos({ t, C }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 260px), 1fr))", gap: 16 }}>
      {STACK_DATA.map((group) => (
        <div key={group.id} style={{ background: "#fff", border: `1px solid ${C.line}`, borderRadius: 16, padding: "24px 26px", boxShadow: "0 1px 3px rgba(14,23,38,0.04)" }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: C.dim, letterSpacing: "0.04em", textTransform: "uppercase", marginBottom: 18 }}>
            {t.stack.groups[group.id]}
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "14px 18px" }}>
            {group.tools.map((tool) => (
              <div key={tool.name} style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <ToolIcon tool={tool} size={26}></ToolIcon>
                <span style={{ fontSize: 14.5, fontWeight: 500, color: C.text }}>{tool.name}</span>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

// ── Variant 2: dark "sky chart" — each category is a constellation ───────
const STACK_POS_4 = [[40, 46], [100, 102], [155, 42], [205, 102]];
const STACK_POS_6 = [[32, 44], [78, 96], [122, 34], [162, 100], [202, 48], [238, 96]];

function StackCluster({ group, label }) {
  const pos = group.tools.length > 4 ? STACK_POS_6 : STACK_POS_4;
  const pts = group.tools.map((tool, i) => ({ tool, x: pos[i][0], y: pos[i][1] }));
  return (
    <div>
      <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.22em", color: "#93c5fd", textTransform: "uppercase", marginBottom: 6 }}>
        {label}
      </div>
      <svg viewBox="0 0 270 150" style={{ width: "100%", display: "block", overflow: "visible" }}>
        <g stroke="rgba(147,197,253,0.3)" strokeWidth="0.8" fill="none">
          {pts.slice(1).map((p, i) => (
            <line key={i} x1={pts[i].x} y1={pts[i].y} x2={p.x} y2={p.y}></line>
          ))}
        </g>
        {pts.map((p, i) => (
          <g key={i}>
            <circle cx={p.x} cy={p.y} r="9" fill="rgba(147,197,253,0.16)"></circle>
            <circle cx={p.x} cy={p.y} r="3" fill="#e8edf6">
              <animate attributeName="opacity" values="1;0.55;1" dur={(3 + (i % 4)) + "s"} repeatCount="indefinite"></animate>
            </circle>
            <text
              x={p.x}
              y={p.y + 22}
              textAnchor="middle"
              fontFamily="'JetBrains Mono', monospace"
              fontSize="10.5"
              fill="#8b9bb4"
            >
              {p.tool.name}
            </text>
          </g>
        ))}
      </svg>
    </div>
  );
}

function StackConstellation({ t, C }) {
  const vp = useViewport();
  return (
    <div style={{ background: "linear-gradient(165deg, #0a0f1c, #16233c)", borderRadius: 24, padding: vp.mobile ? "30px 22px" : "44px 52px", position: "relative", overflow: "hidden" }}>
      <Starfield count={50} color="#3b4a63" seed={31} opacity={0.7}></Starfield>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 230px), 1fr))", gap: vp.mobile ? "30px 32px" : "36px 56px", position: "relative" }}>
        {STACK_DATA.map((group) => (
          <StackCluster key={group.id} group={group} label={t.stack.groups[group.id]}></StackCluster>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { StackLogos, StackConstellation, ToolIcon });