/* logos.jsx - Devis Lab SVG-only marks - Brand ID v2
   Drop-in replacement for source-active/logos.jsx.
   Core change: Original Signal v2 geometry, unified sparkle, DevisWordmark, and clearer variant taxonomy. */

const LOGO_VIEWBOX = "0 0 256 236";
const BASE_D_PATH = "M86 36H141C187 36 219 68 219 111C219 148 197 169 166 173V207H214";
const BASE_L_PATH = "M86 76V163H139";
const SPARKLE_PATH = "M135 90L142 107L159 114L142 121L135 138L128 121L111 114L128 107Z";

const LOGO_VARIANT_ALIASES = {
  original: "primary",
  refined: "primary",
  primary: "primary",
  pixel: "pixel",
  geometric: "studio",
  studio: "studio",
  monochrome: "utility",
  mono: "utility",
  utility: "utility",
};

function normalizeLogoVariant(value = "primary") {
  return LOGO_VARIANT_ALIASES[value] || "primary";
}

function safeSvgId(value) {
  return String(value || "").replace(/[^a-zA-Z0-9_-]/g, "");
}

let gradSeed = 0;
function useGradId(prefix, explicitId) {
  const reactId = React.useId ? React.useId() : null;
  const fallbackId = React.useMemo(() => {
    gradSeed += 1;
    return `${prefix}-${gradSeed}`;
  }, [prefix]);
  return explicitId ? safeSvgId(explicitId) : `${prefix}-${reactId ? safeSvgId(reactId) : fallbackId}`;
}

function paintForVariant(variant, gradientId) {
  if (variant === "mono-light") return "#ECEEF4";
  if (variant === "mono-white") return "#FFFFFF";
  if (variant === "mono-dark") return "#0D132B";
  if (variant === "mono-current" || variant === "mono") return "currentColor";
  return `url(#${gradientId})`;
}

function usesGradient(variant) {
  return !["mono-light", "mono-white", "mono-dark", "mono-current", "mono"].includes(variant);
}

function sparkleForVariant(variant, paint) {
  return usesGradient(variant) ? "var(--logo-sparkle-strong, var(--logo-accent, #2563EB))" : paint;
}

function logoSignalClass({ family, context = "asset", displayMode = "clean", signalCore = "default", extra = "" }) {
  return [
    "logo-mark",
    family ? `logo-mark--${family}` : "",
    context ? `logo-mark--context-${context}` : "",
    displayMode ? `logo-mark--${displayMode}` : "",
    signalCore ? `logo-mark--signal-${signalCore}` : "",
    extra,
  ].filter(Boolean).join(" ");
}

function usesSignalCore({ signalCore = "default", context = "asset", displayMode = "clean" } = {}) {
  if (signalCore === "mono") return false;
  if (signalCore === "accent" || signalCore === "pixel") return true;
  if (displayMode === "expressive") return true;
  return ["hero", "preview"].includes(context);
}

function PixelDpadCore({ className = "", paint = "var(--pixel-signal, var(--pixel-pop, #00F0C8))" }) {
  return (
    <g className={`pixel-dpad-core pixel-core-spark ${className}`.trim()} aria-hidden="true">
      <rect className="pixel-dpad-core__cell" x="56" y="40" width="9" height="9" rx="1.5" fill={paint} />
      <rect className="pixel-dpad-core__cell" x="45" y="51" width="9" height="9" rx="1.5" fill={paint} />
      <rect className="pixel-dpad-core__cell pixel-dpad-core__center" x="56" y="51" width="9" height="9" rx="1.5" fill={paint} />
      <rect className="pixel-dpad-core__cell" x="67" y="51" width="9" height="9" rx="1.5" fill={paint} />
      <rect className="pixel-dpad-core__cell" x="56" y="62" width="9" height="9" rx="1.5" fill={paint} />
    </g>
  );
}

function PixelCoreSpark(props) {
  return <PixelDpadCore {...props} />;
}

function GradDefs({
  id,
  c1 = "var(--logo-cyan, #00D4CB)",
  c2 = "var(--logo-accent, #2563EB)",
  c3 = "var(--logo-end, #7C3AED)",
  vertical = false,
  compact = false,
}) {
  return (
    <defs>
      <linearGradient
        id={id}
        x1={compact ? (vertical ? "50%" : "0%") : (vertical ? "128" : "18")}
        y1={compact ? "0%" : "24"}
        x2={compact ? (vertical ? "50%" : "100%") : (vertical ? "128" : "226")}
        y2={compact ? "100%" : "214"}
        gradientUnits={compact ? undefined : "userSpaceOnUse"}
      >
        <stop offset="0%" stopColor={c1} />
        <stop offset="55%" stopColor={c2} />
        <stop offset="100%" stopColor={c3} />
      </linearGradient>
    </defs>
  );
}

