// site/kit.jsx — wakalix marketing site shared primitives
// Logo + handoff mark, icon set, section scaffold, framed product surfaces.

const MONO_F = '"JetBrains Mono", ui-monospace, monospace';
const DISP_F = "var(--font-display)";

// ── Icons (subset of the wakalix vocabulary) ────────────────────────────────
const Ico = ({ name, size = 16, stroke = 1.6, style, c }) => {
  const p = {
    arrowR:  <><path d="M3 8h10M9 4l4 4-4 4"/></>,
    chev:    <path d="M5 6l3 3 3-3"/>,
    chevR:   <path d="M6 4l3 4-3 4"/>,
    check:   <path d="M3 8.5l3 3 7-7"/>,
    x:       <path d="M3.5 3.5l9 9M12.5 3.5l-9 9"/>,
    handoff: <><path d="M3 5l3.5 3.5L3 12"/><path d="M8 5l3.5 3.5L8 12" opacity="0.55"/></>,
    dispatch:<><path d="M2.5 8h8"/><path d="M7.5 4.5L11 8l-3.5 3.5"/><path d="M13.5 3v10"/></>,
    gauge:   <><path d="M3 11a5 5 0 1 1 10 0"/><path d="M8 11l3-2.5"/><circle cx="8" cy="11" r="0.8" fill="currentColor" stroke="none"/></>,
    coin:    <><circle cx="8" cy="8" r="6"/><path d="M6 6.5h3a1.5 1.5 0 0 1 0 3H6m0 0v2m0-2h3.5"/></>,
    gavel:   <><path d="M9.5 2.5l4 4-2 2-4-4z"/><path d="M7 5l-4.5 4.5 1.5 1.5L8.5 6.5"/><path d="M3 14h6"/></>,
    layers:  <><path d="M8 2l6 3-6 3-6-3z"/><path d="M2 8l6 3 6-3M2 11l6 3 6-3"/></>,
    target:  <><circle cx="8" cy="8" r="6"/><circle cx="8" cy="8" r="3"/><circle cx="8" cy="8" r="0.6" fill="currentColor" stroke="none"/></>,
    bolt:    <><path d="M9 2L4 9h4l-1 5 5-7H8l1-5z"/></>,
    shield:  <><path d="M8 2l5 2v4c0 3.5-2.4 5.5-5 6.5C5.4 13.5 3 11.5 3 8V4l5-2z"/><path d="M5.5 8l1.8 1.8L11 6"/></>,
    refresh: <><path d="M13 8a5 5 0 1 1-1.5-3.55"/><path d="M13 3v3h-3"/></>,
    route:   <><circle cx="4" cy="12" r="1.6"/><circle cx="12" cy="4" r="1.6"/><path d="M5.5 11.5C9 11 7 5 10.5 4.5"/></>,
    sun:     <><circle cx="8" cy="8" r="2.5"/><path d="M8 1v2M8 13v2M1 8h2M13 8h2M3 3l1.4 1.4M11.6 11.6L13 13M3 13l1.4-1.4M11.6 4.4L13 3"/></>,
    moon:    <path d="M13 9.5A5 5 0 0 1 6.5 3a5 5 0 1 0 6.5 6.5Z"/>,
    book:    <><path d="M3 3.5A1.5 1.5 0 0 1 4.5 2H13v10H4.5A1.5 1.5 0 0 0 3 13.5z"/><path d="M3 13.5A1.5 1.5 0 0 1 4.5 12H13v2H4.5A1.5 1.5 0 0 1 3 13.5z"/></>,
    box:     <><path d="M2.5 5L8 2l5.5 3v6L8 14 2.5 11V5Z"/><path d="M2.5 5L8 8l5.5-3M8 8v6"/></>,
    grid:    <><rect x="2" y="2" width="5" height="5"/><rect x="9" y="2" width="5" height="5"/><rect x="2" y="9" width="5" height="5"/><rect x="9" y="9" width="5" height="5"/></>,
    eye:     <><path d="M1.5 8s2.5-4.5 6.5-4.5S14.5 8 14.5 8s-2.5 4.5-6.5 4.5S1.5 8 1.5 8Z"/><circle cx="8" cy="8" r="2"/></>,
    plug:    <><path d="M6 2v3M10 2v3"/><path d="M4.5 5h7v3a3.5 3.5 0 0 1-7 0z"/><path d="M8 11.5V14"/></>,
    mail:    <><rect x="2" y="3.5" width="12" height="9" rx="1.5"/><path d="M2.5 4.5L8 9l5.5-4.5"/></>,
    github:  <><path d="M8 1.5a6.5 6.5 0 0 0-2 12.7c.3.06.43-.14.43-.3v-1.1c-1.8.4-2.18-.86-2.18-.86-.3-.75-.72-.95-.72-.95-.6-.4.04-.4.04-.4.65.05 1 .67 1 .67.58 1 1.5.7 1.87.54.06-.42.23-.7.4-.87-1.44-.16-2.95-.72-2.95-3.2 0-.7.25-1.28.67-1.73-.07-.16-.3-.82.06-1.7 0 0 .55-.18 1.8.66a6.2 6.2 0 0 1 3.27 0c1.24-.84 1.79-.66 1.79-.66.36.88.13 1.54.06 1.7.42.45.67 1.02.67 1.73 0 2.48-1.51 3.03-2.95 3.19.23.2.44.6.44 1.2v1.8c0 .17.12.37.44.3A6.5 6.5 0 0 0 8 1.5z" fill="currentColor" stroke="none"/></>,
    sparkle: <><path d="M8 2l1.3 4.2L13.5 8l-4.2 1.3L8 13.5 6.7 9.3 2.5 8l4.2-1.3z"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke={c || "currentColor"} strokeWidth={stroke}
      strokeLinecap="round" strokeLinejoin="round" style={style} aria-hidden="true">{p[name] || null}</svg>
  );
};

