/* global React */
// ─── AIStack · animated tech-stack diagram for the "Building with AI" section ──
// All marks are uniform: solid cream glyphs in identical rounded-square tiles,
// connected by pipes with flowing data (animated dashes). Pure inline SVG so it
// scales with the viewBox and animates live.

(function () {
  const CREAM = "#EAE7DD";
  const HOLE = "#222B1A"; // tile interior, used to "cut" eyes/dots/prompt
  const GOLD = "#C8862A";

  // ── Glyphs, each drawn in a 0..40 box, fill = currentColor ──
  function Glyph({ name }) {
    switch (name) {
      case "vercel":
        return <path d="M20 7 L36 34 L4 34 Z" />;
      case "expo":
        return <path d="M20 6 L31 20 L20 34 L9 20 Z" />;
      case "supabase":
        return <path d="M22 4 L8 23 L18 23 L17 36 L32 16 L22 16 Z" />;
      case "github":
        return (
          <g>
            <circle cx="11" cy="11" r="4.6" />
            <circle cx="11" cy="29" r="4.6" />
            <circle cx="29" cy="22" r="4.6" />
            <rect x="9.1" y="11" width="3.8" height="18" rx="1.9" />
            <rect x="11" y="20.3" width="18" height="3.4" rx="1.7" />
          </g>);
      case "apple":
        return (
          <g>
            <path d="M27.6 23.1 C27.6 30 23.5 35.6 20 35.6 C18.2 35.6 17.3 34.6 15.5 34.6 C13.7 34.6 12.6 35.6 11 35.6 C7.4 35.6 4 30 4 23.5 C4 18 7.3 14.8 11.1 14.8 C13.3 14.8 14.9 16 16 16 C17.1 16 18.8 14.6 21.5 14.6 C24 14.6 26 15.8 27.2 17.8 C24.4 19.4 24.8 22.6 27.6 23.1 Z" />
            <path d="M19.2 13.6 C19.2 9.9 22 7 25.4 7 C25.4 10.7 22.6 13.6 19.2 13.6 Z" />
          </g>);
      case "android":
        return (
          <g>
            <path d="M9 21 C9 14.6 13.9 9.6 20 9.6 C26.1 9.6 31 14.6 31 21 Z" />
            <rect x="9" y="22.2" width="22" height="10.4" rx="3" />
            <rect x="12.4" y="3.6" width="2.4" height="8" rx="1.2" transform="rotate(-28 13.6 7.5)" />
            <rect x="25.2" y="3.6" width="2.4" height="8" rx="1.2" transform="rotate(28 26.4 7.5)" />
            <circle cx="15.6" cy="15.6" r="1.7" fill={HOLE} />
            <circle cx="24.4" cy="15.6" r="1.7" fill={HOLE} />
          </g>);
      case "web":
        return (
          <g>
            <rect x="5" y="9" width="30" height="22" rx="4" />
            <circle cx="10.5" cy="13.8" r="1.5" fill={HOLE} />
            <circle cx="15.5" cy="13.8" r="1.5" fill={HOLE} />
            <circle cx="20.5" cy="13.8" r="1.5" fill={HOLE} />
            <rect x="5" y="18" width="30" height="1.8" fill={HOLE} />
          </g>);
      case "claude":
        return (
          <g>
            {Array.from({ length: 12 }).map((_, i) =>
            <rect key={i} x="18.8" y="5" width="2.4" height="30" rx="1.2"
            transform={"rotate(" + i * 30 + " 20 20)"} />)}
          </g>);
      case "codex":
        return (
          <g>
            <path d="M15.6 12 L17.6 13.8 L11.4 20 L17.6 26.2 L15.6 28 L7.6 20 Z" />
            <path d="M24.4 12 L22.4 13.8 L28.6 20 L22.4 26.2 L24.4 28 L32.4 20 Z" />
            <rect x="18.7" y="9" width="2.6" height="22" rx="1.3" transform="rotate(18 20 20)" />
          </g>);
      case "gemini":
        return <path d="M20 4 C21 13 27 19 36 20 C27 21 21 27 20 36 C19 27 13 21 4 20 C13 19 19 13 20 4 Z" />;
      case "openclaw":
        return (
          <g>
            <ellipse cx="20" cy="27" rx="8.5" ry="6.8" />
            <circle cx="10.5" cy="17" r="3.3" />
            <circle cx="16.6" cy="12.4" r="3.3" />
            <circle cx="23.4" cy="12.4" r="3.3" />
            <circle cx="29.5" cy="17" r="3.3" />
          </g>);
      case "opencode":
        return (
          <g>
            <rect x="5" y="8" width="30" height="24" rx="4" />
            <path d="M11 16 L13 16 L17.6 21 L13 26 L11 26 L15 21 Z" fill={HOLE} />
            <rect x="18" y="24" width="9" height="2.4" rx="1.2" fill={HOLE} />
          </g>);
      case "core":
        return (
          <g fill={GOLD}>
            <path d="M20 5 L35 13 L20 21 L5 13 Z" />
            <path d="M5 19 L20 27 L35 19 L35 21 L20 29 L5 21 Z" opacity="0.78" />
            <path d="M5 25 L20 33 L35 25 L35 27 L20 35 L5 27 Z" opacity="0.55" />
          </g>);
      case "linear":
        return (
          <g stroke={CREAM} strokeWidth="4.2" strokeLinecap="round" fill="none">
            <line x1="7" y1="27" x2="18" y2="16" />
            <line x1="14.5" y1="31" x2="30" y2="15.5" />
            <line x1="24" y1="30" x2="34" y2="20" />
          </g>);
      case "clerk":
        return (
          <g>
            <circle cx="20" cy="20" r="13" />
            <circle cx="26.5" cy="13.5" r="8.5" fill={HOLE} />
          </g>);
      default:
        return null;
    }
  }

  // ── Tile: rounded square + centered glyph + label below ──
  function Tile({ cx, cy, size, name, label, idx }) {
    const half = size / 2;
    const gScale = size * 0.52 / 40;
    const gOff = 40 * gScale / 2;
    return (
      <g className="aistack-tile" style={{ animationDelay: idx * 0.12 + "s" }}>
        <rect x={cx - half} y={cy - half} width={size} height={size} rx={size * 0.22}
        fill="#222B1A" stroke="rgba(234,231,221,0.18)" strokeWidth="1.4" />
        <g transform={"translate(" + (cx - gOff) + " " + (cy - gOff) + ") scale(" + gScale + ")"} fill={CREAM}>
          <Glyph name={name} />
        </g>
        <text x={cx} y={cy + half + 17} textAnchor="middle"
        fontFamily="var(--mono, monospace)" fontSize="12.5"
        fill="rgba(234,231,221,0.66)" letterSpacing="0.01em">{label}</text>
      </g>);
  }

  function hCurve(x1, y1, x2, y2) {
    const mx = (x1 + x2) / 2;
    return "M" + x1 + " " + y1 + " C" + mx + " " + y1 + ", " + mx + " " + y2 + ", " + x2 + " " + y2;
  }
  function vCurve(x1, y1, x2, y2) {
    const my = (y1 + y2) / 2;
    return "M" + x1 + " " + y1 + " C" + x1 + " " + my + ", " + x2 + " " + my + ", " + x2 + " " + y2;
  }

  function Pipe({ d, delay }) {
    return (
      <g>
        <path d={d} fill="none" stroke="rgba(234,231,221,0.14)" strokeWidth="2" />
        <path className="aistack-flow" d={d} fill="none" stroke={GOLD} strokeWidth="2"
        strokeLinecap="round" style={{ animationDelay: delay + "s" }} />
      </g>);
  }

  function AIStack() {
    const buildWith = [
    { name: "vercel", label: "Vercel" },
    { name: "expo", label: "Expo" },
    { name: "supabase", label: "Supabase" },
    { name: "github", label: "GitHub" },
    { name: "linear", label: "Linear" },
    { name: "clerk", label: "Clerk" }];

    const aiLayer = [
    { name: "claude", label: "Claude" },
    { name: "codex", label: "Codex" },
    { name: "gemini", label: "Gemini" },
    { name: "openclaw", label: "openclaw" },
    { name: "opencode", label: "opencode" }];

    const platforms = [
    { name: "apple", label: "iOS" },
    { name: "android", label: "Android" },
    { name: "web", label: "Web" }];

    const Chip = ({ item, idx }) =>
    <div className="aistack-chip" style={{ animationDelay: idx * 0.12 + "s" }}>
        <svg className="aistack-chip-ic" viewBox="0 0 40 40" width="21" height="21" fill={CREAM} aria-hidden="true">
          <Glyph name={item.name} />
        </svg>
        <span>{item.label}</span>
      </div>;

    const rows = [
    { lab: "Build with", items: buildWith, cls: "" },
    { lab: "AI layer", items: aiLayer, cls: " is-ai" },
    { lab: "Ship to", items: platforms, cls: "" }];

    let n = 0;
    return (
      <div className="aistack" role="img" aria-label="Tech stack: build tooling, the AI layer, and shipping targets across iOS, Android and web" data-comment-anchor="359dd7dcd2-svg-185-9">
        {rows.map((r, ri) =>
        <div key={ri} className={"aistack-row" + r.cls}>
            <span className="aistack-rowlab">{r.lab}</span>
            <div className="aistack-chips">
              {r.items.map((it) => <Chip key={it.name} item={it} idx={n++} />)}
            </div>
          </div>
        )}
      </div>);
  }

  window.AIStack = AIStack;
})();