// pauper-ornaments.jsx
// SVG components for the Pauper Raid landing page.
// ============================================================
// Mana-pip watermark — generated as inline data URI for the
// background-image of the page. Subtle scattered MTG mana
// symbols (W sun, U droplet, B skull, R fireball, G tree) +
// crossed swords and 4-pointed stars.
// ============================================================
function makePipWatermark(ink = "rgba(42,32,20,0.55)") {
// MTG mana pip style — solid circle (the "coin") with the colour's
// glyph carved out as negative space. The whole pip is rendered in a
// single tone so it reads as a watermark, not a colored UI element.
const w = 200, h = 200;
// The five canonical colours, plus a couple of repeats for density.
// Each pip is a circle r=14 with a punched-out glyph at the center.
const pips = [
{ x: 26, y: 32, kind: "W", s: 1.0, r: -6 },
{ x: 86, y: 18, kind: "U", s: 0.85, r: 10 },
{ x: 150, y: 44, kind: "B", s: 1.0, r: -4 },
{ x: 56, y: 78, kind: "R", s: 0.9, r: 8 },
{ x: 118, y: 96, kind: "G", s: 1.0, r: -10 },
{ x: 20, y: 122, kind: "B", s: 0.8, r: 4 },
{ x: 82, y: 138, kind: "W", s: 0.9, r: 14 },
{ x: 148, y: 138, kind: "U", s: 1.0, r: -8 },
{ x: 46, y: 176, kind: "G", s: 0.85, r: 6 },
{ x: 112, y: 184, kind: "R", s: 0.9, r: -12 },
{ x: 180, y: 188, kind: "W", s: 0.7, r: 0 },
{ x: 184, y: 96, kind: "R", s: 0.7, r: 18 },
];
// Each glyph is a path drawn inside a 28×28 box centered on (0,0).
// We use `evenodd` fill so the circle + glyph combine into a ring-with-
// cutout in a single fill operation — that keeps the watermark crisp at
// any opacity.
const glyph = (kind) => {
switch (kind) {
case "W": // radiant sun: outer 8-point star + inner circle hole
return `M 0 -8.5
L 1.6 -3.3 L 6 -6 L 3.3 -1.6 L 8.5 0 L 3.3 1.6 L 6 6 L 1.6 3.3
L 0 8.5 L -1.6 3.3 L -6 6 L -3.3 1.6 L -8.5 0 L -3.3 -1.6 L -6 -6 L -1.6 -3.3 Z
M 0 -3.2 A 3.2 3.2 0 1 1 0 3.2 A 3.2 3.2 0 1 1 0 -3.2 Z`;
case "U": // water droplet
return `M 0 -9 C 5.5 -2, 7 3.5, 0 9 C -7 3.5, -5.5 -2, 0 -9 Z
M 1.5 -3 C 4 0.5, 4 3, 2 5.5 L 1 4.5 C 2.5 2.5, 2.5 0.5, 0.5 -2 Z`;
case "B": // skull — rounded dome + eye sockets + jaw notches
return `M 0 -9 C 6 -9, 9 -5, 9 -1
C 9 2, 7 4, 5.5 4.5
L 5.5 7.5 L 3.5 7.5 L 3.5 5.8 L 2 5.8 L 2 7.5 L 0 7.5
L 0 5.8 L -2 5.8 L -2 7.5 L -3.5 7.5 L -3.5 5.8 L -5.5 5.8 L -5.5 4.5
C -7 4, -9 2, -9 -1 C -9 -5, -6 -9, 0 -9 Z
M -4 -3 A 2.4 2.4 0 1 1 -4 1.8 A 2.4 2.4 0 1 1 -4 -3 Z
M 4 -3 A 2.4 2.4 0 1 1 4 1.8 A 2.4 2.4 0 1 1 4 -3 Z`;
case "R": // fireball — teardrop-with-tongues flame
return `M 0 -9
C 4 -4, 5.5 -1, 4 3
C 5.5 1.5, 6.5 0, 7 -1
C 8 4, 5 9, 0 9
C -5 9, -8 5, -7 0
C -6 2, -4 3, -2.5 3
C -4.5 0, -3 -4, 0 -9 Z`;
case "G": // tree / oak — trunk with rounded crown
return `M 0 -9
C 5 -9, 8 -6, 8 -2
C 8 1.5, 5.5 4, 2.5 4.5
L 2.5 9 L -2.5 9 L -2.5 4.5
C -5.5 4, -8 1.5, -8 -2
C -8 -6, -5 -9, 0 -9 Z`;
default: return "";
}
};
const pipSvg = (p) => {
const t = `translate(${p.x} ${p.y}) rotate(${p.r}) scale(${p.s})`;
return ``;
};
const svg = ``;
return `url("data:image/svg+xml;utf8,${encodeURIComponent(svg)}")`;
}
// ============================================================
// Ornamental divider — blue gem rod
// Inspired by the European Championship reference:
// long horizontal bar with diamond rivets and a 4-pointed
// star burst gem at center.
// ============================================================
function Divider() {
return (
);
}
// ============================================================
// Torch — animated flame (CSS-driven flicker)
// ============================================================
function Torch({ side }) {
// Hovering gem sigil — kite-cut gem on a small pedestal of flourishes,
// with a soft halo behind. Same blue palette as the dividers.
return (
);
}
// ============================================================
// Block-printed ribbon banner — for title treatment #3
// A woodcut-style ribbon/scroll with the title set on it
// ============================================================
function BlockBanner({ lines }) {
// Two stacked banner ribbons
const W = 720;
return (