// Brand.jsx — Identidade visual do sistema "Demo Serviços"
// Logo 100% vetorial (SVG inline): selo com gradiente da marca + chave de serviço
// com "check" de conclusão. Escalável, nítido em qualquer tamanho e sem depender
// de arquivos de imagem.
'use strict';

// id incremental p/ evitar colisão de <defs> quando a logo aparece mais de uma vez
let _brandSeq = 0;

/**
 * BrandMark — apenas o selo (ícone) da marca.
 * @param {{ size?:number, style?:object, className?:string }} p
 */
function BrandMark({ size = 44, style = {}, className = '' }) {
  const uid = `bm${++_brandSeq}`;
  return (
    <svg width={size} height={size} viewBox="0 0 48 48" fill="none"
      className={className} style={{ display: 'block', flexShrink: 0, ...style }}
      role="img" aria-label="Demo Serviços">
      <defs>
        <linearGradient id={`${uid}-badge`} x1="6" y1="4" x2="42" y2="44" gradientUnits="userSpaceOnUse">
          <stop offset="0" stopColor="#FF9264" />
          <stop offset="0.52" stopColor="#FF6B35" />
          <stop offset="1" stopColor="#E5541F" />
        </linearGradient>
        <linearGradient id={`${uid}-gloss`} x1="24" y1="2" x2="24" y2="26" gradientUnits="userSpaceOnUse">
          <stop offset="0" stopColor="#ffffff" stopOpacity="0.28" />
          <stop offset="1" stopColor="#ffffff" stopOpacity="0" />
        </linearGradient>
      </defs>

      {/* Selo squircle */}
      <rect x="2" y="2" width="44" height="44" rx="13.5" fill={`url(#${uid}-badge)`} />
      {/* Brilho superior sutil */}
      <rect x="2" y="2" width="44" height="44" rx="13.5" fill={`url(#${uid}-gloss)`} />
      {/* Contorno interno de luz */}
      <rect x="2.75" y="2.75" width="42.5" height="42.5" rx="12.9"
        fill="none" stroke="#ffffff" strokeOpacity="0.22" strokeWidth="1.1" />

      {/* Chave de serviço + traço de conclusão (branco) */}
      <g transform="translate(24 24) rotate(-8) translate(-12 -12)"
        stroke="#ffffff" strokeWidth="2.15" fill="none"
        strokeLinecap="round" strokeLinejoin="round">
        <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
      </g>
      {/* "Check" de OS concluída, no canto */}
      <g transform="translate(29.5 28.5)" stroke="#ffffff" strokeWidth="2.3"
        fill="none" strokeLinecap="round" strokeLinejoin="round" opacity="0.95">
        <polyline points="0 3.4 2.4 5.8 6.6 1" />
      </g>
    </svg>
  );
}

/**
 * BrandLogo — selo + wordmark "Demo Serviços" (+ tagline opcional).
 * @param {{
 *   size?:number, theme?:'dark'|'light', showTagline?:boolean,
 *   tagline?:string, className?:string, style?:object
 * }} p
 */
function BrandLogo({
  size = 42,
  theme = 'dark',
  showTagline = true,
  tagline = 'Sistema de Gestão',
  className = '',
  style = {},
}) {
  const isDark = theme === 'dark';
  const wordSize = Math.round(size * 0.46);
  const demoColor = isDark ? '#FFFFFF' : '#0A1F44';

  return (
    <div className={`flex items-center ${className}`} style={{ gap: size * 0.28, ...style }}>
      <BrandMark size={size}
        style={{ filter: 'drop-shadow(0 6px 16px rgba(255,107,53,0.42))' }} />
      <div className="leading-none select-none">
        <div style={{
          fontWeight: 800,
          fontSize: wordSize,
          letterSpacing: '-0.02em',
          whiteSpace: 'nowrap',
          lineHeight: 1,
        }}>
          <span style={{ color: demoColor }}>Demo</span>
          <span style={{ color: demoColor, opacity: 0.32, margin: '0 0.14em', fontWeight: 400 }}>·</span>
          <span style={{
            background: 'linear-gradient(92deg,#FF8A62 0%,#FF6B35 100%)',
            WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
          }}>Serviços</span>
        </div>
        {showTagline && (
          <div style={{
            marginTop: size * 0.13,
            fontSize: Math.max(8, Math.round(size * 0.185)),
            fontWeight: 700,
            textTransform: 'uppercase',
            letterSpacing: '0.22em',
            color: isDark ? 'rgba(255,255,255,0.46)' : 'rgba(10,31,68,0.5)',
          }}>{tagline}</div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { BrandMark, BrandLogo });