// Shared primitives: shaved ice cup, stickers, wobble text
const { useState, useEffect, useRef, useMemo } = React;

// A CSS/SVG shaved ice cup — colors drive flavor, topping drives decoration
function ShavedIceCup({ color = '#D74C9E', topping = 'cherry', size = 220, wobble = true }) {
  return (
    <div
      style={{
        width: size,
        height: size * 1.25,
        position: 'relative',
        display: 'inline-block',
        animation: wobble ? 'cupWobble 4s ease-in-out infinite' : 'none',
        transformOrigin: 'bottom center',
      }}
    >
      <svg viewBox="0 0 200 250" width="100%" height="100%" style={{ overflow: 'visible' }}>
        {/* Cup */}
        <defs>
          <clipPath id={`cupclip-${color.replace('#','')}`}>
            <path d="M40 120 L60 230 Q100 245 140 230 L160 120 Z" />
          </clipPath>
        </defs>
        {/* Back shadow */}
        <ellipse cx="100" cy="240" rx="55" ry="6" fill="rgba(0,0,0,0.18)" />

        {/* Cup body */}
        <path
          d="M40 120 L60 230 Q100 245 140 230 L160 120 Z"
          fill="#FFF4E0"
          stroke="#1A2B4E"
          strokeWidth="5"
          strokeLinejoin="round"
        />
        {/* Cup stripes */}
        <g clipPath={`url(#cupclip-${color.replace('#','')})`}>
          <rect x="40" y="160" width="120" height="8" fill="#FF5BA0" />
          <rect x="40" y="180" width="120" height="8" fill="#21B8D4" />
          <rect x="40" y="200" width="120" height="8" fill="#FFD233" />
        </g>
        {/* Cup rim */}
        <ellipse cx="100" cy="120" rx="60" ry="10" fill="#FFF4E0" stroke="#1A2B4E" strokeWidth="5" />

        {/* Ice dome */}
        <path
          d="M45 120 Q55 40 100 30 Q150 42 155 120 Z"
          fill={color}
          stroke="#1A2B4E"
          strokeWidth="5"
          strokeLinejoin="round"
        />
        {/* Ice highlights */}
        <path d="M70 70 Q75 55 95 50" stroke="rgba(255,255,255,0.7)" strokeWidth="5" fill="none" strokeLinecap="round" />
        <circle cx="125" cy="60" r="4" fill="rgba(255,255,255,0.8)" />
        <circle cx="80" cy="95" r="3" fill="rgba(255,255,255,0.6)" />

        {/* Drip */}
        <path
          d="M50 120 Q55 150 48 155 Q41 150 45 120"
          fill={color}
          stroke="#1A2B4E"
          strokeWidth="4"
          strokeLinejoin="round"
        />

        {/* Topping */}
        {topping === 'cherry' && (
          <g>
            <circle cx="100" cy="38" r="14" fill="#E84C3D" stroke="#1A2B4E" strokeWidth="4" />
            <circle cx="95" cy="34" r="3" fill="rgba(255,255,255,0.8)" />
            <path d="M100 24 Q110 10 125 8" stroke="#4E8B3D" strokeWidth="4" fill="none" strokeLinecap="round" />
            <path d="M124 8 L120 14 L130 12 Z" fill="#4E8B3D" stroke="#1A2B4E" strokeWidth="2" />
          </g>
        )}
        {topping === 'umbrella' && (
          <g transform="translate(100 35)">
            <line x1="15" y1="-5" x2="-5" y2="40" stroke="#1A2B4E" strokeWidth="4" strokeLinecap="round" />
            <path d="M-20 -5 Q0 -30 25 -10 Q10 -5 -5 -5 Q-15 -5 -20 -5 Z" fill="#FFD233" stroke="#1A2B4E" strokeWidth="3" />
            <path d="M-20 -5 L-5 -5" stroke="#1A2B4E" strokeWidth="2" />
            <path d="M-5 -5 L10 -5" stroke="#1A2B4E" strokeWidth="2" />
            <path d="M10 -5 L25 -10" stroke="#1A2B4E" strokeWidth="2" />
          </g>
        )}
        {topping === 'straw' && (
          <g>
            <rect x="115" y="10" width="8" height="40" rx="2" fill="#FF5BA0" stroke="#1A2B4E" strokeWidth="3" transform="rotate(15 119 30)" />
          </g>
        )}
        {topping === 'sprinkles' && (
          <g>
            <rect x="80" y="40" width="3" height="10" fill="#FFD233" stroke="#1A2B4E" strokeWidth="1" transform="rotate(20 82 45)" />
            <rect x="100" y="32" width="3" height="10" fill="#21B8D4" stroke="#1A2B4E" strokeWidth="1" transform="rotate(-30 102 37)" />
            <rect x="115" y="50" width="3" height="10" fill="#FF5BA0" stroke="#1A2B4E" strokeWidth="1" transform="rotate(45 116 55)" />
            <rect x="90" y="55" width="3" height="10" fill="#B6E84C" stroke="#1A2B4E" strokeWidth="1" transform="rotate(-10 92 60)" />
            <rect x="120" y="38" width="3" height="10" fill="#D74C9E" stroke="#1A2B4E" strokeWidth="1" transform="rotate(60 121 43)" />
          </g>
        )}
      </svg>
    </div>
  );
}

