// Hand-drawn line-art SVG illustrations meant to look like coloring pages.
// Each accepts {className} and renders into a square viewBox.
// Style: thin black strokes on transparent background, friendly + simple.

const Doodle = ({ children, className = "", viewBox = "0 0 200 200" }) => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox={viewBox} className={className}
       fill="none" stroke="#1F2A44" strokeWidth="2.2"
       strokeLinecap="round" strokeLinejoin="round">
    {children}
  </svg>
);

// 1. Einhorn mit Regenbogen
const ArtUnicorn = ({ className }) => (
  <Doodle className={className}>
    <path d="M40 150c0-30 25-55 55-55s55 25 55 55"/>
    <path d="M50 150c0-25 20-45 45-45s45 20 45 45"/>
    <path d="M60 150c0-20 16-36 36-36s36 16 36 36"/>
    <path d="M75 165c10 8 25 12 40 12s30-4 40-12"/>
    <ellipse cx="115" cy="155" rx="35" ry="20"/>
    <path d="M148 152c8-2 14-8 16-16 2-8-3-12-9-9"/>
    <circle cx="138" cy="148" r="1.5" fill="#1F2A44"/>
    <path d="M125 138l-8-30 14 4-2-12 12 8-2-14"/>
    <path d="M115 142c2-3 6-3 8 0"/>
    <path d="M85 165l-3 15M100 168l-3 15M115 168l-3 15M130 165l-3 15"/>
    <path d="M145 105c-3-3-3-8 0-12 4-3 8-3 12 0"/>
  </Doodle>
);

// 2. T-Rex Dinosaurier
const ArtDino = ({ className }) => (
  <Doodle className={className}>
    <path d="M40 150c0 6 4 10 10 10h12"/>
    <path d="M62 160l4-15 8 5 4-12c0-15 8-30 25-35 18-5 35 5 42 18 4 8 5 18 2 26-2 6-4 12-2 18l-6 5-4-10-6 6-5-7-7 8-3-9-7 8-2-7-7 8-3-9-12 7"/>
    <path d="M100 95l-3-10-8 4 4-12-12 2 8-10"/>
    <path d="M135 90c-3-3-2-8 2-10 4-2 8 0 9 4"/>
    <circle cx="142" cy="85" r="1.6" fill="#1F2A44"/>
    <path d="M152 95l8 2 4-6"/>
    <path d="M85 130c-3 0-6 2-7 5"/>
    <path d="M115 130c-3 0-6 2-7 5"/>
    <path d="M118 117l4-3 4 3M134 115l4-3 4 3"/>
  </Doodle>
);

// 3. Katze mit Wollknäuel
const ArtCat = ({ className }) => (
  <Doodle className={className}>
    <path d="M70 90l-8-25 22 14M115 90l8-25-22 14"/>
    <ellipse cx="92" cy="105" rx="32" ry="28"/>
    <circle cx="80" cy="100" r="2" fill="#1F2A44"/>
    <circle cx="105" cy="100" r="2" fill="#1F2A44"/>
    <path d="M88 112l4 4 4-4"/>
    <path d="M68 108l-12 2M68 112l-12 4M116 108l12 2M116 112l12 4"/>
    <path d="M70 130c5 12 14 18 22 18s17-6 22-18"/>
    <circle cx="140" cy="148" r="22"/>
    <path d="M122 142c8 4 18 4 26 0M122 148c10 6 22 6 32 0M124 156c10 6 22 6 30 0M128 138c5 4 14 6 20 4"/>
    <path d="M115 145c4-2 8-2 12 0"/>
  </Doodle>
);

// 4. Weihnachtsmann mit Geschenken
const ArtSanta = ({ className }) => (
  <Doodle className={className}>
    <path d="M70 70l30-25 30 25v8h-60z"/>
    <path d="M75 78c-5 2-8 5-5 8h60c3-3 0-6-5-8"/>
    <ellipse cx="100" cy="98" rx="22" ry="20"/>
    <circle cx="92" cy="95" r="1.6" fill="#1F2A44"/>
    <circle cx="108" cy="95" r="1.6" fill="#1F2A44"/>
    <path d="M95 105c2 3 8 3 10 0"/>
    <path d="M78 110c0 12 10 22 22 22s22-10 22-22"/>
    <path d="M82 112c4 8 12 14 18 14s14-6 18-14"/>
    <path d="M70 140l-10 30h80l-10-30"/>
    <rect x="40" y="155" width="28" height="22"/>
    <path d="M54 155v22M40 166h28"/>
    <rect x="135" y="160" width="22" height="18"/>
    <path d="M146 160v18"/>
  </Doodle>
);

