// Shared utilities and tiny components used across all artboards.

// Heraldic shield mark, matching Sellers Shield's logo style:
// outline shield with a thin inner border and "SELLERS / SHIELD" stacked.
const ShieldMark = ({ size = 22, color = "currentColor", solid = false }) => {
  const W = 60, H = 70;
  return (
    <svg viewBox={`0 0 ${W} ${H}`} fill="none" style={{ width: size, height: size * H / W, display: "block" }}>
      {/* Outer shield */}
      <path
        d="M30 3 L7 9 L7 38 C 7 55, 18 64, 30 68 C 42 64, 53 55, 53 38 L 53 9 Z"
        fill={solid ? color : "none"}
        stroke={color}
        strokeWidth="2.6"
        strokeLinejoin="round"
      />
      {/* Inner border */}
      <path
        d="M30 8 L11 13 L11 38 C 11 52, 20 60, 30 63.5 C 40 60, 49 52, 49 38 L 49 13 Z"
        fill="none"
        stroke={solid ? "white" : color}
        strokeOpacity={solid ? 0.85 : 1}
        strokeWidth="0.9"
        strokeLinejoin="round"
      />
      {/* Wordmark */}
      <g
        fontFamily="Inter Tight, sans-serif"
        fontWeight="700"
        textAnchor="middle"
        letterSpacing="0.16em"
        fill={solid ? "white" : color}
      >
        <text x="30" y="32" fontSize="8.5">SELLERS</text>
        <text x="30" y="44" fontSize="8.5">SHIELD</text>
        {/* tiny rule between */}
        <line x1="20" y1="36" x2="40" y2="36" stroke={solid ? "white" : color} strokeWidth="0.6" />
      </g>
    </svg>
  );
};

const Logo = ({ size = 26, color = "currentColor" }) => (
  <span className="ss-logo" style={{ color }}>
    <ShieldMark size={size} color={color} />
    <span style={{ fontFamily: "var(--font-serif)", fontSize: 15, fontWeight: 500, letterSpacing: "0.02em", color }}>
      Home Sale Legal Protection<sup style={{ fontSize: 8, top: -6, position: "relative", marginLeft: 1, fontWeight: 600 }}>™</sup>
    </span>
  </span>
);

// Status pill
const Pill = ({ tone = "neutral", children, dot = false }) => {
  const tones = {
    neutral: { bg: "var(--bg-sunken)", fg: "var(--ink-2)", dot: "var(--ink-3)" },
    success: { bg: "var(--green-bg)", fg: "var(--green)", dot: "var(--green)" },
    warn: { bg: "var(--amber-bg)", fg: "oklch(48% 0.12 65)", dot: "var(--amber)" },
    danger: { bg: "var(--red-bg)", fg: "var(--red)", dot: "var(--red)" },
    info: { bg: "var(--blue-bg)", fg: "var(--blue)", dot: "var(--blue)" },
  };
  const t = tones[tone] || tones.neutral;
  return (
    <span
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: 6,
        padding: "3px 9px",
        borderRadius: 999,
        background: t.bg,
        color: t.fg,
        fontSize: 11.5,
        fontWeight: 500,
        letterSpacing: "0.01em",
        lineHeight: 1.4,
        whiteSpace: "nowrap",
      }}
    >
      {dot && (
        <span
          style={{
            width: 6,
            height: 6,
            borderRadius: 999,
            background: t.dot,
          }}
        />
      )}
      {children}
    </span>
  );
};

