// ─────────────────────────────────────────────────────────────
// East Wind Social Club — garment + motif library
// Ported & refactored from "The Line". Each ProductGraphic returns a
// bare <svg viewBox="0 0 720 880"> of the garment in its colorway, for
// use as product imagery across the store.
// ─────────────────────────────────────────────────────────────

// ─────────── Garment silhouettes ───────────

function Tee({ bodyColor, neckRib, seamOpacity = 0.3 }) {
  return (
    <g>
      <path d="M 192 196 L 80 236 L 32 480 Q 28 510 48 518 L 156 548 L 156 820 Q 156 848 184 848 L 536 848 Q 564 848 564 820 L 564 548 L 672 518 Q 692 510 688 480 L 640 236 L 528 196 L 440 188 Q 416 232 360 232 Q 304 232 280 188 Z" fill={bodyColor} stroke="#0F2A44" strokeWidth="1.4" />
      <path d="M 280 188 Q 304 232 360 232 Q 416 232 440 188 L 440 204 Q 416 248 360 248 Q 304 248 280 204 Z" fill={neckRib || bodyColor} stroke="#0F2A44" strokeWidth="1" />
      <path d="M 280 188 L 156 492" stroke="#0F2A44" strokeWidth="0.6" fill="none" opacity={seamOpacity} />
      <path d="M 440 188 L 564 492" stroke="#0F2A44" strokeWidth="0.6" fill="none" opacity={seamOpacity} />
    </g>
  );
}

function LongSleeve({ bodyColor, cuffColor }) {
  const cuff = cuffColor || bodyColor;
  return (
    <g>
      <path d="M 196 200 L 100 240 L 36 540 L 28 760 Q 28 778 50 782 L 156 790 L 156 820 Q 156 848 184 848 L 536 848 Q 564 848 564 820 L 564 790 L 670 782 Q 692 778 692 760 L 684 540 L 620 240 L 524 200 L 444 188 Q 416 232 360 232 Q 304 232 276 188 Z" fill={bodyColor} stroke="#0F2A44" strokeWidth="1.4" />
      <path d="M 276 188 Q 304 232 360 232 Q 416 232 444 188 L 444 204 Q 416 248 360 248 Q 304 248 276 204 Z" fill={cuff} />
      <rect x="32" y="766" width="124" height="20" fill={cuff} />
      <rect x="564" y="766" width="124" height="20" fill={cuff} />
    </g>
  );
}

function Crewneck({ bodyColor, ribColor }) {
  return (
    <g>
      <path d="M 172 180 L 100 204 L 44 496 Q 40 528 64 536 L 160 564 L 160 820 Q 160 850 190 850 L 530 850 Q 560 850 560 820 L 560 564 L 656 536 Q 680 528 676 496 L 620 204 L 548 180 L 448 160 Q 420 200 360 200 Q 300 200 272 160 Z" fill={bodyColor} stroke="#0F2A44" strokeWidth="1.2" />
      <path d="M 272 160 Q 300 204 360 204 Q 420 204 448 160 L 448 184 Q 420 224 360 224 Q 300 224 272 184 Z" fill={ribColor} />
      <path d="M 160 820 L 160 850 Q 160 856 168 856 L 552 856 Q 560 856 560 850 L 560 820 Z" fill={ribColor} />
      <path d="M 60 504 L 168 536 L 168 564 L 56 536 Z" fill={ribColor} />
      <path d="M 660 504 L 552 536 L 552 564 L 664 536 Z" fill={ribColor} />
    </g>
  );
}

// ─────────── Tiles & florals ───────────

function WindTile({ x = 0, y = 0, w = 40, h = 56, char = "東", color = "#B8323A", rotate = 0, tileFill = "#F2EAD3" }) {
  return (
    <g transform={`translate(${x} ${y}) rotate(${rotate})`}>
      <rect x={-w/2} y={-h/2} width={w} height={h} rx={w*0.1} fill={tileFill} stroke="#0F2A44" strokeWidth="1.2" />
      <text x="0" y={h*0.16} fontFamily="Noto Serif SC, serif" fontSize={w*0.78} fontWeight="700" fill={color} textAnchor="middle">{char}</text>
    </g>
  );
}