function SignaturePixels({ paint, secondary = paint, soft = false }) {
  return (
    <g opacity={soft ? ".88" : "1"}>
      <rect x="30" y="26" width="16" height="16" rx="2" fill={paint} />
      <rect x="50" y="46" width="20" height="20" rx="2" fill={secondary} opacity={soft ? ".78" : ".94"} />
    </g>
  );
}

function LogoOriginalClean({
  size = 120,
  variant = "color",
  title = "Devis Lab",
  gradientId,
  className = "",
  style = null,
  strokeWidth = 22,
  mode = "primary",
  surface = "auto",
  context = "asset",
  signalCore = "default",
  displayMode = "clean",
}) {
  const id = useGradId("devis-logo", gradientId);
  const paint = paintForVariant(variant, id);
  const sparklePaint = usesSignalCore({ signalCore, context, displayMode })
    ? "var(--signal-core, var(--signal-dot, var(--logo-accent, #2563EB)))"
    : paint;
  const withGradient = usesGradient(variant);
  const cls = logoSignalClass({
    family: "primary",
    context,
    displayMode,
    signalCore: usesSignalCore({ signalCore, context, displayMode }) ? "accent" : signalCore,
    extra: className,
  });

  return (
    <svg
      className={cls}
      data-logo-mode={mode}
      data-logo-surface={surface}
      data-signal-core={usesSignalCore({ signalCore, context, displayMode }) ? "accent" : signalCore}
      viewBox={LOGO_VIEWBOX}
      width={size}
      height={size}
      role="img"
      aria-label={title}
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      style={style || undefined}
    >
      {withGradient && <GradDefs id={id} />}
      <SignaturePixels paint={paint} />
      <path d={BASE_D_PATH} fill="none" stroke={paint} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" />
      <path d={BASE_L_PATH} fill="none" stroke={paint} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" />
      <path className="logo-spark logo-spark--primary" d={SPARKLE_PATH} fill={sparklePaint} />
    </svg>
  );
}

function LogoRefined(props) {
  return <LogoOriginalClean {...props} title={props?.title || "Devis Lab primary mark"} />;
}

function LogoPixel({
  size = 120,
  variant = "color",
  gradientId,
  title = "Devis Lab Pixel Mode",
  mode = "pixel",
  surface = "auto",
  context = "asset",
  signalCore = "pixel",
  displayMode = "clean",
  className = "",
}) {
  const id = useGradId("devis-pixel", gradientId);
  const paint = paintForVariant(variant, id);
  const sparklePaint = "var(--pixel-signal, var(--pixel-pop, #00F0C8))";
  const pixelPaint = usesGradient(variant) ? "var(--pixel-signal, var(--pixel-pop, var(--pixel-cyan, #00D4CB)))" : paint;
  const withGradient = usesGradient(variant);
  const cls = logoSignalClass({ family: "pixel", context, displayMode, signalCore, extra: className });
  const u = 8;
  const cell = (key, x, y, w = 1, h = 1, color = paint, opacity = 1) => (
    <rect key={key} x={x * u} y={y * u} width={w * u} height={h * u} rx="1.25" fill={color} opacity={opacity} />
  );

  return (
    <svg
      className={cls}
      data-logo-mode={mode}
      data-logo-surface={surface}
      data-signal-core="pixel"
      viewBox="0 0 120 120"
      width={size}
      height={size}
      role="img"
      aria-label={title}
      xmlns="http://www.w3.org/2000/svg"
      shapeRendering="geometricPrecision"
    >
      {withGradient && (
        <GradDefs
          id={id}
          compact
          c1="var(--pixel-base-1, var(--pixel-cyan, #00D4CB))"
          c2="var(--pixel-base-2, var(--pixel-blue, #2563EB))"
          c3="var(--pixel-base-3, var(--pixel-violet, #7C3AED))"
        />
      )}
      <g>
        {cell("d-spine", 4, 3, 1, 7)}
        {cell("d-top", 5, 3, 4, 1)}
        {cell("d-upper-step", 9, 4, 1, 1)}
        {cell("d-side", 10, 5, 1, 3)}
        {cell("d-lower-step", 9, 8, 1, 1)}
        {cell("d-bottom-a", 7, 9, 2, 1)}
        {cell("d-bottom-b", 5, 9, 2, 1)}
        {cell("l-spine", 5, 10, 1, 3)}
        {cell("l-base-a", 6, 12, 2, 1)}
        {cell("l-base-b", 8, 11, 1, 2)}
        {cell("px-a", 1, 2, 1, 1, pixelPaint)}
        {cell("px-b", 2, 1, 1, 1, pixelPaint, withGradient ? .9 : 1)}
        {cell("px-c", 2, 3, 1, 1, pixelPaint, withGradient ? .72 : 1)}
        <PixelDpadCore paint={sparklePaint} />
      </g>
    </svg>
  );
}

