// Decorative botanical elements for Yong Hao menu
// All drawings are ORIGINAL — inspired by ink-wash tradition but not copying any specific artwork.
// Deliberately minimal, subtle, warm — no aggressive "Asian restaurant" tropes.

window.YongHaoOrnaments = (function () {
  // --- Seal / 印章 with restaurant name 永豪阁 ---
  // A simple red square with the three characters. No fancy calligraphy.
  const Seal = ({ size = 64, color = "#8B2E2E", chars = "永豪阁" }) => (
    <svg viewBox="0 0 64 64" width={size} height={size} style={{ display: "block" }} aria-hidden="true">
      <rect x="2" y="2" width="60" height="60" fill={color} rx="2" />
      <rect x="4" y="4" width="56" height="56" fill="none" stroke="#FDFAF4" strokeWidth="0.8" rx="1" />
      <text
        x="32"
        y="26"
        textAnchor="middle"
        fill="#FDFAF4"
        fontFamily="'Noto Serif SC', serif"
        fontWeight="600"
        fontSize="16"
      >
        {chars[0]}
      </text>
      <text
        x="32"
        y="44"
        textAnchor="middle"
        fill="#FDFAF4"
        fontFamily="'Noto Serif SC', serif"
        fontWeight="600"
        fontSize="16"
      >
        {chars[1]}
      </text>
      <text
        x="32"
        y="60"
        textAnchor="middle"
        fill="#FDFAF4"
        fontFamily="'Noto Serif SC', serif"
        fontWeight="600"
        fontSize="14"
      >
        {chars[2]}
      </text>
    </svg>
  );

  // --- Horizontal divider with center diamond ---
  const Divider = ({ color = "#B8943F", width = "100%" }) => (
    <svg viewBox="0 0 200 12" preserveAspectRatio="none" width={width} height="12" style={{ display: "block" }} aria-hidden="true">
      <line x1="0" y1="6" x2="88" y2="6" stroke={color} strokeWidth="0.4" />
      <line x1="112" y1="6" x2="200" y2="6" stroke={color} strokeWidth="0.4" />
      <g transform="translate(100 6) rotate(45)">
        <rect x="-3" y="-3" width="6" height="6" fill="none" stroke={color} strokeWidth="0.5" />
        <rect x="-1" y="-1" width="2" height="2" fill={color} />
      </g>
    </svg>
  );

  // --- Bamboo (left margin). Simple, upright, three stalks ---
  const BambooLeft = ({ color = "#B8943F", opacity = 0.55 }) => (
    <svg viewBox="0 0 120 900" preserveAspectRatio="xMinYMin meet" style={{ width: "100%", height: "100%", display: "block" }} aria-hidden="true">
      <g stroke={color} fill="none" opacity={opacity} strokeLinecap="round" strokeLinejoin="round">
        {/* Stalk 1 */}
        <g strokeWidth="1.4">
          <path d="M 40 890 C 38 720, 44 560, 38 380 C 34 240, 40 120, 36 40" />
          {/* Nodes */}
          {[820, 720, 620, 520, 420, 320, 220, 120].map((y, i) => (
            <line key={i} x1="30" y1={y} x2="46" y2={y} strokeWidth="1.8" />
          ))}
          {/* Leaves */}
          <path d="M 40 760 Q 62 748, 78 734 Q 64 752, 40 764" fill={color} fillOpacity="0.18" />
          <path d="M 40 760 Q 22 748, 8 740 Q 22 756, 40 764" fill={color} fillOpacity="0.18" />
          <path d="M 40 560 Q 64 548, 82 528 Q 66 552, 40 562" fill={color} fillOpacity="0.18" />
          <path d="M 40 360 Q 22 346, 4 334 Q 22 354, 40 362" fill={color} fillOpacity="0.18" />
          <path d="M 40 220 Q 66 206, 84 188 Q 66 210, 40 222" fill={color} fillOpacity="0.18" />
          <path d="M 40 140 Q 18 128, 2 120 Q 18 136, 40 142" fill={color} fillOpacity="0.18" />
        </g>
        {/* Stalk 2 — thinner, behind */}
        <g strokeWidth="0.9" opacity="0.7">
          <path d="M 78 890 C 82 740, 74 580, 80 420 C 84 280, 76 160, 82 60" />
          {[800, 700, 600, 500, 400, 300, 200, 100].map((y, i) => (
            <line key={"b-" + i} x1="72" y1={y} x2="86" y2={y} strokeWidth="1.2" />
          ))}
          <path d="M 78 640 Q 98 628, 112 612 Q 96 632, 78 642" fill={color} fillOpacity="0.12" />
          <path d="M 78 440 Q 96 426, 108 412 Q 94 432, 78 442" fill={color} fillOpacity="0.12" />
          <path d="M 78 260 Q 98 248, 114 232 Q 98 252, 78 262" fill={color} fillOpacity="0.12" />
        </g>
        {/* Small bird silhouette perched */}
        <g transform="translate(82 458)" fill={color} fillOpacity="0.45" stroke="none">
          <path d="M 0 0 Q 4 -5, 10 -4 Q 16 -3, 18 -6 Q 17 -2, 14 0 Q 18 1, 22 0 Q 16 4, 8 4 Q 3 4, 0 0 Z" />
          <circle cx="3" cy="-2" r="0.6" fill={color} fillOpacity="0.9" />
          <line x1="6" y1="4" x2="5" y2="9" strokeWidth="0.6" stroke={color} strokeOpacity="0.5" />
          <line x1="10" y1="4" x2="10" y2="9" strokeWidth="0.6" stroke={color} strokeOpacity="0.5" />
        </g>
      </g>
    </svg>
  );

  // --- Plum blossom branch (right margin). Drifting diagonal branch with blossoms ---
  const BlossomRight = ({ accent = "#8B2E2E", line = "#B8943F", opacity = 0.65 }) => (
    <svg viewBox="0 0 140 900" preserveAspectRatio="xMaxYMin meet" style={{ width: "100%", height: "100%", display: "block" }} aria-hidden="true">
      <g opacity={opacity}>
        {/* Main branch curving down from top-right */}
        <path
          d="M 138 20 C 120 80, 100 140, 88 220 C 78 300, 92 380, 78 480 C 66 580, 78 680, 62 780 C 54 840, 48 880, 44 896"
          stroke={line}
          strokeWidth="1.3"
          fill="none"
          strokeLinecap="round"
        />
        {/* Sub-branches */}
        <path d="M 100 170 Q 118 180, 128 200" stroke={line} strokeWidth="0.8" fill="none" strokeLinecap="round" />
        <path d="M 84 320 Q 66 332, 52 352" stroke={line} strokeWidth="0.8" fill="none" strokeLinecap="round" />
        <path d="M 82 460 Q 104 472, 120 498" stroke={line} strokeWidth="0.8" fill="none" strokeLinecap="round" />
        <path d="M 68 620 Q 50 634, 36 660" stroke={line} strokeWidth="0.8" fill="none" strokeLinecap="round" />
        <path d="M 60 780 Q 80 788, 94 810" stroke={line} strokeWidth="0.8" fill="none" strokeLinecap="round" />

        {/* Blossoms — 5-petal simple circles cluster */}
        {[
          { x: 128, y: 202, r: 3.5 },
          { x: 116, y: 196, r: 2.8 },
          { x: 52, y: 352, r: 3.2 },
          { x: 40, y: 348, r: 2.5 },
          { x: 120, y: 500, r: 3.6 },
          { x: 110, y: 488, r: 2.6 },
          { x: 128, y: 512, r: 2.2 },
          { x: 36, y: 662, r: 3.2 },
          { x: 26, y: 654, r: 2.4 },
          { x: 94, y: 812, r: 3.4 },
          { x: 104, y: 820, r: 2.2 },
        ].map((b, i) => (
          <g key={i}>
            {/* 5 petals */}
            {[0, 72, 144, 216, 288].map((deg) => (
              <circle
                key={deg}
                cx={b.x + Math.cos((deg * Math.PI) / 180) * b.r * 0.7}
                cy={b.y + Math.sin((deg * Math.PI) / 180) * b.r * 0.7}
                r={b.r * 0.55}
                fill={accent}
                fillOpacity="0.35"
                stroke={accent}
                strokeWidth="0.3"
                strokeOpacity="0.7"
              />
            ))}
            <circle cx={b.x} cy={b.y} r={b.r * 0.35} fill={line} fillOpacity="0.8" />
          </g>
        ))}

        {/* A small flying bird */}
        <g transform="translate(58 112)" stroke={line} strokeWidth="0.9" fill="none" strokeLinecap="round">
          <path d="M 0 0 Q 6 -8, 12 0 Q 18 -8, 24 0" />
        </g>
        <g transform="translate(22 552)" stroke={line} strokeWidth="0.7" fill="none" strokeLinecap="round" opacity="0.7">
          <path d="M 0 0 Q 4 -5, 8 0 Q 12 -5, 16 0" />
        </g>
      </g>
    </svg>
  );

  // --- Orchid sprig (alternative ornament) ---
  const OrchidLeft = ({ color = "#B8943F", opacity = 0.55 }) => (
    <svg viewBox="0 0 120 900" preserveAspectRatio="xMinYMin meet" style={{ width: "100%", height: "100%", display: "block" }} aria-hidden="true">
      <g stroke={color} fill="none" strokeWidth="0.9" opacity={opacity} strokeLinecap="round">
        {/* Long leaves arching */}
        <path d="M 50 890 C 44 740, 58 600, 40 460 C 26 340, 50 220, 32 80" />
        <path d="M 50 890 C 58 760, 40 620, 62 500 C 80 380, 56 240, 74 120" />
        <path d="M 50 890 C 50 780, 32 660, 52 540 C 72 420, 46 280, 58 160" />
        <path d="M 50 890 C 42 820, 62 720, 36 620" />
        {/* Flowers sparse */}
        {[
          { x: 64, y: 280 },
          { x: 38, y: 480 },
          { x: 70, y: 680 },
        ].map((f, i) => (
          <g key={i} transform={`translate(${f.x} ${f.y})`}>
            <ellipse cx="0" cy="0" rx="4" ry="2" fill={color} fillOpacity="0.25" stroke="none" />
            <ellipse cx="-3" cy="-2" rx="2.5" ry="1.2" transform="rotate(-30)" fill={color} fillOpacity="0.25" stroke="none" />
            <ellipse cx="3" cy="-2" rx="2.5" ry="1.2" transform="rotate(30)" fill={color} fillOpacity="0.25" stroke="none" />
            <circle cx="0" cy="0" r="0.8" fill={color} fillOpacity="0.7" stroke="none" />
          </g>
        ))}
      </g>
    </svg>
  );

  // --- Reed / grass (alternative right ornament) ---
  const ReedRight = ({ color = "#B8943F", opacity = 0.55 }) => (
    <svg viewBox="0 0 140 900" preserveAspectRatio="xMaxYMin meet" style={{ width: "100%", height: "100%", display: "block" }} aria-hidden="true">
      <g stroke={color} fill="none" strokeWidth="0.9" opacity={opacity} strokeLinecap="round">
        <path d="M 130 890 C 120 740, 134 600, 118 460 C 102 320, 128 180, 110 40" />
        <path d="M 110 890 C 100 760, 118 620, 98 480 C 80 340, 110 200, 92 60" />
        <path d="M 88 890 C 80 780, 96 660, 76 540 C 58 420, 88 280, 70 140" />
        {/* Seed heads */}
        {[
          { x: 110, y: 40, len: 22 },
          { x: 92, y: 60, len: 18 },
          { x: 70, y: 140, len: 20 },
        ].map((s, i) => (
          <g key={i} transform={`translate(${s.x} ${s.y})`}>
            {Array.from({ length: 8 }).map((_, j) => (
              <line key={j} x1="0" y1={-j * 2.2} x2={j % 2 === 0 ? 4 : -4} y2={-j * 2.2 - 1} strokeWidth="0.6" />
            ))}
          </g>
        ))}
        {/* Tiny bird in flight */}
        <g transform="translate(40 260)" strokeWidth="0.8">
          <path d="M 0 0 Q 5 -6, 10 0 Q 15 -6, 20 0" />
        </g>
      </g>
    </svg>
  );

  // --- Corner ornament for cover ---
  const CornerFrame = ({ color = "#B8943F", size = 80 }) => (
    <svg viewBox="0 0 80 80" width={size} height={size} style={{ display: "block" }} aria-hidden="true">
      <g stroke={color} fill="none" strokeWidth="0.7">
        <path d="M 0 40 L 0 0 L 40 0" />
        <path d="M 6 40 L 6 6 L 40 6" strokeWidth="0.4" />
        <circle cx="6" cy="6" r="1.4" fill={color} />
      </g>
    </svg>
  );

  return {
    Seal,
    Divider,
    BambooLeft,
    BlossomRight,
    OrchidLeft,
    ReedRight,
    CornerFrame,
  };
})();

Object.assign(window, {
  YongHaoSeal: window.YongHaoOrnaments.Seal,
  YongHaoDivider: window.YongHaoOrnaments.Divider,
  YongHaoBamboo: window.YongHaoOrnaments.BambooLeft,
  YongHaoBlossom: window.YongHaoOrnaments.BlossomRight,
  YongHaoOrchid: window.YongHaoOrnaments.OrchidLeft,
  YongHaoReed: window.YongHaoOrnaments.ReedRight,
  YongHaoCorner: window.YongHaoOrnaments.CornerFrame,
});