function FlowerTile({ x = 0, y = 0, w = 40, h = 56, rotate = 0, petal = "#B8323A" }) {
  return (
    <g transform={`translate(${x} ${y}) rotate(${rotate})`}>
      <rect x={-w/2} y={-h/2} width={w} height={h} rx={w*0.1} fill="#F2EAD3" stroke="#0F2A44" strokeWidth="1.2" />
      <line x1="0" y1={h*0.18} x2="0" y2={h*0.32} stroke="#7E9176" strokeWidth="1.4" />
      <ellipse cx={-w*0.18} cy={h*0.2} rx={w*0.14} ry={w*0.07} fill="#A8B89C" transform={`rotate(-30 ${-w*0.18} ${h*0.2})`} />
      <ellipse cx={w*0.18} cy={h*0.2} rx={w*0.14} ry={w*0.07} fill="#A8B89C" transform={`rotate(30 ${w*0.18} ${h*0.2})`} />
      <g transform={`translate(0 ${-h*0.08})`}>
        {[0, 72, 144, 216, 288].map((a) => (
          <ellipse key={a} cx="0" cy={-w*0.16} rx={w*0.11} ry={w*0.16} fill={petal} transform={`rotate(${a})`} />
        ))}
        <circle r={w*0.07} fill="#F2EAD3" />
      </g>
    </g>
  );
}

// Red seal (chop) carrying a character — the brand mark
function Seal({ x = 0, y = 0, size = 40, char = "東" }) {
  return (
    <g transform={`translate(${x} ${y})`}>
      <rect x={-size/2} y={-size/2} width={size} height={size} rx="5" fill="#B8323A" />
      <text x="0" y={size*0.24} fontFamily="Noto Serif SC, serif" fontSize={size*0.66} fontWeight="700" fill="#F2EAD3" textAnchor="middle">{char}</text>
    </g>
  );
}

// Soft ink-brush plum blossom
function PlumBloom({ x = 0, y = 0, s = 1, petal = "#F2D2D8", outline = "#2A3744" }) {
  const angs = [0, 72, 144, 216, 288];
  return (
    <g transform={`translate(${x} ${y}) scale(${s})`}>
      <g fill={petal} opacity="0.35">
        {angs.map(a => <circle key={a} cx="0" cy="-13" r="10.5" transform={`rotate(${a})`} />)}
      </g>
      <g fill={petal}>
        {angs.map(a => <circle key={a} cx="0" cy="-12" r="7.5" transform={`rotate(${a})`} />)}
      </g>
      <g fill="none" stroke={outline} strokeWidth="1" opacity="0.6" strokeDasharray="13 5">
        {angs.map(a => <circle key={a} cx="0" cy="-12" r="7.5" transform={`rotate(${a})`} />)}
      </g>
      <g stroke="#B8323A" strokeWidth="0.9" strokeLinecap="round">
        {[20, 92, 164, 236, 308].map(a => <line key={a} x1="0" y1="0" x2="0" y2="-9" transform={`rotate(${a})`} />)}
      </g>
      <circle r="2.6" fill="#B8323A" />
    </g>
  );
}

