// Platform logos for the Services section — simplified monochrome marks (currentColor).
// Rendered as a compact "stack wall" under each service row.
const { createElement: h } = React;

function svg(children, vb) {
  return h("svg", { viewBox: vb || "0 0 24 24", fill: "none", "aria-hidden": "true" }, children);
}

const ICONS = {
  WordPress: () => svg([
    h("circle", { key: "c", cx: 12, cy: 12, r: 10.2, stroke: "currentColor", strokeWidth: 1.3 }),
    h("path", { key: "p", d: "M3.2 12 7 21.4 9.4 13l1.2 3.6L13 21.4 16.7 11c.4-1 .5-1.8.5-2.5 0-.6-.1-1.1-.3-1.6M5.3 6.6h.8c1 0 .9 1.2.1 1.3l3.5 9.4M14.7 5.4c.6 0 .9 0 .9 0M9.3 7.9h.9c1 0 .9 1.2.1 1.2", stroke: "currentColor", strokeWidth: 1.1, strokeLinecap: "round", strokeLinejoin: "round" })
  ]),
  "Next.js": () => svg([
    h("circle", { key: "c", cx: 12, cy: 12, r: 10.2, stroke: "currentColor", strokeWidth: 1.3 }),
    h("path", { key: "n", d: "M8.4 8v8M15.6 16V8M8.7 8.4 16 17.5", stroke: "currentColor", strokeWidth: 1.4, strokeLinecap: "round" })
  ]),
  Figma: () => svg([
    h("path", { key: "f", d: "M9 3h3v6H9a3 3 0 1 1 0-6ZM12 3h3a3 3 0 1 1 0 6h-3V3ZM9 9h3v6H9a3 3 0 1 1 0-6ZM12 12a3 3 0 1 1 3 3 3 3 0 0 1-3-3Z", stroke: "currentColor", strokeWidth: 1.2, strokeLinejoin: "round" })
  ]),
  "Google Ads": () => svg([
    h("path", { key: "a", d: "M10.2 3.6 3.7 14.9a2.4 2.4 0 1 0 4.2 2.3l6.4-11.3a2.4 2.4 0 1 0-4.1-2.3Z", stroke: "currentColor", strokeWidth: 1.2, strokeLinejoin: "round" }),
    h("circle", { key: "c", cx: 17.6, cy: 17.4, r: 2.6, stroke: "currentColor", strokeWidth: 1.2 }),
    h("path", { key: "l", d: "M13.6 7.4 17 13.3", stroke: "currentColor", strokeWidth: 1.2 })
  ]),
  Meta: () => svg([
    h("path", { key: "m", d: "M3 15c0-3.6 1.6-7 4-7 1.8 0 3 1.8 4.6 4.6C13.4 16 14.7 18 16.6 18c2 0 3.4-2.6 3.4-5.4", stroke: "currentColor", strokeWidth: 1.4, strokeLinecap: "round" }),
    h("path", { key: "m2", d: "M21 12.6c0-3.6-1.6-7-4-7-3.8 0-5.6 12.4-10 12.4-2 0-4-2.4-4-5.4", stroke: "currentColor", strokeWidth: 1.4, strokeLinecap: "round" })
  ], "0 0 24 24"),
  LinkedIn: () => h("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true" },
    h("path", { d: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" })
  ),
  GA4: () => svg([
    h("rect", { key: "1", x: 4, y: 13, width: 3.4, height: 7, rx: 1.4, stroke: "currentColor", strokeWidth: 1.3 }),
    h("rect", { key: "2", x: 10.3, y: 9, width: 3.4, height: 11, rx: 1.4, stroke: "currentColor", strokeWidth: 1.3 }),
    h("rect", { key: "3", x: 16.6, y: 4, width: 3.4, height: 16, rx: 1.7, stroke: "currentColor", strokeWidth: 1.3 })
  ]),
  HubSpot: () => svg([
    h("path", { key: "s", d: "M14 4v4.2M14 4a1.6 1.6 0 1 1 0 .1Z", stroke: "currentColor", strokeWidth: 1.3 }),
    h("circle", { key: "c", cx: 13.4, cy: 15, r: 4.6, stroke: "currentColor", strokeWidth: 1.3 }),
    h("path", { key: "l", d: "M14 8.4c1.2.2 2.3.8 3.1 1.7", stroke: "currentColor", strokeWidth: 1.3, strokeLinecap: "round" }),
    h("circle", { key: "d", cx: 13.4, cy: 15, r: 1, fill: "currentColor" })
  ]),
  Attio: () => svg([
    h("path", { key: "a", d: "M5 19 12 5l7 14M8 14h8", stroke: "currentColor", strokeWidth: 1.4, strokeLinecap: "round", strokeLinejoin: "round" })
  ]),
  Notion: () => svg([
    h("rect", { key: "r", x: 4, y: 3.5, width: 16, height: 17, rx: 2, stroke: "currentColor", strokeWidth: 1.3 }),
    h("path", { key: "n", d: "M9 16.5v-9l6 9v-9", stroke: "currentColor", strokeWidth: 1.4, strokeLinecap: "round", strokeLinejoin: "round" })
  ]),
  OpenAI: () => h("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true" },
    h("path", { d: "M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" })
  ),
  Anthropic: () => svg([
    h("path", { key: "a", d: "M8.5 4 3.5 20M8.5 4 13.5 20M5.6 13.5h5.8M15.5 4h2.2l3 16h-2.2l-.7-3.6h-2.4", stroke: "currentColor", strokeWidth: 1.3, strokeLinecap: "round", strokeLinejoin: "round" })
  ]),
  n8n: () => svg([
    h("circle", { key: "1", cx: 5, cy: 12, r: 1.8, stroke: "currentColor", strokeWidth: 1.3 }),
    h("circle", { key: "2", cx: 12, cy: 7, r: 1.8, stroke: "currentColor", strokeWidth: 1.3 }),
    h("circle", { key: "3", cx: 12, cy: 17, r: 1.8, stroke: "currentColor", strokeWidth: 1.3 }),
    h("circle", { key: "4", cx: 19, cy: 12, r: 1.8, stroke: "currentColor", strokeWidth: 1.3 }),
    h("path", { key: "l", d: "M6.6 11 10.4 8M6.6 13l3.8 3M13.6 8 17.4 11M13.6 16l3.8-3", stroke: "currentColor", strokeWidth: 1.2, strokeLinecap: "round" })
  ]),
  Make: () => svg([
    h("path", { key: "m", d: "M5 5v14M9.5 5v14M14.5 5l4.5 14M19 5l-4.5 14", stroke: "currentColor", strokeWidth: 1.4, strokeLinecap: "round" })
  ]),
  Zapier: () => svg([
    h("path", { key: "z", d: "M12 4v16M4 12h16M6.3 6.3l11.4 11.4M17.7 6.3 6.3 17.7", stroke: "currentColor", strokeWidth: 1.3, strokeLinecap: "round" }),
    h("circle", { key: "c", cx: 12, cy: 12, r: 3, stroke: "currentColor", strokeWidth: 1.3 })
  ]),
};

