// illustrations.jsx
// Hand-built flat illustrations of the baby + dog story.
// Warm, childlike, no outlines — like spot art in a picture book.
// Each fills its container (preserveAspectRatio slice). Exported to window.

const ILLO = {
  skin: '#F1C9A5', skinShade: '#E6B98F', cheek: '#EC9C7C',
  hair: '#5B4636', hairLt: '#7A5E49',
  dog: '#C46B43', dogDk: '#A0512C', dogBelly: '#EAC9A2', dogNose: '#3A2A20',
  ink: '#3A2A20',
  cream: '#FBF7EF',
  leaf: '#83925C', leafDk: '#5F6B43',
  sky: '#CFE0E6', skyDk: '#AEC8D2',
  heart: '#C4613A',
  blush: '#E8A07E',
};

function Svg({ children, bg }) {
  return (
    <svg viewBox="0 0 100 100" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" style={{ display: 'block' }}>
      <rect width="100" height="100" fill={bg}/>
      {children}
    </svg>
  );
}

// 1 — Nose to nose (the love shot)
function IlloNoseToNose() {
  return (
    <Svg bg="#F6E5CC">
      {/* heart */}
      <path d="M50 12 C47 7 40 7 39 13 C38 18 46 23 50 26 C54 23 62 18 61 13 C60 7 53 7 50 12 Z" fill={ILLO.heart} opacity="0.92"/>
      {/* baby head */}
      <circle cx="34" cy="60" r="18" fill={ILLO.skin}/>
      {/* hair — soft tuft on TOP of the head */}
      <path d="M22 50 C22 41 27 37 34 37 C41 37 46 41 46 50 C42 45 38 44 34 44 C30 44 26 45 22 50 Z" fill={ILLO.hair}/>
      <circle cx="34" cy="38" r="3.5" fill={ILLO.hair}/>
      {/* cheek */}
      <circle cx="27" cy="64" r="4.5" fill={ILLO.cheek} opacity="0.55"/>
      {/* happy closed eye facing the dog */}
      <path d="M39 57 Q42 54 45 57" stroke={ILLO.ink} strokeWidth="2" fill="none" strokeLinecap="round"/>
      {/* small smile */}
      <path d="M38 66 Q42 70 47 66" stroke={ILLO.ink} strokeWidth="2" fill="none" strokeLinecap="round"/>
      {/* dog head (clearly to the right, not overlapping baby's face) */}
      <circle cx="73" cy="60" r="16" fill={ILLO.dog}/>
      {/* floppy ears */}
      <path d="M61 50 C56 46 56 56 62 58 C62 55 61 52 61 50 Z" fill={ILLO.dogDk}/>
      <path d="M85 50 C90 46 90 56 84 58 C84 55 85 52 85 50 Z" fill={ILLO.dogDk}/>
      {/* muzzle reaching gently toward baby */}
      <ellipse cx="62" cy="64" rx="9" ry="7" fill={ILLO.dogBelly}/>
      <circle cx="56" cy="64" r="3.2" fill={ILLO.dogNose}/>
      {/* happy closed dog eye */}
      <path d="M68 57 Q71 54 74 57" stroke={ILLO.ink} strokeWidth="2" fill="none" strokeLinecap="round"/>
    </Svg>
  );
}