// Mahjong flower / season tile — numeral + plant illustration + name
function FlowerSuitTile({ x = 0, y = 0, w = 50, h = 66, rotate = 0, type, char, num, color = "#0F2A44" }) {
  const hw = w / 2, hh = h / 2;
  let motif = null;
  if (type === "plum") motif = (
    <g>
      <path d="M -11 7 Q 0 -1 11 7" fill="none" stroke="#6B5746" strokeWidth="1.3" strokeLinecap="round" />
      {[[-8,3],[0,-5],[8,3]].map(([cx,cy],i)=>(
        <g key={i} transform={`translate(${cx} ${cy})`}>
          {[0,72,144,216,288].map(a=>(<circle key={a} cx="0" cy="-3.2" r="2.2" fill="#B8323A" transform={`rotate(${a})`} />))}
          <circle r="1.3" fill="#F2EAD3" />
        </g>
      ))}
    </g>
  );
  else if (type === "orchid") motif = (
    <g stroke="#2F4A37" fill="none" strokeWidth="1.3" strokeLinecap="round">
      <path d="M 0 9 Q -13 -1 -16 -14" /><path d="M 0 9 Q -2 -6 2 -16" /><path d="M 0 9 Q 13 -1 16 -12" />
      <circle cx="0" cy="-2" r="2.4" fill="#B8323A" stroke="none" />
    </g>
  );
  else if (type === "chrys") motif = (
    <g>
      {[0,30,60,90,120,150,180,210,240,270,300,330].map(a=>(<ellipse key={a} cx="0" cy="-8" rx="1.8" ry="6" fill="#C9A66B" transform={`rotate(${a})`} />))}
      <circle r="3" fill="#A9852E" />
    </g>
  );
  else if (type === "bamboo") motif = (
    <g stroke="#2F4A37" strokeLinecap="round">
      <line x1="-5" y1="-15" x2="-5" y2="11" strokeWidth="2.4" /><line x1="5" y1="-13" x2="5" y2="11" strokeWidth="2.4" />
      <g strokeWidth="1.1"><line x1="-9" y1="-6" x2="-1" y2="-9" /><line x1="-9" y1="3" x2="-1" y2="0" /><line x1="1" y1="-3" x2="9" y2="-6" /><line x1="1" y1="6" x2="9" y2="3" /></g>
    </g>
  );
  else if (type === "spring") motif = (
    <g stroke="#2F4A37" fill="none" strokeWidth="1.4" strokeLinecap="round"><path d="M0 11 Q 0 -2 0 -15" /><path d="M0 -5 Q -9 -9 -13 -2" /><path d="M0 1 Q 9 -4 13 3" /></g>
  );
  else if (type === "summer") motif = (
    <g><circle r="6" fill="none" stroke="#B8323A" strokeWidth="1.4" /><g stroke="#B8323A" strokeWidth="1.2" strokeLinecap="round">{[0,45,90,135,180,225,270,315].map(a=>(<line key={a} x1="0" y1="-9" x2="0" y2="-12.5" transform={`rotate(${a})`} />))}</g></g>
  );
  else if (type === "autumn") motif = (
    <g><path d="M0 -13 C 9 -8 9 5 0 11 C -9 5 -9 -8 0 -13 Z" fill="#C2603A" /><line x1="0" y1="11" x2="0" y2="-11" stroke="#7A3B22" strokeWidth="0.8" /></g>
  );
  return (
    <g transform={`translate(${x} ${y}) rotate(${rotate})`}>
      <rect x={-hw} y={-hh} width={w} height={h} rx={w*0.1} fill="#F2EAD3" stroke="#0F2A44" strokeWidth="1.3" />
      <rect x={-hw+4} y={-hh+4} width={w-8} height={h-8} rx={w*0.07} fill="none" stroke="#0F2A44" strokeWidth="0.5" opacity="0.3" />
      <text x={-hw+9} y={-hh+16} fontFamily="Noto Serif SC, serif" fontSize="11" fontWeight="700" fill={color} textAnchor="middle">{num}</text>
      <g transform="translate(0,-4)">{motif}</g>
      <text x="0" y={hh-8} fontFamily="Noto Serif SC, serif" fontSize="16" fontWeight="700" fill={color} textAnchor="middle">{char}</text>
    </g>
  );
}

// ═══════════════ PRODUCT GRAPHICS (bare svg, garment in colorway) ═══════════════

