// === Unique decorative vectors — big, expressive, and used sparingly ===

// 1. Massive dramatic ink splash, lifted-brush style
const InkSplash = ({ color = "#1A1A1A", style = {} }) => (
  <svg viewBox="0 0 400 400" style={style} aria-hidden="true">
    {/* main blob, asymmetric */}
    <path d="M180,80 C220,70 270,90 290,130 C310,160 320,210 300,250 C290,290 250,310 210,300 C170,290 130,300 100,270 C70,240 65,200 95,170 C115,140 145,90 180,80 Z"
      fill={color} opacity="0.92"/>
    {/* drip downward */}
    <path d="M170,290 C172,310 168,340 175,360 C178,372 180,378 178,385 C176,390 171,388 169,383 C166,365 161,330 167,295 Z"
      fill={color} opacity="0.85"/>
    {/* secondary splotch */}
    <path d="M310,210 C330,205 350,215 355,235 C358,250 348,265 332,267 C318,268 305,260 302,247 C300,232 298,213 310,210 Z"
      fill={color} opacity="0.75"/>
    {/* small dot family */}
    <circle cx="80" cy="320" r="6" fill={color} opacity="0.7"/>
    <circle cx="60" cy="340" r="3" fill={color} opacity="0.55"/>
    <circle cx="345" cy="305" r="4.5" fill={color} opacity="0.65"/>
    <circle cx="365" cy="290" r="2" fill={color} opacity="0.5"/>
    <circle cx="370" cy="150" r="3.5" fill={color} opacity="0.55"/>
    <circle cx="40" cy="200" r="2.5" fill={color} opacity="0.5"/>
    <circle cx="220" cy="35" r="3" fill={color} opacity="0.6"/>
    <circle cx="265" cy="50" r="2" fill={color} opacity="0.5"/>
    {/* tiny flecks */}
    <circle cx="380" cy="220" r="1.2" fill={color} opacity="0.4"/>
    <circle cx="20" cy="280" r="1.4" fill={color} opacity="0.4"/>
    <circle cx="195" cy="370" r="1.6" fill={color} opacity="0.5"/>
  </svg>
);

// 2. Hand-drawn loose annotation circle (around words)
const AnnotationCircle = ({ color = "#C8392E", style = {} }) => (
  <svg viewBox="0 0 300 120" preserveAspectRatio="none" style={style} aria-hidden="true">
    <path d="M16,60 C18,30 70,12 150,12 C220,12 286,28 290,60 C292,90 220,108 150,108 C80,108 14,92 16,60 C16,58 17,55 18,52"
      stroke={color} strokeWidth="3" strokeLinecap="round" fill="none" opacity="0.88"/>
    {/* loose overshoot tail */}
    <path d="M18,52 C16,46 22,42 30,40"
      stroke={color} strokeWidth="2.6" strokeLinecap="round" fill="none" opacity="0.7"/>
  </svg>
);

// 3. Big editorial numeral
const BigNumeral = ({ n, style = {} }) => (
  <div style={{
    fontFamily: "var(--serif)",
    fontWeight: 500,
    fontSize: 200,
    lineHeight: 0.85,
    letterSpacing: "-0.04em",
    color: "transparent",
    WebkitTextStroke: "1.5px #1A1A1A",
    opacity: 0.18,
    pointerEvents: "none",
    userSelect: "none",
    ...style,
  }} aria-hidden="true">{n}</div>
);

// 4. Flowing brush ribbon (full width decorative stroke under section heads)
const BrushRibbon = ({ color = "#1A1A1A", height = 30, style = {} }) => (
  <svg viewBox="0 0 600 30" preserveAspectRatio="none"
    style={{ width: "100%", height, ...style }} aria-hidden="true">
    <path d="M2,18 C60,8 130,24 200,16 C270,8 340,22 410,15 C470,9 540,20 598,14"
      stroke={color} strokeWidth="2.4" fill="none" strokeLinecap="round" opacity="0.85"/>
    <path d="M2,22 C60,12 130,28 200,20 C270,12 340,26 410,19 C470,13 540,24 598,18"
      stroke={color} strokeWidth="1.0" fill="none" strokeLinecap="round" opacity="0.4"/>
    <circle cx="120" cy="14" r="1.6" fill={color} opacity="0.6"/>
    <circle cx="380" cy="13" r="1.4" fill={color} opacity="0.5"/>
    <circle cx="560" cy="16" r="1.8" fill={color} opacity="0.6"/>
  </svg>
);

// 5. Vertical seal chain — column of stacked stamps with rotation
const SealColumn = ({ chars = ["新", "热", "趣", "典"], style = {} }) => (
  <div style={{
    display: "flex", flexDirection: "column", gap: 10,
    ...style,
  }} aria-hidden="true">
    {chars.map((c, i) => (
      <div key={i} style={{
        width: 48, height: 48,
        background: i % 2 === 0 ? "var(--cinnabar)" : "var(--ink)",
        color: "var(--paper)",
        display: "flex", alignItems: "center", justifyContent: "center",
        fontFamily: "var(--cn-serif)",
        fontWeight: 700, fontSize: 22,
        borderRadius: 4,
        transform: `rotate(${(i % 2 === 0 ? -1 : 1) * (4 + i)}deg)`,
        boxShadow: "inset 0 0 0 2px rgba(245,241,232,0.4)",
      }}>{c}</div>
    ))}
  </div>
);

