/* Backentra website — the eight design-system primitives this site uses, and nothing
   else. Lifted verbatim from the design system's components/core/. The full bundle also
   carries the operator app and CRM, which this site has no business shipping.
   Exposes window.BackentraDesignSystem_93cf3a. */
(function () {
const React = window.React;

/* ---------- Icon ---------- */
/**
 * Icon — thin wrapper over Lucide (https://lucide.dev), Backentra's chosen
 * line-icon set. Renders an inline SVG for the named glyph with brand sizing
 * and color. Requires the Lucide UMD script to be loaded on the page
 * (window.lucide); degrades to an empty box if not present.
 */
function Icon({
  name,
  size = 20,
  color = "currentColor",
  strokeWidth = 2,
  style = {},
  ...rest
}) {
  const ref = React.useRef(null);

  React.useEffect(() => {
    const host = ref.current;
    if (!host) return;
    const lucide = typeof window !== "undefined" ? window.lucide : null;
    host.innerHTML = "";
    if (lucide && lucide.icons) {
      // Lucide UMD exposes camelCase keys (e.g. "arrow-up-right" -> "ArrowUpRight")
      const key = name
        .split(/[-_]/)
        .map((p) => p.charAt(0).toUpperCase() + p.slice(1))
        .join("");
      const node = lucide.icons[key];
      if (node) {
        const el = lucide.createElement
          ? lucide.createElement(node)
          : null;
        if (el) {
          el.setAttribute("width", size);
          el.setAttribute("height", size);
          el.setAttribute("stroke-width", strokeWidth);
          host.appendChild(el);
          return;
        }
      }
      // Fallback: let createIcons scan a placeholder
      const i = document.createElement("i");
      i.setAttribute("data-lucide", name);
      host.appendChild(i);
      if (lucide.createIcons) {
        lucide.createIcons({
          attrs: { width: size, height: size, "stroke-width": strokeWidth },
        });
      }
    }
  }, [name, size, strokeWidth]);

  return (
    <span
      ref={ref}
      aria-hidden="true"
      style={{
        display: "inline-flex",
        alignItems: "center",
        justifyContent: "center",
        width: size,
        height: size,
        color,
        flex: "none",
        ...style,
      }}
      {...rest}
    />
  );
}

/* ---------- Button ---------- */
/**
 * Button — Backentra's primary action control. Solid, confident, grid-aligned.
 * Variants: primary (burnt orange), secondary (slate navy), outline, ghost.
 */
function Button({
  children,
  variant = "primary",
  size = "md",
  block = false,
  disabled = false,
  iconLeft = null,
  iconRight = null,
  type = "button",
  style = {},
  ...rest
}) {
  const [hover, setHover] = React.useState(false);
  const [active, setActive] = React.useState(false);

  const sizes = {
    sm: { padding: "8px 14px", font: "var(--text-sm)", h: 34, gap: 6 },
    md: { padding: "11px 20px", font: "var(--text-md)", h: 42, gap: 8 },
    lg: { padding: "14px 26px", font: "var(--text-lg)", h: 50, gap: 10 },
  }[size];

  const palettes = {
    primary: {
      bg: hover ? "var(--accent-hover)" : "var(--accent)",
      bgActive: "var(--accent-active)",
      color: "#fff",
      border: "transparent",
      shadow: "var(--shadow-accent)",
    },
    secondary: {
      bg: hover ? "var(--ink-hover)" : "var(--navy-900)",
      bgActive: "var(--ink-active)",
      color: "var(--text-inverse)",
      border: "transparent",
      shadow: "var(--shadow-sm)",
    },
    outline: {
      bg: hover ? "var(--gray-50)" : "transparent",
      bgActive: "var(--gray-100)",
      color: "var(--navy-900)",
      border: "var(--border-strong)",
      shadow: "none",
    },
    ghost: {
      bg: hover ? "var(--gray-100)" : "transparent",
      bgActive: "var(--gray-200)",
      color: "var(--navy-900)",
      border: "transparent",
      shadow: "none",
    },
  };
  const p = palettes[variant] || palettes.primary;

  return (
    <button
      type={type}
      disabled={disabled}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => { setHover(false); setActive(false); }}
      onMouseDown={() => setActive(true)}
      onMouseUp={() => setActive(false)}
      style={{
        display: block ? "flex" : "inline-flex",
        width: block ? "100%" : "auto",
        alignItems: "center",
        justifyContent: "center",
        gap: sizes.gap,
        minHeight: sizes.h,
        padding: sizes.padding,
        fontFamily: "var(--font-display)",
        fontWeight: "var(--fw-semibold)",
        fontSize: sizes.font,
        letterSpacing: "var(--tracking-tight)",
        lineHeight: 1,
        color: p.color,
        background: active ? p.bgActive : p.bg,
        border: `var(--border-thin) solid ${p.border}`,
        borderRadius: "var(--radius-md)",
        boxShadow: variant === "primary" && !active ? p.shadow : "none",
        cursor: disabled ? "not-allowed" : "pointer",
        opacity: disabled ? 0.5 : 1,
        transition:
          "background var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard)",
        whiteSpace: "nowrap",
        ...style,
      }}
      {...rest}
    >
      {iconLeft}
      {children}
      {iconRight}
    </button>
  );
}

/* ---------- Card ---------- */
/**
 * Card — white surface with hairline border + soft cool shadow. The default
 * container for Backentra content. Optional header (title/subtitle/action) and
 * padded body. Set `interactive` for a hover lift.
 */
function Card({
  title,
  subtitle,
  action = null,
  children,
  padding = "var(--space-6)",
  interactive = false,
  style = {},
  bodyStyle = {},
  ...rest
}) {
  const [hover, setHover] = React.useState(false);

  return (
    <div
      onMouseEnter={() => interactive && setHover(true)}
      onMouseLeave={() => interactive && setHover(false)}
      style={{
        background: "var(--surface-card)",
        border: "var(--border-thin) solid var(--border)",
        borderRadius: "var(--radius-lg)",
        boxShadow: hover ? "var(--shadow-md)" : "var(--shadow-sm)",
        transform: hover ? "translateY(-2px)" : "none",
        transition: "box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard)",
        overflow: "hidden",
        ...style,
      }}
      {...rest}
    >
      {(title || action) && (
        <div
          style={{
            display: "flex",
            alignItems: "flex-start",
            justifyContent: "space-between",
            gap: 12,
            padding: `var(--space-5) ${padding} 0`,
          }}
        >
          <div>
            {title && (
              <div
                style={{
                  fontFamily: "var(--font-display)",
                  fontWeight: "var(--fw-bold)",
                  fontSize: "var(--text-lg)",
                  color: "var(--text-strong)",
                  letterSpacing: "var(--tracking-tight)",
                }}
              >
                {title}
              </div>
            )}
            {subtitle && (
              <div style={{ fontSize: "var(--text-sm)", color: "var(--text-muted)", marginTop: 2 }}>
                {subtitle}
              </div>
            )}
          </div>
          {action}
        </div>
      )}
      <div style={{ padding, ...bodyStyle }}>{children}</div>
    </div>
  );
}

/* ---------- Badge ---------- */
/**
 * Badge — small status pill. Tones map to Backentra's muted status palette.
 * `solid` for a filled treatment, otherwise soft (tinted) by default.
 */
function Badge({ children, tone = "neutral", solid = false, dot = false, style = {}, ...rest }) {
  const tones = {
    neutral: { soft: "var(--gray-100)", softText: "var(--gray-700)", solid: "var(--gray-600)" },
    accent: { soft: "var(--orange-50)", softText: "var(--orange-700)", solid: "var(--accent)" },
    navy: { soft: "var(--gray-100)", softText: "var(--navy-900)", solid: "var(--navy-900)" },
    success: { soft: "var(--success-soft)", softText: "var(--green-500)", solid: "var(--success)" },
    warning: { soft: "var(--warning-soft)", softText: "var(--amber-500)", solid: "var(--warning)" },
    danger: { soft: "var(--danger-soft)", softText: "var(--red-500)", solid: "var(--danger)" },
    info: { soft: "var(--info-soft)", softText: "var(--blue-500)", solid: "var(--info)" },
  };
  const t = tones[tone] || tones.neutral;

  return (
    <span
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: 6,
        padding: "3px 10px",
        borderRadius: "var(--radius-pill)",
        fontFamily: "var(--font-display)",
        fontSize: "var(--text-xs)",
        fontWeight: "var(--fw-semibold)",
        letterSpacing: "0.01em",
        lineHeight: 1.4,
        color: solid ? "#fff" : t.softText,
        background: solid ? t.solid : t.soft,
        ...style,
      }}
      {...rest}
    >
      {dot && (
        <span
          style={{
            width: 6, height: 6, borderRadius: "var(--radius-pill)",
            background: solid ? "#fff" : t.solid,
          }}
        />
      )}
      {children}
    </span>
  );
}