function GCrest() {
  return (
    <svg viewBox="0 0 720 880" preserveAspectRatio="xMidYMid meet" className="garment-svg">
      <Crewneck bodyColor="#0F2A44" ribColor="#091C30" />
      <g transform="translate(360, 470)">
        <circle r="176" fill="none" stroke="#F2EAD3" strokeWidth="2" />
        <circle r="167" fill="none" stroke="#F2EAD3" strokeWidth="0.8" />
        <defs>
          <path id="crest-top" d="M -130 0 A 130 130 0 0 1 130 0" fill="none" />
          <path id="crest-bot" d="M 150 0 A 150 150 0 0 1 -150 0" fill="none" />
        </defs>
        <text fontFamily="Bodoni Moda, serif" fontSize="27" letterSpacing="10" fill="#F2EAD3">
          <textPath href="#crest-top" startOffset="50%" textAnchor="middle">EAST WIND</textPath>
        </text>
        <text fontFamily="Bodoni Moda, serif" fontSize="21" letterSpacing="12" fill="#F2EAD3">
          <textPath href="#crest-bot" startOffset="50%" textAnchor="middle">SOCIAL · CLUB</textPath>
        </text>
        <g fill="#B8323A"><circle cx="-150" cy="0" r="4" /><circle cx="150" cy="0" r="4" /></g>
        <WindTile x="0" y="0" w="92" h="128" char="東" color="#B8323A" />
        <FlowerTile x="-94" y="0" w="30" h="42" rotate={-10} petal="#B8323A" />
        <FlowerTile x="94" y="0" w="30" h="42" rotate={10} petal="#B8323A" />
        <g transform="translate(0, 94)">
          <rect x="-60" y="-15" width="120" height="30" rx="2" fill="#B8323A" />
          <path d="M -60 -15 L -76 0 L -60 15 Z" fill="#952028" />
          <path d="M 60 -15 L 76 0 L 60 15 Z" fill="#952028" />
          <text x="0" y="6" fontFamily="Bodoni Moda, serif" fontSize="15" letterSpacing="6" fill="#F2EAD3" textAnchor="middle">EST. 2026</text>
        </g>
      </g>
    </svg>
  );
}

function GWindRose() {
  const winds = [
    { char: "北", angle: 0 }, { char: "東", angle: 90, east: true },
    { char: "南", angle: 180 }, { char: "西", angle: 270 },
  ];
  return (
    <svg viewBox="0 0 720 880" preserveAspectRatio="xMidYMid meet" className="garment-svg">
      <Tee bodyColor="#B6C7CC" neckRib="#A6B7BC" />
      <g transform="translate(360, 450)">
        {[0, 90, 180, 270].map(a => (
          <path key={`l${a}`} d="M 0 0 L 17 -17 L 0 -156 L -17 -17 Z" fill="#0F2A44" opacity="0.28" transform={`rotate(${a})`} />
        ))}
        {[45, 135, 225, 315].map(a => (
          <path key={`s${a}`} d="M 0 0 L 11 -11 L 0 -96 L -11 -11 Z" fill="#0F2A44" opacity="0.13" transform={`rotate(${a})`} />
        ))}
        {winds.map((w, i) => {
          const rad = (w.angle - 90) * Math.PI / 180;
          return (<WindTile key={i} x={Math.cos(rad)*130} y={Math.sin(rad)*130} w={46} h={64} char={w.char} color={w.east ? "#B8323A" : "#0F2A44"} />);
        })}
        <circle r="50" fill="#F2EAD3" stroke="#0F2A44" strokeWidth="1.6" />
        <circle r="42" fill="none" stroke="#0F2A44" strokeWidth="0.6" />
        {[0, 45, 90, 135, 180, 225, 270, 315].map(a => (
          <path key={a} d="M 0 0 L 6 -6 L 0 -38 L -6 -6 Z" fill={a === 90 ? "#B8323A" : "#0F2A44"} opacity={a % 90 === 0 ? 0.92 : 0.4} transform={`rotate(${a})`} />
        ))}
        <circle r="5" fill="#B8323A" />
      </g>
      <text x="360" y="662" fontFamily="Pinyon Script, cursive" fontSize="76" fill="#0F2A44" textAnchor="middle">East Wind</text>
      <line x1="288" y1="686" x2="432" y2="686" stroke="#0F2A44" strokeWidth="0.6" />
      <text x="360" y="714" fontFamily="Bodoni Moda, serif" fontSize="14" letterSpacing="9" fill="#0F2A44" textAnchor="middle">SOCIAL CLUB</text>
    </svg>
  );
}

