// illustrations.jsx — editorial family scene + dachshund variants + animations

// Resource resolvers — use bundled blob URLs when present (standalone export),
// otherwise fall back to the on-disk asset path (working multi-file version).
function _wallpaperUrl() {
  return (window.__resources && window.__resources.wallpaper) || 'assets/wallpaper-bassotti.jpg';
}
function _famigliaUrl() {
  return (window.__resources && window.__resources.famiglia) || 'assets/famiglia.jpg';
}

// ─────────────────────────────────────────────────────────────
// Family scene — Omar, Camilla, Tullia, e lei in arrivo
// Editorial line + flat fill, warm palette
// ─────────────────────────────────────────────────────────────
function FamilyScene({ width = '100%', maxW = 520, style = {} }) {
  return (
    <svg
      viewBox="0 0 600 520"
      width={width}
      style={{ maxWidth: maxW, display: 'block', ...style }}
      xmlns="http://www.w3.org/2000/svg"
    >
      <defs>
        <filter id="fs-paper" x="0" y="0" width="100%" height="100%">
          <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" seed="11" />
          <feColorMatrix values="0 0 0 0 0.30  0 0 0 0 0.18  0 0 0 0 0.10  0 0 0 0.18 0" />
          <feComposite in2="SourceGraphic" operator="in" />
        </filter>
      </defs>

      {/* Sun — low, warm */}
      <circle cx="430" cy="270" r="120" fill={T.butter} opacity="0.55" />
      <circle cx="430" cy="270" r="90"  fill={T.butter} opacity="0.7" />

      {/* Hill ground */}
      <path d="M -20 420 Q 200 360, 320 400 Q 460 440, 620 380 L 620 540 L -20 540 Z" fill={T.sage} opacity="0.65" />
      <path d="M -20 460 Q 240 410, 380 440 Q 500 460, 620 430 L 620 540 L -20 540 Z" fill={T.sageDeep} opacity="0.5" />

      {/* Flowering branch top-left */}
      <g stroke={T.coat} strokeWidth="1.4" fill="none" strokeLinecap="round">
        <path d="M -10 70 Q 60 85, 120 60" />
        <path d="M 40 78 Q 36 60, 30 50" />
        <path d="M 80 70 Q 84 52, 78 40" />
      </g>
      <circle cx="32" cy="48" r="5" fill={T.terracotta} />
      <circle cx="80" cy="38" r="5" fill={T.lavender} />
      <circle cx="120" cy="60" r="4" fill={T.butter} />

      {/* Bird */}
      <path d="M 470 90 Q 482 80, 494 90 Q 500 84, 506 90 Q 518 80, 530 90"
        fill="none" stroke={T.coat} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />

      {/* ─── CAMILLA (left) ─── */}
      <g transform="translate(220, 150)">
        {/* dress / body — soft white with belly curve */}
        <path d="
          M 10 130
          C  4 90, 4 60, 22 40
          C  30 50, 38 50, 48 40
          C  68 60, 74 95, 78 130
          C  82 200, 76 270, 60 270
          L  18 270
          C   8 250, 4 200, 10 130 Z"
          fill={T.paper} stroke={T.coat} strokeWidth="1.6" strokeLinejoin="round" />

        {/* belly suggestion */}
        <path d="M 18 180 Q 8 215, 22 250" fill="none" stroke={T.coat} strokeWidth="1.2" strokeLinecap="round" opacity="0.5" />

        {/* neckline */}
        <path d="M 22 40 Q 36 56, 48 40" fill="none" stroke={T.coat} strokeWidth="1.2" />

        {/* head */}
        <circle cx="36" cy="22" r="22" fill="#E9C9A6" stroke={T.coat} strokeWidth="1.5" />
        {/* curly hair — small loops on top */}
        <g fill={T.coat}>
          <circle cx="20" cy="8" r="7" />
          <circle cx="30" cy="2" r="7" />
          <circle cx="42" cy="0" r="7" />
          <circle cx="54" cy="6" r="7" />
          <circle cx="58" cy="18" r="6" />
          <circle cx="16" cy="20" r="5" />
        </g>
        {/* tiny smile + closed eyes (hinted) */}
        <path d="M 28 26 q 4 2 8 0" stroke={T.coat} strokeWidth="1" fill="none" strokeLinecap="round" />
        <path d="M 25 18 q 3 -2 6 0" stroke={T.coat} strokeWidth="1" fill="none" strokeLinecap="round" />
        <path d="M 40 18 q 3 -2 6 0" stroke={T.coat} strokeWidth="1" fill="none" strokeLinecap="round" />

        {/* arm — hand on belly */}
        <path d="M 18 90 Q -2 140, 14 200 Q 26 215, 38 210"
          fill={T.paper} stroke={T.coat} strokeWidth="1.6" strokeLinejoin="round" />
        <ellipse cx="40" cy="212" rx="7" ry="6" fill="#E9C9A6" stroke={T.coat} strokeWidth="1.2" />
      </g>

      {/* ─── OMAR (right) — slightly behind, arm around Camilla ─── */}
      <g transform="translate(308, 162)">
        {/* shirt body — light dusty blue */}
        <path d="
          M 10 130
          C  6  90, 6  60, 22 38
          C  30 48, 40 48, 50 38
          C  68 60, 74 90, 78 130
          C  82 210, 80 270, 70 270
          L  16 270
          C   8 250, 4 200, 10 130 Z"
          fill={T.dustyBlue} stroke={T.coat} strokeWidth="1.6" strokeLinejoin="round" />
        {/* shirt stripes */}
        <g stroke="rgba(58,36,24,0.18)" strokeWidth="1">
          <line x1="14" y1="80"  x2="78" y2="80" />
          <line x1="12" y1="110" x2="80" y2="110" />
          <line x1="10" y1="140" x2="82" y2="140" />
          <line x1="10" y1="170" x2="82" y2="170" />
          <line x1="10" y1="200" x2="82" y2="200" />
          <line x1="10" y1="230" x2="82" y2="230" />
        </g>
        {/* neck open shirt V */}
        <path d="M 22 38 L 36 64 L 50 38" fill="#D9A47C" stroke={T.coat} strokeWidth="1.4" strokeLinejoin="round" />

        {/* head */}
        <circle cx="36" cy="22" r="22" fill="#D9A47C" stroke={T.coat} strokeWidth="1.5" />
        {/* close-cropped hair */}
        <path d="M 14 18 Q 36 -10, 58 18 Q 56 4, 36 0 Q 16 4, 14 18 Z" fill={T.coat} />
        {/* glasses */}
        <g fill="none" stroke={T.coat} strokeWidth="1.4">
          <circle cx="26" cy="22" r="5.5" />
          <circle cx="46" cy="22" r="5.5" />
          <line x1="31.5" y1="22" x2="40.5" y2="22" />
        </g>
        {/* smile */}
        <path d="M 28 32 q 4 3 8 0" stroke={T.coat} strokeWidth="1" fill="none" strokeLinecap="round" />

        {/* arm around Camilla — reaches leftward over her shoulder */}
        <path d="M 18 80 Q -32 110, -56 130 Q -50 142, -36 138 Q -8 130, 14 120"
          fill={T.dustyBlue} stroke={T.coat} strokeWidth="1.6" strokeLinejoin="round" />
        <ellipse cx="-44" cy="134" rx="8" ry="6" fill="#D9A47C" stroke={T.coat} strokeWidth="1.2" transform="rotate(-10 -44 134)" />
      </g>

      {/* ─── TULLIA the dachshund — at their feet ─── */}
      <g transform="translate(360, 420)">
        <DachshundCompact size={140} />
      </g>

      {/* Soft small sprig bottom-left */}
      <g transform="translate(60, 440)">
        <path d="M 0 60 Q 0 30, 0 0" stroke={T.sageDeep} strokeWidth="1.2" fill="none" strokeLinecap="round" />
        <ellipse cx="-10" cy="20" rx="9" ry="3.5" fill={T.sage} transform="rotate(-30 -10 20)" />
        <ellipse cx="10" cy="40" rx="9" ry="3.5" fill={T.sage} transform="rotate(30 10 40)" />
      </g>
    </svg>
  );
}