// 5. Fußballspieler
const ArtSoccer = ({ className }) => (
  <Doodle className={className}>
    <circle cx="85" cy="55" r="14"/>
    <circle cx="82" cy="53" r="1.5" fill="#1F2A44"/>
    <circle cx="89" cy="53" r="1.5" fill="#1F2A44"/>
    <path d="M82 60c2 2 6 2 8 0"/>
    <path d="M85 69l-5 18 12 8 5-15 10 12 14-10"/>
    <path d="M80 87l-15 25 8 8 18-18"/>
    <path d="M97 95l-8 35 14 6 12-30"/>
    <path d="M75 130l-10 25h12l8-22"/>
    <circle cx="145" cy="148" r="18"/>
    <path d="M145 130l6 9-3 11h-6l-3-11zM127 148l9-3 9 9-3 9-12-3zM163 148l-9-3-9 9 3 9 12-3zM135 168l3-9 6 0 3 9-6 6z"/>
  </Doodle>
);

// 6. Prinzessin im Schloss
const ArtPrincess = ({ className }) => (
  <Doodle className={className}>
    <path d="M30 170V70h20v15h15V70h20v15h15V70h20v100"/>
    <path d="M30 90h90M30 110h90"/>
    <rect x="38" y="120" width="14" height="20"/>
    <rect x="68" y="120" width="14" height="20"/>
    <rect x="98" y="120" width="14" height="20"/>
    <path d="M52 70l-3-8M82 70l-3-8M112 70l-3-8"/>
    <ellipse cx="148" cy="130" rx="14" ry="14"/>
    <circle cx="144" cy="128" r="1.5" fill="#1F2A44"/>
    <circle cx="152" cy="128" r="1.5" fill="#1F2A44"/>
    <path d="M145 134c2 2 4 2 6 0"/>
    <path d="M137 117l3-9 4 6 4-8 4 8 4-6 3 9"/>
    <path d="M140 114l-2-4M156 114l2-4M148 110l0-4"/>
    <path d="M132 144l-6 30 14-2 4-20"/>
    <path d="M164 144l6 30-14-2-4-20"/>
    <path d="M138 148l20 0"/>
  </Doodle>
);

// 7. Traktor
const ArtTractor = ({ className }) => (
  <Doodle className={className}>
    <path d="M40 130h70v-30h-30l-10 14h-30z"/>
    <rect x="50" y="106" width="22" height="14"/>
    <path d="M50 113h22"/>
    <circle cx="65" cy="148" r="14"/>
    <circle cx="65" cy="148" r="6"/>
    <path d="M65 134v28M51 148h28M55 138l20 20M75 138 55 158"/>
    <circle cx="125" cy="148" r="22"/>
    <circle cx="125" cy="148" r="10"/>
    <path d="M125 126v44M103 148h44M110 133l30 30M140 133l-30 30"/>
    <path d="M40 105c-6 0-10-4-10-10s4-10 10-10"/>
    <path d="M30 95l-10-2"/>
  </Doodle>
);

// 8. Osterhase
const ArtBunny = ({ className }) => (
  <Doodle className={className}>
    <path d="M80 80l-8-40c0-8 4-12 8-12s8 4 8 12z"/>
    <path d="M120 80l-8-40c0-8 4-12 8-12s8 4 8 12z"/>
    <ellipse cx="100" cy="100" rx="28" ry="26"/>
    <circle cx="90" cy="98" r="1.8" fill="#1F2A44"/>
    <circle cx="110" cy="98" r="1.8" fill="#1F2A44"/>
    <path d="M97 108c2 3 4 3 6 0"/>
    <path d="M100 112l-6 8h12z"/>
    <path d="M82 116l-12 4M82 119l-12 6M118 116l12 4M118 119l12 6"/>
    <path d="M75 130c5 14 14 22 25 22s20-8 25-22"/>
    <ellipse cx="100" cy="160" rx="22" ry="18"/>
    <path d="M88 158l4-6 4 6-4 4zM112 158l-4-6-4 6 4 4z"/>
    <circle cx="100" cy="160" r="2"/>
    <path d="M85 170c-2 4-2 8 2 10M115 170c2 4 2 8-2 10"/>
  </Doodle>
);

// 9. Rakete
const ArtRocket = ({ className }) => (
  <Doodle className={className}>
    <path d="M100 30c-12 12-20 26-20 50v40h40v-40c0-24-8-38-20-50z"/>
    <circle cx="100" cy="80" r="8"/>
    <path d="M80 110l-15 15v18l15-8M120 110l15 15v18l-15-8"/>
    <path d="M88 130h24v18l-12 12-12-12z"/>
    <path d="M95 148l5 5 5-5"/>
    <circle cx="55" cy="50" r="2" fill="#1F2A44"/>
    <circle cx="160" cy="60" r="2" fill="#1F2A44"/>
    <circle cx="40" cy="100" r="2" fill="#1F2A44"/>
    <circle cx="170" cy="120" r="2" fill="#1F2A44"/>
    <path d="M150 30l3 3 3-3 3 3M30 70l3 3 3-3 3 3M165 90l3 3 3-3 3 3"/>
  </Doodle>
);