function GWinningHand() {
  const tiles = [
    { x: -186, y: 22, rot: -14, type: "flower", petal: "#C26654" },
    { x: -122, y: 8,  rot: -9, char: "東", color: "#B8323A" },
    { x: -60,  y: 0,  rot: -4, char: "南", color: "#0F2A44" },
    { x: 0,    y: -4, rot: 0,  char: "中", color: "#B8323A" },
    { x: 60,   y: 0,  rot: 4,  char: "北", color: "#0F2A44" },
    { x: 122,  y: 8,  rot: 9,  char: "發", color: "#2F4A37" },
    { x: 186,  y: 22, rot: 14, type: "flower", petal: "#C26654" },
  ];
  return (
    <svg viewBox="0 0 720 880" preserveAspectRatio="xMidYMid meet" className="garment-svg">
      <Tee bodyColor="#C9B8D6" neckRib="#B6A4C8" />
      <g transform="translate(360, 452)">
        <text x="0" y="-104" fontFamily="Bodoni Moda, serif" fontStyle="italic" fontWeight="500" fontSize="80" fill="#0F2A44" textAnchor="middle" letterSpacing="-1">East Wind</text>
        {tiles.map((t, i) => (
          t.type === "flower"
            ? <FlowerTile key={i} x={t.x} y={t.y} w={54} h={76} rotate={t.rot} petal={t.petal} />
            : <WindTile key={i} x={t.x} y={t.y} w={54} h={76} rotate={t.rot} char={t.char} color={t.color} />
        ))}
        <line x1="-150" y1="128" x2="150" y2="128" stroke="#0F2A44" strokeWidth="1" />
        <text x="0" y="162" fontFamily="Bodoni Moda, serif" fontSize="26" letterSpacing="14" fill="#0F2A44" textAnchor="middle" fontWeight="500">SOCIAL CLUB</text>
      </g>
    </svg>
  );
}

function GPlum() {
  return (
    <svg viewBox="0 0 720 880" preserveAspectRatio="xMidYMid meet" className="garment-svg">
      <Tee bodyColor="#F2EAD3" />
      <g fill="none" strokeLinecap="round">
        <path d="M 188 600 C 280 560 320 480 470 392 C 520 362 558 344 600 320" stroke="#7C6A57" strokeWidth="9" opacity="0.25" />
        <path d="M 188 600 C 280 560 320 480 470 392 C 520 362 558 344 600 320" stroke="#5E5040" strokeWidth="4" />
        <path d="M 322 470 C 352 448 380 446 404 456" stroke="#5E5040" strokeWidth="2.4" opacity="0.85" />
        <path d="M 470 392 C 486 372 506 366 528 368" stroke="#5E5040" strokeWidth="2.2" opacity="0.8" />
      </g>
      <PlumBloom x={250} y={520} s={1.5} />
      <PlumBloom x={360} y={452} s={1.15} />
      <PlumBloom x={404} y={452} s={0.9} petal="#E8B8C2" />
      <PlumBloom x={486} y={372} s={1.35} />
      <PlumBloom x={560} y={342} s={1.0} petal="#E8B8C2" />
      <g transform="translate(312, 486)"><circle r="9" fill="#F2C2CE" opacity="0.5" /><circle r="9" fill="none" stroke="#2A3744" strokeWidth="1" opacity="0.6" /></g>
      <g transform="translate(600, 320)"><circle r="7" fill="#F2C2CE" opacity="0.5" /><circle r="7" fill="none" stroke="#2A3744" strokeWidth="1" opacity="0.6" /></g>
      <Seal x={250} y={600} size={48} char="東" />
      <text x="360" y="724" fontFamily="Bodoni Moda, serif" fontStyle="italic" fontSize="30" fill="#0F2A44" textAnchor="middle">Plum Blossom</text>
      <text x="360" y="752" fontFamily="Bodoni Moda, serif" fontSize="12" letterSpacing="6" fill="#A98548" textAnchor="middle">EAST WIND SOCIAL CLUB</text>
    </svg>
  );
}