// Bubble text sticker (multi-stroke like the logo)
function BubbleText({ children, fill = '#FFD233', stroke1 = '#FFFFFF', stroke2 = '#1A2B4E', stroke3 = '#B6E84C', size = 120, rotate = 0 }) {
  return (
    <span
      style={{
        fontFamily: "'Titan One', 'Bagel Fat One', system-ui",
        fontSize: size,
        lineHeight: 1,
        color: fill,
        WebkitTextStroke: `0px ${stroke2}`,
        textShadow: `
          -2px -2px 0 ${stroke1}, 2px -2px 0 ${stroke1}, -2px 2px 0 ${stroke1}, 2px 2px 0 ${stroke1},
          -4px -4px 0 ${stroke1}, 4px -4px 0 ${stroke1}, -4px 4px 0 ${stroke1}, 4px 4px 0 ${stroke1},
          -6px -6px 0 ${stroke2}, 6px -6px 0 ${stroke2}, -6px 6px 0 ${stroke2}, 6px 6px 0 ${stroke2},
          -8px -8px 0 ${stroke3}, 8px -8px 0 ${stroke3}, -8px 8px 0 ${stroke3}, 8px 8px 0 ${stroke3},
          -10px -10px 0 ${stroke2}, 10px -10px 0 ${stroke2}, -10px 10px 0 ${stroke2}, 10px 10px 0 ${stroke2}
        `,
        display: 'inline-block',
        transform: `rotate(${rotate}deg)`,
        letterSpacing: '0.02em',
      }}
    >
      {children}
    </span>
  );
}

// Scalloped sun-burst behind hero
function SunBurst({ color = '#FFD233', size = 600, rays = 18 }) {
  const points = [];
  for (let i = 0; i < rays * 2; i++) {
    const angle = (Math.PI * 2 * i) / (rays * 2);
    const r = i % 2 === 0 ? size / 2 : size / 2.6;
    points.push(`${Math.cos(angle) * r + size / 2},${Math.sin(angle) * r + size / 2}`);
  }
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ display: 'block' }}>
      <polygon points={points.join(' ')} fill={color} />
    </svg>
  );
}

// Squiggle divider
function Squiggle({ color = '#FFF4E0', height = 40, width = '100%' }) {
  return (
    <svg width={width} height={height} viewBox="0 0 1200 40" preserveAspectRatio="none" style={{ display: 'block' }}>
      <path d="M0 20 Q 75 0 150 20 T 300 20 T 450 20 T 600 20 T 750 20 T 900 20 T 1050 20 T 1200 20 L 1200 40 L 0 40 Z" fill={color} />
    </svg>
  );
}

// Sticker chip (rounded outlined label)
function Sticker({ children, bg = '#FFD233', color = '#1A2B4E', rotate = -3, size = 18 }) {
  return (
    <span
      style={{
        background: bg,
        color,
        border: `3px solid #1A2B4E`,
        borderRadius: 999,
        padding: '8px 18px',
        fontWeight: 800,
        fontSize: size,
        fontFamily: "'Fredoka', system-ui",
        display: 'inline-block',
        transform: `rotate(${rotate}deg)`,
        boxShadow: '4px 4px 0 #1A2B4E',
        textTransform: 'uppercase',
        letterSpacing: '0.04em',
        whiteSpace: 'nowrap',
      }}
    >
      {children}
    </span>
  );
}

// Photo placeholder card (striped)
function PhotoPlaceholder({ label, w = 300, h = 300, rotate = 0, bg = '#FFD233' }) {
  return (
    <div
      style={{
        width: w,
        height: h,
        background: `repeating-linear-gradient(45deg, ${bg}, ${bg} 16px, rgba(0,0,0,0.08) 16px, rgba(0,0,0,0.08) 18px)`,
        border: '5px solid #1A2B4E',
        borderRadius: 18,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        transform: `rotate(${rotate}deg)`,
        boxShadow: '8px 8px 0 #1A2B4E',
        position: 'relative',
      }}
    >
      <span
        style={{
          fontFamily: "'JetBrains Mono', ui-monospace, monospace",
          fontSize: 13,
          background: '#FFF4E0',
          padding: '6px 10px',
          border: '2px solid #1A2B4E',
          borderRadius: 6,
          color: '#1A2B4E',
          textAlign: 'center',
          maxWidth: '80%',
        }}
      >
        {label}
      </span>
    </div>
  );
}

Object.assign(window, {
  ShavedIceCup, BubbleText, SunBurst, Squiggle, Sticker, PhotoPlaceholder,
});