// IDEA letterblock logo — clean SVG, hand-redrawn vector replacement
// Replaces the raster-baked-into-SVG original (see media-manifest.md / current-website-analysis.md)
// Letters: I = magenta, D = teal, E = green, A = red (matches existing brand)

function IdeaLogo({ size = 56, withTagline = true, mono = false }) {
  // Block width per letter
  const w = 38, h = 44;
  const gap = 6;
  const totalW = w * 4 + gap * 3;
  const totalH = withTagline ? h + 22 : h;
  const colors = mono
    ? { i: 'currentColor', d: 'currentColor', e: 'currentColor', a: 'currentColor', text: 'currentColor' }
    : { i: 'var(--c-magenta)', d: 'var(--c-teal)', e: 'var(--c-green)', a: 'var(--c-red)', text: 'var(--ink)' };

  const scale = size / totalH;
  const r = 6; // corner radius

  // Letter glyphs — drawn white on colored tile
  const Letter = ({ x, fill, glyph }) => (
    <g transform={`translate(${x},0)`}>
      <rect x="0" y="0" width={w} height={h} rx={r} ry={r} fill={fill} />
      {glyph}
    </g>
  );

  // I — simple white block letter
  const I = (
    <g fill="white">
      <rect x={w/2 - 4} y={10} width={8} height={24} rx={1.5} />
    </g>
  );
  // D — block with cut
  const D = (
    <g fill="white">
      <path d={`M 9 10 L 22 10 Q 30 10 30 22 Q 30 34 22 34 L 9 34 Z M 16 16 L 16 28 L 21 28 Q 24 28 24 22 Q 24 16 21 16 Z`} fillRule="evenodd" />
    </g>
  );
  // E
  const E = (
    <g fill="white">
      <rect x="10" y="10" width="18" height="6" rx="1" />
      <rect x="10" y="10" width="6" height="24" rx="1" />
      <rect x="10" y="19" width="14" height="5" rx="1" />
      <rect x="10" y="28" width="18" height="6" rx="1" />
    </g>
  );
  // A
  const A = (
    <g fill="white">
      <path d={`M 8 34 L 16 10 L 22 10 L 30 34 L 24 34 L 22.5 30 L 15.5 30 L 14 34 Z`} />
      <rect x="16.5" y="22" width="5" height="4" rx=".5" fill={colors.a} />
    </g>
  );

  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 12 }}>
      <svg
        width={totalW * scale}
        height={size}
        viewBox={`0 0 ${totalW} ${totalH}`}
        style={{ display: 'block', flex: 'none' }}
        aria-label="IDEA Early Learning Center"
      >
        <Letter x={0}                fill={colors.i} glyph={I} />
        <Letter x={w + gap}          fill={colors.d} glyph={D} />
        <Letter x={(w + gap) * 2}    fill={colors.e} glyph={E} />
        <Letter x={(w + gap) * 3}    fill={colors.a} glyph={A} />
        {withTagline && (
          <text
            x={totalW / 2}
            y={h + 16}
            textAnchor="middle"
            fontFamily="Fredoka, sans-serif"
            fontWeight="500"
            fontSize="11"
            letterSpacing="2.8"
            fill={colors.text}
          >EARLY LEARNING CENTER</text>
        )}
      </svg>
    </span>
  );
}

window.IdeaLogo = IdeaLogo;