/* ---------- SegmentedControl ---------- */
/**
 * SegmentedControl — horizontal set of exclusive options in a sunken track.
 * The active segment sits on a white raised chip. Intentional addition.
 */
function SegmentedControl({ options = [], value, defaultValue, onChange, style = {}, ...rest }) {
  const isControlled = value !== undefined;
  const [internal, setInternal] = React.useState(defaultValue ?? (options[0] && options[0].value));
  const current = isControlled ? value : internal;

  const pick = (v) => {
    if (!isControlled) setInternal(v);
    onChange && onChange(v);
  };

  return (
    <div
      role="tablist"
      style={{
        display: "inline-flex",
        padding: 4,
        gap: 2,
        background: "var(--gray-100)",
        border: "var(--border-thin) solid var(--border)",
        borderRadius: "var(--radius-md)",
        ...style,
      }}
      {...rest}
    >
      {options.map((o) => {
        const active = o.value === current;
        return (
          <button
            key={o.value}
            role="tab"
            aria-selected={active}
            onClick={() => pick(o.value)}
            style={{
              display: "inline-flex",
              alignItems: "center",
              gap: 6,
              border: "none",
              cursor: "pointer",
              padding: "7px 14px",
              borderRadius: "var(--radius-sm)",
              fontFamily: "var(--font-display)",
              fontSize: "var(--text-sm)",
              fontWeight: "var(--fw-semibold)",
              color: active ? "var(--navy-900)" : "var(--text-muted)",
              background: active ? "var(--surface-card)" : "transparent",
              boxShadow: active ? "var(--shadow-xs)" : "none",
              transition: "background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard)",
            }}
          >
            {o.icon}
            {o.label}
          </button>
        );
      })}
    </div>
  );
}