function GBoat() {
  return (
    <svg viewBox="0 0 720 880" preserveAspectRatio="xMidYMid meet" className="garment-svg">
      <LongSleeve bodyColor="#B6BDD7" cuffColor="#9EA5C3" />
      <g transform="translate(360, 470)">
        <line x1="-140" y1="0" x2="140" y2="0" stroke="#0F2A44" strokeWidth="0.6" opacity="0.4" />
        <circle cx="100" cy="-40" r="22" fill="none" stroke="#0F2A44" strokeWidth="1" />
        <g transform="translate(0, -28)">
          <rect x="-14" y="-8" width="28" height="40" rx="3" fill="#F2EAD3" stroke="#0F2A44" strokeWidth="1.2" />
          <text x="0" y="22" fontFamily="Noto Serif SC, serif" fontSize="22" fontWeight="700" fill="#B8323A" textAnchor="middle">中</text>
        </g>
        <path d="M -90 20 L 90 20 L 84 44 Q 78 50 70 50 L -70 50 Q -78 50 -84 44 Z" fill="#0F2A44" />
        <rect x="-58" y="4" width="116" height="18" fill="#0F2A44" />
        <g fill="#F2EAD3">{[-48, -32, -16, 2, 18, 34].map(x => <rect key={x} x={x} y="9" width="8" height="8" />)}</g>
        <path d="M -110 58 Q -88 60 -66 58 T -22 58 T 22 58 T 66 58 T 110 58" fill="none" stroke="#0F2A44" strokeWidth="0.8" />
        <path d="M -110 66 Q -88 68 -66 66 T -22 66 T 22 66 T 66 66 T 110 66" fill="none" stroke="#0F2A44" strokeWidth="0.6" opacity="0.7" />
        <path d="M -110 74 Q -88 76 -66 74 T -22 74 T 22 74 T 66 74 T 110 74" fill="none" stroke="#0F2A44" strokeWidth="0.5" opacity="0.5" />
      </g>
      <text x="360" y="590" fontFamily="Bodoni Moda, serif" fontStyle="italic" fontSize="24" fill="#0F2A44" textAnchor="middle">catch the early boat</text>
      <line x1="278" y1="610" x2="442" y2="610" stroke="#0F2A44" strokeWidth="0.5" />
      <text x="360" y="636" fontFamily="Bodoni Moda, serif" fontSize="12" letterSpacing="7" fill="#A98548" textAnchor="middle">EAST WIND SOCIAL CLUB</text>
    </svg>
  );
}

function GBouquet() {
  const stems = [
    { angle: -55, len: 128, tilt: -28, type: "autumn", char: "秋", num: "三", color: "#B8323A" },
    { angle: -40, len: 150, tilt: -19, type: "bamboo", char: "竹", num: "四", color: "#2F4A37" },
    { angle: -22, len: 166, tilt: -9,  type: "orchid", char: "蘭", num: "二", color: "#2F4A37" },
    { angle: -5,  len: 174, tilt: 0,   type: "plum",   char: "梅", num: "一", color: "#B8323A" },
    { angle: 12,  len: 166, tilt: 9,   type: "chrys",  char: "菊", num: "三", color: "#A9852E" },
    { angle: 30,  len: 150, tilt: 19,  type: "spring", char: "春", num: "一", color: "#2F4A37" },
    { angle: 48,  len: 128, tilt: 28,  type: "summer", char: "夏", num: "二", color: "#B8323A" },
  ];
  return (
    <svg viewBox="0 0 720 880" preserveAspectRatio="xMidYMid meet" className="garment-svg">
      <Tee bodyColor="#A8B89C" neckRib="#92A286" />
      <g transform="translate(360, 620)">
        {stems.map((s, i) => {
          const rad = s.angle * Math.PI / 180;
          const tx = Math.sin(rad) * s.len, ty = -Math.cos(rad) * s.len;
          return (
            <g key={i}>
              <line x1="0" y1="0" x2={tx*0.5} y2={ty*0.5} stroke="#5F7155" strokeWidth="2.4" strokeLinecap="round" />
              <line x1={tx*0.5} y1={ty*0.5} x2={tx} y2={ty} stroke="#5F7155" strokeWidth="2" strokeLinecap="round" />
            </g>
          );
        })}
        {stems.map((s, i) => {
          const rad = s.angle * Math.PI / 180;
          const tx = Math.sin(rad) * s.len, ty = -Math.cos(rad) * s.len;
          return (
            <g key={`t-${i}`} transform={`translate(${tx} ${ty})`}>
              <ellipse cx="-14" cy="38" rx="9" ry="4.5" fill="#5F7155" transform="rotate(-34 -14 38)" />
              <ellipse cx="14" cy="38" rx="9" ry="4.5" fill="#5F7155" transform="rotate(34 14 38)" />
              <FlowerSuitTile x={0} y={0} w={50} h={66} rotate={s.tilt} type={s.type} char={s.char} num={s.num} color={s.color} />
            </g>
          );
        })}
        <g transform="translate(0, 16)">
          <rect x="-30" y="-8" width="60" height="20" rx="3" fill="#B8323A" />
          <rect x="-30" y="-8" width="60" height="4" fill="#952028" />
          <rect x="-30" y="8" width="60" height="4" fill="#952028" />
          <path d="M -30 12 L -50 36 L -30 32 Z" fill="#B8323A" />
          <path d="M 30 12 L 50 36 L 30 32 Z" fill="#B8323A" />
        </g>
      </g>
      <Seal x={476} y={672} size={46} char="東" />
      <text x="360" y="800" fontFamily="Bodoni Moda, serif" fontStyle="italic" fontSize="20" fill="#0F2A44" textAnchor="middle">— a hand of flowers —</text>
      <text x="360" y="826" fontFamily="Bodoni Moda, serif" fontSize="11" letterSpacing="6" fill="#0F2A44" textAnchor="middle">EAST WIND SOCIAL CLUB</text>
    </svg>
  );
}

