// Ornaments.jsx — rococo decorative vocabulary: gilt frames, filigree,
// dividers, ribbons. These are ornamental vector flourishes, drawn in gold.
(function () {
  // ── A centered, symmetric scroll divider ────────────────────────────
  function Flourish({ width = 320, color = "var(--gold)", style }) {
    return (
      <svg viewBox="0 0 320 40" width={width} height={(40 / 320) * width}
        fill="none" stroke={color} strokeWidth="1.4" style={style} aria-hidden="true">
        <path d="M160 20 C 150 8, 140 8, 134 16 C 128 24, 138 30, 144 24 C 149 19, 142 13, 138 18" />
        <path d="M160 20 C 170 8, 180 8, 186 16 C 192 24, 182 30, 176 24 C 171 19, 178 13, 182 18" />
        <path d="M134 20 C 100 20, 70 14, 30 20" />
        <path d="M186 20 C 220 20, 250 14, 290 20" />
        <path d="M30 20 C 22 16, 14 18, 8 20 C 14 22, 22 24, 30 20 Z" fill={color} stroke="none" />
        <path d="M290 20 C 298 16, 306 18, 312 20 C 306 22, 298 24, 290 20 Z" fill={color} stroke="none" />
        <circle cx="160" cy="20" r="2.4" fill={color} stroke="none" />
        <circle cx="108" cy="17.5" r="1.5" fill={color} stroke="none" />
        <circle cx="212" cy="17.5" r="1.5" fill={color} stroke="none" />
      </svg>
    );
  }

  // ── A single corner scroll, rotated into each frame corner ──────────
  function CornerScroll({ color = "var(--gold-deep)" }) {
    return (
      <svg viewBox="0 0 48 48" width="100%" height="100%" fill="none"
        stroke={color} strokeWidth="1.5" aria-hidden="true">
        <path d="M6 6 C 6 22, 14 30, 30 30 C 22 30, 16 24, 16 16 C 16 11, 20 9, 22 13 C 23.5 16, 20 18, 18 16" />
        <path d="M6 6 C 22 6, 30 14, 30 30" opacity="0.55" />
        <circle cx="6" cy="6" r="2.2" fill={color} stroke="none" />
        <path d="M10 6 C 18 6, 22 4, 26 7 C 22 8, 18 8, 14 8" fill={color} stroke="none" opacity="0.7" />
        <path d="M6 10 C 6 18, 4 22, 7 26 C 8 22, 8 18, 8 14" fill={color} stroke="none" opacity="0.7" />
      </svg>
    );
  }

  // ── Corner rosette block (paneled-corner look) ─────────────────────
  function CornerRosette({ color = "var(--gold-deep)" }) {
    return (
      <div style={{
        width: "100%", height: "100%", borderRadius: 3,
        background: "linear-gradient(135deg, var(--gold-lite), var(--gold) 45%, var(--gold-deep))",
        boxShadow: "0 1px 2px rgba(120,90,40,.5), inset 0 0 0 1px rgba(120,90,40,.45)",
        display: "flex", alignItems: "center", justifyContent: "center",
      }}>
        <svg viewBox="0 0 16 16" width="68%" height="68%" fill="none" aria-hidden="true">
          {[0, 45, 90, 135, 180, 225, 270, 315].map((a) => (
            <ellipse key={a} cx="8" cy="3.6" rx="1.05" ry="2.2" fill={color} opacity="0.8"
              transform={`rotate(${a} 8 8)`} />
          ))}
          <circle cx="8" cy="8" r="2.1" fill={color} />
        </svg>
      </div>
    );
  }

  // ── Top-center crest: a palmette / shell fan ───────────────────────
  function Crest({ color = "var(--gold-deep)" }) {
    return (
      <svg viewBox="0 0 64 34" width="100%" height="100%" fill="none"
        stroke={color} strokeWidth="1.3" aria-hidden="true"
        style={{ filter: "drop-shadow(0 1px 1px rgba(120,90,40,.45))" }}>
        {[-39, -26, -13, 0, 13, 26, 39].map((a, i) => (
          <path key={i} d="M32 32 L 32 5" transform={`rotate(${a} 32 32)`} opacity="0.85" />
        ))}
        {[-39, -26, -13, 0, 13, 26, 39].map((a, i) => (
          <circle key={"d" + i} cx="32" cy="5" r="1.4" fill={color} stroke="none"
            transform={`rotate(${a} 32 32)`} />
        ))}
        <path d="M32 32 C 24 31, 18 29, 13 32 C 18 33, 25 33, 32 32 Z" fill={color} stroke="none" />
        <path d="M32 32 C 40 31, 46 29, 51 32 C 46 33, 39 33, 32 32 Z" fill={color} stroke="none" />
        <circle cx="32" cy="31.5" r="2.1" fill={color} stroke="none" />
      </svg>
    );
  }

  // ── Top-center scallop-shell cartouche ─────────────────────────────
  function Shell({ color = "var(--gold-deep)" }) {
    const cx = 30, cy = 34, R = 27, n = 9;
    const tops = [], ribs = [];
    for (let i = 0; i < n; i++) {
      const a = (-58 + i * (116 / (n - 1))) * Math.PI / 180;
      const x = cx + R * Math.sin(a), y = cy - R * Math.cos(a);
      tops.push([x, y]);
      ribs.push(<line key={i} x1={cx} y1={cy} x2={x} y2={y} stroke={color} strokeWidth="1.1" opacity="0.85" />);
    }
    let d = `M ${tops[0][0].toFixed(1)} ${tops[0][1].toFixed(1)} `;
    for (let i = 1; i < n; i++) {
      const [x, y] = tops[i];
      d += `Q ${((tops[i - 1][0] + x) / 2).toFixed(1)} ${((tops[i - 1][1] + y) / 2 - 3).toFixed(1)} ${x.toFixed(1)} ${y.toFixed(1)} `;
    }
    return (
      <svg viewBox="0 0 60 38" width="100%" height="100%" fill="none" aria-hidden="true"
        style={{ filter: "drop-shadow(0 1px 1px rgba(120,90,40,.45))" }}>
        {ribs}
        <path d={d} stroke={color} strokeWidth="1.1" />
        <path d="M30 34 C 23 33, 19 31, 16 34 C 20 35, 25 35, 30 34 Z" fill={color} />
        <path d="M30 34 C 37 33, 41 31, 44 34 C 40 35, 35 35, 30 34 Z" fill={color} />
        <circle cx="30" cy="33.5" r="1.8" fill={color} />
      </svg>
    );
  }

  // ── Gilded frame around a painting — with ornament variants ─────────
  // variant: "scroll" | "rosette" | "crest" | "fillet" | "ridge" | "plain"
  function GiltFrame({ children, oval = false, intensity = 1, accent, variant = "scroll" }) {
    const gold = accent || "var(--gold-deep)";
    const ring = oval ? "50%" : "5px";
    const pad = oval ? 11 + 4 * intensity : 13 + 3 * intensity;
    const corner = 16 + 8 * intensity;
    const orn = intensity > 0 && !oval;

    const baseMolding =
      "linear-gradient(135deg, var(--gold-lite) 0%, var(--gold) 28%, var(--gold-deep) 50%, var(--gold) 72%, var(--gold-lite) 100%)";
    const ridgeMolding =
      "repeating-linear-gradient(135deg, var(--gold-lite) 0px, var(--gold) 3px, var(--gold-deep) 6px, var(--gold) 9px, var(--gold-lite) 12px)";

    const cornerPos = [
      { top: -6, left: -6, rot: 0 },
      { top: -6, right: -6, rot: 90 },
      { bottom: -6, right: -6, rot: 180 },
      { bottom: -6, left: -6, rot: 270 },
    ];

    return (
      <div style={{ position: "relative", borderRadius: ring, padding: 1 }}>
        {/* gold molding */}
        <div style={{
          position: "relative", borderRadius: ring, padding: pad,
          background: variant === "ridge" ? ridgeMolding : baseMolding,
          boxShadow:
            "0 1px 0 rgba(255,250,235,.7) inset, 0 -1px 0 rgba(120,90,40,.6) inset, 0 18px 40px -18px rgba(80,50,20,.55), 0 4px 12px -6px rgba(80,50,20,.4)",
        }}>
          {/* inner reveal + artwork */}
          <div style={{
            borderRadius: oval ? "50%" : "2px", overflow: "hidden",
            boxShadow: oval
              ? "none"
              : "0 0 0 1.5px rgba(90,62,24,.55), 0 0 0 4px rgba(250,243,230,.35), 0 6px 16px -8px rgba(40,20,10,.6) inset",
            background: oval ? "var(--cream)" : "#2a211d",
          }}>
            {children}
          </div>

          {/* fillet — a fine incised double line within the gold band */}
          {orn && variant === "fillet" &&
            <div aria-hidden="true" style={{
              position: "absolute", inset: Math.round(pad * 0.42), borderRadius: 3,
              border: "1px solid rgba(120,90,40,.55)",
              boxShadow: "0 0 0 1px rgba(255,248,232,.45)",
              pointerEvents: "none",
            }}></div>}

          {/* beaded course — a bead-and-reel liner around the image */}
          {orn && variant === "beaded" &&
            <div aria-hidden="true" style={{
              position: "absolute", inset: Math.round(pad * 0.34), borderRadius: 4,
              border: `2.5px dotted ${gold}`, opacity: 0.85,
              pointerEvents: "none",
            }}></div>}
        </div>

        {/* corner scrolls */}
        {orn && variant === "scroll" && cornerPos.map((p, i) => (
          <div key={i} style={{
            position: "absolute", width: corner, height: corner,
            top: p.top, left: p.left, right: p.right, bottom: p.bottom,
            transform: `rotate(${p.rot}deg)`, pointerEvents: "none",
            filter: "drop-shadow(0 1px 1px rgba(120,90,40,.5))",
          }}>
            <CornerScroll color={gold} />
          </div>
        ))}

        {/* corner rosette blocks */}
        {orn && variant === "rosette" && cornerPos.map((p, i) => (
          <div key={i} style={{
            position: "absolute", width: corner * 0.82, height: corner * 0.82,
            top: p.top, left: p.left, right: p.right, bottom: p.bottom,
            pointerEvents: "none",
          }}>
            <CornerRosette color={gold} />
          </div>
        ))}

        {/* top-center crest (palmette) — rests on the top rail, above the image */}
        {orn && variant === "crest" &&
          <div aria-hidden="true" style={{
            position: "absolute", bottom: "calc(100% - 3px)", left: "50%",
            transform: "translateX(-50%)", width: corner * 2.5, height: corner * 1.3,
            pointerEvents: "none",
          }}>
            <Crest color={gold} />
          </div>}

        {/* top-center shell cartouche — rests on the top rail, above the image */}
        {orn && variant === "shell" &&
          <div aria-hidden="true" style={{
            position: "absolute", bottom: "calc(100% - 4px)", left: "50%",
            transform: "translateX(-50%)", width: corner * 2.9, height: corner * 1.55,
            pointerEvents: "none",
          }}>
            <Shell color={gold} />
          </div>}
      </div>
    );
  }

  // ── Small engraved caption plaque ───────────────────────────────────
  function Plaque({ title, year }) {
    return (
      <div style={{ textAlign: "center", marginTop: 14, lineHeight: 1.25 }}>
        <div style={{
          fontFamily: '"Suisse Neue", sans-serif', fontStyle: "italic",
          fontWeight: 500, fontSize: 22, color: "var(--ink)",
        }}>{title}</div>
        <div style={{
          fontFamily: '"Suisse Neue", sans-serif', fontSize: 15,
          letterSpacing: "0.14em", color: "var(--gold-deep)", marginTop: 2,
        }}>{year}</div>
      </div>
    );
  }

  Object.assign(window, { Flourish, CornerScroll, CornerRosette, Crest, Shell, GiltFrame, Plaque });
})();