// 10. Mandala Blume
const ArtMandala = ({ className }) => (
  <Doodle className={className}>
    <circle cx="100" cy="100" r="65"/>
    <circle cx="100" cy="100" r="50"/>
    <circle cx="100" cy="100" r="35"/>
    <circle cx="100" cy="100" r="20"/>
    <circle cx="100" cy="100" r="6"/>
    {[0,45,90,135,180,225,270,315].map(a => (
      <g key={a} transform={`rotate(${a} 100 100)`}>
        <path d="M100 35c-6 5-6 15 0 22 6-7 6-17 0-22z"/>
        <circle cx="100" cy="50" r="3"/>
        <path d="M100 65v15"/>
      </g>
    ))}
    {[22.5,67.5,112.5,157.5,202.5,247.5,292.5,337.5].map(a => (
      <g key={a} transform={`rotate(${a} 100 100)`}>
        <path d="M100 50l-4 12 4 6 4-6z"/>
      </g>
    ))}
  </Doodle>
);

// 11. Drachen (kite / dragon variant, generic)
const ArtKite = ({ className }) => (
  <Doodle className={className}>
    <path d="M100 40 65 100l35 60 35-60z"/>
    <path d="M100 40v120M65 100h70"/>
    <path d="M100 160c-3 8 3 14 0 22s3 14 0 22"/>
    <path d="M97 184l-4 4M103 184l4 4M97 200l-4 4M103 200l4 4"/>
    <path d="M85 80l-10-6M115 80l10-6M85 120l-10 6M115 120l10 6"/>
  </Doodle>
);

// 12. Eule (Schule)
const ArtOwl = ({ className }) => (
  <Doodle className={className}>
    <ellipse cx="100" cy="110" rx="40" ry="50"/>
    <path d="M68 80c-6-12-2-22 6-26 8-4 16 0 18 8M132 80c6-12 2-22-6-26-8-4-16 0-18 8"/>
    <circle cx="86" cy="98" r="14"/>
    <circle cx="114" cy="98" r="14"/>
    <circle cx="86" cy="98" r="5" fill="#1F2A44"/>
    <circle cx="114" cy="98" r="5" fill="#1F2A44"/>
    <path d="M93 116l7 8 7-8"/>
    <path d="M70 130c5 4 10 4 14 0M116 130c4 4 9 4 14 0"/>
    <path d="M75 150c5 5 12 8 25 8s20-3 25-8"/>
    <path d="M88 162v10M100 165v12M112 162v10"/>
    <path d="M60 80l-8-6M140 80l8-6"/>
  </Doodle>
);

const ART_BY_KEY = {
  unicorn: ArtUnicorn,
  dino: ArtDino,
  cat: ArtCat,
  santa: ArtSanta,
  soccer: ArtSoccer,
  princess: ArtPrincess,
  tractor: ArtTractor,
  bunny: ArtBunny,
  rocket: ArtRocket,
  mandala: ArtMandala,
  kite: ArtKite,
  owl: ArtOwl,
};

const ColoringArt = ({ artKey, className }) => {
  const C = ART_BY_KEY[artKey] || ArtMandala;
  return <C className={className} />;
};

// Tiny decorative SVGs for chrome
const TinyStar = ({ className = "", size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" className={className}
       fill="none" stroke="currentColor" strokeWidth="2"
       strokeLinecap="round" strokeLinejoin="round">
    <path d="m12 3 2.5 6 6.5.6-5 4.4 1.5 6.4L12 17l-5.5 3.4L8 14 3 9.6l6.5-.6z"/>
  </svg>
);
const TinyCloud = ({ className = "", size = 28 }) => (
  <svg width={size} height={size} viewBox="0 0 32 24" className={className}
       fill="none" stroke="currentColor" strokeWidth="1.8"
       strokeLinecap="round" strokeLinejoin="round">
    <path d="M8 18a6 6 0 1 1 2-11.6A7 7 0 0 1 24 11a4.5 4.5 0 0 1-1 8.9H8z"/>
  </svg>
);
const TinyBrush = ({ className = "", size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" className={className}
       fill="none" stroke="currentColor" strokeWidth="2"
       strokeLinecap="round" strokeLinejoin="round">
    <path d="M9 12a3 3 0 1 1-4 4c1.2 0 2-1 2-2s1-2 2-2z"/>
    <path d="m9 12 9.5-9.5a2 2 0 1 1 3 3L12 15z"/>
  </svg>
);

Object.assign(window, {
  ColoringArt, ART_BY_KEY,
  ArtUnicorn, ArtDino, ArtCat, ArtSanta, ArtSoccer, ArtPrincess,
  ArtTractor, ArtBunny, ArtRocket, ArtMandala, ArtKite, ArtOwl,
  TinyStar, TinyCloud, TinyBrush, Doodle,
});