function LogoGeometric({
  size = 120,
  variant = "color",
  gradientId,
  title = "Devis Lab Studio Mark",
  mode = "studio",
  surface = "auto",
  context = "asset",
  signalCore = "default",
  displayMode = "clean",
  className = "",
}) {
  const id = useGradId("devis-geo", gradientId);
  const paint = paintForVariant(variant, id);
  const sparklePaint = usesSignalCore({ signalCore, context, displayMode })
    ? "var(--signal-core, var(--signal-dot, var(--logo-sparkle-strong, #2563EB)))"
    : paint;
  const accent = usesGradient(variant) ? "var(--logo-cyan, #00D4CB)" : paint;
  const withGradient = usesGradient(variant);
  const cls = logoSignalClass({
    family: "studio",
    context,
    displayMode,
    signalCore: usesSignalCore({ signalCore, context, displayMode }) ? "accent" : signalCore,
    extra: className,
  });

  return (
    <svg
      className={cls}
      data-logo-mode={mode}
      data-logo-surface={surface}
      data-signal-core={usesSignalCore({ signalCore, context, displayMode }) ? "accent" : signalCore}
      viewBox="0 0 120 120"
      width={size}
      height={size}
      role="img"
      aria-label={title}
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
    >
      {withGradient && <GradDefs id={id} vertical compact />}
      <path d="M36 26L36 82M36 26Q84 26 84 54Q84 82 36 82" stroke={paint} strokeWidth="9" strokeLinecap="round" strokeLinejoin="round" />
      <path d="M56 82L56 100L82 100" stroke={paint} strokeWidth="9" strokeLinecap="round" strokeLinejoin="round" />
      <rect x="12" y="14" width="14" height="14" rx="2.5" fill={accent} />
      <g className="logo-spark logo-spark--studio" aria-hidden="true">
        <path
          className="logo-spark__crystal"
          d="M63 39L68 52L81 56L68 60L63 73L58 60L45 56L58 52Z"
          fill={sparklePaint}
        />
        <path
          className="logo-spark__highlight"
          d="M63 44L66 53L63 56L60 53Z"
          fill="var(--logo-sparkle, #DDFBFF)"
          opacity=".72"
        />
      </g>
    </svg>
  );
}

function LogoMonochrome({
  size = 120,
  variant = "color",
  title = "Devis Lab Utility Mono",
  mode = "mono",
  surface = "auto",
  context = "asset",
  signalCore = "mono",
  displayMode = "mono",
  className = "",
}) {
  const monoVariant = variant === "color" ? "mono-current" : variant;
  const paint = paintForVariant(monoVariant, "devis-mono");
  const cls = logoSignalClass({ family: "mono", context, displayMode, signalCore, extra: className });

  return (
    <svg
      className={cls}
      data-logo-mode={mode}
      data-logo-surface={surface}
      data-signal-core="mono"
      viewBox={LOGO_VIEWBOX}
      width={size}
      height={size}
      role="img"
      aria-label={title}
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
    >
      <SignaturePixels paint={paint} secondary={paint} soft />
      <path d={BASE_D_PATH} stroke={paint} strokeWidth="20" strokeLinecap="round" strokeLinejoin="round" />
      <path d={BASE_L_PATH} stroke={paint} strokeWidth="20" strokeLinecap="round" strokeLinejoin="round" />
      <path className="logo-spark logo-spark--mono" d={SPARKLE_PATH} fill={paint} />
    </svg>
  );
}

function LogoFavicon({ size = 32, variant = "color", title = "Devis Lab favicon" }) {
  const id = useGradId("devis-favicon");
  const paint = paintForVariant(variant, id);
  const withGradient = usesGradient(variant);
  return (
    <svg viewBox="0 0 64 64" width={size} height={size} role="img" aria-label={title} xmlns="http://www.w3.org/2000/svg" fill="none">
      {withGradient && (
        <defs>
          <linearGradient id={id} x1="6" y1="8" x2="58" y2="58" gradientUnits="userSpaceOnUse">
            <stop offset="0%" stopColor="var(--logo-cyan, #00D4CB)" />
            <stop offset="55%" stopColor="var(--logo-accent, #2563EB)" />
            <stop offset="100%" stopColor="var(--logo-end, #7C3AED)" />
          </linearGradient>
        </defs>
      )}
      <rect x="7" y="8" width="5" height="5" rx="1.2" fill={paint} />
      <path d="M22 10H36C48 10 56 18 56 30C56 40 50 45 42 46V55H55" stroke={paint} strokeWidth="6" strokeLinecap="round" strokeLinejoin="round" />
      <path d="M22 20V43H35" stroke={paint} strokeWidth="6" strokeLinecap="round" strokeLinejoin="round" />
      <path d="M34 23L37 30L44 33L37 36L34 43L31 36L24 33L31 30Z" fill={paint} />
    </svg>
  );
}

