import clsx from "clsx";

/** Social Runtime Crawler mark: an eye-like orbit — the crawler *watches* a runtime rather than fetching pages. */
export function Mark({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 48 48" className={className} aria-hidden>
      <defs>
        <linearGradient id="srcg" x1="0" x2="1" y1="0" y2="1">
          <stop offset="0" stopColor="#38e1ff" />
          <stop offset="1" stopColor="#9d7bff" />
        </linearGradient>
      </defs>
      <ellipse cx="24" cy="24" rx="20" ry="11" fill="none" stroke="url(#srcg)" strokeWidth="2.2" transform="rotate(-24 24 24)" />
      <ellipse cx="24" cy="24" rx="20" ry="11" fill="none" stroke="url(#srcg)" strokeWidth="1.2" opacity=".5" transform="rotate(36 24 24)" />
      <circle cx="24" cy="24" r="5.5" fill="url(#srcg)" />
      <circle cx="41" cy="16" r="2.2" fill="#ffb347" />
    </svg>
  );
}

export function Brand({ size = "md" }: { size?: "sm" | "md" | "lg" }) {
  return (
    <div className={clsx("flex items-center gap-3", size === "lg" && "gap-4")}>
      <Mark className={clsx(size === "sm" ? "h-6 w-6" : size === "lg" ? "h-12 w-12" : "h-8 w-8")} />
      <div className="leading-tight">
        <div className={clsx("font-semibold tracking-tight", size === "lg" ? "text-xl" : "text-sm")}>
          Social<span className="text-cyan">Crawl</span>
        </div>
        <div className={clsx("text-dim uppercase tracking-[0.2em]", size === "lg" ? "text-[11px]" : "text-[9px]")}>Social Runtime Mining</div>
      </div>
    </div>
  );
}