// Tullia rendered inline at a controllable size, looking up
function DachshundCompact({ size = 100 }) {
  const k = size / 160;
  return (
    <g transform={`scale(${k})`}>
      {/* shadow */}
      <ellipse cx="60" cy="78" rx="60" ry="6" fill={T.coat} opacity="0.18" />
      {/* body */}
      <path d="M 8 50 Q 4 36, 18 32 L 92 32 Q 116 30, 124 46 Q 124 60, 110 64 L 24 64 Q 8 64, 8 50 Z" fill={T.coat} />
      {/* belly highlight */}
      <path d="M 20 56 Q 60 64, 100 56" fill="none" stroke={T.coatTan} strokeWidth="1.2" opacity="0.55" />
      {/* head turned toward viewer */}
      <path d="M 108 28 Q 138 20, 142 46 Q 142 62, 124 64 Q 108 60, 108 28 Z" fill={T.coat} />
      {/* ear floppy */}
      <path d="M 114 30 Q 102 36, 100 62 Q 110 62, 116 50 Z" fill={T.coatLight} />
      {/* tan muzzle */}
      <ellipse cx="138" cy="50" rx="6" ry="4" fill={T.coatTan} />
      {/* nose */}
      <circle cx="142" cy="50" r="2.5" fill={T.ink} />
      {/* eye */}
      <circle cx="124" cy="40" r="2" fill={T.ink} />
      <circle cx="124" cy="39" r="0.6" fill={T.cream} />
      {/* tan eyebrow */}
      <ellipse cx="124" cy="34" rx="3" ry="1" fill={T.coatTan} opacity="0.7" />
      {/* legs */}
      <rect x="22" y="60" width="6" height="18" rx="2" fill={T.coat} />
      <rect x="38" y="60" width="6" height="18" rx="2" fill={T.coat} />
      <rect x="86" y="60" width="6" height="18" rx="2" fill={T.coat} />
      <rect x="102" y="60" width="6" height="18" rx="2" fill={T.coat} />
      {/* tail wagging */}
      <path d="M 8 46 Q -6 38, -2 26" stroke={T.coat} strokeWidth="5" fill="none" strokeLinecap="round" />
      {/* collar */}
      <rect x="116" y="58" width="14" height="3" fill={T.terracotta} />
      <circle cx="123" cy="63" r="2" fill={T.butter} />
    </g>
  );
}