/* ---------- Input ---------- */
/**
 * Input — single-line text field with brand focus ring, optional leading icon,
 * label and hint/error. Structured, hairline-bordered, on the 4px grid.
 */
function Input({
  label,
  hint,
  error,
  iconLeft = null,
  id,
  disabled = false,
  style = {},
  wrapStyle = {},
  ...rest
}) {
  const [focus, setFocus] = React.useState(false);
  const inputId = id || React.useId();
  const borderColor = error
    ? "var(--danger)"
    : focus
    ? "var(--accent)"
    : "var(--border-strong)";

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 6, minWidth: 0, ...wrapStyle }}>
      {label && (
        <label
          htmlFor={inputId}
          style={{
            fontFamily: "var(--font-display)",
            fontSize: "var(--text-sm)",
            fontWeight: "var(--fw-semibold)",
            color: "var(--text-strong)",
          }}
        >
          {label}
        </label>
      )}
      <div
        style={{
          display: "flex",
          alignItems: "center",
          gap: 8,
          minWidth: 0,
          background: disabled ? "var(--gray-100)" : "var(--surface-card)",
          border: `var(--border-thin) solid ${borderColor}`,
          borderRadius: "var(--radius-md)",
          padding: "0 12px",
          boxShadow: focus ? "var(--ring-accent)" : "none",
          transition: "border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard)",
        }}
      >
        {iconLeft && <span style={{ color: "var(--text-subtle)", display: "flex" }}>{iconLeft}</span>}
        <input
          id={inputId}
          disabled={disabled}
          onFocus={() => setFocus(true)}
          onBlur={() => setFocus(false)}
          style={{
            flex: 1,
            minWidth: 0,
            border: "none",
            outline: "none",
            background: "transparent",
            padding: "11px 0",
            fontFamily: "var(--font-body)",
            fontSize: "var(--text-md)",
            color: "var(--text-strong)",
            ...style,
          }}
          {...rest}
        />
      </div>
      {(hint || error) && (
        <span
          style={{
            fontSize: "var(--text-xs)",
            color: error ? "var(--danger)" : "var(--text-muted)",
          }}
        >
          {error || hint}
        </span>
      )}
    </div>
  );
}

/* ---------- Select ---------- */
/**
 * Select — native select styled to match Backentra fields, with a chevron.
 * Pass options as [{value,label}] or use children <option>s.
 */
