// === Decorative SVG primitives ===

const BrushUnderline = ({ color = "#1A1A1A", className = "", style = {} }) => (
  <svg viewBox="0 0 300 16" preserveAspectRatio="none" className={className} style={style} aria-hidden="true">
    <path d="M2,9 C40,3 80,13 120,8 C160,4 200,12 240,9 C268,7 285,10 298,8"
      stroke={color} strokeWidth="3" strokeLinecap="round" fill="none" opacity="0.85"/>
  </svg>
);

const BrushDivider = ({ color = "#1A1A1A", style = {} }) => (
  <svg viewBox="0 0 1400 18" preserveAspectRatio="none" style={{ width: "100%", height: 18, ...style }} aria-hidden="true">
    <path d="M4,11 C150,5 320,15 520,9 C720,3 880,15 1080,10 C1240,6 1340,13 1396,9"
      stroke={color} strokeWidth="2.2" strokeLinecap="round" fill="none" opacity="0.6"/>
    <circle cx="180" cy="13" r="1.4" fill={color} opacity="0.5"/>
    <circle cx="640" cy="6" r="1.2" fill={color} opacity="0.5"/>
    <circle cx="1100" cy="12" r="1.6" fill={color} opacity="0.4"/>
  </svg>
);

const InkSplatter = ({ size = 60, color = "#1A1A1A" }) => (
  <svg viewBox="0 0 60 60" width={size} height={size} aria-hidden="true">
    <circle cx="30" cy="30" r="10" fill={color} opacity="0.85"/>
    <circle cx="46" cy="22" r="3.2" fill={color} opacity="0.6"/>
    <circle cx="14" cy="42" r="2.4" fill={color} opacity="0.5"/>
    <circle cx="42" cy="46" r="1.6" fill={color} opacity="0.5"/>
    <circle cx="20" cy="16" r="1.4" fill={color} opacity="0.45"/>
    <circle cx="52" cy="36" r="1.0" fill={color} opacity="0.35"/>
  </svg>
);

// Search-bar brush icon
const BrushSearchIcon = ({ size = 30 }) => (
  <svg viewBox="0 0 32 32" width={size} height={size} aria-hidden="true">
    <circle cx="13" cy="13" r="8" stroke="#1A1A1A" strokeWidth="2.2" fill="none"/>
    <path d="M19 19 L26 27" stroke="#1A1A1A" strokeWidth="2.8" strokeLinecap="round"/>
    <path d="M25 26 C26 27 27 28 28 30" stroke="#C8392E" strokeWidth="2" strokeLinecap="round" fill="none" opacity="0.85"/>
  </svg>
);

// Painted Zhongli wordmark (中俚)
const ZhongLiMark = () => (
  <span style={{ display: "inline-flex", alignItems: "baseline", gap: 8 }} aria-label="Zhong Li slang">
    <span className="zh">中俚</span>
  </span>
);

// Living-ink border for hero search
const LivingBorder = () => (
  <div className="search-border" aria-hidden="true">
    <svg viewBox="0 0 800 90" preserveAspectRatio="none">
      <path d="M6,8 C160,2 360,14 540,6 C660,1 740,10 794,6 L794,84 C620,90 380,78 220,84 C110,88 60,82 6,84 Z"/>
    </svg>
  </div>
);

