// Vault logomark — bank-safe icon (Safe Green body, Handle Light door, Dial/Core Green dial)
// Spin-lock entry: dial rotates in while the door settles.

const VAULT_BRAND = {
  safeGreen: "#5D9C71",     // door / body
  handleLight: "#C4E6D2",   // door inset
  dial: "#3A7A57",          // dial + accents
  ink: "#3D3D3D",
};

function VaultMark({ size = 28, color, animated = false, mono = false }) {
  const s = size;
  const id = React.useId();
  const dialId = `vault-dial-${id}`;

  // Mono mode uses single color (for stamps, favicons in dark)
  const body = mono ? (color || "currentColor") : VAULT_BRAND.safeGreen;
  const inset = mono ? "rgba(255,255,255,.55)" : VAULT_BRAND.handleLight;
  const dial = mono ? (color || "currentColor") : VAULT_BRAND.dial;
  const stroke = mono ? (color || "currentColor") : VAULT_BRAND.dial;

  return (
    <svg width={s} height={s} viewBox="0 0 64 64" fill="none" aria-label="Vault"
      style={{ display: "block" }}>
      {/* Outer safe body with rounded corners */}
      <rect x="4" y="6" width="56" height="52" rx="6" fill={body}/>

      {/* Inner door panel — slightly inset, light green */}
      <rect x="10" y="12" width="44" height="40" rx="3" fill={inset}/>

      {/* Door outline */}
      <rect x="10" y="12" width="44" height="40" rx="3"
        fill="none" stroke={stroke} strokeWidth="1.2" opacity="0.35"/>

      {/* Dial group — rotates on load */}
      <g style={animated ? {
        transformOrigin: "32px 32px",
        animation: "vaultDial 1100ms cubic-bezier(.2,.8,.2,1) both",
      } : undefined}>
        {/* Dial outer ring */}
        <circle cx="32" cy="32" r="10" fill={dial}/>
        {/* Dial spokes — four notches */}
        <g fill={inset}>
          <rect x="31.2" y="20.5" width="1.6" height="3" rx="0.4"/>
          <rect x="31.2" y="40.5" width="1.6" height="3" rx="0.4"/>
          <rect x="20.5" y="31.2" width="3" height="1.6" rx="0.4"/>
          <rect x="40.5" y="31.2" width="3" height="1.6" rx="0.4"/>
        </g>
        {/* Center hub */}
        <circle cx="32" cy="32" r="3.2" fill={inset}/>
        <circle cx="32" cy="32" r="1.4" fill={dial}/>
      </g>

      {/* Feet — small legs at the bottom for safe character */}
      <rect x="10" y="56" width="6" height="4" rx="1" fill={body} opacity="0.85"/>
      <rect x="48" y="56" width="6" height="4" rx="1" fill={body} opacity="0.85"/>
    </svg>
  );
}

function VaultLogo({ size = 28, showWord = true, mono = false, animated = true }) {
  const [spun, setSpun] = React.useState(false);
  React.useEffect(() => {
    if (!animated) return;
    const t = setTimeout(() => setSpun(true), 1200);
    return () => clearTimeout(t);
  }, [animated]);

  // Slightly oversize the mark visually since it's bounded in 64x64 with padding
  const markSize = Math.round(size * 1.15);

  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 8,
      color: "var(--ink)", letterSpacing: "-.01em"
    }}>
      <span style={{ lineHeight: 0 }}>
        <VaultMark size={markSize} animated={animated && !spun} mono={mono}/>
      </span>
      {showWord && (
        <span style={{
          fontFamily: "var(--f-display)",
          fontSize: Math.round(size * 0.82),
          fontWeight: 600,
          lineHeight: 1,
          letterSpacing: "-0.015em",
          color: "var(--ink)",
        }}>Vault</span>
      )}
    </span>
  );
}

// Inject keyframes once.
if (typeof document !== "undefined" && !document.getElementById("vault-logo-anim")) {
  const style = document.createElement("style");
  style.id = "vault-logo-anim";
  style.textContent = `
    @keyframes vaultDial {
      0%   { transform: rotate(-540deg) scale(0.5); opacity: 0; }
      55%  { transform: rotate(45deg)   scale(1.06); opacity: 1; }
      80%  { transform: rotate(-12deg)  scale(1); }
      100% { transform: rotate(0deg)    scale(1); opacity: 1; }
    }
  `;
  document.head.appendChild(style);
}

Object.assign(window, { VaultLogo, VaultMark, VAULT_BRAND });