// ── Handoff mark (the primary logo glyph) ───────────────────────────────────
function Mark({ size = 30, radius }) {
  const r = radius != null ? radius : Math.round(size * 0.27);
  return (
    <span style={{ width: size, height: size, borderRadius: r, flexShrink: 0, display: "grid", placeItems: "center",
      background: "linear-gradient(155deg, var(--accent-strong) 0%, var(--accent) 55%, oklch(from var(--accent) calc(l - 0.08) c h) 100%)",
      boxShadow: "inset 0 1px 0 oklch(1 0 0 / 0.28), inset 0 -1px 0 oklch(0 0 0 / 0.22), 0 2px 8px oklch(from var(--accent) calc(l - 0.3) c h / 0.45)" }}>
      <svg width="62%" height="62%" viewBox="0 0 48 48" aria-hidden="true">
        <g stroke="#06141C" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round" fill="none">
          <path d="M12 11 L18 26 L24 16 L30 26 L36 11" />
          <path d="M18 26 L32 37" />
          <path d="M30 26 L16 37" />
        </g>
      </svg>
    </span>
  );
}

function Logo({ size = 28, sub = "by AimpathyMinds", wordSize }) {
  const ws = wordSize || size * 0.66;
  return (
    <a href="#top" style={{ display: "inline-flex", alignItems: "center", gap: 10, textDecoration: "none" }}>
      <Mark size={size} />
      <span style={{ display: "inline-flex", flexDirection: "column", lineHeight: 1.05 }}>
        <span className="wx-word" style={{ fontFamily: MONO_F, fontSize: ws, fontWeight: 600, letterSpacing: "-0.02em", color: "var(--fg-1)" }}>wakali<span style={{ color: "var(--accent)" }}>x</span></span>
        {sub && <span style={{ fontSize: ws * 0.42, color: "var(--fg-3)", letterSpacing: "0.06em", textTransform: "uppercase", fontWeight: 500, marginTop: 2 }}>{sub}</span>}
      </span>
    </a>
  );
}

