// design-a.jsx — "Scrapbook"
// Paper background, washi tape, polaroids, marker fonts. The hand-drawn art
// is the hero — the pink "toys for sale" sign sits front-and-center.

const W_A = 1100;
const H_A = 3600;

function ScrapTape({ color, tilt = -8, top = -14, left = '40%', width = 120 }) {
  return (
    <div style={{
      position: 'absolute', top, left, width, height: 28,
      background: color, opacity: 0.85,
      transform: `translateX(-50%) rotate(${tilt}deg)`,
      boxShadow: '0 2px 6px rgba(0,0,0,0.08)',
      backgroundImage:
        'repeating-linear-gradient(90deg, transparent 0 8px, rgba(255,255,255,0.18) 8px 12px)',
      pointerEvents: 'none', zIndex: 3,
    }} />
  );
}

function Wiggle({ children, tilt = 0, style = {} }) {
  // Hoverable element that wiggles
  return (
    <div className="wiggle" style={{
      transform: `rotate(${tilt}deg)`,
      transition: 'transform 0.25s cubic-bezier(.4,1.6,.5,1)',
      ...style,
    }}>{children}</div>
  );
}

function CountdownCard_A({ palette }) {
  const c = useCountdown(SALE_DATE);
  const cells = [
    ['DAYS', c.days],
    ['HOURS', c.hours],
    ['MINS', c.mins],
    ['SECS', c.secs],
  ];
  return (
    <div style={{
      position: 'relative',
      background: palette.paper,
      border: `3px solid ${palette.ink}`,
      borderRadius: 8,
      padding: '22px 26px 18px',
      boxShadow: '6px 6px 0 ' + palette.ink,
      transform: 'rotate(-1.2deg)',
    }}>
      <ScrapTape color={palette.pop} tilt={6} top={-14} left="22%" width={110} />
      <div style={{
        fontFamily: '"Permanent Marker", cursive',
        fontSize: 22, color: palette.accent, letterSpacing: 1,
        textTransform: 'uppercase',
      }}>Sale starts in…</div>
      <div style={{ display: 'flex', gap: 14, marginTop: 12 }}>
        {cells.map(([label, v]) => (
          <div key={label} style={{
            flex: 1, textAlign: 'center',
            background: palette.bg,
            border: `2px dashed ${palette.ink}`,
            borderRadius: 6, padding: '10px 6px',
          }}>
            <div style={{
              fontFamily: '"Permanent Marker", cursive',
              fontSize: 44, lineHeight: 1, color: palette.primary,
              fontVariantNumeric: 'tabular-nums',
            }}>{String(v).padStart(2,'0')}</div>
            <div style={{
              fontFamily: '"Patrick Hand", cursive',
              fontSize: 14, color: palette.ink, letterSpacing: 2, marginTop: 4,
            }}>{label}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function StickyNote({ children, tilt = -2, color, palette, w = 260, h = 'auto', style = {} }) {
  return (
    <div style={{
      width: w, minHeight: h, padding: '18px 20px',
      background: color, color: palette.ink,
      borderRadius: 3, transform: `rotate(${tilt}deg)`,
      boxShadow: '4px 6px 12px rgba(0,0,0,0.10), inset 0 -10px 20px rgba(0,0,0,0.04)',
      fontFamily: '"Patrick Hand", cursive', fontSize: 20, lineHeight: 1.3,
      position: 'relative', ...style,
    }}>{children}</div>
  );
}

function Polaroid({ tilt = -3, caption, palette, children, w = 250 }) {
  return (
    <div style={{
      width: w, padding: 12, paddingBottom: 36, background: '#FFFEF8',
      transform: `rotate(${tilt}deg)`,
      boxShadow: '6px 8px 16px rgba(0,0,0,0.18)',
      border: '1px solid rgba(0,0,0,0.06)',
      position: 'relative',
    }}>
      <div style={{
        width: '100%', aspectRatio: '1 / 1',
        background: palette.bg,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        overflow: 'hidden',
      }}>{children}</div>
      <div style={{
        marginTop: 10, fontFamily: '"Patrick Hand", cursive',
        fontSize: 20, color: palette.ink, textAlign: 'center',
      }}>{caption}</div>
    </div>
  );
}

// Cartoon teddy bear character — featured hero plushie
function TeddyChar({ palette }) {
  const c = palette;
  return (
    <svg viewBox="0 0 220 240" width="100%" height="100%">
      <defs>
        <filter id="teddy-shadow-a" x="-20%" y="-20%" width="140%" height="140%">
          <feGaussianBlur stdDeviation="2"/>
        </filter>
      </defs>
      {/* feet */}
      <ellipse cx="80" cy="218" rx="26" ry="14" fill="#FFF8EC" stroke={c.ink} strokeWidth="4"/>
      <ellipse cx="140" cy="218" rx="26" ry="14" fill="#FFF8EC" stroke={c.ink} strokeWidth="4"/>
      <ellipse cx="80" cy="214" rx="12" ry="6" fill={c.primary} opacity="0.85"/>
      <ellipse cx="140" cy="214" rx="12" ry="6" fill={c.primary} opacity="0.85"/>
      {/* body */}
      <ellipse cx="110" cy="158" rx="62" ry="56" fill="#FFF8EC" stroke={c.ink} strokeWidth="4"/>
      {/* belly patch */}
      <ellipse cx="110" cy="170" rx="34" ry="32" fill={c.bg} stroke={c.ink} strokeWidth="2.5"/>
      {/* arms */}
      <ellipse cx="56" cy="146" rx="20" ry="28" fill="#FFF8EC" stroke={c.ink} strokeWidth="4" transform="rotate(-18 56 146)"/>
      <g className="teddy-arm-wave" style={{ transformBox: 'fill-box', transformOrigin: '164px 130px' }}>
        <ellipse cx="164" cy="146" rx="20" ry="28" fill="#FFF8EC" stroke={c.ink} strokeWidth="4" transform="rotate(18 164 146)"/>
        <ellipse cx="174" cy="172" rx="12" ry="9" fill={c.accent} stroke={c.ink} strokeWidth="3" transform="rotate(18 174 172)"/>
      </g>
      <ellipse cx="46" cy="172" rx="12" ry="9" fill={c.accent} stroke={c.ink} strokeWidth="3" transform="rotate(-18 46 172)"/>
      {/* head */}
      <circle cx="110" cy="82" r="56" fill="#FFF8EC" stroke={c.ink} strokeWidth="4"/>
      {/* ears */}
      <circle cx="62" cy="40" r="20" fill="#FFF8EC" stroke={c.ink} strokeWidth="4"/>
      <circle cx="62" cy="40" r="10" fill={c.primary}/>
      <circle cx="158" cy="40" r="20" fill="#FFF8EC" stroke={c.ink} strokeWidth="4"/>
      <circle cx="158" cy="40" r="10" fill={c.primary}/>
      {/* muzzle */}
      <ellipse cx="110" cy="100" rx="28" ry="22" fill={c.bg} stroke={c.ink} strokeWidth="3"/>
      {/* eyes */}
      <g className="teddy-eyes">
        <circle cx="86" cy="74" r="7" fill={c.ink}/>
        <circle cx="134" cy="74" r="7" fill={c.ink}/>
      </g>
      <circle cx="88" cy="72" r="2.5" fill="#fff"/>
      <circle cx="136" cy="72" r="2.5" fill="#fff"/>
      {/* nose */}
      <ellipse cx="110" cy="92" rx="7" ry="5" fill={c.ink}/>
      {/* mouth */}
      <path d="M 110 96 L 110 104 Q 102 112 96 108" stroke={c.ink} strokeWidth="3" fill="none" strokeLinecap="round"/>
      <path d="M 110 104 Q 118 112 124 108" stroke={c.ink} strokeWidth="3" fill="none" strokeLinecap="round"/>
      {/* cheek blushes */}
      <ellipse cx="76" cy="96" rx="7" ry="4" fill={c.primary} opacity="0.55"/>
      <ellipse cx="144" cy="96" rx="7" ry="4" fill={c.primary} opacity="0.55"/>
      {/* little bow tie */}
      <path d="M 95 132 L 80 124 L 80 142 L 95 134 L 125 134 L 140 142 L 140 124 L 125 132 Z"
            fill={c.accent} stroke={c.ink} strokeWidth="3" strokeLinejoin="round"/>
      <circle cx="110" cy="133" r="4" fill={c.yellow} stroke={c.ink} strokeWidth="2"/>
    </svg>
  );
}

// Hand-drawn-feeling toy icon (filled blob shapes, no detailed SVG)
function ToyBlob({ kind, palette }) {  // Different category, different blob:
  const c = palette;
  if (kind === 'plush') return (
    <svg viewBox="0 0 100 100" width="78%" height="78%">
      <ellipse cx="50" cy="60" rx="32" ry="28" fill={c.primary} stroke={c.ink} strokeWidth="3"/>
      <circle cx="50" cy="32" r="20" fill={c.primary} stroke={c.ink} strokeWidth="3"/>
      <circle cx="33" cy="22" r="9" fill={c.primary} stroke={c.ink} strokeWidth="3"/>
      <circle cx="67" cy="22" r="9" fill={c.primary} stroke={c.ink} strokeWidth="3"/>
      <circle cx="43" cy="32" r="2.5" fill={c.ink}/>
      <circle cx="57" cy="32" r="2.5" fill={c.ink}/>
      <path d="M 45 40 Q 50 44 55 40" stroke={c.ink} strokeWidth="2.5" fill="none" strokeLinecap="round"/>
    </svg>
  );
  if (kind === 'lego') return (
    <svg viewBox="0 0 100 100" width="78%" height="78%">
      <rect x="20" y="40" width="60" height="34" rx="4" fill={c.cool} stroke={c.ink} strokeWidth="3"/>
      <circle cx="33" cy="36" r="7" fill={c.cool} stroke={c.ink} strokeWidth="3"/>
      <circle cx="50" cy="36" r="7" fill={c.cool} stroke={c.ink} strokeWidth="3"/>
      <circle cx="67" cy="36" r="7" fill={c.cool} stroke={c.ink} strokeWidth="3"/>
      <rect x="28" y="50" width="44" height="6" fill="rgba(0,0,0,0.15)"/>
    </svg>
  );
  if (kind === 'book') return (
    <svg viewBox="0 0 100 100" width="78%" height="78%">
      <path d="M 18 28 L 50 22 L 50 80 L 18 84 Z" fill={c.accent} stroke={c.ink} strokeWidth="3"/>
      <path d="M 82 28 L 50 22 L 50 80 L 82 84 Z" fill={c.pop} stroke={c.ink} strokeWidth="3"/>
      <line x1="50" y1="22" x2="50" y2="80" stroke={c.ink} strokeWidth="3"/>
      <line x1="28" y1="40" x2="46" y2="36" stroke={c.ink} strokeWidth="1.5"/>
      <line x1="28" y1="50" x2="46" y2="46" stroke={c.ink} strokeWidth="1.5"/>
    </svg>
  );
  if (kind === 'puzzle') return (
    <svg viewBox="0 0 100 100" width="78%" height="78%">
      <path d="M 25 25 H 45 Q 45 18 50 18 Q 55 18 55 25 H 75 V 45 Q 82 45 82 50 Q 82 55 75 55 V 75 H 55 Q 55 82 50 82 Q 45 82 45 75 H 25 V 55 Q 18 55 18 50 Q 18 45 25 45 Z"
            fill={c.yellow} stroke={c.ink} strokeWidth="3" strokeLinejoin="round"/>
    </svg>
  );
  if (kind === 'costume') return (
    <svg viewBox="0 0 100 100" width="78%" height="78%">
      {/* crown */}
      <path d="M 22 60 L 30 30 L 42 50 L 50 22 L 58 50 L 70 30 L 78 60 Z"
            fill={c.yellow} stroke={c.ink} strokeWidth="3" strokeLinejoin="round"/>
      <rect x="22" y="60" width="56" height="14" fill={c.yellow} stroke={c.ink} strokeWidth="3"/>
      <circle cx="35" cy="50" r="4" fill={c.accent} stroke={c.ink} strokeWidth="2"/>
      <circle cx="50" cy="40" r="4" fill={c.pop} stroke={c.ink} strokeWidth="2"/>
      <circle cx="65" cy="50" r="4" fill={c.cool} stroke={c.ink} strokeWidth="2"/>
    </svg>
  );
  if (kind === 'edu') return (
    <svg viewBox="0 0 100 100" width="78%" height="78%">
      <rect x="20" y="22" width="60" height="48" rx="3" fill={c.cool} stroke={c.ink} strokeWidth="3"/>
      <rect x="26" y="28" width="48" height="36" fill={c.bg} stroke={c.ink} strokeWidth="2"/>
      <text x="50" y="56" textAnchor="middle"
            style={{ font: 'bold 24px "Permanent Marker"', fill: c.primary }}>A+</text>
      <rect x="40" y="70" width="20" height="10" fill={c.ink}/>
      <rect x="34" y="80" width="32" height="4" fill={c.ink}/>
    </svg>
  );
  return null;
}

// Hand-drawn map (sketchy SVG of the Williamstown corner)
function HandDrawnMap({ palette }) {
  const c = palette;
  return (
    <svg viewBox="0 0 600 360" width="100%" height="100%"
         style={{ display: 'block', background: c.bg }}>
      {/* paper grid */}
      <defs>
        <pattern id="grid-a" width="20" height="20" patternUnits="userSpaceOnUse">
          <path d="M 20 0 L 0 0 0 20" fill="none" stroke={c.ink} strokeOpacity="0.06" strokeWidth="1"/>
        </pattern>
      </defs>
      <rect width="600" height="360" fill="url(#grid-a)"/>
      {/* water (bay) */}
      <path d="M 0 250 Q 100 240 200 260 T 400 280 T 600 270 L 600 360 L 0 360 Z"
            fill={c.cool} fillOpacity="0.35" stroke={c.cool} strokeWidth="3"
            strokeDasharray="6 4"/>
      <text x="480" y="330" style={{ font: 'italic 22px "Patrick Hand"', fill: c.cool }}>Hobsons Bay</text>
      {/* Douglas Parade */}
      <path d="M 30 200 Q 200 180 380 200 T 580 210" stroke={c.ink}
            strokeWidth="22" fill="none" strokeLinecap="round" strokeOpacity="0.18"/>
      <path d="M 30 200 Q 200 180 380 200 T 580 210" stroke={c.ink}
            strokeWidth="2.5" fill="none" strokeLinecap="round" strokeDasharray="8 6"/>
      <text x="60" y="170" style={{ font: 'bold 22px "Permanent Marker"', fill: c.ink }}>Douglas Parade</text>
      {/* side street */}
      <path d="M 290 60 L 320 200" stroke={c.ink} strokeWidth="14"
            fill="none" strokeLinecap="round" strokeOpacity="0.15"/>
      {/* X marks the spot — over the house, the actual sale location */}
      <g transform="translate(456 185)">
        <circle r="34" fill={c.primary} stroke={c.ink} strokeWidth="3"/>
        <path d="M -12 -12 L 12 12 M 12 -12 L -12 12"
              stroke="#fff" strokeWidth="6" strokeLinecap="round"/>
      </g>
      {/* Prince Albert Hotel label — sits above the pub on the top left */}
      <g transform="translate(124 30)">
        <rect x="-4" y="-4" width="200" height="64" fill="#fff"
              stroke={c.ink} strokeWidth="2.5" transform="rotate(-3)"/>
        <text x="95" y="20" textAnchor="middle"
              style={{ font: 'bold 18px "Permanent Marker"', fill: c.primary }}
              transform="rotate(-3)">Prince Albert Hotel</text>
        <text x="95" y="40" textAnchor="middle"
              style={{ font: '15px "Patrick Hand"', fill: c.ink }}
              transform="rotate(-3)">Across the road &amp; a few doors down</text>
      </g>
      {/* lil house under the label — the sale spot */}
      <g transform="translate(456 244)">
        <path d="M -22 24 L -22 0 L 22 0 L 22 24 Z" fill={c.paper} stroke={c.ink} strokeWidth="2.5"/>
        <path d="M -26 0 L 0 -20 L 26 0 Z" fill={c.primary} stroke={c.ink} strokeWidth="2.5"/>
        <rect x="-5" y="9" width="10" height="15" fill={c.accent} stroke={c.ink} strokeWidth="1.5"/>
        <rect x="-17" y="6" width="8" height="8" fill={c.cool} stroke={c.ink} strokeWidth="1.5"/>
        <rect x="9" y="6" width="8" height="8" fill={c.cool} stroke={c.ink} strokeWidth="1.5"/>
        <rect x="10" y="-14" width="6" height="10" fill={c.accent} stroke={c.ink} strokeWidth="1.5"/>
      </g>
      {/* lil pub at the spot */}
      <g transform="translate(220 130)">
        <path d="M -26 30 L -26 4 L 26 4 L 26 30 Z" fill={c.accent} stroke={c.ink} strokeWidth="2.5"/>
        <path d="M -30 4 L 0 -18 L 30 4 Z" fill={c.yellow} stroke={c.ink} strokeWidth="2.5"/>
        <rect x="-8" y="14" width="16" height="16" fill={c.ink}/>
        <rect x="-22" y="10" width="8" height="8" fill="#fff" stroke={c.ink} strokeWidth="1.5"/>
        <rect x="14" y="10" width="8" height="8" fill="#fff" stroke={c.ink} strokeWidth="1.5"/>
        <text x="0" y="-22" textAnchor="middle"
              style={{ font: 'bold 11px "Permanent Marker"', fill: c.ink }}>PUB</text>
      </g>
      {/* compass */}
      <g transform="translate(540 60)">
        <circle r="24" fill="#fff" stroke={c.ink} strokeWidth="2"/>
        <path d="M 0 -18 L 5 0 L 0 18 L -5 0 Z" fill={c.primary} stroke={c.ink} strokeWidth="2"/>
        <text y="-26" textAnchor="middle" style={{ font: 'bold 12px "Permanent Marker"', fill: c.ink }}>N</text>
      </g>
    </svg>
  );
}

function DesignA({ palette }) {
  const rootRef = React.useRef(null);
  const c = palette;
  useConfetti(rootRef, {
    colors: [c.primary, c.accent, c.pop, c.cool, c.yellow]
  });

  const toys = [
    { kind: 'plush',   caption: 'Stuffed friends',   tilt: -3 },
    { kind: 'lego',    caption: 'LEGO bricks',       tilt: 2 },
    { kind: 'book',    caption: 'Story books',       tilt: -2 },
    { kind: 'puzzle',  caption: 'Puzzles',           tilt: 3 },
    { kind: 'costume', caption: 'Costumes & crowns', tilt: -3 },
    { kind: 'edu',     caption: 'Learning toys',     tilt: 2 },
  ];

  return (
    <div ref={rootRef} className="design-a" style={{
      width: W_A, height: H_A, position: 'relative', overflow: 'hidden',
      background: c.bg,
      backgroundImage:
        `radial-gradient(rgba(0,0,0,0.04) 1px, transparent 1px)`,
      backgroundSize: '18px 18px',
      color: c.ink,
      fontFamily: '"Patrick Hand", cursive',
      cursor: 'pointer',
    }}>
      {/* paper edge tear at top */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 18,
        background: c.primary,
        clipPath: 'polygon(0 0, 100% 0, 100% 60%, 96% 100%, 92% 50%, 88% 100%, 84% 50%, 80% 100%, 76% 50%, 72% 100%, 68% 50%, 64% 100%, 60% 50%, 56% 100%, 52% 50%, 48% 100%, 44% 50%, 40% 100%, 36% 50%, 32% 100%, 28% 50%, 24% 100%, 20% 50%, 16% 100%, 12% 50%, 8% 100%, 4% 50%, 0 100%)',
        zIndex: 4,
      }} />

      {/* HERO */}
      <div style={{ position: 'relative', padding: '60px 60px 0' }}>
        <div style={{
          fontFamily: '"Permanent Marker", cursive',
          fontSize: 18, color: c.accent, letterSpacing: 4,
          textTransform: 'uppercase',
        }}>★ Saturday 23 May 2026 · 1–4pm ★</div>
        <div style={{
          fontFamily: '"Permanent Marker", cursive',
          fontSize: 138, lineHeight: 0.95, color: c.primary,
          textShadow: `5px 5px 0 ${c.ink}`,
          marginTop: 10, transform: 'rotate(-1.5deg)',
        }}>
          Toy <span style={{ color: c.accent }}>Sale!</span>
        </div>
        <div style={{
          marginTop: 14, fontSize: 26, color: c.ink, maxWidth: 580,
          transform: 'rotate(-0.4deg)',
        }}>
          Williamstown's most fabulous garage sale.{' '}
          <span style={{ background: c.yellow, padding: '0 6px', boxDecorationBreak: 'clone' }}>
            Pre-loved, pocket-friendly, and a little bit planet-friendly too.
          </span>
        </div>
      </div>

      {/* Hand-drawn "toys for sale" sign, taped to the page */}
      <div style={{
        position: 'absolute', top: 60, right: 20, width: 420,
        transform: 'rotate(4deg)',
        filter: 'drop-shadow(8px 12px 16px rgba(0,0,0,0.18))',
        zIndex: 3,
      }}>
        <ScrapTape color={c.pop} tilt={-18} top={-10} left="20%" width={120} />
        <ScrapTape color={c.cool} tilt={14} top={-10} left="78%" width={110} />
        <img src="sprites/v2-sign.png" alt="toys for sale poster"
             style={{ width: '100%', display: 'block' }} />
      </div>

      {/* NOW!! starburst — sticker layered over the sign */}
      <img src="sprites/v2-now.png" alt=""
           className="wiggle-on-hover"
           style={{ position: 'absolute', top: 440, right: 40, width: 220,
                    transform: 'rotate(-12deg)', zIndex: 4,
                    filter: 'drop-shadow(4px 6px 8px rgba(0,0,0,0.18))' }} />

      {/* Teddy plushie (hand-drawn) peeking from left */}
      <div className="teddy-anim"
           style={{ position: 'absolute', top: 340, left: -20, width: 290, height: 260,
                    zIndex: 2,
                    filter: 'drop-shadow(6px 8px 10px rgba(0,0,0,0.15))' }}>
        <div className="wiggle-on-hover" style={{ width: '100%', height: '100%' }}>
          <img src="sprites/v2-teddy.png" alt="pink teddy bear plush"
               draggable="false"
               style={{ width: '100%', height: '100%', objectFit: 'contain',
                        display: 'block' }} />
        </div>
      </div>

      {/* Toys video — sits in the middle of the hero, next to teddy */}
      <div style={{
        position: 'absolute', top: 340, left: 450, width: 200, height: 356,
        transform: 'rotate(-2deg)', zIndex: 2,
        filter: 'drop-shadow(6px 10px 14px rgba(0,0,0,0.22))',
      }}>
        <ScrapTape color={c.cool} tilt={-12} top={-12} left="28%" width={90} />
        <ScrapTape color={c.yellow} tilt={10} top={-12} left="74%" width={90} />
        <video src="toys.mp4" autoPlay loop muted playsInline
               style={{ width: '100%', height: '100%', objectFit: 'cover',
                        display: 'block', borderRadius: 4,
                        border: `3px solid ${c.ink}`, background: c.bg }} />
      </div>

      {/* Countdown row */}
      <div style={{ display: 'flex', gap: 28, alignItems: 'flex-start',
                    padding: '40px 60px 0', marginTop: 380 }}>
        <div style={{ flex: 1 }}>
          <CountdownCard_A palette={c} />
        </div>
        <StickyNote tilt={3} color={c.yellow} palette={c} w={220} style={{ marginTop: 30 }}>
          <div style={{ fontFamily: '"Permanent Marker", cursive', fontSize: 22, color: c.accent }}>
            Rain or shine!
          </div>
          <div style={{ marginTop: 6 }}>Williamstown weather can't stop a good bargain.</div>
        </StickyNote>
      </div>

      {/* Info row: cash only + static lady illustration */}
      <div style={{ display: 'flex', gap: 30, padding: '50px 60px 0',
                    alignItems: 'flex-start' }}>
        <div style={{ flex: 1.1 }}>
          <div style={{
            background: c.paper, border: `3px solid ${c.ink}`,
            borderRadius: 16, padding: '32px 28px',
            transform: 'rotate(-1.2deg)', textAlign: 'center',
            boxShadow: `8px 8px 0 ${c.accent}`,
          }}>
            <div style={{ fontFamily: '"Permanent Marker", cursive',
                          fontSize: 22, color: c.ink, letterSpacing: 3,
                          opacity: 0.65, textTransform: 'uppercase' }}>
              Important!
            </div>
            <div style={{ fontFamily: '"Permanent Marker", cursive',
                          fontSize: 80, color: c.accent, letterSpacing: 4,
                          lineHeight: 1, marginTop: 4 }}>
              CASH<br/>ONLY
            </div>
            <div style={{ fontSize: 22, color: c.ink, marginTop: 10 }}>
              Bring your coins and cash!
            </div>
          </div>
        </div>
        <div style={{ flex: 0.9, position: 'relative' }}>
          <Polaroid tilt={3.5} caption="Peace, love &amp; pre-loved toys" palette={c} w="100%">
            <img src="sprites/v2-peace.png" alt="peace sign"
                 style={{ width: '88%', height: '88%', objectFit: 'contain',
                          display: 'block' }} />
          </Polaroid>
          {/* Signature, scrawled next to the polaroid */}
          <img src="sprites/v2-williams.png" alt="williams tone"
               style={{ position: 'absolute', bottom: -20, left: -30, width: 240,
                        transform: 'rotate(-6deg)', zIndex: 5 }} />
        </div>
      </div>

      {/* Sign-off row, sits under the CASH ONLY section */}
      <div style={{
        display: 'flex', justifyContent: 'space-between',
        alignItems: 'flex-end', gap: 30,
        padding: '60px 60px 0',
      }}>
        <div style={{ maxWidth: 480 }}>
          <div style={{
            fontFamily: '"Permanent Marker", cursive', fontSize: 36,
            color: c.primary, lineHeight: 1,
          }}>See you Saturday!</div>
          <div style={{ marginTop: 8, fontSize: 22, color: c.ink, opacity: 0.7 }}>
            Bring a friend &mdash; tell a neighbour.
          </div>
        </div>
        <div style={{ fontSize: 20, color: c.ink, opacity: 0.7,
                      textAlign: 'right', fontFamily: '"Patrick Hand", cursive' }}>
          1–4pm · Rain or shine ☀☁<br/>
          Williamstown VIC
        </div>
      </div>

      {/* Toys polaroid wall */}
      <div style={{ padding: '70px 60px 0' }}>
        <div style={{
          fontFamily: '"Permanent Marker", cursive', fontSize: 48,
          color: c.primary, transform: 'rotate(-1deg)',
        }}>What's for sale?</div>
        <div style={{ fontSize: 22, marginTop: 6, color: c.ink, opacity: 0.75 }}>
          Hover the polaroids — they wiggle! Click anywhere for a little surprise.
        </div>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
          gap: '36px 20px', marginTop: 28, justifyItems: 'center',
        }}>
          {toys.map((t) => (
            <div key={t.kind} className="wiggle-on-hover">
              <Polaroid tilt={t.tilt} caption={t.caption} palette={c} w={250}>
                <ToyBlob kind={t.kind} palette={c} />
              </Polaroid>
            </div>
          ))}
        </div>
      </div>

      {/* Skill tester callout */}
      <div style={{ padding: '60px 60px 0', position: 'relative' }}>
        <div style={{
          background: c.primary, color: '#fff',
          padding: '28px 32px', borderRadius: 14,
          transform: 'rotate(-1deg)', position: 'relative',
          boxShadow: `8px 8px 0 ${c.ink}`,
          border: `3px solid ${c.ink}`,
        }}>
          <div style={{ fontFamily: '"Permanent Marker", cursive',
                        fontSize: 22, letterSpacing: 3, opacity: 0.95 }}>
            ✦ SPECIAL ATTRACTION ✦
          </div>
          <div style={{ fontFamily: '"Permanent Marker", cursive',
                        fontSize: 48, lineHeight: 1, marginTop: 6 }}>
            The Skill Tester
            <span style={{ color: c.yellow, marginLeft: 12 }}>(with lollies!)</span>
          </div>
          <div style={{ fontSize: 22, marginTop: 10 }}>
            Got a steady hand? Win a sweet treat from the famous claw machine.
          </div>
        </div>
        <img src="sprites/v2-flower-black.png" alt=""
             style={{ position: 'absolute', left: -60, bottom: -40, width: 130,
                      transform: 'rotate(-12deg)', zIndex: 1,
                      filter: 'drop-shadow(4px 6px 8px rgba(0,0,0,0.12))' }} />
        <img src="sprites/v2-flower-red.png" alt=""
             style={{ position: 'absolute', right: 30, bottom: -40, width: 120,
                      transform: 'rotate(10deg)', zIndex: 1,
                      filter: 'drop-shadow(4px 6px 8px rgba(0,0,0,0.12))' }} />
      </div>

      {/* Find us: hand-drawn map to the Prince Albert Hotel */}
      <div style={{ padding: '70px 60px 0' }}>
        <div style={{
          fontFamily: '"Permanent Marker", cursive', fontSize: 48,
          color: c.primary, transform: 'rotate(-1deg)',
        }}>Find us!</div>
        <div style={{ fontSize: 22, marginTop: 6, color: c.ink, opacity: 0.75 }}>
          Across the road from the <strong>Prince Albert Hotel</strong> and a few doors down, in Williamstown.
        </div>
        <div style={{
          marginTop: 22, position: 'relative',
          background: c.paper, border: `3px solid ${c.ink}`,
          padding: 14, transform: 'rotate(-0.6deg)',
          boxShadow: `8px 8px 0 ${c.accent}`,
        }}>
          <ScrapTape color={c.cool} tilt={-8} top={-14} left="18%" width={130} />
          <ScrapTape color={c.yellow} tilt={6} top={-14} left="82%" width={130} />
          <HandDrawnMap palette={c} />
        </div>
      </div>

      <ChuggingTrain containerRef={rootRef} height={200} speed={0.07} />
    </div>
  );
}

window.DesignA = DesignA;