// 2 — The terrier (scruffy little dog, sitting)
function IlloTerrier() {
  return (
    <Svg bg="#EFE6D0">
      {/* ground */}
      <ellipse cx="52" cy="88" rx="34" ry="6" fill={ILLO.leafDk} opacity="0.18"/>
      {/* tail */}
      <path d="M74 64 C86 60 88 48 82 44 C82 52 78 58 70 62 Z" fill={ILLO.dog}/>
      {/* body */}
      <path d="M34 84 C28 64 34 52 50 52 C66 52 72 64 68 84 Z" fill={ILLO.dog}/>
      {/* front legs */}
      <rect x="42" y="74" width="7" height="14" rx="3.5" fill={ILLO.dogDk}/>
      <rect x="54" y="74" width="7" height="14" rx="3.5" fill={ILLO.dogDk}/>
      {/* head */}
      <circle cx="51" cy="42" r="18" fill={ILLO.dog}/>
      {/* scruffy ears (perky, a bit floppy) */}
      <path d="M36 30 C32 18 40 16 44 26 C42 28 39 29 36 30 Z" fill={ILLO.dogDk}/>
      <path d="M66 30 C70 18 62 16 58 26 C60 28 63 29 66 30 Z" fill={ILLO.dogDk}/>
      {/* muzzle */}
      <ellipse cx="51" cy="48" rx="10" ry="8" fill={ILLO.dogBelly}/>
      <circle cx="51" cy="44" r="3.2" fill={ILLO.dogNose}/>
      {/* eyes */}
      <circle cx="44" cy="40" r="2.6" fill={ILLO.ink}/>
      <circle cx="58" cy="40" r="2.6" fill={ILLO.ink}/>
      {/* scruffy fringe */}
      <path d="M40 28 L44 34 L48 28 L52 34 L56 28 L60 34 L62 30" stroke={ILLO.dogDk} strokeWidth="2.4" fill="none" strokeLinejoin="round" strokeLinecap="round"/>
      {/* tongue */}
      <path d="M49 50 Q51 56 53 50 Z" fill={ILLO.cheek}/>
    </Svg>
  );
}

// 3 — Baby pointing: "dah!"
function IlloDah() {
  return (
    <Svg bg="#F4DFC6">
      {/* speech bubble */}
      <g>
        <rect x="54" y="14" width="38" height="26" rx="9" fill={ILLO.cream}/>
        <path d="M60 38 L58 47 L68 39 Z" fill={ILLO.cream}/>
        <text x="73" y="33" textAnchor="middle" fontFamily="Georgia, serif" fontStyle="italic" fontSize="16" fill={ILLO.heart}>dah!</text>
      </g>
      {/* body / onesie */}
      <path d="M30 92 C26 70 32 60 44 60 C56 60 62 70 58 92 Z" fill={ILLO.dog} opacity="0.85"/>
      {/* pointing arm up-right */}
      <path d="M52 66 L70 50" stroke={ILLO.skin} strokeWidth="8" fill="none" strokeLinecap="round"/>
      <circle cx="71" cy="49" r="4.5" fill={ILLO.skin}/>
      {/* resting arm */}
      <path d="M34 70 L28 82" stroke={ILLO.skin} strokeWidth="8" fill="none" strokeLinecap="round"/>
      {/* head */}
      <circle cx="40" cy="42" r="19" fill={ILLO.skin}/>
      {/* hair */}
      <path d="M24 34 C26 22 40 19 50 26 C42 25 32 27 27 36 Z" fill={ILLO.hair}/>
      <circle cx="40" cy="24" r="4.5" fill={ILLO.hair}/>
      {/* cheek */}
      <circle cx="32" cy="48" r="5" fill={ILLO.cheek} opacity="0.55"/>
      {/* open happy eye */}
      <circle cx="44" cy="42" r="2.6" fill={ILLO.ink}/>
      {/* open mouth (saying dah) */}
      <ellipse cx="44" cy="51" rx="3.4" ry="4" fill={ILLO.dogNose} opacity="0.8"/>
    </Svg>
  );
}

