/*
  logo.jsx — Mascot ("zurullito armado"), helmet variants and wordmark.
  Exports to window: PoopHelmet, PoopFace, Wordmark, BootMark.
*/

/*
  PoopHelmet — the full mascot (poop with combat helmet).
  Props: size (px), helmet ('combat'|'kepi'|'beret'), happy (bool),
         tone ('default' | 'mono-paper' | 'mono-ink')
*/
function PoopHelmet({
  size = 80,
  helmet = 'combat',
  happy = true,
  tone = 'default',
  rotate = 0,
  style,
}) {
  const palette = {
    'default': {
      poop1: '#9a5824',   // dark base
      poop2: '#b06a30',   // mid
      poop3: '#c98042',   // light highlight
      shadow: 'rgba(0,0,0,0.18)',
      helmet: 'var(--olive, #4f5d3c)',
      helmetDark: 'var(--bg-2, #262d1f)',
      strap: '#2a3a25',
      eye: '#1b1208',
      mouth: '#1b1208',
      flag1: '#c43c1a',
      flag2: '#e9b21a',
      paper: '#fff',
    },
    'mono-paper': {
      poop1: 'var(--ink)',
      poop2: 'var(--ink)',
      poop3: 'var(--ink)',
      shadow: 'transparent',
      helmet: 'var(--ink)',
      helmetDark: 'var(--ink)',
      strap: 'var(--ink)',
      eye: 'var(--paper)',
      mouth: 'var(--paper)',
      flag1: 'var(--paper)',
      flag2: 'var(--paper)',
      paper: 'var(--paper)',
    },
    'mono-ink': {
      poop1: 'var(--paper)',
      poop2: 'var(--paper)',
      poop3: 'var(--paper)',
      shadow: 'transparent',
      helmet: 'var(--paper)',
      helmetDark: 'var(--paper)',
      strap: 'var(--paper)',
      eye: 'var(--ink)',
      mouth: 'var(--ink)',
      flag1: 'var(--ink)',
      flag2: 'var(--ink)',
      paper: 'var(--ink)',
    },
  }[tone] || {};

  return (
    <svg
      width={typeof size === 'number' ? size : undefined}
      height={typeof size === 'number' ? size : undefined}
      viewBox="0 0 120 120"
      xmlns="http://www.w3.org/2000/svg"
      style={{
        ...(typeof size === 'string' ? { width: size, height: size } : {}),
        transform: rotate ? `rotate(${rotate}deg)` : undefined,
        ...style,
      }}
      aria-label="Zurullito Armado"
      role="img"
    >
      {/* ground shadow */}
      <ellipse cx="60" cy="112" rx="40" ry="4.5" fill={palette.shadow} />

      {/* === POOP BODY === drawn as three overlapping stacked tiers === */}
      {/* Bottom tier */}
      <path
        d="M 16,108
           C 8,108 4,92 14,86
           C 26,80 94,80 106,86
           C 116,92 112,108 104,108
           Z"
        fill={palette.poop1}
      />
      {/* Middle tier */}
      <path
        d="M 26,86
           C 20,86 18,72 28,68
           C 40,64 82,64 92,68
           C 102,72 100,86 94,86
           Z"
        fill={palette.poop2}
      />
      {/* Top tier (the swirl peak) */}
      <path
        d="M 40,68
           C 36,68 34,56 42,52
           C 50,48 70,48 78,52
           C 86,56 84,68 80,68
           Z"
        fill={palette.poop3}
      />
      {/* Swirl peak nub */}
      <path
        d="M 56,52
           C 56,46 58,42 62,42
           C 66,42 68,46 68,52
           Z"
        fill={palette.poop3}
      />

      {/* Highlight strokes that suggest the swirl */}
      <g stroke={palette.poop1} strokeWidth="1.2" fill="none" opacity="0.4" strokeLinecap="round">
        <path d="M 28,96 Q 60,90 92,96" />
        <path d="M 36,76 Q 60,72 84,76" />
      </g>

      {/* === FACE === */}
      {/* Eyes — happy curved arcs (closed) or open ovals */}
      {happy ? (
        <g stroke={palette.eye} strokeWidth="2.2" fill="none" strokeLinecap="round">
          <path d="M 46,76 Q 51,72 56,76" />
          <path d="M 64,76 Q 69,72 74,76" />
        </g>
      ) : (
        <g fill={palette.eye}>
          <ellipse cx="51" cy="75" rx="2.6" ry="3.2" />
          <ellipse cx="69" cy="75" rx="2.6" ry="3.2" />
        </g>
      )}
      {/* Eye sparkle */}
      <circle cx="53.5" cy="74" r="0.7" fill={palette.paper} />
      <circle cx="71.5" cy="74" r="0.7" fill={palette.paper} />

      {/* Mouth — big smile with little tongue */}
      <path
        d="M 50,87
           Q 60,98 70,87
           Q 65,92 60,92
           Q 55,92 50,87
           Z"
        fill={palette.mouth}
      />
      <path
        d="M 56,91
           Q 60,96 64,91
           Q 60,95 56,91
           Z"
        fill="#d95a8c"
        opacity="0.85"
      />
      {/* Cheek blush */}
      <circle cx="42" cy="84" r="2.6" fill="#e08080" opacity="0.5" />
      <circle cx="78" cy="84" r="2.6" fill="#e08080" opacity="0.5" />

      {/* === HELMET === sits over the top tier === */}
      {helmet === 'combat' && (
        <g transform="rotate(-8 60 40)">
          {/* dome */}
          <path
            d="M 26,42
               Q 26,18 60,18
               Q 94,18 94,42
               Z"
            fill={palette.helmet}
          />
          {/* highlight band on top */}
          <path
            d="M 36,28
               Q 60,22 84,28"
            stroke={palette.poop3}
            strokeWidth="2"
            fill="none"
            opacity="0.35"
          />
          {/* rim */}
          <rect x="22" y="40" width="76" height="6" rx="1" fill={palette.helmetDark} />
          {/* chin strap — short, peeking out the side */}
          <path
            d="M 26,46
               Q 22,52 26,58"
            stroke={palette.strap}
            strokeWidth="2.5"
            fill="none"
            strokeLinecap="round"
          />
          <path
            d="M 94,46
               Q 98,52 94,58"
            stroke={palette.strap}
            strokeWidth="2.5"
            fill="none"
            strokeLinecap="round"
          />
          {/* Spanish flag patch on front */}
          <g>
            <rect x="50" y="28" width="20" height="8" fill={palette.flag1} />
            <rect x="50" y="30.5" width="20" height="3" fill={palette.flag2} />
          </g>
          {/* small star/insignia in the middle */}
          <circle cx="60" cy="32" r="1.6" fill={palette.helmetDark} opacity="0.85" />
        </g>
      )}

      {helmet === 'beret' && (
        <g transform="rotate(-12 60 32)">
          <ellipse cx="60" cy="30" rx="32" ry="14" fill={palette.helmet} />
          <ellipse cx="60" cy="28" rx="32" ry="11" fill={palette.helmet} />
          <ellipse cx="44" cy="32" rx="6" ry="3" fill={palette.helmetDark} opacity="0.6" />
          <circle cx="78" cy="22" r="2.2" fill={palette.flag2} />
        </g>
      )}

      {helmet === 'kepi' && (
        <g>
          <rect x="28" y="34" width="64" height="10" rx="2" fill={palette.helmetDark} />
          <rect x="32" y="20" width="56" height="16" rx="3" fill={palette.helmet} />
          <rect x="50" y="25" width="20" height="3" fill={palette.flag2} />
        </g>
      )}
    </svg>
  );
}

