/* global React */
/* ============================================================================
   Apis Advisory — Brand: keystone honeycomb mark, lockup, hex-derived icons
   ============================================================================ */

/* Flat-top hexagon path centered at (cx,cy), circumradius R */
function hexD(cx, cy, R) {
  let p = "";
  for (let i = 0; i < 6; i++) {
    const a = (Math.PI / 180) * (60 * i);
    const x = +(cx + R * Math.cos(a)).toFixed(2);
    const y = +(cy + R * Math.sin(a)).toFixed(2);
    p += (i === 0 ? "M" : "L") + x + " " + y + " ";
  }
  return p + "Z";
}

/* ── ApisMark — keystone cluster: 4 equal-weight outline cells, accent keystone ── */
function ApisMark({ size = 28, outer = "#FFFFFF", center = "var(--accent)", sw = 1.7, lit = true }) {
  const cx = 24, cy = 25.5, R = 7.4, g = 0.93 * R;
  const dy = 1.7320508 * R, dx = 1.5 * R, dyy = 0.8660254 * R;
  return (
    <svg width={size} height={size} viewBox="0 0 48 48" fill="none" aria-hidden="true"
      style={{ display: "block", overflow: "visible" }}>
      <path d={hexD(cx, cy - dy, g)} stroke={outer} strokeWidth={sw} strokeLinejoin="round" opacity="0.85" />
      <path d={hexD(cx - dx, cy + dyy, g)} stroke={outer} strokeWidth={sw} strokeLinejoin="round" opacity="0.85" />
      <path d={hexD(cx + dx, cy + dyy, g)} stroke={outer} strokeWidth={sw} strokeLinejoin="round" opacity="0.85" />
      {lit && (
        <path d={hexD(cx, cy, g)} fill={center} strokeWidth="0" opacity="0.1" />
      )}
      <path d={hexD(cx, cy, g)} fill="none" stroke={center} strokeWidth={sw} strokeLinejoin="round" />
    </svg>
  );
}

/* Backwards-compat alias for any old reference */
const HexMark = (p) => <ApisMark size={p.size || 18} {...p} />;

/* ── Lockup — mark + wordmark + optional mono sub ────────────────────────── */
function Lockup({ markSize = 26, fontSize = 18, sub = false, color = "#fff" }) {
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 11, textDecoration: "none" }}>
      <ApisMark size={markSize} />
      <span style={{ display: "inline-flex", flexDirection: "column", lineHeight: 1 }}>
        <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize, color, letterSpacing: "-0.02em" }}>
          Applied Decisions
        </span>
        {sub && (
          <span className="kicker nav-sub" style={{ fontSize: 8, letterSpacing: "0.26em", color: "var(--text-muted)", marginTop: 5 }}>
            AI Strategy &amp; Build
          </span>
        )}
      </span>
    </span>
  );
}

/* ── LockupStacked — mark + two-line “Applied / Decisions” (editorial) ────── */
function LockupStacked({ markSize = 28, fontSize = 19, tagline = false }) {
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 13, textDecoration: "none" }}>
      <ApisMark size={markSize} />
      <span style={{ display: "inline-flex", flexDirection: "column", lineHeight: 0.98 }}>
        <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize, color: "#fff", letterSpacing: "-0.02em" }}>Applied</span>
        <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize, color: "var(--accent-bright)", letterSpacing: "-0.02em" }}>Decisions</span>
        {tagline && (
          <span className="kicker" style={{ fontSize: 8, letterSpacing: "0.26em", color: "var(--text-muted)", marginTop: 6 }}>AI Strategy &amp; Build</span>
        )}
      </span>
    </span>
  );
}

/* ── Monogram — mark + “AD.” for tight spaces ────────────────────────────── */
function Monogram({ markSize = 26, fontSize = 19 }) {
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 10, textDecoration: "none" }}>
      <ApisMark size={markSize} />
      <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize, color: "#fff", letterSpacing: "-0.01em" }}>AD<span style={{ color: "var(--accent)" }}>.</span></span>
    </span>
  );
}

/* ── Hex-derived icon set — monoline 24px grid, currentColor ──────────────
   Each icon nests its glyph inside a hex motif where it strengthens the family.
   stroke 1.7, rounded joins. ─────────────────────────────────────────────── */
function Ico({ size = 24, sw = 1.7, children, style }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={style}>
      {children}
    </svg>
  );
}
/* utility hexagon (flat-top) for icon grid, centered 12,12 */
const HEX12 = "M21 12 16.5 19.79 7.5 19.79 3 12 7.5 4.21 16.5 4.21Z";

/* Strategy & Build — hex target with a rising build-arrow through it */
const IconStrategy = (p) => (
  <Ico {...p}>
    <path d="M20 12.5 16 19.4 8 19.4 4 12.5 8 5.6 16 5.6Z" />
    <path d="M8.4 15.2 12 8.6 15.6 15.2" />
    <path d="M9.7 12.9h4.6" />
  </Ico>
);
/* Pricing & Packaging — hex cell split by a value line + tick (margin) */
const IconPricing = (p) => (
  <Ico {...p}>
    <path d="M20 12.5 16 19.4 8 19.4 4 12.5 8 5.6 16 5.6Z" />
    <path d="M8.5 14.6 11 12l2 2 2.6-3.4" />
    <path d="M12 4.2v3M12 17v2.4" opacity="0.5" />
  </Ico>
);
/* Workshops & Speaking — hex podium with broadcast arcs */
const IconWorkshop = (p) => (
  <Ico {...p}>
    <path d="M18.5 13 15 19 9 19 5.5 13 9 7 15 7Z" />
    <path d="M12 9.4v6.4" />
    <path d="M17.8 7.6a6 6 0 0 1 0 8.8M20.4 5.1a9.4 9.4 0 0 1 0 13.8" opacity="0.55" />
  </Ico>
);
/* Icons reused from code, hex-tuned */
const ArrowRight = (p) => <Ico {...p}><path d="M5 12h14M13 6l6 6-6 6" /></Ico>;
const ArrowUp = (p) => <Ico {...p}><path d="M12 19V5M6 11l6-6 6 6" /></Ico>;
const Check = (p) => <Ico {...p}><path d="M20 6 9 17l-5-5" /></Ico>;
const IconContact = (p) => (
  <Ico {...p}><path d="M20 12.5 16 19.4 8 19.4 4 12.5 8 5.6 16 5.6Z" /><path d="M8 9.8 12 13l4-3.2" /><path d="M8 9.8h8v5.2H8z" opacity="0" /></Ico>
);

/* Small standalone hex bullet/tick */
function HexTick({ size = 11, color = "var(--accent)", fill = false }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={fill ? color : "none"} stroke={color}
      strokeWidth="1.8" strokeLinejoin="round" aria-hidden="true" style={{ flexShrink: 0 }}>
      <path d={HEX12} />
    </svg>
  );
}

Object.assign(window, {
  hexD, ApisMark, HexMark, Lockup, LockupStacked, Monogram, Ico, HexTick,
  IconStrategy, IconPricing, IconWorkshop, IconContact,
  ArrowRight, ArrowUp, Check,
});