/* Brand logo system — reads window.__BRANDCFG so TMS / Aura switch everywhere */
(function () {
  const DEFAULT_BRAND = {
    letters: 'TMS',
    name: 'TMS Wealth',
    subTop: 'Wealth',
    subBot: '',
    subStacked: 'Wealth',
    wordSuffix: 'Wealth',
  };
  function B() {
    return (typeof window !== 'undefined' && window.__BRANDCFG) || DEFAULT_BRAND;
  }

  function Monogram({ size = 64, shape = "oval", stroke = 1 }) {
    const b = B();
    return (
      <svg className="tms-mono" width={size} height={size} viewBox="0 0 100 100" role="img" aria-label={b.name + " monogram"}>
        {shape === "oval" && <ellipse cx="50" cy="50" rx="36" ry="46" fill="none" stroke="currentColor" strokeWidth={stroke} opacity="0.55" />}
        {shape === "circle" && <circle cx="50" cy="50" r="44" fill="none" stroke="currentColor" strokeWidth={stroke} opacity="0.55" />}
        {shape === "square" && <rect x="6" y="6" width="88" height="88" fill="none" stroke="currentColor" strokeWidth={stroke} opacity="0.55" />}
        <text x="50" y="50" textAnchor="middle" dominantBaseline="central"
          fontFamily="var(--font-display)" fontWeight="500" fontSize="30"
          letterSpacing="2" fill="currentColor">{b.letters}</text>
      </svg>
    );
  }

  function Logo({ variant = "nav", tone = "", href = null, onClick = null, className = "" }) {
    const b = B();
    const toneCls = tone ? ` tms--${tone}` : "";
    let inner;
    if (b.logoSrc) {
      const lsrc = (typeof window !== 'undefined' && window.RES) ? window.RES(b.logoId, b.logoSrc) : b.logoSrc;
      inner = <img className="brand-img" src={lsrc} alt={b.name} />;
    } else if (variant === "stacked") {
      inner = (
        <React.Fragment>
          <span className="tms-letters">{b.letters}</span>
          <span className="tms-rule"></span>
          <span className="tms-sub">{b.subStacked}</span>
        </React.Fragment>
      );
    } else if (variant === "word") {
      inner = <span className="tms-letters">{b.letters}&nbsp;&nbsp;{b.wordSuffix}</span>;
    } else if (variant === "mono") {
      inner = <Monogram size={72} shape="oval" />;
    } else {
      inner = (
        <React.Fragment>
          <span className="tms-letters">{b.letters}</span>
          <span className="tms-bar"></span>
          <span className="tms-full">{b.subTop}{b.subBot ? ' ' + b.subBot : ''}</span>
        </React.Fragment>
      );
    }
    const cls = `tms tms--${variant}${toneCls}${className ? ' ' + className : ''}`;
    if (href != null) {
      return <a className={cls} href={href} onClick={onClick} aria-label={b.name}>{inner}</a>;
    }
    return <span className={cls} aria-label={b.name}>{inner}</span>;
  }

  window.TMSLogo = Logo;
  window.TMSMonogram = Monogram;
})();