// BlockLogo — chunky 3D "M" letter sitting on a grass island.
// Uses SVG <text> with the same 3D extrusion technique as Wordmark for guaranteed clean letterforms,
// plus a small isometric grass island base below.
const BlockLogo = ({ size = 64 }) => {
  const DEPTH = 5;
  const depthLayers = Array.from({ length: DEPTH }, (_, i) => i + 1);

  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 80 80"
      style={{ filter: 'drop-shadow(0 4px 0 rgba(0,0,0,0.5)) drop-shadow(0 8px 14px rgba(0,0,0,0.55))' }}
      aria-label="Minilands"
    >
      <defs>
        <linearGradient id="bl_face" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#fff5b8" />
          <stop offset="35%" stopColor="#ffd340" />
          <stop offset="80%" stopColor="#f0a720" />
          <stop offset="100%" stopColor="#c87010" />
        </linearGradient>
      </defs>

      {/* ============ VOXEL ISLAND BASE ============
          Floating chunk made of stacked isometric voxel cubes.
          Top layer = grass (3 cubes wide), middle = dirt, bottom = stone wedge tapering to a point.
          Each cube has 3 visible faces: top (lit), left (mid-tone), right (shadow). */}
      <g transform="translate(40, 56)">
        {/* Cube primitive: a function-style render via repeated polygons.
            Pixel-art voxel grid: cube width ~8, half-width 4.
            We draw bottom-up so closer cubes overlap farther ones. */}

        {/* ----- STONE WEDGE (back row, 3 cubes — small) ----- */}
        {/* Center stone bottom point */}
        <polygon points="-4,18 0,20 4,18 0,16" fill="#5a6b80" stroke="#000" strokeWidth="1.2" strokeLinejoin="round" />
        <polygon points="-4,18 0,20 0,24 -4,22" fill="#3a4a5e" stroke="#000" strokeWidth="1.2" strokeLinejoin="round" />
        <polygon points="4,18 0,20 0,24 4,22" fill="#2a3848" stroke="#000" strokeWidth="1.2" strokeLinejoin="round" />

        {/* ----- DIRT LAYER (3 cubes wide) ----- */}
        {[-1, 0, 1].map(i => {
          const cx = i * 8;
          const cy = 10;
          return (
            <g key={`dirt-${i}`}>
              {/* Top face (dirt) */}
              <polygon points={`${cx-4},${cy} ${cx},${cy+2} ${cx+4},${cy} ${cx},${cy-2}`} fill="#8d5a2b" stroke="#000" strokeWidth="1.2" strokeLinejoin="round" />
              {/* Left face */}
              <polygon points={`${cx-4},${cy} ${cx},${cy+2} ${cx},${cy+8} ${cx-4},${cy+6}`} fill="#6b4220" stroke="#000" strokeWidth="1.2" strokeLinejoin="round" />
              {/* Right face — darker */}
              <polygon points={`${cx+4},${cy} ${cx},${cy+2} ${cx},${cy+8} ${cx+4},${cy+6}`} fill="#4a2d18" stroke="#000" strokeWidth="1.2" strokeLinejoin="round" />
              {/* Dirt pixel detail */}
              <rect x={cx-2.5} y={cy+2.5} width="1.2" height="1.2" fill="#4a2d18" />
              <rect x={cx+1} y={cy+4.5} width="1.2" height="1.2" fill="#4a2d18" />
            </g>
          );
        })}

        {/* ----- GRASS LAYER (3 cubes wide, top) ----- */}
        {[-1, 0, 1].map(i => {
          const cx = i * 8;
          const cy = 2;
          return (
            <g key={`grass-${i}`}>
              {/* Top face — bright grass */}
              <polygon points={`${cx-4},${cy} ${cx},${cy+2} ${cx+4},${cy} ${cx},${cy-2}`} fill="#7cd23e" stroke="#000" strokeWidth="1.2" strokeLinejoin="round" />
              {/* Top highlight */}
              <polygon points={`${cx-2},${cy-1} ${cx},${cy} ${cx+2},${cy-1} ${cx},${cy-2}`} fill="#b8ec5e" opacity="0.8" />
              {/* Left face — grass strip + dirt */}
              <polygon points={`${cx-4},${cy} ${cx},${cy+2} ${cx},${cy+4} ${cx-4},${cy+2}`} fill="#5fb820" stroke="#000" strokeWidth="1.2" strokeLinejoin="round" />
              <polygon points={`${cx-4},${cy+2} ${cx},${cy+4} ${cx},${cy+8} ${cx-4},${cy+6}`} fill="#6b4220" stroke="#000" strokeWidth="1.2" strokeLinejoin="round" />
              {/* Right face — darker grass strip + darker dirt */}
              <polygon points={`${cx+4},${cy} ${cx},${cy+2} ${cx},${cy+4} ${cx+4},${cy+2}`} fill="#4ea417" stroke="#000" strokeWidth="1.2" strokeLinejoin="round" />
              <polygon points={`${cx+4},${cy+2} ${cx},${cy+4} ${cx},${cy+8} ${cx+4},${cy+6}`} fill="#4a2d18" stroke="#000" strokeWidth="1.2" strokeLinejoin="round" />
            </g>
          );
        })}

        {/* ----- DETAILS on top of grass ----- */}
        {/* Tiny pink flower on left */}
        <rect x="-10" y="-2" width="0.9" height="2" fill="#3e8917" />
        <rect x="-10.5" y="-3" width="1.8" height="1.2" fill="#ff7aa8" />
        {/* Tiny grass tufts */}
        <rect x="-1" y="-2.5" width="0.6" height="1.5" fill="#3e8917" />
        <rect x="0" y="-3" width="0.6" height="1.5" fill="#3e8917" />
        {/* Tiny tree on right */}
        <rect x="7.5" y="-2" width="1.5" height="3" fill="#6b4220" stroke="#000" strokeWidth="0.4" />
        <polygon points="6,-3 8.2,-7 10.5,-3" fill="#3e8917" stroke="#000" strokeWidth="0.6" strokeLinejoin="round" />
        <polygon points="6.5,-4 8.2,-7 10,-4" fill="#5fb820" />
      </g>

      {/* ============ 3D "M" ============ */}
      <g
        fontFamily="'Luckiest Guy', cursive"
        fontSize="52"
        textAnchor="middle"
        letterSpacing="0"
      >
        {/* Extrusion stack — darker amber copies offset down-right */}
        {depthLayers.slice().reverse().map((d) => {
          const t = d / DEPTH;
          const r = Math.round(0xc8 - (0xc8 - 0x40) * t);
          const g = Math.round(0x70 - (0x70 - 0x18) * t);
          const b = Math.round(0x10 - (0x10 - 0x04) * t);
          const color = `rgb(${r}, ${g}, ${b})`;
          return (
            <text
              key={d}
              x={40 + d * 0.8}
              y={44 + d * 0.8}
              fill={color}
              stroke={color}
              strokeWidth="6"
              strokeLinejoin="round"
              paintOrder="stroke"
            >M</text>
          );
        })}

        {/* Black outline */}
        <text x="40" y="44" fill="#000" stroke="#000" strokeWidth="7" strokeLinejoin="round" paintOrder="stroke">M</text>

        {/* Bright gold front face */}
        <text x="40" y="44" fill="url(#bl_face)">M</text>
      </g>

      {/* Sparkles */}
      <circle cx="22" cy="14" r="1.4" fill="#fff" opacity="0.9" />
      <circle cx="58" cy="18" r="1.1" fill="#fff" opacity="0.7" />
    </svg>
  );
};

window.BlockLogo = BlockLogo;