// ─────────────────────────────────────────────────────────────
// Running-dachshund variants — chocolate, four illustration styles
// ─────────────────────────────────────────────────────────────

// Variant A · classic side silhouette
function DachshundA({ size = 80, color = T.coat }) {
  return (
    <svg viewBox="0 0 160 80" width={size} style={{ display: 'block' }}>
      <ellipse cx="80" cy="68" rx="62" ry="4" fill={color} opacity="0.18" />
      <path d="M 8 42 Q 4 30, 18 28 L 110 28 Q 132 26, 140 38 Q 140 50, 124 54 L 22 54 Q 8 54, 8 42 Z" fill={color} />
      <path d="M 130 24 Q 154 20, 154 40 Q 154 52, 138 56 Q 130 56, 130 24 Z" fill={color} />
      <path d="M 134 28 Q 124 32, 122 56 Q 132 56, 138 44 Z" fill={T.coatLight} />
      <rect x="26" y="52" width="6" height="22" rx="2" fill={color} />
      <rect x="42" y="52" width="6" height="22" rx="2" fill={color} />
      <rect x="100" y="52" width="6" height="22" rx="2" fill={color} />
      <rect x="118" y="52" width="6" height="22" rx="2" fill={color} />
      <path d="M 8 40 Q -6 30, -2 16" stroke={color} strokeWidth="4" fill="none" strokeLinecap="round" />
      <circle cx="148" cy="36" r="1.5" fill={T.cream} />
      <ellipse cx="154" cy="42" rx="2" ry="1.5" fill={T.coatTan} />
    </svg>
  );
}