// 6. Vertical kanji column (decorative right-edge text)
const VerticalKanjiColumn = ({ text = "字典 · 俚语 · 当代", style = {} }) => (
  <div style={{
    writingMode: "vertical-rl",
    fontFamily: "var(--cn-serif)",
    fontSize: 16,
    letterSpacing: "0.4em",
    color: "var(--faded)",
    fontWeight: 500,
    ...style,
  }} aria-hidden="true">{text}</div>
);

// 7. Diagonal brush sweep — used as section corner accents
const DiagonalSweep = ({ color = "#1A1A1A", style = {} }) => (
  <svg viewBox="0 0 320 200" style={style} aria-hidden="true">
    <path d="M10,180 C60,120 140,80 230,40 C260,28 290,22 312,18"
      stroke={color} strokeWidth="3.5" strokeLinecap="round" fill="none" opacity="0.85"/>
    <path d="M14,184 C40,160 80,138 130,118 C170,100 220,82 260,68"
      stroke={color} strokeWidth="1.2" strokeLinecap="round" fill="none" opacity="0.35"/>
    <circle cx="244" cy="32" r="3" fill={color} opacity="0.6"/>
    <circle cx="280" cy="22" r="1.6" fill={color} opacity="0.5"/>
  </svg>
);

// 8. Editorial brackets [ ] — calligraphic
const BracketLeft = ({ color = "#1A1A1A", style = {} }) => (
  <svg viewBox="0 0 40 200" style={style} aria-hidden="true">
    <path d="M32,6 C16,8 8,30 8,100 C8,170 16,192 32,194"
      stroke={color} strokeWidth="2.6" strokeLinecap="round" fill="none"/>
  </svg>
);
const BracketRight = ({ color = "#1A1A1A", style = {} }) => (
  <svg viewBox="0 0 40 200" style={style} aria-hidden="true">
    <path d="M8,6 C24,8 32,30 32,100 C32,170 24,192 8,194"
      stroke={color} strokeWidth="2.6" strokeLinecap="round" fill="none"/>
  </svg>
);

// 9. Tasseled seal (square seal with a hanging tassel — but minimal, not kitsch)
const HangingSeal = ({ char = "新", style = {} }) => (
  <div style={{ display: "inline-flex", flexDirection: "column", alignItems: "center", ...style }} aria-hidden="true">
    <div style={{
      width: 64, height: 64,
      background: "var(--cinnabar)",
      color: "var(--paper)",
      display: "flex", alignItems: "center", justifyContent: "center",
      fontFamily: "var(--cn-serif)", fontWeight: 700, fontSize: 28,
      borderRadius: 4,
      transform: "rotate(-3deg)",
      boxShadow: "inset 0 0 0 2px rgba(245,241,232,0.4), 0 6px 14px rgba(0,0,0,0.12)",
    }}>{char}</div>
    <svg viewBox="0 0 24 80" width="14" height="48" style={{ marginTop: -2 }}>
      <path d="M12,0 L12,60" stroke="#1A1A1A" strokeWidth="1.4" strokeLinecap="round"/>
      <path d="M12,60 L8,72 M12,60 L16,72 M12,60 L12,76" stroke="#C8392E" strokeWidth="1.4" strokeLinecap="round"/>
    </svg>
  </div>
);

// 10. Wave-strike — a single bold zen brush sweep that arcs across
const WaveStrike = ({ color = "#1A1A1A", style = {} }) => (
  <svg viewBox="0 0 800 120" preserveAspectRatio="none" style={style} aria-hidden="true">
    <path d="M10,90 C140,20 280,110 410,60 C540,18 660,80 790,40"
      stroke={color} strokeWidth="14" fill="none" strokeLinecap="round" opacity="0.85"/>
    <path d="M10,92 C140,22 280,112 410,62 C540,20 660,82 790,42"
      stroke={color} strokeWidth="2" fill="none" strokeLinecap="round" opacity="0.4"/>
    <circle cx="794" cy="42" r="6" fill={color} opacity="0.7"/>
    <circle cx="808" cy="38" r="2" fill={color} opacity="0.5"/>
  </svg>
);

// 11. Crosshair / radar mark (editorial pointer)
const CrosshairMark = ({ style = {} }) => (
  <svg viewBox="0 0 60 60" style={style} aria-hidden="true">
    <circle cx="30" cy="30" r="22" stroke="#C8392E" strokeWidth="1.4" fill="none" opacity="0.7"/>
    <circle cx="30" cy="30" r="12" stroke="#C8392E" strokeWidth="1.4" fill="none" opacity="0.5"/>
    <path d="M30,2 L30,18 M30,42 L30,58 M2,30 L18,30 M42,30 L58,30" stroke="#C8392E" strokeWidth="1.4" strokeLinecap="round" opacity="0.8"/>
    <circle cx="30" cy="30" r="2" fill="#C8392E"/>
  </svg>
);

// 12. Index dot pattern (rice-paper engraving feel)
const DotGrid = ({ rows = 8, cols = 8, style = {} }) => {
  const dots = [];
  for (let r = 0; r < rows; r++) for (let c = 0; c < cols; c++) {
    dots.push(<circle key={`${r}-${c}`} cx={c * 14 + 6} cy={r * 14 + 6} r="1" fill="#1A1A1A" opacity="0.35"/>);
  }
  return (
    <svg viewBox={`0 0 ${cols * 14} ${rows * 14}`} style={style} aria-hidden="true">{dots}</svg>
  );
};

Object.assign(window, {
  InkSplash, AnnotationCircle, BigNumeral, BrushRibbon, SealColumn,
  VerticalKanjiColumn, DiagonalSweep, BracketLeft, BracketRight,
  HangingSeal, WaveStrike, CrosshairMark, DotGrid
});
