// Monoline tattoo flash glyphs — clean black ink on white.
// Hand-tuned SVG paths kept simple to feel like real flash, not AI art.

const GlyphMountain = ({ stroke = 1.4 }) => (
  <svg viewBox="0 0 200 200" fill="none" stroke="#0A0A0A" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round">
    <circle cx="148" cy="62" r="14" />
    <path d="M22 158 L70 86 L102 132 L132 92 L178 158 Z" />
    <path d="M70 86 L86 110" strokeDasharray="2 4" />
    <path d="M22 168 L178 168" />
  </svg>
);

const GlyphRose = ({ stroke = 1.4 }) => (
  <svg viewBox="0 0 200 200" fill="none" stroke="#0A0A0A" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round">
    <circle cx="100" cy="80" r="6" />
    <path d="M100 86 C 80 82 78 100 96 102 C 78 104 80 122 100 118 C 120 122 122 104 104 102 C 122 100 120 82 100 86 Z" />
    <path d="M70 80 C 64 92 70 108 86 110" />
    <path d="M130 80 C 136 92 130 108 114 110" />
    <path d="M100 122 L100 178" />
    <path d="M100 140 C 84 138 76 150 82 162" />
    <path d="M100 156 C 116 154 124 166 118 178" />
  </svg>
);

const GlyphWave = ({ stroke = 1.4 }) => (
  <svg viewBox="0 0 200 200" fill="none" stroke="#0A0A0A" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round">
    <path d="M20 120 C 40 80 70 80 90 120 C 110 160 140 160 160 120 C 170 100 180 100 184 110" />
    <path d="M20 140 C 50 110 80 110 100 140 C 120 170 150 170 180 140" />
    <path d="M88 96 C 96 92 104 92 112 96" />
    <circle cx="150" cy="60" r="14" />
    <path d="M150 50 L150 42" />
    <path d="M150 70 L150 78" />
    <path d="M140 60 L132 60" />
    <path d="M160 60 L168 60" />
  </svg>
);

const GlyphSnake = ({ stroke = 1.4 }) => (
  <svg viewBox="0 0 200 200" fill="none" stroke="#0A0A0A" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round">
    <path d="M50 40 C 90 40 90 80 50 80 C 10 80 10 120 50 120 C 90 120 90 160 130 160" />
    <path d="M130 160 C 150 160 158 152 158 144" />
    <path d="M158 144 L168 138" />
    <path d="M158 144 L168 150" />
    <circle cx="162" cy="142" r="0.8" fill="#0A0A0A" />
    <path d="M60 50 L62 50 M70 50 L72 50 M80 50 L82 50" />
    <path d="M40 90 L42 90 M30 100 L32 100 M40 110 L42 110" />
  </svg>
);

const GlyphDagger = ({ stroke = 1.4 }) => (
  <svg viewBox="0 0 200 200" fill="none" stroke="#0A0A0A" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round">
    <path d="M100 20 L88 140 L100 150 L112 140 Z" />
    <path d="M100 20 L100 150" />
    <path d="M70 140 L130 140" />
    <path d="M70 140 L70 152 L130 152 L130 140" />
    <path d="M100 152 L100 180" strokeWidth={stroke * 1.6} />
    <circle cx="100" cy="184" r="3" />
    <path d="M60 60 C 70 80 130 80 140 60" strokeDasharray="2 3" />
  </svg>
);

const GlyphMoth = ({ stroke = 1.4 }) => (
  <svg viewBox="0 0 200 200" fill="none" stroke="#0A0A0A" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round">
    <ellipse cx="100" cy="100" rx="6" ry="48" />
    <path d="M100 70 C 60 50 30 70 30 100 C 30 120 60 130 100 110" />
    <path d="M100 70 C 140 50 170 70 170 100 C 170 120 140 130 100 110" />
    <path d="M100 110 C 70 110 50 130 60 150 C 70 165 95 160 100 140" />
    <path d="M100 110 C 130 110 150 130 140 150 C 130 165 105 160 100 140" />
    <circle cx="60" cy="92" r="5" />
    <circle cx="140" cy="92" r="5" />
    <path d="M100 60 L96 50" />
    <path d="M100 60 L104 50" />
  </svg>
);

