// Shared atoms + styles

const atomStyles = `
  /* Buttons */
  .btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 12px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font-size: 13px; font-weight: 500;
    cursor: pointer;
    transition: all .14s ease;
    white-space: nowrap;
  }
  .btn:hover { border-color: var(--line-strong); background: var(--bg-soft); }
  .btn:active { transform: translateY(0.5px); }
  .btn.primary {
    background: var(--ink); color: var(--bg);
    border-color: var(--ink);
  }
  .btn.primary:hover { background: var(--ink-2); }
  .btn.accent {
    background: var(--accent); color: #fff;
    border-color: var(--accent-deep);
  }
  .btn.accent:hover { background: var(--accent-deep); }
  .btn.ghost { background: transparent; border-color: transparent; }
  .btn.ghost:hover { background: var(--bg-soft); }
  .btn.sm { height: 26px; padding: 0 9px; font-size: 12px; }
  .btn.xs { height: 22px; padding: 0 7px; font-size: 11px; gap: 4px; }
  .btn.icon { padding: 0; width: 32px; justify-content: center; }
  .btn.icon.sm { width: 26px; }

  /* inputs */
  .input, .select {
    height: 32px; padding: 0 10px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font-size: 13px;
    width: 100%;
    outline: none;
    transition: border-color .14s, box-shadow .14s;
  }
  .input:focus, .select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-tint);
  }
  .input::placeholder { color: var(--faint); }
  .input.mono { font-family: var(--font-mono); font-size: 12.5px; }

  /* label */
  .lbl {
    display: block;
    font-size: 11px; font-weight: 500;
    color: var(--muted);
    margin-bottom: 5px;
    letter-spacing: 0.02em;
  }

  /* toggle switch */
  .toggle {
    position: relative;
    width: 32px; height: 18px;
    background: var(--line-strong);
    border-radius: 9px;
    cursor: pointer;
    transition: background .18s;
    flex: none;
  }
  .toggle::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 14px; height: 14px;
    background: #fff;
    border-radius: 50%;
    transition: transform .18s cubic-bezier(.4,.8,.2,1);
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  }
  .toggle.on { background: var(--ink); }
  .toggle.on::after { transform: translateX(14px); }
  .toggle.live.on { background: var(--live); }
  .toggle.accent.on { background: var(--accent); }

  /* chip */
  .chip {
    display: inline-flex; align-items: center; gap: 5px;
    height: 22px; padding: 0 8px;
    border-radius: 11px;
    border: 1px solid var(--line);
    background: var(--surface);
    font-size: 11.5px;
    color: var(--ink-2);
    white-space: nowrap;
  }
  .chip .x-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; border-radius: 7px;
    background: var(--bg-soft);
    border: 0; padding: 0;
    color: var(--muted);
    cursor: pointer;
    margin-right: -2px;
  }
  .chip .x-btn:hover { background: var(--line-strong); color: var(--ink); }

  /* badge */
  .badge {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 10.5px; font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-family: var(--font-ui);
    white-space: nowrap;
  }
  .badge.gold { background: var(--accent-tint); color: var(--accent-deep); border: 1px solid var(--accent-soft); }
  .badge.hot { background: var(--hot-soft); color: var(--hot); border: 1px solid rgba(194,74,44,0.2); }
  .badge.live { background: var(--live-soft); color: var(--live); border: 1px solid rgba(47,143,94,0.2); }
  .badge.info { background: #E5ECF5; color: var(--info); border: 1px solid #CCD7E6; }
  .badge.neutral { background: var(--bg-sunken); color: var(--ink-2); border: 1px solid var(--line); }
  .badge.outline { background: transparent; color: var(--muted); border: 1px solid var(--line); }

  [data-theme="dim"] .badge.info { background: #1F2937; color: #8FB1E0; border-color: #2A3A52; }

  /* coming soon */
  .soon-scrim {
    position: fixed; inset: 0;
    background: rgba(20,18,14,0.22);
    backdrop-filter: blur(2px);
    z-index: 110;
    animation: fade-in 0.14s ease-out;
  }
  .coming-soon {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-2);
  }
  .coming-soon.modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 111;
    width: min(420px, calc(100vw - 36px));
    border-radius: var(--r);
    padding: 16px;
    box-shadow: var(--shadow-pop);
  }
  .coming-soon.panel {
    margin: 14px;
    border-radius: var(--r);
    padding: 16px;
  }
  .coming-soon.inline {
    border-radius: var(--r);
    padding: 14px;
  }
  .coming-soon .cs-top {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px;
  }
  .coming-soon .cs-icon {
    width: 34px; height: 34px;
    border-radius: var(--r-sm);
    background: var(--accent-tint);
    border: 1px solid var(--accent-soft);
    color: var(--accent-deep);
    display: inline-flex; align-items: center; justify-content: center;
    flex: none;
  }
  .coming-soon h3 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 21px;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  .coming-soon p {
    margin: 6px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--muted);
  }
  .coming-soon .cs-actions {
    display: flex; justify-content: flex-end; gap: 8px;
    margin-top: 14px;
  }

  /* kbd */
  .kbd {
    display: inline-flex; align-items: center;
    font-family: var(--font-mono); font-size: 11px;
    padding: 1px 5px; min-width: 18px; height: 18px;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-bottom-width: 2px;
    border-radius: 3px;
    color: var(--muted);
  }

  /* card */
  .card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
  }

  /* section header */
  .section-h {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
  }
  .section-h h3 {
    margin: 0;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-2);
  }

  /* divider */
  .hr { height: 1px; background: var(--line); border: 0; margin: 0; }

  /* segmented */
  .seg {
    display: inline-flex;
    background: var(--bg-sunken);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 2px;
    gap: 2px;
  }
  .seg button {
    height: 24px; padding: 0 9px;
    background: transparent; border: 0;
    font-size: 12px; font-weight: 500;
    color: var(--muted);
    border-radius: 3px;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px;
  }
  .seg button.active {
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(26,24,20,0.06);
  }
  .seg button:hover:not(.active) { color: var(--ink-2); }

  /* range */
  .range-row {
    display: grid;
    grid-template-columns: 1fr 10px 1fr;
    gap: 6px;
    align-items: center;
  }
  .range-row .dash { color: var(--faint); text-align: center; }
  .range-row .input { text-align: center; font-family: var(--font-mono); font-size: 12px; padding: 0 4px; }

  /* placeholder thumb */
  .thumb-ph {
    position: relative;
    background:
      repeating-linear-gradient(135deg,
        var(--bg-sunken) 0 8px,
        var(--bg-soft) 8px 16px);
    display: flex; align-items: center; justify-content: center;
    color: var(--muted-2);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    overflow: hidden;
  }
  .thumb-ph::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.04));
  }
  .thumb-ph .tag {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    padding: 2px 6px;
    border-radius: 2px;
    z-index: 1;
  }
  .thumb-ph.accent {
    background:
      repeating-linear-gradient(135deg,
        var(--accent-tint) 0 8px,
        var(--accent-soft) 8px 16px);
    color: var(--accent-deep);
  }

  .thumb-img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    display: block;
    background: var(--bg-sunken);
  }
`;