// Field input
const Field = ({ label, hint, value, placeholder, type = "text", required, prefix, suffix, error, onChange, autoFocus }) => {
  // Use defaultValue when no onChange (these are mocked, read-only-looking fields)
  const inputProps = onChange
    ? { value: value || "", onChange }
    : { defaultValue: value || "" };
  return (
  <label style={{ display: "block", minWidth: 0 }}>
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 6 }}>
      <span style={{ fontSize: 12.5, fontWeight: 500, color: "var(--ink-2)", letterSpacing: "0.005em" }}>
        {label} {required && <span style={{ color: "var(--ink-4)" }}>*</span>}
      </span>
      {hint && <span style={{ fontSize: 11.5, color: "var(--ink-4)" }}>{hint}</span>}
    </div>
    <div
      style={{
        display: "flex",
        alignItems: "center",
        background: "var(--bg-elev)",
        border: `1px solid ${error ? "var(--red)" : "var(--line)"}`,
        borderRadius: "var(--r-md)",
        padding: "0 12px",
        height: 42,
        transition: "border-color .15s, box-shadow .15s",
      }}
    >
      {prefix && <span style={{ color: "var(--ink-4)", fontSize: 13, marginRight: 8 }}>{prefix}</span>}
      <input
        type={type}
        {...inputProps}
        placeholder={placeholder}
        autoFocus={autoFocus}
        style={{
          flex: 1,
          minWidth: 0,
          width: "100%",
          border: "none",
          outline: "none",
          background: "transparent",
          fontFamily: "inherit",
          fontSize: 14,
          color: "var(--ink)",
          height: "100%",
        }}
      />
      {suffix && <span style={{ color: "var(--ink-4)", fontSize: 13, marginLeft: 8 }}>{suffix}</span>}
    </div>
    {error && <div style={{ fontSize: 11.5, color: "var(--red)", marginTop: 4 }}>{error}</div>}
  </label>
  );
};

// Generic button
const Btn = ({ children, kind = "primary", size = "md", full, onClick, icon, type = "button", style }) => {
  const sizes = {
    sm: { h: 32, px: 12, fs: 12.5 },
    md: { h: 42, px: 18, fs: 13.5 },
    lg: { h: 50, px: 24, fs: 14.5 },
  };
  const s = sizes[size];
  const kinds = {
    primary: { bg: "var(--navy)", fg: "white", border: "var(--navy)" },
    amber: { bg: "var(--amber)", fg: "white", border: "var(--amber)" },
    secondary: { bg: "var(--bg-elev)", fg: "var(--ink)", border: "var(--line-strong)" },
    ghost: { bg: "transparent", fg: "var(--ink-2)", border: "transparent" },
    danger: { bg: "var(--bg-elev)", fg: "var(--red)", border: "var(--line)" },
  };
  const k = kinds[kind];
  return (
    <button
      type={type}
      onClick={onClick}
      style={{
        display: "inline-flex",
        alignItems: "center",
        justifyContent: "center",
        gap: 8,
        height: s.h,
        padding: `0 ${s.px}px`,
        background: k.bg,
        color: k.fg,
        border: `1px solid ${k.border}`,
        borderRadius: "var(--r-md)",
        fontFamily: "inherit",
        fontSize: s.fs,
        fontWeight: 500,
        letterSpacing: "0.005em",
        cursor: "pointer",
        width: full ? "100%" : "auto",
        transition: "transform .08s, opacity .15s",
        ...style,
      }}
      onMouseDown={(e) => (e.currentTarget.style.transform = "translateY(1px)")}
      onMouseUp={(e) => (e.currentTarget.style.transform = "")}
      onMouseLeave={(e) => (e.currentTarget.style.transform = "")}
    >
      {icon && <span style={{ display: "inline-flex" }}>{icon}</span>}
      {children}
    </button>
  );
};

