admin / Synapse-Sonar

import { CSSProperties } from "react";

/**
 * Synapse Sonar brand mark.
 *
 * Two layers: a metallic-blue SONAR labyrinth (concentric arcs with staggered
 * openings + a radar sweep needle) and a bright-white SYNAPSE trace (the central
 * "S" flowing into a connector that ends at an open dependency node).
 *
 *   <Logo />                     emblem only
 *   <Logo variant="full" />      emblem + SYNAPSE / SONAR wordmark (vertical)
 *   <Logo variant="lockup" />    emblem + wordmark (horizontal, e.g. nav rail)
 *
 * Geometry lives in a 240-wide space with the emblem centered at (120,115).
 */
export default function Logo({
  variant = "icon",
  className,
  style,
  title = "Synapse Sonar",
}: {
  variant?: "icon" | "full" | "lockup";
  className?: string;
  style?: CSSProperties;
  title?: string;
}) {
  if (variant === "lockup") {
    return (
      <span className={className} style={{ display: "inline-flex", alignItems: "center", gap: 10, ...style }}>
        <Emblem style={{ height: "2.1em", width: "2.1em" }} title={title} />
        <span style={{ fontFamily: WORDMARK_FONT, fontWeight: 800, letterSpacing: "0.02em", lineHeight: 1, fontSize: "1.05em" }}>
          <span style={{ color: "#f8fafc" }}>SYNAPSE</span>{" "}
          <span style={{ color: "#7fb2ec" }}>SONAR</span>
        </span>
      </span>
    );
  }

  if (variant === "full") {
    return (
      <svg
        viewBox="0 0 240 312"
        className={className}
        style={style}
        role="img"
        aria-label={title}
        xmlns="http://www.w3.org/2000/svg"
      >
        <title>{title}</title>
        <Defs />
        {Aura}
        {MarkBody}
        <text x="120" y="262" textAnchor="middle" fontFamily={WORDMARK_FONT} fontWeight="800" fontSize="41" letterSpacing="1.5" fill="#f8fafc">SYNAPSE</text>
        <text x="120" y="300" textAnchor="middle" fontFamily={WORDMARK_FONT} fontWeight="700" fontSize="32" letterSpacing="9" fill="#7fb2ec">SONAR</text>
      </svg>
    );
  }

  return <Emblem className={className} style={style} title={title} />;
}

const WORDMARK_FONT = "Montserrat, Inter, 'Segoe UI', system-ui, sans-serif";

function Emblem({
  className,
  style,
  title,
}: {
  className?: string;
  style?: CSSProperties;
  title?: string;
}) {
  return (
    <svg
      viewBox="0 0 240 232"
      className={className}
      style={style}
      role="img"
      aria-label={title}
      xmlns="http://www.w3.org/2000/svg"
    >
      {title ? <title>{title}</title> : null}
      <Defs />
      {Aura}
      {MarkBody}
    </svg>
  );
}

function Defs() {
  return (
    <defs>
      {/* metallic sonar gradient — bright top-left, deep blue bottom-right */}
      <linearGradient id="ss-iron" x1="0.05" y1="0" x2="0.9" y2="1">
        <stop offset="0" stopColor="#f4f8ff" />
        <stop offset="0.34" stopColor="#cfe0fb" />
        <stop offset="0.68" stopColor="#7faae6" />
        <stop offset="1" stopColor="#2f6fd6" />
      </linearGradient>
      {/* bright synapse trace (the white S + node) */}
      <linearGradient id="ss-syn" x1="0" y1="0" x2="0.45" y2="1">
        <stop offset="0" stopColor="#ffffff" />
        <stop offset="0.7" stopColor="#eaf2fe" />
        <stop offset="1" stopColor="#bcd6f7" />
      </linearGradient>
      <linearGradient id="ss-needle" gradientUnits="userSpaceOnUse" x1="120" y1="115" x2="178" y2="40">
        <stop offset="0" stopColor="#bcd6f7" />
        <stop offset="1" stopColor="#ffffff" />
      </linearGradient>
      <radialGradient id="ss-core" cx="0.45" cy="0.38" r="0.75">
        <stop offset="0" stopColor="#ffffff" />
        <stop offset="0.5" stopColor="#dbe8fc" />
        <stop offset="1" stopColor="#5b8fd6" />
      </radialGradient>
      <radialGradient id="ss-aura" cx="0.5" cy="0.5" r="0.5">
        <stop offset="0" stopColor="#3b82f6" stopOpacity="0.4" />
        <stop offset="0.6" stopColor="#3b82f6" stopOpacity="0.12" />
        <stop offset="1" stopColor="#3b82f6" stopOpacity="0" />
      </radialGradient>
      <filter id="ss-glow" x="-50%" y="-50%" width="200%" height="200%">
        <feGaussianBlur stdDeviation="2" result="b" />
        <feMerge>
          <feMergeNode in="b" />
          <feMergeNode in="SourceGraphic" />
        </feMerge>
      </filter>
    </defs>
  );
}

// Soft ambient blue glow behind the emblem (pure radial fill, no filter).
const Aura = <circle cx="120" cy="115" r="120" fill="url(#ss-aura)" />;

// Emblem geometry, centered at (120,115).
const MarkBody = (
  <g>
    {/* --- SONAR layer: concentric arcs with staggered openings (spiral/maze) --- */}
    <g filter="url(#ss-glow)" fill="none" stroke="url(#ss-iron)" strokeWidth="11" strokeLinecap="round">
      <path d="M45.8 162.3 A88 88 0 1 1 146.4 199.0" />
      <path d="M82.4 56.0 A70 70 0 1 1 53.3 136.0" />
      <path d="M164.7 86.5 A53 53 0 1 1 104.1 64.4" />
      <path d="M139.9 146.2 A37 37 0 1 1 155.3 103.9" strokeWidth="10" />
    </g>

    {/* radar sweep needle, center out to upper-right */}
    <line x1="120" y1="115" x2="178" y2="40" stroke="url(#ss-needle)" strokeWidth="13" strokeLinecap="round" filter="url(#ss-glow)" />

    {/* glowing core disc */}
    <circle cx="120" cy="115" r="26" fill="url(#ss-core)" filter="url(#ss-glow)" />

    {/* --- SYNAPSE layer: bright-white S flowing into the dependency node --- */}
    <g filter="url(#ss-glow)" fill="none" stroke="url(#ss-syn)" strokeLinecap="round" strokeLinejoin="round">
      <path d="M133 106 C133 98 108 97 108 106 C108 114 133 117 133 125 C133 134 108 133 108 125" strokeWidth="8" />
      <path d="M108 126 L93 137" strokeWidth="6.5" />
      <circle cx="86" cy="142" r="7.5" strokeWidth="5" />
    </g>
  </g>
);