/* ABM Pages - shared React kit. Babel script. Reads window.ABM.
   Exports building blocks to window for the version files. */
const { icons: ABM_ICONS } = window.ABM;

/* inline icon */
function Icon({ name, size = 22, style }) {
  const svg = ABM_ICONS[name] || "";
  return (
    <span
      style={{ display: "inline-flex", width: size, height: size, ...style }}
      dangerouslySetInnerHTML={{ __html: svg }}
    />
  );
}

/* pixel chevron used inside buttons */
function Chev() {
  // 4x4 pixel arrow ">"
  const on = { background: "currentColor" };
  const off = {};
  const map = [
    0,0,0,0,
    0,1,0,0,
    0,0,1,0,
    0,1,0,0,
  ];
  return (
    <span className="abm-btn__chev">
      {map.map((v, i) => <i key={i} style={v ? on : off} />)}
    </span>
  );
}

function PillBtn({ label, variant, style, onClick, href, target, chev = true }) {
  const cls = "abm-btn" + (variant ? " abm-btn--" + variant : "");
  const inner = <React.Fragment><span>{label}</span>{chev && <Chev />}</React.Fragment>;
  if (href) {
    return (
      <a className={cls} style={style} href={href} target={target}
         rel={target === "_blank" ? "noopener noreferrer" : undefined} onClick={onClick}>
        {inner}
      </a>
    );
  }
  return (
    <button className={cls} style={style} onClick={onClick}>
      {inner}
    </button>
  );
}

function Tag({ children, tone, style }) {
  const cls = "abm-tag" + (tone ? " abm-tag--" + tone : "");
  return <span className={cls} style={style}>{children}</span>;
}

function ChipRow({ items, style }) {
  return (
    <div className="abm-chiprow" style={style}>
      {items.map((t, i) => <span key={i} className="abm-chip">{t}</span>)}
    </div>
  );
}

function ZoneDot({ color, size = 9, style }) {
  return <span className="abm-zone-dot" style={{ background: color, width: size, height: size, ...style }} />;
}

/* section header: eyebrow + title + sub on the left, action on the right */
function SecHead({ eyebrow, title, sub, action, titleClass = "abm-h1", maxTitle, dark }) {
  return (
    <div>
      <div className="abm-head">
        <div style={{ maxWidth: maxTitle || 880 }}>
          {eyebrow && <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 22 }}>
            <span style={{ width: 22, height: 1, background: "var(--abm-ember)" }} />
            <Tag tone="ember">{eyebrow}</Tag>
          </div>}
          <h2 className={titleClass}>{title}</h2>
        </div>
        {action}
      </div>
      {sub && <p className="abm-sub" style={{ marginTop: 22 }}>{sub}</p>}
    </div>
  );
}

/* pixel-block panel. cols/rows of colored cells; children overlay on top */
function PixelPanel({ cols = 14, rows = 8, palette = "ember", seed = 7, radius = 0, children, style, cellStyle }) {
  const cells = window.ABM.pixelCells(cols, rows, palette, seed);
  return (
    <div style={{ position: "relative", overflow: "hidden", borderRadius: radius, ...style }}>
      <div className="abm-px" style={{ gridTemplateColumns: `repeat(${cols},1fr)`, gridTemplateRows: `repeat(${rows},1fr)` }}>
        {cells.map((c, i) => <i key={i} style={{ background: c, ...cellStyle }} />)}
      </div>
      {children}
    </div>
  );
}

/* the closing CTA bar */
function CTABar({ dark }) {
  const s = window.ABM.section;
  return (
    <div style={{
      display: "flex", alignItems: "center", justifyContent: "space-between",
      gap: 40, flexWrap: "wrap",
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 20 }}>
        <span style={{ width: 40, height: 40, display: "grid", placeItems: "center", background: "var(--abm-ember)", color: "#fff" }}>
          <Icon name="loop" size={22} />
        </span>
        <span style={{ fontSize: 26, fontWeight: 500, letterSpacing: "-0.02em", color: dark ? "#F4F1EA" : "var(--abm-ink)" }}>
          {s.ctaText}
        </span>
      </div>
      <PillBtn label={s.ctaButton} variant="ember" />
    </div>
  );
}

/* small zone legend (3 dots) */
function ZoneLegend({ active, style }) {
  return (
    <div style={{ display: "flex", gap: 20, ...style }}>
      {window.ABM.zones.map((z) => (
        <div key={z.id} style={{ display: "flex", alignItems: "center", gap: 8, opacity: active && active !== z.id ? 0.4 : 1 }}>
          <ZoneDot color={z.color} />
          <Tag>{z.label}</Tag>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { Icon, Chev, PillBtn, Tag, ChipRow, ZoneDot, SecHead, PixelPanel, CTABar, ZoneLegend });