// logo.jsx - VaultCova logo + abstract geometric mark variants

function LogoMark({ variant = "vault", size = 36, accent = "var(--accent)", accent2 = "var(--accent-2)", ink = "var(--text)" }) {
  const s = size;
  const wrap = (children, extra = {}) => (
    <svg width={s} height={s} viewBox="0 0 48 48" fill="none" style={{ display: "block", ...extra }}>
      <defs>
        <linearGradient id={"vcg" + variant} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor={accent2} />
          <stop offset="1" stopColor={accent} />
        </linearGradient>
      </defs>
      {children}
    </svg>
  );
  const grad = "url(#vcg" + variant + ")";

  if (accent === "#ffffff") {
    // onDark: glassy white box with white vault dial - reads on any accent panel
    return wrap(<>
      <rect x="3" y="3" width="42" height="42" rx="12" fill="rgba(255,255,255,0.16)" stroke="rgba(255,255,255,0.5)" strokeWidth="1.4" />
      <circle cx="24" cy="24" r="11" fill="none" stroke="#fff" strokeWidth="2.6" />
      <circle cx="24" cy="24" r="3.4" fill="#fff" />
      <path d="M24 13v4M24 31v4M13 24h4M31 24h4" stroke="#fff" strokeWidth="2.6" strokeLinecap="round" />
    </>);
  }

  if (variant === "facet") {
    // diamond split into facets forming an abstract V
    return wrap(<>
      <rect x="3" y="3" width="42" height="42" rx="12" fill={grad} />
      <path d="M14 16l10 16 10-16" stroke="#fff" strokeWidth="3.4" strokeLinecap="round" strokeLinejoin="round" fill="none" />
      <path d="M19 16l5 8 5-8" fill="rgba(255,255,255,0.28)" />
    </>);
  }
  if (variant === "vault") {
    // rounded square vault door with dial + V notch
    return wrap(<>
      <rect x="3" y="3" width="42" height="42" rx="12" fill={grad} />
      <circle cx="24" cy="24" r="11" fill="none" stroke="#fff" strokeWidth="2.6" />
      <circle cx="24" cy="24" r="3.4" fill="#fff" />
      <path d="M24 13v4M24 31v4M13 24h4M31 24h4" stroke="#fff" strokeWidth="2.6" strokeLinecap="round" />
    </>);
  }
  if (variant === "stack") {
    // three nested chevrons (layered coverage) forming a V
    return wrap(<>
      <rect x="3" y="3" width="42" height="42" rx="12" fill="var(--surface-3)" />
      <path d="M11 14l13 9 13-9" stroke={accent} strokeWidth="3.2" strokeLinecap="round" strokeLinejoin="round" />
      <path d="M11 22l13 9 13-9" stroke={accent2} strokeWidth="3.2" strokeLinecap="round" strokeLinejoin="round" opacity="0.75" />
      <path d="M11 30l13 9 13-9" stroke={accent} strokeWidth="3.2" strokeLinecap="round" strokeLinejoin="round" opacity="0.45" />
    </>);
  }
  if (variant === "aperture") {
    // hexagon with inner V aperture
    return wrap(<>
      <path d="M24 3l18 10.5v21L24 45 6 34.5v-21z" fill={grad} />
      <path d="M24 3l18 10.5v21L24 45 6 34.5v-21z" fill="none" stroke="rgba(255,255,255,.25)" strokeWidth="1.5" />
      <path d="M15 18l9 13 9-13" stroke="#fff" strokeWidth="3.2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
      <circle cx="24" cy="14" r="2.4" fill="#fff" />
    </>);
  }
  // minimal monogram
  return wrap(<>
    <rect x="3" y="3" width="42" height="42" rx="14" fill="none" stroke={grad} strokeWidth="3" />
    <path d="M15 15l9 18 9-18" stroke={ink} strokeWidth="3.4" strokeLinecap="round" strokeLinejoin="round" fill="none" />
  </>);
}

function Logo({ variant = "vault", size = 36, showWord = true, sub = false, onClick, onDark = false }) {
  const markAccent = onDark ? "#ffffff" : "var(--accent)";
  const markAccent2 = onDark ? "rgba(255,255,255,0.7)" : "var(--accent-2)";
  return (
    <div onClick={onClick} style={{ display: "inline-flex", alignItems: "center", gap: size * 0.32, cursor: onClick ? "pointer" : "default", color: onDark ? "#fff" : "var(--text)" }}>
      <LogoMark variant={variant} size={size} accent={markAccent} accent2={markAccent2} ink={onDark ? "#fff" : "var(--text)"} />
      {showWord && (
        <div style={{ lineHeight: 1 }}>
          <div className="display" style={{ fontSize: size * 0.62, fontWeight: 600, letterSpacing: "-0.03em", whiteSpace: "nowrap" }}>
            Vault<span style={{ color: onDark ? "rgba(255,255,255,0.78)" : "var(--accent)" }}>Cova</span>
          </div>
          {sub && <div style={{ fontSize: size * 0.27, color: "var(--text-faint)", fontWeight: 600, marginTop: 3, letterSpacing: "0.01em" }}>The Insurance Operating System</div>}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { Logo, LogoMark });