// Card icon: outline icons, all 16x16
const Icon = ({ name, size = 16, color = "currentColor" }) => {
  const paths = {
    card: <><rect x="2" y="4" width="12" height="9" rx="1.5" /><line x1="2" y1="7" x2="14" y2="7" /></>,
    bank: <><path d="M2 6L8 2l6 4" /><line x1="2" y1="13.5" x2="14" y2="13.5" /><line x1="3.5" y1="7.5" x2="3.5" y2="12.5" /><line x1="6.5" y1="7.5" x2="6.5" y2="12.5" /><line x1="9.5" y1="7.5" x2="9.5" y2="12.5" /><line x1="12.5" y1="7.5" x2="12.5" y2="12.5" /></>,
    apple: <><path d="M11.2 8.4c0-1.6 1.3-2.4 1.4-2.5-.7-1.1-2-1.2-2.4-1.3-1-.1-2 .6-2.5.6-.5 0-1.3-.6-2.2-.6-1.1 0-2.2.7-2.7 1.7-1.2 2-.3 5 .8 6.6.6.8 1.2 1.7 2.1 1.7.8 0 1.2-.5 2.2-.5s1.3.5 2.2.5c.9 0 1.5-.8 2-1.6.7-.9.9-1.8.9-1.8s-1.8-.7-1.8-2.8z" fill={color} stroke="none" /><path d="M9.7 3.3c.4-.5.7-1.2.6-1.9-.6 0-1.4.4-1.8.9-.4.4-.7 1.1-.6 1.8.7 0 1.4-.4 1.8-.8z" fill={color} stroke="none" /></>,
    google: <><path d="M14 8.2c0-.4 0-.7-.1-1H8v2h3.4c-.1.7-.6 1.3-1.2 1.7v1.4h2c1.2-1.1 1.8-2.7 1.8-4.1z" fill="#4285F4" stroke="none" /><path d="M8 14c1.6 0 3-.5 4-1.4l-2-1.4c-.5.4-1.2.6-2 .6-1.5 0-2.8-1-3.3-2.4H2.6v1.5C3.6 12.8 5.6 14 8 14z" fill="#34A853" stroke="none" /><path d="M4.7 9.4c-.1-.3-.2-.7-.2-1s.1-.7.2-1V5.9H2.6c-.4.7-.6 1.5-.6 2.1s.2 1.4.6 2.1l2.1-1.7z" fill="#FBBC04" stroke="none" /><path d="M8 4.2c.9 0 1.7.3 2.3.9l1.7-1.7C11 2.5 9.6 2 8 2 5.6 2 3.6 3.2 2.6 5.9l2.1 1.7c.5-1.4 1.8-2.4 3.3-2.4z" fill="#EA4335" stroke="none" /></>,
    check: <polyline points="3 8 7 12 13 4" />,
    lock: <><rect x="3.5" y="7" width="9" height="6.5" rx="1" /><path d="M5.5 7V5a2.5 2.5 0 0 1 5 0v2" /></>,
    info: <><circle cx="8" cy="8" r="6" /><line x1="8" y1="11" x2="8" y2="7.5" /><circle cx="8" cy="5.2" r="0.5" fill={color} /></>,
    arrow: <><line x1="3" y1="8" x2="13" y2="8" /><polyline points="9 4 13 8 9 12" /></>,
    chevron: <polyline points="6 4 10 8 6 12" />,
    chevronDown: <polyline points="4 6 8 10 12 6" />,
    home: <><path d="M2.5 7L8 2.5 13.5 7v6.5h-3v-4h-5v4h-3z" /></>,
    roof: <><path d="M1.5 8L8 2.5 14.5 8" /><path d="M3 7v6.5h10V7" /></>,
    foundation: <><rect x="2" y="9" width="12" height="3" /><rect x="3.5" y="6" width="9" height="3" /><rect x="5" y="3" width="6" height="3" /></>,
    droplet: <><path d="M8 1.5C5 5 3 7.5 3 10a5 5 0 0 0 10 0c0-2.5-2-5-5-8.5z" /></>,
    thermostat: <><circle cx="8" cy="9" r="3" /><line x1="8" y1="2" x2="8" y2="6" /><path d="M5.5 11.5l-1.5 2" /><path d="M10.5 11.5l1.5 2" /></>,
    mold: <><circle cx="5" cy="6" r="1.2" /><circle cx="9.5" cy="5" r="1.2" /><circle cx="11" cy="9.5" r="1.2" /><circle cx="6" cy="10.5" r="1.2" /><circle cx="3.5" cy="10" r="0.9" /><circle cx="12.5" cy="6" r="0.9" /></>,
    mail: <><rect x="2" y="3.5" width="12" height="9" rx="1" /><polyline points="2 5 8 9 14 5" /></>,
    sync: <><path d="M2 8a6 6 0 0 1 10-4.5L13.5 5" /><polyline points="13.5 2.5 13.5 5 11 5" /><path d="M14 8a6 6 0 0 1-10 4.5L2.5 11" /><polyline points="2.5 13.5 2.5 11 5 11" /></>,
    search: <><circle cx="7" cy="7" r="4.5" /><line x1="10.5" y1="10.5" x2="13.5" y2="13.5" /></>,
    plus: <><line x1="8" y1="3" x2="8" y2="13" /><line x1="3" y1="8" x2="13" y2="8" /></>,
    filter: <><polyline points="2 3 14 3 9.5 8.5 9.5 13 6.5 14 6.5 8.5" /></>,
    bolt: <><polygon points="9 1 2 9 7 9 7 15 14 7 9 7" /></>,
    receipt: <><path d="M3 1v14l2-1.5L7 15l2-1.5L11 15l2-1.5V1z" /><line x1="5" y1="5" x2="11" y2="5" /><line x1="5" y1="8" x2="11" y2="8" /><line x1="5" y1="11" x2="9" y2="11" /></>,
    clock: <><circle cx="8" cy="8" r="6" /><polyline points="8 4 8 8 11 10" /></>,
    user: <><circle cx="8" cy="6" r="2.5" /><path d="M3 14c0-2.5 2.2-4.5 5-4.5s5 2 5 4.5" /></>,
    bell: <><path d="M4 11.5h8L11 9.5V7a3 3 0 0 0-6 0v2.5L4 11.5z" /><path d="M6.5 13a1.5 1.5 0 0 0 3 0" /></>,
    download: <><line x1="8" y1="2.5" x2="8" y2="10" /><polyline points="5 7 8 10 11 7" /><line x1="3" y1="13.5" x2="13" y2="13.5" /></>,
    external: <><polyline points="9 2 14 2 14 7" /><line x1="14" y1="2" x2="8" y2="8" /><path d="M11 9.5v3.5h-9v-9h3.5" /></>,
    spark: <><path d="M8 1.5v3M8 11.5v3M1.5 8h3M11.5 8h3M3.5 3.5l2 2M10.5 10.5l2 2M3.5 12.5l2-2M10.5 5.5l2-2" /></>,
    refresh: <><path d="M2 8a6 6 0 0 1 10.5-4" /><polyline points="13 2 13 5 10 5" /><path d="M14 8a6 6 0 0 1-10.5 4" /><polyline points="3 14 3 11 6 11" /></>,
  };
  return (
    <svg
      viewBox="0 0 16 16"
      width={size}
      height={size}
      fill="none"
      stroke={color}
      strokeWidth="1.4"
      strokeLinecap="round"
      strokeLinejoin="round"
      style={{ display: "block", flexShrink: 0 }}
    >
      {paths[name]}
    </svg>
  );
};

// Inline brand mark for Stripe / Zoho / HubSpot — minimal, generic
const BrandMark = ({ name, size = 28 }) => {
  const marks = {
    stripe: { bg: "#635BFF", glyph: "S", fg: "white" },
    zoho: { bg: "#E42527", glyph: "Z", fg: "white" },
    hubspot: { bg: "#FF7A59", glyph: "H", fg: "white" },
    gmail: { bg: "#EA4335", glyph: "M", fg: "white" },
  };
  const m = marks[name];
  return (
    <span
      style={{
        width: size,
        height: size,
        borderRadius: size * 0.25,
        background: m.bg,
        color: m.fg,
        display: "inline-flex",
        alignItems: "center",
        justifyContent: "center",
        fontWeight: 700,
        fontSize: size * 0.5,
        fontFamily: "var(--font-sans)",
        letterSpacing: "-0.02em",
      }}
    >
      {m.glyph}
    </span>
  );
};

const formatCurrency = (cents) =>
  (cents / 100).toLocaleString("en-US", { style: "currency", currency: "USD" });

Object.assign(window, { Logo, ShieldMark, Pill, Field, Btn, Icon, BrandMark, formatCurrency });