/* AZIS prototype — brand logo (compass + clock) per theme ============== */
/* Recreates the app's electric SVG logo; color-swappable for variants.   */

const LOGO_PRESETS = {
  blue:  { bg: "#0a1320", edge: "#164a6e", fill: "#062338", line: "#22d3ee", lite: "#67e8f9", glow: "#22d3ee" },
  green: { bg: "#06140a", edge: "#13502e", fill: "#052012", line: "#4ade80", lite: "#86efac", glow: "#4ade80" },
};

function BrandLogo({ variant = "blue", size = 240, idp = "lg", glitch = false }) {
  const c = LOGO_PRESETS[variant] || LOGO_PRESETS.blue;
  const g1 = "bl-g1-" + idp, g2 = "bl-g2-" + idp;
  return (
    <svg className={"brandlogo" + (glitch ? " brandlogo--glitch" : "")} viewBox="0 0 240 240" width={size} height={size}
      role="img" aria-label="AZIS Logo" style={{ "--logo-line": c.line, "--logo-glow": c.glow }}>
      <defs>
        <filter id={g1} x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur stdDeviation="2.5" result="b" /><feMerge><feMergeNode in="b" /><feMergeNode in="SourceGraphic" /></feMerge>
        </filter>
        <filter id={g2} x="-60%" y="-60%" width="220%" height="220%">
          <feGaussianBlur stdDeviation="6" result="b" /><feMerge><feMergeNode in="b" /><feMergeNode in="SourceGraphic" /></feMerge>
        </filter>
      </defs>
      <rect x="0" y="0" width="240" height="240" rx="48" fill={c.bg} />
      <rect x="2" y="2" width="236" height="236" rx="46" fill="none" stroke={c.edge} strokeWidth="0.5" opacity="0.6" />
      <g filter={"url(#" + g2 + ")"} opacity="0.4" className="bl-arrows-glow">
        <polygon points="106,82 86,12 154,12 134,82" fill={c.line} />
        <polygon points="158,106 228,86 228,154 158,134" fill={c.line} />
        <polygon points="134,158 154,228 86,228 106,158" fill={c.line} />
        <polygon points="82,134 12,154 12,86 82,106" fill={c.line} />
      </g>
      <g className="bl-arrows">
        <polygon points="106,82 86,12 154,12 134,82" fill={c.fill} stroke={c.line} strokeWidth="2.5" strokeLinejoin="round" />
        <polygon points="158,106 228,86 228,154 158,134" fill={c.fill} stroke={c.line} strokeWidth="2.5" strokeLinejoin="round" />
        <polygon points="134,158 154,228 86,228 106,158" fill={c.fill} stroke={c.line} strokeWidth="2.5" strokeLinejoin="round" />
        <polygon points="82,134 12,154 12,86 82,106" fill={c.fill} stroke={c.line} strokeWidth="2.5" strokeLinejoin="round" />
      </g>
      <circle cx="120" cy="120" r="58" fill={c.bg} stroke={c.line} strokeWidth="2.5" />
      <circle cx="120" cy="120" r="51" fill="none" stroke={c.line} strokeWidth="6" strokeDasharray="3 23.69" strokeDashoffset="-1.5" opacity="0.85" className="bl-ring" />
      <g stroke={c.lite} strokeLinecap="round" filter={"url(#" + g1 + ")"} className="bl-hands">
        <line x1="120" y1="120" x2="97" y2="104" strokeWidth="5" />
        <line x1="120" y1="120" x2="153" y2="101" strokeWidth="3.5" />
      </g>
      <circle cx="120" cy="120" r="4.5" fill={c.line} filter={"url(#" + g1 + ")"} />
    </svg>
  );
}

/* Small app-bar icon, chosen per theme family */
function AppIcon({ family }) {
  if (family === "electric") return <BrandLogo variant="blue" size={34} idp="bar" />;
  if (family === "terminal") return <BrandLogo variant="green" size={34} idp="bar" />;
  // classic & camo → the old blue-green raster icon
  return <img src="icon.png" alt="AZIS" />;
}

Object.assign(window, { BrandLogo, AppIcon, LOGO_PRESETS });