// Shared atoms for ximator.com mockups

function LogoMark({ size = 22 }) {
  return (
    <img src="/logo.png" alt="Ximator" width={size} height={size}
      style={{ display:"block", flex:"0 0 auto", borderRadius: Math.round(size * 0.22), objectFit:"cover" }}/>
  );
}

function Logo({ size = 14, sub = ".com" }) {
  return (
    <span className="est-logo" style={{ fontSize: size, gap: Math.max(6, Math.round(size * 0.55)) }}>
      <LogoMark size={Math.round(size * 1.6)}/>
      <span>ximator<span className="ai">{sub}</span></span>
    </span>
  );
}

function Pill({ children, tone = "default", className = "", dot = false, style, onClick }) {
  const cls = `pill ${tone !== "default" ? "pill-" + tone : ""} ${className}`;
  return (
    <span className={cls} style={style} onClick={onClick}>
      {dot && <span className="pill-dot"></span>}
      {children}
    </span>
  );
}

function Btn({ children, kind = "ghost", size = "md", className = "", style = {}, icon = null }) {
  const cls = `btn btn-${kind} ${size === "sm" ? "btn-sm" : size === "lg" ? "btn-lg" : ""} ${className}`;
  return (
    <span className={cls} style={style}>
      {icon}
      {children}
    </span>
  );
}

// Tiny inline icons — kept extremely simple
function Icon({ name, size = 14, color = "currentColor", strokeWidth = 1.6 }) {
  const p = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "arrow-right":
      return <svg {...p}><path d="M5 12h14M13 6l6 6-6 6"/></svg>;
    case "arrow-up-right":
      return <svg {...p}><path d="M7 17 17 7M8 7h9v9"/></svg>;
    case "check":
      return <svg {...p}><path d="M5 12.5 10 17l9-10"/></svg>;
    case "plus":
      return <svg {...p}><path d="M12 5v14M5 12h14"/></svg>;
    case "upload":
      return <svg {...p}><path d="M12 16V4M6 10l6-6 6 6M4 20h16"/></svg>;
    case "file":
      return <svg {...p}><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/></svg>;
    case "download":
      return <svg {...p}><path d="M12 4v12M6 14l6 6 6-6M4 22h16"/></svg>;
    case "user":
      return <svg {...p}><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7"/></svg>;
    case "users":
      return <svg {...p}><circle cx="9" cy="8" r="3.5"/><path d="M2 21c0-3.5 3-6 7-6s7 2.5 7 6"/><path d="M17 11a3.5 3.5 0 0 0 0-7"/><path d="M22 21c0-3-2-5.2-5-5.8"/></svg>;
    case "bolt":
      return <svg {...p}><path d="M13 3 4 14h7l-1 7 9-11h-7z"/></svg>;
    case "shield":
      return <svg {...p}><path d="M12 3 4 6v6c0 5 4 8 8 9 4-1 8-4 8-9V6z"/></svg>;
    case "calculator":
      return <svg {...p}><rect x="5" y="3" width="14" height="18" rx="2"/><rect x="8" y="6" width="8" height="3"/><circle cx="9" cy="13" r=".5"/><circle cx="12" cy="13" r=".5"/><circle cx="15" cy="13" r=".5"/><circle cx="9" cy="17" r=".5"/><circle cx="12" cy="17" r=".5"/><circle cx="15" cy="17" r=".5"/></svg>;
    case "layers":
      return <svg {...p}><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/><path d="m3 18 9 5 9-5"/></svg>;
    case "ruler":
      return <svg {...p}><path d="M3 17 17 3l4 4L7 21z"/><path d="m7 11 2 2M10 8l2 2M13 5l2 2M4 14l2 2"/></svg>;
    case "home":
      return <svg {...p}><path d="m3 11 9-7 9 7v9a1 1 0 0 1-1 1h-5v-7h-6v7H4a1 1 0 0 1-1-1z"/></svg>;
    case "settings":
      return <svg {...p}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 0 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 0 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3 1.7 1.7 0 0 0 1-1.5V3a2 2 0 0 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8 1.7 1.7 0 0 0 1.5 1H21a2 2 0 0 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1"/></svg>;
    case "bell":
      return <svg {...p}><path d="M6 8a6 6 0 1 1 12 0c0 7 3 8 3 8H3s3-1 3-8"/><path d="M10 21a2 2 0 0 0 4 0"/></svg>;
    case "search":
      return <svg {...p}><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>;
    case "more":
      return <svg {...p}><circle cx="5" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/></svg>;
    case "chevron-down":
      return <svg {...p}><path d="m6 9 6 6 6-6"/></svg>;
    case "chevron-right":
      return <svg {...p}><path d="m9 6 6 6-6 6"/></svg>;
    case "clock":
      return <svg {...p}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>;
    case "blueprint":
      return <svg {...p}><rect x="3" y="3" width="18" height="18" rx="1"/><path d="M3 9h18M9 3v18M14 14h4v4"/></svg>;
    case "sparkle":
      return <svg {...p}><path d="M12 3v6M12 15v6M3 12h6M15 12h6M5.6 5.6l4.2 4.2M14.2 14.2l4.2 4.2M5.6 18.4l4.2-4.2M14.2 9.8l4.2-4.2"/></svg>;
    case "logout":
      return <svg {...p}><path d="M14 3h5a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-5"/><path d="M9 17l-5-5 5-5M4 12h12"/></svg>;
    case "sun":
      return <svg {...p}><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>;
    case "moon":
      return <svg {...p}><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" fill="none"/></svg>;
    default:
      return <svg {...p}><circle cx="12" cy="12" r="9"/></svg>;
  }
}

function ThemeToggle({ style = {} }) {
  const [isLight, setIsLight] = React.useState(() => document.documentElement.getAttribute("data-theme") === "light");
  const toggle = () => {
    const next = isLight ? "dark" : "light";
    if (next === "light") document.documentElement.setAttribute("data-theme", "light");
    else document.documentElement.removeAttribute("data-theme");
    localStorage.setItem("xim_theme", next);
    setIsLight(!isLight);
  };
  return (
    <div onClick={toggle} title="Toggle light/dark mode" style={{ width: 32, height: 32, borderRadius: 8, background: "var(--surface)", border: "1px solid var(--border)", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", color: "var(--text-2)", ...style }}>
      <Icon name={isLight ? "moon" : "sun"} size={14}/>
    </div>
  );
}

// SVG placeholder block (used in lieu of unprovided imagery)
function ImgPH({ label = "image", w = "100%", h = 160, mono = false }) {
  return (
    <div style={{
      width: w, height: h,
      border: "1px solid var(--border)",
      background: "repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0 6px, transparent 6px 12px), var(--surface-2)",
      borderRadius: 8,
      display: "flex", alignItems: "center", justifyContent: "center",
      color: "var(--mute)",
      fontFamily: "IBM Plex Mono, monospace",
      fontSize: 10, letterSpacing: "0.08em", textTransform: "uppercase",
    }}>{label}</div>
  );
}

Object.assign(window, { Logo, LogoMark, Pill, Btn, Icon, ImgPH, ThemeToggle });