// 3D blocky Minecraft-style MINILANDS wordmark.
// Each letter is rendered as a chunky 3D extruded glyph using <text> stacked at depth offsets,
// then re-stroked + filled on top to get the gold front face with darker amber side faces.
// Also exports BlockCrown — the green grass-block icon that sits on top of the wordmark.

const Wordmark = ({ height = 60, withCrown = false }) => {
  // Aspect with crown: wider; without: 5.4:1
  const aspect = withCrown ? 5.6 : 5.4;
  const w = height * aspect;
  // The 3D depth is achieved by drawing the same text many times, each offset by (1,1) pixels,
  // in a darker amber. Then the final layer on top is the bright gold fill with a black outline.
  const DEPTH = 8; // px of extrusion
  const depthLayers = Array.from({ length: DEPTH }, (_, i) => i + 1);

  return (
    <svg
      width={w}
      height={height}
      viewBox={withCrown ? "0 0 560 130" : "0 0 540 110"}
      style={{ display: 'inline-block', verticalAlign: 'middle', overflow: 'visible' }}
      aria-label="Minilands"
    >
      <defs>
        {/* Bright gold→amber front face gradient */}
        <linearGradient id="goldFace" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#fff5b8" />
          <stop offset="35%" stopColor="#ffd340" />
          <stop offset="70%" stopColor="#f0a720" />
          <stop offset="100%" stopColor="#c87010" />
        </linearGradient>
        {/* Top sheen highlight on letters */}
        <linearGradient id="goldSheen" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#ffffff" stopOpacity="0.85" />
          <stop offset="35%" stopColor="#ffffff" stopOpacity="0.25" />
          <stop offset="60%" stopColor="#ffffff" stopOpacity="0" />
        </linearGradient>
      </defs>

      {/* CROWN — green grass block on top, optional */}
      {withCrown && (
        <g transform="translate(258, 0)">
          {/* Block outline */}
          <polygon points="22,30 22,8 44,0 66,8 66,30 44,38" fill="#000" />
          {/* Top grass face */}
          <polygon points="24,9 44,2 64,9 44,16" fill="#7cd23e" />
          <polygon points="24,9 44,2 64,9 44,16" fill="none" stroke="#000" strokeWidth="2" strokeLinejoin="round" />
          {/* Left dirt face */}
          <polygon points="24,9 24,29 44,36 44,16" fill="#8d5a2b" />
          {/* Grass strip on left */}
          <polygon points="24,9 44,16 44,21 24,14" fill="#5fb820" />
          {/* Right dirt face — slightly darker */}
          <polygon points="64,9 64,29 44,36 44,16" fill="#6b4220" />
          {/* Grass strip on right */}
          <polygon points="64,9 44,16 44,21 64,14" fill="#4ea417" />
          {/* All inner edges */}
          <polyline points="24,9 24,29 44,36 64,29 64,9" fill="none" stroke="#000" strokeWidth="2" strokeLinejoin="round" />
          <line x1="44" y1="16" x2="44" y2="36" stroke="#000" strokeWidth="2" />
          {/* Dirt pixel details */}
          <rect x="29" y="20" width="3" height="3" fill="#6b4220" />
          <rect x="34" y="26" width="3" height="3" fill="#6b4220" />
          <rect x="50" y="22" width="3" height="3" fill="#4a2d18" />
          <rect x="56" y="28" width="3" height="3" fill="#4a2d18" />
        </g>
      )}

      <g
        transform={withCrown ? "translate(0, 38)" : "translate(0, 4)"}
        fontFamily="'Luckiest Guy', cursive"
        fontSize="78"
        textAnchor="middle"
        letterSpacing="2"
      >
        {/* 3D extrusion: stack of darkening copies, offset down-right */}
        {depthLayers.slice().reverse().map((d) => {
          // Color darkens from #c87010 (deep amber) to #5a2e08 (almost black) as depth grows
          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={270 + d}
              y={66 + d}
              fill={color}
              stroke={color}
              strokeWidth="10"
              strokeLinejoin="round"
              paintOrder="stroke"
            >
              MINILANDS
            </text>
          );
        })}

        {/* Outermost black outline */}
        <text
          x="270"
          y="66"
          fill="#000"
          stroke="#000"
          strokeWidth="11"
          strokeLinejoin="round"
          paintOrder="stroke"
        >
          MINILANDS
        </text>

        {/* Bright gold front face */}
        <text x="270" y="66" fill="url(#goldFace)">MINILANDS</text>

        {/* Top sheen — clipped to upper third via clipPath */}
        <text
          x="270"
          y="66"
          fill="url(#goldSheen)"
          style={{ mixBlendMode: 'screen' }}
        >
          MINILANDS
        </text>
      </g>
    </svg>
  );
};

window.Wordmark = Wordmark;