function Select({
  label,
  hint,
  error,
  id,
  options = null,
  disabled = false,
  children,
  style = {},
  wrapStyle = {},
  ...rest
}) {
  const [focus, setFocus] = React.useState(false);
  const inputId = id || React.useId();
  const borderColor = error
    ? "var(--danger)"
    : focus
    ? "var(--accent)"
    : "var(--border-strong)";

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 6, ...wrapStyle }}>
      {label && (
        <label
          htmlFor={inputId}
          style={{
            fontFamily: "var(--font-display)",
            fontSize: "var(--text-sm)",
            fontWeight: "var(--fw-semibold)",
            color: "var(--text-strong)",
          }}
        >
          {label}
        </label>
      )}
      <div
        style={{
          position: "relative",
          display: "flex",
          alignItems: "center",
          background: disabled ? "var(--gray-100)" : "var(--surface-card)",
          border: `var(--border-thin) solid ${borderColor}`,
          borderRadius: "var(--radius-md)",
          boxShadow: focus ? "var(--ring-accent)" : "none",
          transition: "border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard)",
        }}
      >
        <select
          id={inputId}
          disabled={disabled}
          onFocus={() => setFocus(true)}
          onBlur={() => setFocus(false)}
          style={{
            appearance: "none",
            WebkitAppearance: "none",
            flex: 1,
            border: "none",
            outline: "none",
            background: "transparent",
            padding: "11px 40px 11px 12px",
            fontFamily: "var(--font-body)",
            fontSize: "var(--text-md)",
            color: "var(--text-strong)",
            cursor: disabled ? "not-allowed" : "pointer",
            ...style,
          }}
          {...rest}
        >
          {options
            ? options.map((o) => (
                <option key={o.value} value={o.value}>
                  {o.label}
                </option>
              ))
            : children}
        </select>
        <svg
          width="16" height="16" viewBox="0 0 24 24" fill="none"
          stroke="var(--text-muted)" strokeWidth="2.2"
          strokeLinecap="round" strokeLinejoin="round"
          style={{ position: "absolute", right: 12, pointerEvents: "none" }}
        >
          <path d="M6 9l6 6 6-6" />
        </svg>
      </div>
      {(hint || error) && (
        <span
          style={{
            fontSize: "var(--text-xs)",
            color: error ? "var(--danger)" : "var(--text-muted)",
          }}
        >
          {error || hint}
        </span>
      )}
    </div>
  );
}

/* ---------- Textarea ---------- */
/**
 * Textarea — multi-line text field matching Input's styling.
 */
function Textarea({
  label,
  hint,
  error,
  id,
  rows = 4,
  disabled = false,
  style = {},
  wrapStyle = {},
  ...rest
}) {
  const [focus, setFocus] = React.useState(false);
  const inputId = id || React.useId();
  const borderColor = error
    ? "var(--danger)"
    : focus
    ? "var(--accent)"
    : "var(--border-strong)";

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 6, ...wrapStyle }}>
      {label && (
        <label
          htmlFor={inputId}
          style={{
            fontFamily: "var(--font-display)",
            fontSize: "var(--text-sm)",
            fontWeight: "var(--fw-semibold)",
            color: "var(--text-strong)",
          }}
        >
          {label}
        </label>
      )}
      <textarea
        id={inputId}
        rows={rows}
        disabled={disabled}
        onFocus={() => setFocus(true)}
        onBlur={() => setFocus(false)}
        style={{
          resize: "vertical",
          background: disabled ? "var(--gray-100)" : "var(--surface-card)",
          border: `var(--border-thin) solid ${borderColor}`,
          borderRadius: "var(--radius-md)",
          padding: "11px 12px",
          fontFamily: "var(--font-body)",
          fontSize: "var(--text-md)",
          lineHeight: "var(--lh-normal)",
          color: "var(--text-strong)",
          outline: "none",
          boxShadow: focus ? "var(--ring-accent)" : "none",
          transition: "border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard)",
          ...style,
        }}
        {...rest}
      />
      {(hint || error) && (
        <span
          style={{
            fontSize: "var(--text-xs)",
            color: error ? "var(--danger)" : "var(--text-muted)",
          }}
        >
          {error || hint}
        </span>
      )}
    </div>
  );
}

window.BackentraDesignSystem_93cf3a = { Icon, Button, Card, Badge, SegmentedControl, Input, Select, Textarea };
})();