// 4 — Window watch (dog & baby at the window)
function IlloWindow() {
  return (
    <Svg bg="#E7EBE0">
      {/* window */}
      <rect x="20" y="14" width="60" height="58" rx="4" fill={ILLO.sky}/>
      <rect x="20" y="14" width="60" height="58" rx="4" fill="none" stroke={ILLO.cream} strokeWidth="5"/>
      <rect x="48" y="14" width="4" height="58" fill={ILLO.cream}/>
      <rect x="20" y="40" width="60" height="4" fill={ILLO.cream}/>
      {/* sun + bird outside */}
      <circle cx="34" cy="28" r="6" fill="#EAC15E"/>
      <path d="M60 30 Q63 27 66 30 Q69 27 72 30" stroke={ILLO.leafDk} strokeWidth="2" fill="none" strokeLinecap="round"/>
      {/* sill */}
      <rect x="14" y="70" width="72" height="8" rx="3" fill={ILLO.cream}/>
      {/* dog seen from behind, paws up on sill */}
      <path d="M44 78 C40 60 46 54 56 54 C66 54 70 62 66 78 Z" fill={ILLO.dog}/>
      <circle cx="55" cy="50" r="12" fill={ILLO.dog}/>
      <path d="M45 44 C42 36 49 35 51 42 Z" fill={ILLO.dogDk}/>
      <path d="M65 44 C68 36 61 35 59 42 Z" fill={ILLO.dogDk}/>
      {/* paws on sill */}
      <rect x="44" y="70" width="7" height="10" rx="3.5" fill={ILLO.dogDk}/>
      <rect x="59" y="70" width="7" height="10" rx="3.5" fill={ILLO.dogDk}/>
      {/* wagging tail */}
      <path d="M66 66 C78 62 80 52 74 50 C75 58 72 62 64 66 Z" fill={ILLO.dog}/>
    </Svg>
  );
}

// 5 — First walk (pram + dog on a leash)
function IlloWalk() {
  return (
    <Svg bg="#F2E2D2">
      {/* ground */}
      <rect x="0" y="86" width="100" height="14" fill={ILLO.leaf} opacity="0.22"/>
      {/* pram tub */}
      <path d="M16 56 L50 56 C50 70 41 76 31 76 L29 76 C21 76 16 66 16 56 Z" fill={ILLO.dog}/>
      {/* canopy hood (back-left) */}
      <path d="M16 56 C13 37 35 33 43 52 Z" fill={ILLO.dogDk}/>
      {/* baby peeking out the front */}
      <circle cx="44" cy="52" r="7" fill={ILLO.skin}/>
      <circle cx="47" cy="51" r="1.5" fill={ILLO.ink}/>
      <path d="M38 48 C39 43 46 42 49 46 C45 45 41 46 39 49 Z" fill={ILLO.hair}/>
      {/* handle bar up to the right */}
      <path d="M50 56 L66 38" stroke={ILLO.ink} strokeWidth="3" fill="none" strokeLinecap="round"/>
      <circle cx="67" cy="37" r="3" fill={ILLO.dogDk}/>
      {/* wheels */}
      <circle cx="27" cy="82" r="8" fill={ILLO.ink}/>
      <circle cx="27" cy="82" r="3" fill={ILLO.cream}/>
      <circle cx="45" cy="82" r="8" fill={ILLO.ink}/>
      <circle cx="45" cy="82" r="3" fill={ILLO.cream}/>
      {/* leash to the dog */}
      <path d="M67 40 Q80 52 82 64" stroke={ILLO.ink} strokeWidth="2" fill="none" strokeLinecap="round"/>
      {/* trotting terrier */}
      <path d="M72 82 C68 70 74 64 82 64 C90 64 94 72 90 82 Z" fill={ILLO.dog}/>
      <rect x="75" y="78" width="5" height="8" rx="2.5" fill={ILLO.dogDk}/>
      <rect x="84" y="78" width="5" height="8" rx="2.5" fill={ILLO.dogDk}/>
      <path d="M72 66 C64 62 64 54 70 54 C68 60 70 64 74 66 Z" fill={ILLO.dog}/>
      <circle cx="89" cy="60" r="9" fill={ILLO.dog}/>
      <path d="M83 54 C81 47 87 47 88 53 Z" fill={ILLO.dogDk}/>
      <path d="M95 54 C97 47 91 47 90 53 Z" fill={ILLO.dogDk}/>
      <circle cx="92" cy="60" r="2" fill={ILLO.ink}/>
      <circle cx="84" cy="61" r="2.6" fill={ILLO.dogNose}/>
    </Svg>
  );
}