const GlyphHeart = ({ stroke = 1.4 }) => (
  <svg viewBox="0 0 200 200" fill="none" stroke="#0A0A0A" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round">
    <path d="M100 162 C 60 132 30 110 30 78 C 30 56 48 42 68 42 C 84 42 96 52 100 64 C 104 52 116 42 132 42 C 152 42 170 56 170 78 C 170 110 140 132 100 162 Z" />
    <path d="M70 90 C 78 78 90 78 100 88" />
    <path d="M55 110 L75 110" />
    <path d="M120 130 L140 130" />
  </svg>
);

const GlyphEye = ({ stroke = 1.4 }) => (
  <svg viewBox="0 0 200 200" fill="none" stroke="#0A0A0A" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round">
    <path d="M20 100 C 60 60 140 60 180 100 C 140 140 60 140 20 100 Z" />
    <circle cx="100" cy="100" r="22" />
    <circle cx="100" cy="100" r="8" fill="#0A0A0A" />
    <path d="M100 40 L100 28" />
    <path d="M60 56 L52 44" />
    <path d="M140 56 L148 44" />
    <path d="M100 160 L100 172" />
    <path d="M60 144 L52 156" />
    <path d="M140 144 L148 156" />
  </svg>
);

const GlyphSwallow = ({ stroke = 1.4 }) => (
  <svg viewBox="0 0 200 200" fill="none" stroke="#0A0A0A" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round">
    <path d="M40 110 C 70 80 110 80 130 100 C 100 100 70 110 40 110 Z" />
    <path d="M130 100 C 140 92 152 92 162 100 C 152 102 142 102 132 102" />
    <path d="M40 110 L20 130" />
    <path d="M50 112 L34 138" />
    <path d="M60 114 L52 142" />
    <path d="M70 110 L78 130 L88 112" />
    <circle cx="156" cy="98" r="1.5" fill="#0A0A0A" />
    <path d="M150 102 L148 106" />
  </svg>
);

const GlyphAnchor = ({ stroke = 1.4 }) => (
  <svg viewBox="0 0 200 200" fill="none" stroke="#0A0A0A" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round">
    <circle cx="100" cy="46" r="10" />
    <path d="M100 56 L100 160" />
    <path d="M76 80 L124 80" />
    <path d="M40 130 C 40 156 70 170 100 170 C 130 170 160 156 160 130" />
    <path d="M40 130 L30 124" />
    <path d="M40 130 L46 142" />
    <path d="M160 130 L170 124" />
    <path d="M160 130 L154 142" />
    <path d="M70 100 C 60 110 60 120 70 130" strokeDasharray="2 3" />
  </svg>
);

const GlyphHand = ({ stroke = 1.4 }) => (
  <svg viewBox="0 0 200 200" fill="none" stroke="#0A0A0A" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round">
    <path d="M70 180 L70 120 C 70 110 60 110 60 120 L60 140 C 60 100 60 70 70 70 C 78 70 78 100 78 110 L78 50 C 78 40 90 40 90 50 L90 110 L90 40 C 90 30 102 30 102 40 L102 110 L102 50 C 102 40 114 40 114 50 L114 110 L114 70 C 114 60 126 60 126 70 L126 130 C 126 160 110 180 90 180 Z" />
    <circle cx="96" cy="130" r="14" />
    <path d="M88 130 L104 130" />
    <path d="M96 122 L96 138" />
  </svg>
);