/*
  PoopFace — minimal poop emoji (no helmet) for inline use inside letters.
*/
function PoopFace({ size = 28, style }) {
  return (
    <svg width={size} height={size} viewBox="0 0 60 60" style={style} role="img" aria-label="poop">
      {/* tiers */}
      <path d="M 8,54 C 4,54 2,42 10,38 C 18,34 42,34 50,38 C 58,42 56,54 52,54 Z" fill="#9a5824" />
      <path d="M 14,38 C 10,38 8,28 14,26 C 22,22 38,22 46,26 C 52,28 50,38 46,38 Z" fill="#b06a30" />
      <path d="M 22,26 C 18,26 18,16 24,14 C 30,12 36,12 38,14 C 44,16 42,26 38,26 Z" fill="#c98042" />
      {/* face */}
      <g stroke="#1b1208" strokeWidth="1.6" fill="none" strokeLinecap="round">
        <path d="M 20,40 Q 24,36 28,40" />
        <path d="M 32,40 Q 36,36 40,40" />
      </g>
      <path d="M 24,46 Q 30,52 36,46 Q 30,50 24,46 Z" fill="#1b1208" />
    </svg>
  );
}

/*
  Wordmark — "ZURULLITOS ARMADOS" stencil text with a happy poop substituted
  inside specific letters: the 'O' in ZURULLITOS and the dot of the 'i' in militar joke.
*/
function Wordmark({
  size = 28,
  oneLine = false,
  color = 'var(--paper)',
  accent = 'var(--reserva)',
  inkOnPoop = false,
}) {
  // We'll render ZURULL?TOS with one of the letters being a small poop.
  // Trick: keep stencil typography, slot in inline SVGs at letter scale.

  const fontStyle = {
    fontFamily: 'var(--font-display)',
    fontWeight: 900,
    letterSpacing: '0.04em',
    textTransform: 'uppercase',
    color,
    lineHeight: 0.9,
    fontSize: size,
  };

  // Poop glyph mimicking a letter slot (roughly square)
  const poopSize = size * 0.95;

  return (
    <span style={{
      display: 'inline-flex', flexDirection: oneLine ? 'row' : 'column',
      alignItems: 'baseline', gap: oneLine ? '0.4em' : 0,
      ...fontStyle,
    }}>
      <span style={{ display: 'inline-flex', alignItems: 'center' }}>
        {/* "ZURULL" + poop-O + "ITOS" */}
        <span>ZURULL</span>
        <span style={{
          display: 'inline-block',
          width: poopSize * 0.82,
          height: poopSize,
          margin: '0 0.04em',
          transform: 'translateY(0.08em)',
        }}>
          <PoopFace size={poopSize * 0.95} style={{ verticalAlign: 'middle' }} />
        </span>
        <span>TOS</span>
      </span>
      <span style={{ color: accent, display: 'inline-flex', alignItems: 'center' }}>
        <span>ARMAD</span>
        <span style={{
          display: 'inline-block',
          width: poopSize * 0.78,
          height: poopSize,
          margin: '0 0.04em',
          transform: 'translateY(0.08em)',
        }}>
          <PoopFace size={poopSize * 0.95} style={{ verticalAlign: 'middle' }} />
        </span>
        <span>S</span>
      </span>
    </span>
  );
}

/*
  BootMark — large composition for the splash / hero.
*/
function BootMark({ size = 240 }) {
  return (
    <div style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: 14 }}>
      <PoopHelmet size={size} />
    </div>
  );
}

Object.assign(window, { PoopHelmet, PoopFace, Wordmark, BootMark });