// Category icons drawn as simple brush primitives (no panda / dragon clichés)
const CategoryIcon = ({ kind }) => {
  const stroke = "currentColor";
  switch (kind) {
    case "internet":
      return (
        <svg viewBox="0 0 56 56" width="56" height="56" aria-hidden="true">
          <circle cx="28" cy="28" r="22" stroke={stroke} strokeWidth="2" fill="none"/>
          <path d="M6 28 H50 M28 6 C18 18 18 38 28 50 M28 6 C38 18 38 38 28 50" stroke={stroke} strokeWidth="1.6" fill="none" strokeLinecap="round"/>
        </svg>
      );
    case "gaming":
      return (
        <svg viewBox="0 0 56 56" width="56" height="56" aria-hidden="true">
          <rect x="6" y="18" width="44" height="22" rx="11" stroke={stroke} strokeWidth="2" fill="none"/>
          <circle cx="18" cy="29" r="2.4" fill={stroke}/>
          <circle cx="38" cy="29" r="2.4" fill={stroke}/>
          <path d="M14 24 L22 24 M18 20 L18 28" stroke={stroke} strokeWidth="1.6" strokeLinecap="round"/>
        </svg>
      );
    case "work":
      return (
        <svg viewBox="0 0 56 56" width="56" height="56" aria-hidden="true">
          <rect x="10" y="18" width="36" height="28" stroke={stroke} strokeWidth="2" fill="none"/>
          <path d="M22 18 L22 12 L34 12 L34 18" stroke={stroke} strokeWidth="2" fill="none"/>
          <path d="M10 30 L46 30" stroke={stroke} strokeWidth="1.6"/>
        </svg>
      );
    case "love":
      return (
        <svg viewBox="0 0 56 56" width="56" height="56" aria-hidden="true">
          <path d="M28 46 C12 36 6 26 12 18 C18 10 26 14 28 22 C30 14 38 10 44 18 C50 26 44 36 28 46 Z" stroke={stroke} strokeWidth="2" fill="none" strokeLinejoin="round"/>
          <path d="M22 26 L34 32" stroke={stroke} strokeWidth="1.6" strokeLinecap="round"/>
        </svg>
      );
    case "pop":
      return (
        <svg viewBox="0 0 56 56" width="56" height="56" aria-hidden="true">
          <circle cx="28" cy="28" r="20" stroke={stroke} strokeWidth="2" fill="none"/>
          <path d="M14 24 C20 14 36 14 42 24" stroke={stroke} strokeWidth="1.8" fill="none" strokeLinecap="round"/>
          <circle cx="22" cy="32" r="2" fill={stroke}/>
          <circle cx="34" cy="32" r="2" fill={stroke}/>
        </svg>
      );
    case "region":
      return (
        <svg viewBox="0 0 56 56" width="56" height="56" aria-hidden="true">
          <path d="M28 48 C16 36 10 28 10 20 C10 12 18 6 28 6 C38 6 46 12 46 20 C46 28 40 36 28 48 Z" stroke={stroke} strokeWidth="2" fill="none" strokeLinejoin="round"/>
          <circle cx="28" cy="20" r="5" stroke={stroke} strokeWidth="1.8" fill="none"/>
        </svg>
      );
    default: return null;
  }
};

const BrushCheck = ({ size = 28 }) => (
  <svg viewBox="0 0 30 30" width={size} height={size} aria-hidden="true">
    <path d="M5 16 C8 19 11 21 13 22 C16 17 20 11 26 6"
      stroke="#C8392E" strokeWidth="2.8" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
    <path d="M5 16 C8 19 11 21 13 22 C16 17 20 11 26 6"
      stroke="#C8392E" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" fill="none" opacity="0.5"
      transform="translate(0.4, 1.2)"/>
  </svg>
);

const ToneMark = ({ tone }) => {
  // tone 1 = flat, 2 = rising, 3 = dip, 4 = falling
  const paths = {
    1: "M2 8 L26 8",
    2: "M2 12 C8 12 18 6 26 4",
    3: "M2 6 C8 14 18 14 26 4",
    4: "M2 4 C8 6 18 12 26 14",
  };
  return (
    <svg viewBox="0 0 28 16" width="28" height="16" aria-hidden="true">
      <path d={paths[tone]} stroke="#1A1A1A" strokeWidth="2.2" strokeLinecap="round" fill="none"/>
    </svg>
  );
};

// Avatar brush ring
const AvatarRing = () => (
  <svg viewBox="0 0 108 108" width="108" height="108" className="ring" aria-hidden="true">
    <path d="M54 6 C30 6 6 30 6 54 C6 78 30 102 54 102 C78 102 102 78 102 54 C102 30 78 6 54 6 Z"
      stroke="#1A1A1A" strokeWidth="2.6" fill="none" strokeLinecap="round" strokeDasharray="280 14"/>
  </svg>
);

Object.assign(window, {
  BrushUnderline, BrushDivider, InkSplatter, BrushSearchIcon,
  ZhongLiMark, LivingBorder, CategoryIcon, BrushCheck, ToneMark, AvatarRing
});