// Which platforms appear under each service number
const SERVICE_PLATFORMS = {
  "01": ["WordPress", "Next.js", "Figma"],
  "02": ["Google Ads", "Meta", "LinkedIn", "GA4", "HubSpot", "Attio", "Notion"],
  "03": ["OpenAI", "Anthropic", "n8n", "Make", "Zapier"],
};

// Real official logos via Simple Icons CDN (rendered as currentColor masks).
// Brands not on Simple Icons fall back to the inline glyph in ICONS.
const LOGO_SLUGS = {
  "WordPress": "wordpress",
  "Next.js": "nextdotjs",
  "Figma": "figma",
  "Google Ads": "googleads",
  "Meta": "meta",
  "GA4": "googleanalytics",
  "HubSpot": "hubspot",
  "Notion": "notion",
  "Anthropic": "anthropic",
  "Zapier": "zapier",
};

// Brands we render with an accurate inline glyph when no Simple Icons logo exists.
const INLINE_OK = { LinkedIn: true, OpenAI: true, Attio: true, "n8n": true, Make: true };

function PlatformWall({ service }) {
  const list = SERVICE_PLATFORMS[service];
  if (!list || !list.length) return null;
  return h("div", { className: "svc-logos", onClick: (e) => e.stopPropagation() },
    list.map((name) => {
      const slug = LOGO_SLUGS[name];
      const Icon = ICONS[name];
      let mark = null;
      if (slug) {
        mark = h("img", { className: "plat-ico", src: `https://cdn.simpleicons.org/${slug}/6b6b6b`, alt: name, loading: "lazy", width: 18, height: 18 });
      } else if (Icon && INLINE_OK[name]) {
        mark = h("span", { className: "plat-ico plat-ico--inline" }, Icon());
      }
      return h("span", { className: "plat", key: name, title: name },
        mark,
        h("span", { className: "plat-name" }, name)
      );
    })
  );
}

window.PlatformWall = PlatformWall;
window.SERVICE_PLATFORMS = SERVICE_PLATFORMS;

// ---------- Process step icons ----------
const PROC_ICONS = {
  "01": () => svg([
    h("path", { key: "p", d: "M4 12a8 8 0 0 1 16 0M7.5 12v4a2 2 0 0 0 2 2M4 12.5v2.5a2 2 0 0 0 2 2M20 12.5v2.5a2 2 0 0 1-2 2h-2.5", stroke: "currentColor", strokeWidth: 1.4, strokeLinecap: "round" })
  ]),
  "02": () => svg([
    h("circle", { key: "c1", cx: 12, cy: 12, r: 8.2, stroke: "currentColor", strokeWidth: 1.3 }),
    h("circle", { key: "c2", cx: 12, cy: 12, r: 4, stroke: "currentColor", strokeWidth: 1.3 }),
    h("circle", { key: "c3", cx: 12, cy: 12, r: 1, fill: "currentColor" })
  ]),
  "03": () => svg([
    h("rect", { key: "r1", x: 4, y: 13, width: 7, height: 7, rx: 1.2, stroke: "currentColor", strokeWidth: 1.3 }),
    h("rect", { key: "r2", x: 13, y: 13, width: 7, height: 7, rx: 1.2, stroke: "currentColor", strokeWidth: 1.3 }),
    h("rect", { key: "r3", x: 8.5, y: 4, width: 7, height: 7, rx: 1.2, stroke: "currentColor", strokeWidth: 1.3 })
  ]),
  "04": () => svg([
    h("path", { key: "a", d: "M4 17 9.5 11l3.2 3.2L20 7", stroke: "currentColor", strokeWidth: 1.4, strokeLinecap: "round", strokeLinejoin: "round" }),
    h("path", { key: "h", d: "M15 7h5v5", stroke: "currentColor", strokeWidth: 1.4, strokeLinecap: "round", strokeLinejoin: "round" })
  ]),
};

function ProcIcon({ step }) {
  const Icon = PROC_ICONS[step];
  if (!Icon) return null;
  return h("span", { className: "proc-ico", "aria-hidden": "true" }, Icon());
}

window.ProcIcon = ProcIcon;