// Icon wrapper
function Icon({ name, className = "", fill = false, size }) {
  const style = size ? { fontSize: size } : undefined;
  return (
    <span
      className={`material-symbols-outlined ${fill ? "mat-fill" : ""} ${className}`}
      style={style}
    >
      {name}
    </span>
  );
}

// MeuCraque logo — original mark:
// - Obsidian tile (violet corners, dark fill) matching app aesthetic
// - Geometric "M" monogram formed by two angular peaks (stadium stands silhouette)
// - Orbital ring + pentagon facet echoing a soccer ball
// - Striking dot at the apex (the goal)
function LogoMark({ size = 40, variant = "default" }) {
  const accent = variant === "tertiary" ? "#34d399" : "#a78bfa";
  const accentDim = variant === "tertiary" ? "#6ee7b7" : "#c4b5fd";
  const uid = React.useId ? React.useId() : Math.random().toString(36).slice(2);

  if (variant === "flat") {
    return (
      <svg width={size} height={size} viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="MeuCraque">
        <defs>
          <linearGradient id={`mg-${uid}`} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor={accentDim} />
            <stop offset="100%" stopColor={accent} />
          </linearGradient>
        </defs>
        <circle cx="32" cy="32" r="22" stroke={accent} strokeOpacity="0.25" strokeWidth="2" />
        <path d="M32 18 L42 25.3 L38.2 37 L25.8 37 L22 25.3 Z" stroke={accent} strokeOpacity="0.35" strokeWidth="1.5" fill="none" strokeLinejoin="round" />
        <path d="M16 46 L16 22 L32 38 L48 22 L48 46" stroke={`url(#mg-${uid})`} strokeWidth="5" strokeLinecap="round" strokeLinejoin="round" fill="none" />
        <circle cx="32" cy="38" r="2.6" fill={accent} />
      </svg>
    );
  }

  return (
    <svg width={size} height={size} viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="MeuCraque">
      <defs>
        <linearGradient id={`tile-${uid}`} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#18181b" />
          <stop offset="100%" stopColor="#0c0c0f" />
        </linearGradient>
        <linearGradient id={`ms-${uid}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={accentDim} />
          <stop offset="100%" stopColor={accent} />
        </linearGradient>
        <radialGradient id={`glow-${uid}`} cx="0.5" cy="0.5" r="0.5">
          <stop offset="0%" stopColor={accent} stopOpacity="0.35" />
          <stop offset="100%" stopColor={accent} stopOpacity="0" />
        </radialGradient>
      </defs>
      <rect x="2" y="2" width="60" height="60" rx="14" fill={`url(#tile-${uid})`} stroke="#27272a" strokeWidth="1" />
      <circle cx="32" cy="32" r="20" fill={`url(#glow-${uid})`} />
      <circle cx="32" cy="32" r="20" stroke={accent} strokeOpacity="0.22" strokeWidth="1.5" />
      <path d="M32 18 L42 25.3 L38.2 37 L25.8 37 L22 25.3 Z" stroke={accent} strokeOpacity="0.3" strokeWidth="1.2" fill="none" strokeLinejoin="round" />
      <path d="M16 46 L16 22 L32 38 L48 22 L48 46" stroke={`url(#ms-${uid})`} strokeWidth="4.5" strokeLinecap="round" strokeLinejoin="round" fill="none" />
      <circle cx="32" cy="38" r="2.4" fill={accent} />
    </svg>
  );
}

window.Icon = Icon;
window.LogoMark = LogoMark;
// Back-compat — existing files import `Logomark`
window.Logomark = LogoMark;