// Refined GetUpper logo — brushstroke DNA kept, angle tightened into an upward tilt.
// The brush shape now has an intentional upward lift on the right side (arrow hint).
function GULogo({ size = 40, inverted = false, animated = false }) {
  const ink = inverted ? '#F5F3EE' : '#0A0A0B';
  const red = '#E8192C';
  const h = size;
  const w = size * 3.4;
  return (
    <svg viewBox="0 0 340 100" width={w} height={h} aria-label="GetUpper" style={{ display: 'block' }}>
      <defs>
        <filter id="gu-rough">
          <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" seed="4" />
          <feDisplacementMap in="SourceGraphic" scale="1.2" />
        </filter>
        <clipPath id="gu-brush-clip">
          {/* Hand-drawn-ish brush with upward lift on right */}
          <path d="M6 54 C 18 32, 48 22, 86 20 C 120 18, 150 22, 170 24 L 172 60 C 150 64, 120 66, 86 66 C 52 66, 22 64, 8 62 Z" />
        </clipPath>
      </defs>
      {/* Brush background */}
      <g filter="url(#gu-rough)">
        <path
          d="M6 54 C 18 32, 48 22, 86 20 C 120 18, 150 22, 170 24 L 172 60 C 150 64, 120 66, 86 66 C 52 66, 22 64, 8 62 Z"
          fill={red}
        />
        {/* subtle drip */}
        <path d="M158 58 L 162 74 L 166 60 Z" fill={red} opacity="0.85" />
      </g>
      {/* GET reversed out of brush */}
      <g clipPath="url(#gu-brush-clip)">
        <text
          x="18"
          y="55"
          fill="#F5F3EE"
          style={{
            fontFamily: 'Unbounded, system-ui, sans-serif',
            fontWeight: 800,
            fontSize: '38px',
            letterSpacing: '-0.5px'
          }}
        >
          GET
        </text>
      </g>
      {/* UPPER */}
      <text
        x="8"
        y="95"
        fill={ink}
        style={{
          fontFamily: 'Unbounded, system-ui, sans-serif',
          fontWeight: 800,
          fontSize: '36px',
          letterSpacing: '2px'
        }}
      >
        UPPER
      </text>
      {animated && (
        <g>
          <circle cx="178" cy="28" r="3" fill={red}>
            <animate attributeName="cy" values="28;18;28" dur="2.4s" repeatCount="indefinite" />
            <animate attributeName="opacity" values="0;1;0" dur="2.4s" repeatCount="indefinite" />
          </circle>
        </g>
      )}
    </svg>
  );
}

function GUMonogram({ size = 40, inverted = false }) {
  const ink = inverted ? '#F5F3EE' : '#0A0A0B';
  return (
    <svg viewBox="0 0 60 60" width={size} height={size} aria-hidden="true">
      <defs>
        <filter id="gu-mono-rough">
          <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" seed="7" />
          <feDisplacementMap in="SourceGraphic" scale="1" />
        </filter>
      </defs>
      <g filter="url(#gu-mono-rough)">
        <path d="M4 36 C 8 18, 24 12, 42 12 C 50 12, 54 14, 56 16 L 58 42 C 52 44, 40 46, 24 46 C 12 46, 6 44, 4 42 Z" fill="#E8192C" />
      </g>
      <text
        x="10"
        y="38"
        fill="#F5F3EE"
        style={{ fontFamily: 'Unbounded, sans-serif', fontWeight: 800, fontSize: '22px' }}
      >
        G
      </text>
      {/* Upward arrow */}
      <path d="M42 30 L 50 22 L 50 30 M 50 22 L 42 22" stroke={ink} strokeWidth="3" fill="none" strokeLinecap="square" />
    </svg>
  );
}

Object.assign(window, { GULogo, GUMonogram });