// Variant B · running mid-stride, legs spread, snout up
function DachshundB({ size = 80, color = T.coat }) {
  return (
    <svg viewBox="0 0 180 90" width={size} style={{ display: 'block' }}>
      <ellipse cx="90" cy="80" rx="70" ry="3" fill={color} opacity="0.18" />
      <path d="M 12 44 Q 8 30, 22 28 L 118 26 Q 142 24, 150 36 Q 150 50, 134 54 L 26 56 Q 10 56, 12 44 Z" fill={color} />
      <path d="M 140 20 Q 168 18, 166 38 Q 164 52, 146 54 Q 138 56, 140 20 Z" fill={color} />
      <path d="M 144 24 Q 158 28, 168 22 Q 168 8, 156 14 Z" fill={T.coatLight} />
      {/* legs in stride */}
      <path d="M 30 52 L 18 78" stroke={color} strokeWidth="7" strokeLinecap="round" />
      <path d="M 50 54 L 60 80" stroke={color} strokeWidth="7" strokeLinecap="round" />
      <path d="M 108 54 L 100 82" stroke={color} strokeWidth="7" strokeLinecap="round" />
      <path d="M 126 54 L 138 82" stroke={color} strokeWidth="7" strokeLinecap="round" />
      <path d="M 12 38 Q -2 24, 6 8" stroke={color} strokeWidth="5" fill="none" strokeLinecap="round" />
      <circle cx="162" cy="32" r="1.5" fill={T.cream} />
      <ellipse cx="168" cy="38" rx="2" ry="1.5" fill={T.coatTan} />
    </svg>
  );
}

// Variant C · line drawing only — editorial sketch
function DachshundC({ size = 80, color = T.coat }) {
  return (
    <svg viewBox="0 0 170 80" width={size} style={{ display: 'block' }}>
      <g fill="none" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
        <path d="M 10 42 Q 6 28, 20 26 L 116 26 Q 140 24, 148 38 Q 148 52, 132 56 L 24 56 Q 8 56, 10 42 Z" />
        <path d="M 138 22 Q 162 20, 162 40 Q 162 52, 146 54" />
        <path d="M 142 26 Q 134 32, 132 56" />
        <line x1="30" y1="56" x2="30" y2="76" />
        <line x1="46" y1="56" x2="46" y2="76" />
        <line x1="104" y1="56" x2="104" y2="76" />
        <line x1="120" y1="56" x2="120" y2="76" />
        <path d="M 10 40 Q -4 30, 0 14" />
        <circle cx="155" cy="38" r="1.5" fill={color} />
      </g>
    </svg>
  );
}

// Variant D · sitting facing 3/4, fuller body, friendlier
function DachshundD({ size = 80, color = T.coat }) {
  return (
    <svg viewBox="0 0 120 110" width={size} style={{ display: 'block' }}>
      <ellipse cx="60" cy="100" rx="44" ry="3" fill={color} opacity="0.2" />
      {/* body sitting */}
      <ellipse cx="60" cy="76" rx="36" ry="22" fill={color} />
      {/* haunch */}
      <ellipse cx="34" cy="84" rx="14" ry="18" fill={color} />
      {/* chest */}
      <path d="M 80 60 Q 90 80, 76 96 L 62 96 Q 56 84, 60 70 Z" fill={color} />
      {/* head */}
      <ellipse cx="80" cy="44" rx="22" ry="20" fill={color} />
      {/* long muzzle */}
      <ellipse cx="100" cy="50" rx="10" ry="5" fill={color} />
      <ellipse cx="106" cy="51" rx="4" ry="2.5" fill={T.coatTan} />
      <circle cx="108" cy="49" r="1.6" fill={T.ink} />
      {/* ears long */}
      <path d="M 64 38 Q 56 56, 68 70 Q 76 60, 76 42 Z" fill={T.coatLight} />
      {/* eyes */}
      <circle cx="86" cy="40" r="1.8" fill={T.ink} />
      <ellipse cx="86" cy="34" rx="3" ry="1" fill={T.coatTan} opacity="0.7" />
      {/* front paws */}
      <ellipse cx="62" cy="98" rx="5" ry="3" fill={color} />
      <ellipse cx="74" cy="98" rx="5" ry="3" fill={color} />
      {/* collar */}
      <rect x="74" y="60" width="14" height="3" fill={T.terracotta} />
      <circle cx="81" cy="65" r="2" fill={T.butter} />
    </svg>
  );
}