function LogoOriginal(props) {
  return <LogoOriginalClean {...props} title={props?.title || "Devis Lab primary logo"} />;
}

function DevisWordmark({ direction = "original", className = "", compact = false, mono = false, size = "md", style = null, pulseToken = null }) {
  const isPixel = direction === "pixel";
  const isStudio = direction === "geometric" || direction === "studio";
  const cls = [
    "devis-wordmark",
    `devis-wordmark-${size}`,
    isPixel ? "devis-wordmark--pixel" : "",
    isStudio ? "devis-wordmark--studio" : "",
    compact ? "is-compact" : "",
    mono ? "is-mono" : "",
    className,
  ].filter(Boolean).join(" ");
  const [pulse, setPulse] = React.useState(false);
  const prev = React.useRef(pulseToken);
  React.useEffect(() => {
    if (pulseToken === null || pulseToken === undefined) return;
    if (prev.current === pulseToken) return;
    prev.current = pulseToken;
    setPulse(true);
    const id = window.setTimeout(() => setPulse(false), 420);
    return () => window.clearTimeout(id);
  }, [pulseToken]);
  return (
    <span className={cls} role="text" aria-label="Devis Lab" data-logo-direction={direction} data-pulse={pulse ? "1" : "0"} style={style || undefined}>
      <span aria-hidden="true">Dev</span>
      <span className="devis-wordmark-i" aria-hidden="true">
        <span className="devis-wordmark-i-stem" />
        <span className={`devis-wordmark-i-dot ${isPixel ? "devis-wordmark-i-dot--pixel" : ""}`.trim()} />
      </span>
      <span aria-hidden="true">s</span>
      {!compact && <span aria-hidden="true"> </span>}
      {isPixel ? (
        <span className="devis-wordmark-lab devis-lab--pixel" aria-hidden="true">
          <span className="devis-lab-pixel-letter devis-lab-pixel-letter--l">L</span>
          <span className="devis-lab-pixel-letter devis-lab-pixel-letter--a">a</span>
          <span className="devis-lab-pixel-letter devis-lab-pixel-letter--b">b</span>
          <span className="devis-lab-pixel-cluster" aria-hidden="true">
            <span />
            <span />
            <span />
            <span />
            <span />
          </span>
        </span>
      ) : (
        <span className="devis-wordmark-lab" aria-hidden="true">Lab</span>
      )}
    </span>
  );
}

function Wordmark({ direction = "original", size = 56, color = "currentColor", variant = "color", gap = 14 }) {
  const Logo = { original: LogoOriginalClean, refined: LogoOriginalClean, pixel: LogoPixel, geometric: LogoGeometric, monochrome: LogoMonochrome }[direction] || LogoOriginalClean;
  return (
    <div className="wordmark" style={{ display: "inline-flex", alignItems: "center", gap }}>
      <Logo size={size} variant={variant} />
      <DevisWordmark direction={direction} style={{ color, fontSize: size * 0.52 }} />
    </div>
  );
}

const LOGO_DIRECTIONS = [
  { id: "original", label: "Primary Mark", shortLabel: "Primary", sub: "Official D/L mark", role: "core", Component: LogoOriginalClean },
  { id: "pixel", label: "Pixel Mode", shortLabel: "Pixel", sub: "Playful lab variant", role: "experiment", Component: LogoPixel },
  { id: "geometric", label: "Studio Mark", shortLabel: "Studio", sub: "Premium/minimal variant", role: "support", Component: LogoGeometric },
  { id: "monochrome", label: "Utility Mono", shortLabel: "Mono", sub: "One-color utility mark", role: "utility", Component: LogoMonochrome },
];

Object.assign(window, {
  LogoOriginalClean,
  LogoRefined,
  LogoPixel,
  LogoGeometric,
  LogoMonochrome,
  LogoFavicon,
  LogoOriginal,
  DevisWordmark,
  Wordmark,
  PixelDpadCore,
  PixelCoreSpark,
  LOGO_DIRECTIONS,
  LOGO_VARIANT_ALIASES,
  normalizeLogoVariant,
  GradDefs,
});