// ── Eyebrow / kicker ────────────────────────────────────────────────────────
function Eyebrow({ children, icon }) {
  return (
    <div style={{ display: "inline-flex", alignItems: "center", gap: 7, fontFamily: MONO_F, fontSize: 11.5, fontWeight: 600,
      letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--accent)", marginBottom: 16 }}>
      {icon && <Ico name={icon} size={13} />}
      {children}
    </div>
  );
}

// ── Section wrapper ─────────────────────────────────────────────────────────
function Section({ id, children, style, max = 1120, pad = "82px 32px", bg }) {
  return (
    <section id={id} style={{ padding: pad, background: bg, position: "relative", ...style }}>
      <div style={{ maxWidth: max, margin: "0 auto", position: "relative" }}>{children}</div>
    </section>
  );
}

// ── Pill / tag ──────────────────────────────────────────────────────────────
function Tag({ children, tone }) {
  const styles = {
    accent: { color: "var(--accent)", background: "var(--accent-soft)" },
    ok: { color: "var(--ok)", background: "var(--ok-soft)" },
    warn: { color: "var(--warn)", background: "var(--warn-soft)" },
    neutral: { color: "var(--fg-2)", background: "var(--bg-sunken)", border: "var(--hairline) solid var(--border-2)" },
  }[tone || "neutral"];
  return <span style={{ display: "inline-flex", alignItems: "center", gap: 5, height: 22, padding: "0 9px", borderRadius: 999, fontSize: 11.5, fontWeight: 600, fontFamily: MONO_F, letterSpacing: "0.01em", ...styles }}>{children}</span>;
}

// ── Status token (bracketed mono) ───────────────────────────────────────────
function Tok({ t }) { return <span className="wx-tok" data-tok={t}>[{t}]</span>; }

// ── Window / app frame for stylized product surfaces ────────────────────────
function Frame({ url, children, title, height, accent = false }) {
  return (
    <div style={{ borderRadius: "var(--r-4)", overflow: "hidden", background: "var(--bg-base)",
      border: "var(--hairline) solid var(--border-2)",
      boxShadow: accent ? "0 1px 0 oklch(1 0 0 / 0.04) inset, 0 30px 80px -20px oklch(from var(--accent) calc(l - 0.35) c h / 0.5), 0 12px 40px oklch(0 0 0 / 0.5)" : "var(--shadow-3)" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, height: 38, padding: "0 12px", background: "var(--bg-raised)", borderBottom: "var(--hairline) solid var(--border-1)" }}>
        <span style={{ display: "flex", gap: 6 }}>
          {["var(--bad)","var(--warn)","var(--ok)"].map((c,i)=><span key={i} style={{ width: 10, height: 10, borderRadius: 5, background: c, opacity: 0.55 }} />)}
        </span>
        {url && (
          <span style={{ flex: 1, display: "flex", justifyContent: "center" }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6, height: 22, padding: "0 12px", borderRadius: 999, background: "var(--bg-sunken)", border: "var(--hairline) solid var(--border-1)", fontFamily: MONO_F, fontSize: 11, color: "var(--fg-3)" }}>
              <Ico name="shield" size={11} c="var(--fg-4)" />{url}
            </span>
          </span>
        )}
        {url && <span style={{ width: 52 }} />}
      </div>
      <div style={{ height, overflow: "hidden" }}>{children}</div>
    </div>
  );
}

// ── Generic card ────────────────────────────────────────────────────────────
function Card({ children, style, hover = true, pad = 22 }) {
  return <div className={hover ? "wx-card wx-card--hover" : "wx-card"} style={{ padding: pad, ...style }}>{children}</div>;
}

Object.assign(window, { Ico, Mark, Logo, Eyebrow, Section, Tag, Tok, Frame, Card, MONO_F, DISP_F });