function GSunset() {
  const tiles = [];
  for (let i = -4; i <= 4; i++) tiles.push({ angle: i * 18, char: ["東","南","西","北","中","發","白","花","春"][i+4] });
  return (
    <svg viewBox="0 0 720 880" preserveAspectRatio="xMidYMid meet" className="garment-svg">
      <LongSleeve bodyColor="#F1B89E" cuffColor="#D88770" />
      <g transform="translate(360, 580)">
        {tiles.map((t, i) => {
          const r = 120, rad = (t.angle - 90) * Math.PI / 180;
          const tx = Math.cos(rad) * r, ty = Math.sin(rad) * r;
          const isRed = t.char === "中" || t.char === "東";
          const isGreen = t.char === "發" || t.char === "春";
          const charColor = isRed ? "#B8323A" : isGreen ? "#2F4A37" : "#0F2A44";
          return (
            <g key={i} transform={`translate(${tx} ${ty}) rotate(${t.angle})`}>
              <rect x="-15" y="-44" width="30" height="44" rx="3" fill="#F2EAD3" stroke="#0F2A44" strokeWidth="1" />
              <text x="0" y="-16" fontFamily="Noto Serif SC, serif" fontSize="22" fontWeight="700" fill={charColor} textAnchor="middle">{t.char}</text>
            </g>
          );
        })}
        <path d="M -100 0 A 100 100 0 0 1 100 0 Z" fill="#C26654" opacity="0.45" />
        <line x1="-180" y1="6" x2="180" y2="6" stroke="#0F2A44" strokeWidth="1.4" />
        <g fill="none" stroke="#0F2A44" strokeWidth="0.9" strokeLinecap="round">
          <path d="M -170 22 Q -140 18 -110 22 T -50 22 T 10 22 T 70 22 T 130 22 T 170 22" />
          <path d="M -170 38 Q -140 34 -110 38 T -50 38 T 10 38 T 70 38 T 130 38 T 170 38" opacity="0.7" />
          <path d="M -170 54 Q -140 50 -110 54 T -50 54 T 10 54 T 70 54 T 130 54 T 170 54" opacity="0.5" />
        </g>
      </g>
      <text x="360" y="720" fontFamily="Pinyon Script, cursive" fontSize="68" fill="#0F2A44" textAnchor="middle">Sunset Club</text>
      <text x="360" y="754" fontFamily="Bodoni Moda, serif" fontSize="11" letterSpacing="6" fill="#0F2A44" textAnchor="middle">EAST WIND SOCIAL CLUB · EST. 2026</text>
    </svg>
  );
}

const GARMENT_GRAPHICS = {
  crest: GCrest, "wind-rose": GWindRose, "winning-hand": GWinningHand,
  plum: GPlum, boat: GBoat, bouquet: GBouquet, sunset: GSunset,
};

Object.assign(window, {
  Tee, LongSleeve, Crewneck, WindTile, FlowerTile, Seal, PlumBloom, FlowerSuitTile,
  GCrest, GWindRose, GWinningHand, GPlum, GBoat, GBouquet, GSunset, GARMENT_GRAPHICS,
});