// Variant E · curled up dozing
function DachshundE({ size = 80, color = T.coat }) {
  return (
    <svg viewBox="0 0 140 80" width={size} style={{ display: 'block' }}>
      <ellipse cx="70" cy="68" rx="56" ry="3" fill={color} opacity="0.18" />
      {/* curled body */}
      <path d="M 30 56 Q 10 30, 50 22 Q 90 16, 116 36 Q 128 50, 110 64 Q 80 70, 50 64 Q 32 60, 30 56 Z" fill={color} />
      {/* head tucked */}
      <ellipse cx="42" cy="50" rx="14" ry="12" fill={color} />
      <ellipse cx="32" cy="54" rx="6" ry="3" fill={T.coatTan} />
      {/* closed eye */}
      <path d="M 38 48 q 4 -1 8 0" stroke={T.ink} strokeWidth="1.2" fill="none" strokeLinecap="round" />
      {/* ear over head */}
      <path d="M 46 38 Q 56 38, 56 56 Q 50 56, 44 50 Z" fill={T.coatLight} />
      {/* tail curl on top */}
      <path d="M 114 40 Q 124 34, 116 22 Q 108 22, 108 32" fill="none" stroke={color} strokeWidth="4" strokeLinecap="round" />
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────
// Dachshund parade — horizontal looping animation
// children walk across the band from right to left forever
// ─────────────────────────────────────────────────────────────
function DachshundParade({ height = 90, speed = 36, variants }) {
  const list = variants || [DachshundA, DachshundB, DachshundC, DachshundD, DachshundE];
  // duplicate so the strip can loop seamlessly
  const items = [...list, ...list, ...list];
  return (
    <div style={{
      width: '100%', height, overflow: 'hidden', position: 'relative',
      maskImage: 'linear-gradient(to right, transparent, #000 8%, #000 92%, transparent)',
      WebkitMaskImage: 'linear-gradient(to right, transparent, #000 8%, #000 92%, transparent)',
    }}>
      <div style={{
        display: 'flex', gap: 80, alignItems: 'flex-end', height: '100%',
        animation: `parade ${speed}s linear infinite`,
        width: 'max-content',
      }}>
        {items.map((Comp, i) => (
          <div key={i} style={{
            transform: `translateY(${(i % 3) === 1 ? -4 : 0}px)`,
            animation: 'bounce 0.7s ease-in-out infinite',
            animationDelay: `${(i % 4) * 0.13}s`,
          }}>
            <Comp size={height * 0.95} />
          </div>
        ))}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Floating decorations — sprig, sun, bird, flower
// ─────────────────────────────────────────────────────────────
function Sun({ size = 56, color = T.terracotta, style = {} }) {
  return (
    <svg width={size} height={size * 0.6} viewBox="0 0 80 50" style={style}>
      <g fill="none" stroke={color} strokeWidth="1.2" strokeLinecap="round">
        <path d="M20 48 Q40 18 60 48" />
        <line x1="40" y1="8"  x2="40" y2="2" />
        <line x1="22" y1="14" x2="18" y2="9" />
        <line x1="58" y1="14" x2="62" y2="9" />
        <line x1="10" y1="28" x2="3"  y2="28" />
        <line x1="70" y1="28" x2="77" y2="28" />
      </g>
    </svg>
  );
}

function Sprig({ size = 60, color = T.sage, style = {}, flip = false }) {
  return (
    <svg width={size} height={size * 1.6} viewBox="0 0 60 96" style={{
      transform: flip ? 'scaleX(-1)' : 'none', ...style,
    }}>
      <g fill="none" stroke={color} strokeWidth="1.1" strokeLinecap="round">
        <path d="M30 95 C 30 70, 30 40, 30 6" />
        <path d="M30 75 Q 14 70, 8 58" />
        <path d="M30 60 Q 46 55, 52 42" />
        <path d="M30 44 Q 16 40, 10 28" />
      </g>
      <g fill={color} opacity="0.45">
        <ellipse cx="11" cy="56" rx="6" ry="3" transform="rotate(-30 11 56)" />
        <ellipse cx="49" cy="40" rx="6" ry="3" transform="rotate(30 49 40)" />
        <ellipse cx="13" cy="26" rx="6" ry="3" transform="rotate(-30 13 26)" />
      </g>
    </svg>
  );
}

function Bird({ size = 24, color = T.inkSoft, style = {} }) {
  return (
    <svg width={size} height={size * 0.5} viewBox="0 0 44 22" style={style}>
      <path d="M2 14 Q 10 4, 18 12 Q 22 8, 26 12 Q 34 4, 42 14"
        fill="none" stroke={color} strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function Flower({ size = 60, petal = T.lavender, center = T.butter, style = {} }) {
  const petals = [0, 72, 144, 216, 288];
  return (
    <svg width={size} height={size} viewBox="0 0 80 80" style={style}>
      {petals.map((deg, i) => (
        <ellipse key={i} cx="40" cy="22" rx="8" ry="14"
          fill={petal} opacity="0.9"
          transform={`rotate(${deg} 40 40)`} />
      ))}
      <circle cx="40" cy="40" r="6" fill={center} />
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────
// Dachshund wallpaper — repeating chocolate-dachshund pattern
// that slowly drifts. Two layers for parallax.
// ─────────────────────────────────────────────────────────────
function DachshundWallpaper({
  height = '100%', position = 'absolute', inset = 0,
  size = 420, speed = 90, opacity = 1, style = {},
}) {
  return (
    <div style={{
      position, inset, width: '100%', height,
      pointerEvents: 'none', overflow: 'hidden',
      opacity,
      ...style,
    }}>
      <div className="dach-wallpaper" style={{
        position: 'absolute', inset: -size,
        backgroundImage: `url("${_wallpaperUrl()}")`,
        backgroundRepeat: 'repeat',
        backgroundSize: size + 'px auto',
        animation: `dachDrift ${speed}s linear infinite`,
      }} />
    </div>
  );
}

// A wide band: one big dachshund walks across the wallpaper background
function SingleDachWalk({ height = 160, dogSize = 130, speed = 22 }) {
  return (
    <div style={{
      width: '100%', height, position: 'relative', overflow: 'hidden',
      background: T.cream,
      borderTop: `1px solid ${T.hairline}`,
      borderBottom: `1px solid ${T.hairline}`,
    }}>
      {/* drifting wallpaper background, soft */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `url("${_wallpaperUrl()}")`,
        backgroundRepeat: 'repeat',
        backgroundSize: '460px auto',
        opacity: 0.18,
        animation: 'dachDrift 140s linear infinite',
      }} />
      {/* gentle vignette */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: 'radial-gradient(80% 70% at 50% 50%, rgba(245,238,223,0.0), rgba(245,238,223,0.65) 95%)',
      }} />
      {/* the lone walker */}
      <div style={{
        position: 'absolute', top: '50%',
        animation: `walkAcross ${speed}s linear infinite`,
        transform: 'translateY(-50%)',
      }}>
        <div style={{ animation: 'bounce 0.55s ease-in-out infinite' }}>
          <DachshundB size={dogSize} />
        </div>
      </div>
    </div>
  );
}

// Family photo — uploaded illustration of Omar, Camilla, Tullia
function FamilyPhoto({ rounded = 28, style = {}, frame = true }) {
  return (
    <div style={{
      width: '100%', maxWidth: 560,
      borderRadius: rounded,
      overflow: 'hidden',
      background: T.paper,
      padding: frame ? 14 : 0,
      boxShadow: frame
        ? '0 1px 0 rgba(58,36,24,0.04), 0 30px 80px rgba(58,36,24,0.16)'
        : 'none',
      ...style,
    }}>
      <img
        src={_famigliaUrl()}
        alt="Omar, Camilla e Tullia"
        style={{
          width: '100%', height: 'auto', display: 'block',
          borderRadius: Math.max(0, rounded - 12),
        }}
      />
    </div>
  );
}

// Tiny icon: single dachshund silhouette from the wallpaper, cropped
function SingleDachIcon({ size = 72 }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: 18,
      background: T.cream,
      backgroundImage: `url("${_wallpaperUrl()}")`,
      // crop to the middle dachshund on the bicycle (approx center of the wallpaper)
      backgroundSize: '320% auto',
      backgroundPosition: '49% 38%',
      backgroundRepeat: 'no-repeat',
      border: `1px solid ${T.hairline}`,
    }} />
  );
}

// Tiny icon: group of dachshunds — show a wider crop with multiple dogs
function GroupDachIcon({ size = 72 }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: 18,
      background: T.cream,
      backgroundImage: `url("${_wallpaperUrl()}")`,
      backgroundSize: '130% auto',
      backgroundPosition: '50% 50%',
      backgroundRepeat: 'no-repeat',
      border: `1px solid ${T.hairline}`,
    }} />
  );
}

Object.assign(window, {
  FamilyScene, DachshundCompact,
  DachshundA, DachshundB, DachshundC, DachshundD, DachshundE,
  DachshundParade, DachshundWallpaper, SingleDachWalk,
  FamilyPhoto, SingleDachIcon, GroupDachIcon,
  Sun, Sprig, Bird, Flower,
});