const GlyphSun = ({ stroke = 1.4 }) => (
  <svg viewBox="0 0 200 200" fill="none" stroke="#0A0A0A" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round">
    <circle cx="100" cy="100" r="30" />
    <path d="M100 50 L100 36" />
    <path d="M100 164 L100 150" />
    <path d="M50 100 L36 100" />
    <path d="M164 100 L150 100" />
    <path d="M65 65 L55 55" />
    <path d="M145 145 L135 135" />
    <path d="M65 135 L55 145" />
    <path d="M145 55 L135 65" />
    <path d="M86 92 C 92 88 98 88 104 92" />
    <path d="M86 108 C 92 112 98 112 104 108" />
    <circle cx="92" cy="98" r="1" fill="#0A0A0A" />
    <circle cx="108" cy="98" r="1" fill="#0A0A0A" />
  </svg>
);

const GLYPHS = {
  mountain: GlyphMountain,
  rose: GlyphRose,
  wave: GlyphWave,
  snake: GlyphSnake,
  dagger: GlyphDagger,
  moth: GlyphMoth,
  heart: GlyphHeart,
  eye: GlyphEye,
  swallow: GlyphSwallow,
  anchor: GlyphAnchor,
  hand: GlyphHand,
  sun: GlyphSun,
};

// Wide ambient line drawing for the hero background
const AmbientMountain = () => (
  <svg viewBox="0 0 1600 600" fill="none" stroke="#F5F5F5" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" preserveAspectRatio="xMidYMid meet">
    <circle cx="1180" cy="180" r="60" />
    <path d="M50 520 L260 280 L380 380 L520 220 L640 360 L760 240 L900 420 L1080 200 L1240 380 L1380 260 L1550 520 Z" />
    <path d="M260 280 L320 360" strokeDasharray="3 6" />
    <path d="M520 220 L580 320" strokeDasharray="3 6" />
    <path d="M1080 200 L1140 320" strokeDasharray="3 6" />
    <path d="M50 540 L1550 540" />
    <path d="M50 560 L1550 560" strokeDasharray="2 8" />
  </svg>
);

const AmbientWave = () => (
  <svg viewBox="0 0 1600 600" fill="none" stroke="#F5F5F5" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" preserveAspectRatio="xMidYMid meet">
    <circle cx="1240" cy="160" r="60" />
    <path d="M40 380 C 200 280 320 280 440 380 C 560 480 720 480 840 380 C 960 280 1120 280 1240 380 C 1360 480 1480 480 1560 420" />
    <path d="M40 440 C 240 360 400 360 560 440 C 720 520 880 520 1040 440 C 1200 360 1360 360 1560 420" />
    <path d="M400 360 C 420 350 440 350 460 360" />
    <path d="M820 360 C 840 350 860 350 880 360" />
    <path d="M1200 360 C 1220 350 1240 350 1260 360" />
  </svg>
);

const AmbientRose = () => (
  <svg viewBox="0 0 1600 600" fill="none" stroke="#F5F5F5" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" preserveAspectRatio="xMidYMid meet">
    <g transform="translate(800 280)">
      <circle r="20" />
      <path d="M0 20 C -60 12 -68 70 -10 76 C -68 82 -60 140 0 132 C 60 140 68 82 10 76 C 68 70 60 12 0 20 Z" />
      <path d="M-100 -10 C -120 30 -100 80 -50 90" />
      <path d="M100 -10 C 120 30 100 80 50 90" />
      <path d="M-150 -40 C -180 10 -160 70 -110 80" />
      <path d="M150 -40 C 180 10 160 70 110 80" />
      <path d="M0 132 L0 280" />
      <path d="M0 180 C -50 175 -70 215 -50 250" />
      <path d="M0 220 C 50 215 70 255 50 280" />
      <path d="M-30 200 L-46 196" />
      <path d="M40 240 L56 236" />
    </g>
  </svg>
);

const AMBIENTS = {
  mountain: AmbientMountain,
  wave: AmbientWave,
  rose: AmbientRose,
};

Object.assign(window, { GLYPHS, AMBIENTS });