// inject
if (!document.getElementById("atom-styles")) {
  const s = document.createElement("style");
  s.id = "atom-styles";
  s.textContent = atomStyles;
  document.head.appendChild(s);
}

// components
const Toggle = ({ on, onChange, variant="" }) => {
  const toggle = (event) => {
    event.stopPropagation();
    onChange?.(!on);
  };
  return (
    <div
      className={`toggle ${variant} ${on ? "on" : ""}`}
      onClick={toggle}
      onKeyDown={(event) => {
        if (event.key === "Enter" || event.key === " ") toggle(event);
      }}
      role="switch"
      aria-checked={on}
      tabIndex={0}
    />
  );
};

const Chip = ({ children, onRemove, tone }) => (
  <span className="chip" style={tone ? {background: tone, borderColor: "transparent", color: "var(--ink)"} : null}>
    {children}
    {onRemove ? <button className="x-btn" onClick={onRemove} aria-label="remove"><I.x size={10}/></button> : null}
  </span>
);

const Badge = ({ children, tone="neutral", icon }) => {
  const hasText = React.Children.toArray(children).some(child => child != null && child !== false && String(child).trim() !== "");
  if (!icon && !hasText) return null;
  return (
    <span className={`badge ${tone}`}>
      {icon ? <span style={{display:"inline-flex", marginLeft:-1}}>{icon}</span> : null}
      {children}
    </span>
  );
};

const Segmented = ({ value, options, onChange }) => (
  <div className="seg">
    {options.map(o => (
      <button key={o.value} className={value === o.value ? "active" : ""} onClick={() => onChange(o.value)}>
        {o.icon}{o.label}
      </button>
    ))}
  </div>
);

const RangeInput = ({ minLabel, maxLabel, unit }) => (
  <div className="range-row">
    <input className="input mono" placeholder={minLabel} />
    <span className="dash">–</span>
    <input className="input mono" placeholder={maxLabel} />
  </div>
);

const Tooltip = ({ children, label }) => (
  <span className="tt-wrap" title={label} style={{position:"relative", display:"inline-flex"}}>
    {children}
  </span>
);

const ComingSoon = ({
  open = true,
  variant = "modal",
  feature = "Coming soon",
  detail = "This account feature is paused for the public MVP while the live deal dashboard stays open.",
  onClose,
  onAction,
  actionLabel,
}) => {
  React.useEffect(() => {
    if (!open || variant !== "modal" || !onClose) return;
    const onKeyDown = (event) => {
      if (event.key === "Escape") onClose();
    };
    document.addEventListener("keydown", onKeyDown);
    return () => document.removeEventListener("keydown", onKeyDown);
  }, [open, variant, onClose]);

  if (!open) return null;
  const body = (
    <div className={`coming-soon ${variant}`} role={variant === "modal" ? "dialog" : undefined} aria-modal={variant === "modal" ? "true" : undefined}>
      <div className="cs-top">
        <div style={{display:"flex", gap:12, minWidth:0}}>
          <span className="cs-icon"><I.spark size={16}/></span>
          <div style={{minWidth:0}}>
            <Badge tone="outline">Coming soon</Badge>
            <h3>{feature}</h3>
            <p>{detail}</p>
          </div>
        </div>
        {variant === "modal" && onClose ? (
          <button className="btn icon sm ghost" onClick={onClose} aria-label="Close"><I.x size={14}/></button>
        ) : null}
      </div>
      {(onAction || variant === "modal") && (
        <div className="cs-actions">
          <button className="btn accent sm" onClick={onAction || onClose}>
            {actionLabel || (variant === "modal" ? "Got it" : "Learn more")}
          </button>
        </div>
      )}
    </div>
  );
  if (variant !== "modal") return body;
  return (
    <>
      <div className="soon-scrim" onClick={onClose}/>
      {body}
    </>
  );
};

Object.assign(window, { Toggle, Chip, Badge, Segmented, RangeInput, Tooltip, ComingSoon });