// Generic reusable UI bits
const LogoMark = ({ size = 22 }) => (
  <svg width={size * 1.25} height={size} viewBox="0 0 50 40" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Lint Error">
    {/* Left brace — purple */}
    <path
      d="M14 4 C9 4 7 6 7 10 L7 18 C7 19.5 6 20 4 20 C6 20 7 20.5 7 22 L7 30 C7 34 9 36 14 36"
      stroke="var(--brand-purple)"
      strokeWidth="3.2"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    {/* Right brace — gray */}
    <path
      d="M36 4 C41 4 43 6 43 10 L43 18 C43 19.5 44 20 46 20 C44 20 43 20.5 43 22 L43 30 C43 34 41 36 36 36"
      stroke="var(--brand-gray)"
      strokeWidth="3.2"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    {/* X — purple */}
    <path
      d="M18 13 L32 27 M32 13 L18 27"
      stroke="var(--brand-purple)"
      strokeWidth="3.4"
      strokeLinecap="round"
    />
  </svg>
);

const Logo = ({ mark = true, wordmark = true }) => (
  <span className="logo-brand">
    {mark ? <LogoMark size={22} /> : null}
    {wordmark ? (
      <span className="logo-word">
        <span className="w-gray">Lint</span><span className="w-purple">Error</span>
      </span>
    ) : null}
  </span>
);

const Placeholder = ({ label, kind = "screenshot" }) => (
  <div className={`ph ph-${kind}`}>
    <span className="ph-label">{label}</span>
  </div>
);

const Tag = ({ children, variant, icon }) => (
  <span className={`tag ${variant ? `tag-${variant}` : ""}`}>
    {icon ? <span className="dot dot-accent" /> : null}
    {children}
  </span>
);

// Mirror of pathFromState() in app.jsx — kept here (loaded before topbar/footer/
// pages) so links can render a real `href`. Crawlers can then follow nav, users
// can middle-click / open-in-new-tab, and `<a>`s become keyboard-focusable.
function routeHref(route, slug) {
  if (route === "home") return "/";
  if (route === "product" && slug) return `/scripts/${slug}`;
  if (route === "free-product" && slug) return `/free/${slug}`;
  return `/${route}`;
}

Object.assign(window, { Logo, Placeholder, Tag, routeHref });