// 6 — Good night (baby asleep with plush dog)
function IlloGoodnight() {
  return (
    <Svg bg="#E6DEEA">
      {/* moon */}
      <path d="M80 22 A12 12 0 1 0 80 46 A9 9 0 1 1 80 22 Z" fill="#EAD79A"/>
      {/* stars */}
      <circle cx="24" cy="20" r="1.6" fill={ILLO.cream}/>
      <circle cx="40" cy="14" r="1.2" fill={ILLO.cream}/>
      <circle cx="60" cy="24" r="1.4" fill={ILLO.cream}/>
      {/* pillow */}
      <ellipse cx="40" cy="58" rx="22" ry="12" fill={ILLO.cream}/>
      {/* blanket */}
      <path d="M8 92 C8 74 24 68 50 68 C76 68 92 74 92 92 Z" fill={ILLO.dog} opacity="0.85"/>
      <path d="M8 92 C8 80 24 76 50 76" stroke={ILLO.cream} strokeWidth="3" fill="none" opacity="0.6"/>
      {/* baby head on pillow */}
      <circle cx="38" cy="54" r="16" fill={ILLO.skin}/>
      <path d="M24 48 C26 38 38 35 47 41 C39 40 30 42 26 50 Z" fill={ILLO.hair}/>
      {/* closed eye */}
      <path d="M40 54 Q44 57 48 54" stroke={ILLO.ink} strokeWidth="2" fill="none" strokeLinecap="round"/>
      <circle cx="33" cy="58" r="4" fill={ILLO.cheek} opacity="0.5"/>
      {/* plush dog tucked beside */}
      <circle cx="64" cy="62" r="11" fill={ILLO.dogBelly}/>
      <path d="M55 56 C52 49 59 48 61 54 Z" fill={ILLO.dog}/>
      <path d="M73 56 C76 49 69 48 67 54 Z" fill={ILLO.dog}/>
      <circle cx="60" cy="62" r="1.8" fill={ILLO.ink}/>
      <circle cx="68" cy="62" r="1.8" fill={ILLO.ink}/>
      <circle cx="64" cy="66" r="2.2" fill={ILLO.dogNose}/>
      {/* zzz */}
      <text x="78" y="60" fontFamily="Georgia, serif" fontStyle="italic" fontSize="11" fill={ILLO.cream}>z</text>
      <text x="84" y="52" fontFamily="Georgia, serif" fontStyle="italic" fontSize="8" fill={ILLO.cream}>z</text>
    </Svg>
  );
}

// Small standalone trotting terrier for hook/end (transparent bg)
function TerrierMini({ size = 90, color = ILLO.dog, dark = ILLO.dogDk, nose = ILLO.dogNose, ink = ILLO.ink }) {
  return (
    <svg width={size} height={size * 0.82} viewBox="0 0 100 82" style={{ display: 'block', overflow: 'visible' }}>
      {/* tail up */}
      <path d="M74 44 C88 38 90 24 82 20 C83 30 79 38 68 42 Z" fill={color}/>
      {/* body */}
      <path d="M30 74 C24 52 32 40 50 40 C68 40 76 52 70 74 Z" fill={color}/>
      {/* legs */}
      <rect x="36" y="62" width="7" height="16" rx="3.5" fill={dark}/>
      <rect x="50" y="62" width="7" height="16" rx="3.5" fill={dark}/>
      <rect x="60" y="62" width="7" height="16" rx="3.5" fill={dark}/>
      {/* head */}
      <circle cx="44" cy="34" r="18" fill={color}/>
      {/* ears */}
      <path d="M30 22 C26 10 34 9 38 19 Z" fill={dark}/>
      <path d="M58 22 C62 10 54 9 50 19 Z" fill={dark}/>
      {/* muzzle */}
      <ellipse cx="40" cy="40" rx="11" ry="8" fill={ILLO.dogBelly}/>
      <circle cx="33" cy="40" r="3.4" fill={nose}/>
      {/* eye */}
      <circle cx="46" cy="32" r="2.6" fill={ink}/>
      {/* scruffy fringe */}
      <path d="M34 20 L38 26 L42 20 L46 26 L50 20 L54 26" stroke={dark} strokeWidth="2.4" fill="none" strokeLinejoin="round" strokeLinecap="round"/>
    </svg>
  );
}

Object.assign(window, {
  ILLO,
  IlloNoseToNose, IlloTerrier, IlloDah, IlloWindow, IlloWalk, IlloGoodnight,
  TerrierMini,
});
