import { AvariaLogo } from "./AvariaLogo";

type Props = {
  size?: number;
  subtitle?: string;
  className?: string;
  href?: string;
};

/** Avaria-Wortmarke: freistehendes Logo (Originalproportionen) + Schriftzug. */
export function Brand({ size = 38, subtitle, className, href }: Props) {
  const content = (
    <span className={`inline-flex items-center gap-3 ${className ?? ""}`}>
      <span
        className="relative inline-flex shrink-0 items-center justify-center"
        style={{ width: size }}
      >
        {/* Weicher Glow hinter dem freistehenden Logo */}
        <span
          aria-hidden
          className="absolute rounded-full"
          style={{
            inset: -size * 0.35,
            background:
              "radial-gradient(circle, rgba(158,215,255,.4), rgba(255,159,215,.22) 45%, transparent 70%)",
            filter: "blur(8px)",
            opacity: 0.65,
          }}
        />
        <AvariaLogo size={size} className="relative" />
      </span>

      <span className="flex flex-col leading-none">
        <span
          className="font-[family-name:var(--font-sora)] font-extrabold tracking-tight"
          style={{ fontSize: size * 0.46, letterSpacing: "-0.03em" }}
        >
          Avaria <span className="gradient-text">Team OS</span>
        </span>
        {subtitle ? (
          <span className="eyebrow mt-1" style={{ fontSize: 10 }}>
            {subtitle}
          </span>
        ) : null}
      </span>
    </span>
  );

  if (href) {
    return (
      <a href={href} className="inline-flex">
        {content}
      </a>
    );
  }
  return content;
}