// shared/placeholders.jsx — reusable visual placeholders for dish photos, store photos
// Drawn in SVG since we don't have real images. Warm, food-evocative.

function DishPlaceholder({ variant = 'wheat', label = '', style = {}, seed = 1 }) {
  // variant: wheat (들기름), red (고추기름/비빔), broth (물), bone (사골), hot (온)
  const palettes = {
    wheat:  ['#E8D9B0', '#C9A24A', '#8A6E2E', '#4A3820'],
    red:    ['#E8B899', '#D9573F', '#9C2A2A', '#5A1A10'],
    broth:  ['#EADFC8', '#C9B88E', '#8A7448', '#3E3220'],
    bone:   ['#F0E6D0', '#D4C0A0', '#9C7E56', '#4A3820'],
    hot:    ['#EED4B0', '#E89958', '#9C5E28', '#4A2E18'],
    mixed:  ['#F0C098', '#E86B3F', '#AE3A1E', '#5E1A0A'],
  };
  const p = palettes[variant] || palettes.wheat;
  return (
    <div style={{ position: 'relative', overflow: 'hidden', ...style }}>
      <svg viewBox="0 0 400 400" preserveAspectRatio="xMidYMid slice" style={{ width: '100%', height: '100%', display: 'block' }}>
        <defs>
          <radialGradient id={`bowl-${variant}-${seed}`} cx="50%" cy="45%" r="55%">
            <stop offset="0%" stopColor={p[0]} />
            <stop offset="60%" stopColor={p[1]} />
            <stop offset="100%" stopColor={p[3]} />
          </radialGradient>
          <radialGradient id={`broth-${variant}-${seed}`} cx="50%" cy="50%" r="40%">
            <stop offset="0%" stopColor={p[1]} stopOpacity="0.6" />
            <stop offset="100%" stopColor={p[2]} stopOpacity="0.95" />
          </radialGradient>
        </defs>
        <rect width="400" height="400" fill={p[3]} />
        {/* bowl shadow */}
        <ellipse cx="200" cy="220" rx="170" ry="160" fill={`url(#bowl-${variant}-${seed})`} opacity="0.95" />
        {/* broth inner */}
        <ellipse cx="200" cy="210" rx="140" ry="130" fill={`url(#broth-${variant}-${seed})`} />
        {/* noodles — curved strokes */}
        <g stroke={p[0]} strokeWidth="2.2" fill="none" opacity="0.75">
          {Array.from({length: 14}).map((_, i) => {
            const yOff = 180 + (i * 4) - 25;
            const phase = i * 0.6;
            return <path key={i} d={`M ${90 + (i%3)*4} ${yOff} Q ${150 + Math.sin(phase)*20} ${yOff + 10 + Math.cos(phase)*8}, ${200} ${yOff + 5} T ${310 - (i%2)*5} ${yOff - 2}`} />;
          })}
        </g>
        {/* garnish — egg, cucumber, sesame */}
        <circle cx="160" cy="175" r="22" fill="#F5EAD0" opacity="0.9" />
        <circle cx="160" cy="175" r="10" fill="#D4A843" />
        <ellipse cx="240" cy="165" rx="26" ry="8" fill="#4A7A3A" opacity="0.85" transform="rotate(-18 240 165)" />
        {variant === 'red' || variant === 'mixed' ? (
          <g>
            <circle cx="210" cy="200" r="4" fill="#9C2A2A" />
            <circle cx="180" cy="215" r="3" fill="#D9573F" />
            <circle cx="230" cy="220" r="3.5" fill="#9C2A2A" />
          </g>
        ) : null}
        {/* sesame dots */}
        {Array.from({length: 8}).map((_, i) => (
          <circle key={i} cx={140 + (i*20 % 140) + (i%2)*10} cy={150 + (i*7) % 80} r="1.5" fill="#F5EAD0" opacity="0.8" />
        ))}
        {/* steam */}
        <g stroke={p[0]} strokeWidth="1.5" fill="none" opacity="0.25">
          <path d="M 170 90 Q 180 60 170 30" />
          <path d="M 210 100 Q 200 70 210 40" />
          <path d="M 240 95 Q 250 65 240 35" />
        </g>
      </svg>
      {label ? (
        <div style={{
          position: 'absolute', left: 16, bottom: 12,
          color: '#F0E9DC', fontFamily: 'var(--font-myeongjo)',
          fontSize: 18, fontWeight: 700, letterSpacing: '0.02em',
          textShadow: '0 2px 8px rgba(0,0,0,0.5)',
        }}>{label}</div>
      ) : null}
    </div>
  );
}

function StorePlaceholder({ style = {}, tone = 'warm' }) {
  const tones = {
    warm:  ['#2A1E10', '#8A6E2E', '#C9A24A', '#F0D890'],
    dusk:  ['#1A1510', '#4A3E30', '#8A6E2E', '#D9C9A8'],
    day:   ['#5A4820', '#C9A24A', '#EDE4D2', '#F5EFE4'],
  };
  const p = tones[tone] || tones.warm;
  return (
    <svg viewBox="0 0 600 400" preserveAspectRatio="xMidYMid slice" style={{ width:'100%', height:'100%', display:'block', ...style }}>
      <defs>
        <linearGradient id={`wall-${tone}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={p[0]} />
          <stop offset="100%" stopColor={p[1]} stopOpacity="0.7" />
        </linearGradient>
      </defs>
      <rect width="600" height="400" fill={`url(#wall-${tone})`} />
      {/* floor */}
      <rect y="310" width="600" height="90" fill={p[0]} opacity="0.8" />
      {/* wooden bar */}
      <rect x="60" y="240" width="480" height="70" fill={p[1]} opacity="0.9" />
      <rect x="60" y="240" width="480" height="4" fill={p[2]} opacity="0.5" />
      {/* lanterns */}
      <g opacity="0.9">
        <circle cx="130" cy="90" r="24" fill={p[3]} opacity="0.5" />
        <rect x="124" y="66" width="12" height="48" fill={p[2]} opacity="0.9" rx="2" />
        <circle cx="130" cy="90" r="16" fill={p[3]} />
        <line x1="130" y1="30" x2="130" y2="66" stroke={p[2]} strokeWidth="1" opacity="0.5" />

        <circle cx="300" cy="70" r="28" fill={p[3]} opacity="0.5" />
        <rect x="293" y="44" width="14" height="54" fill={p[2]} opacity="0.9" rx="2" />
        <circle cx="300" cy="70" r="18" fill={p[3]} />
        <line x1="300" y1="10" x2="300" y2="44" stroke={p[2]} strokeWidth="1" opacity="0.5" />

        <circle cx="470" cy="90" r="24" fill={p[3]} opacity="0.5" />
        <rect x="464" y="66" width="12" height="48" fill={p[2]} opacity="0.9" rx="2" />
        <circle cx="470" cy="90" r="16" fill={p[3]} />
        <line x1="470" y1="30" x2="470" y2="66" stroke={p[2]} strokeWidth="1" opacity="0.5" />
      </g>
      {/* calligraphy sign */}
      <rect x="220" y="140" width="160" height="60" fill={p[0]} opacity="0.85" rx="2" />
      <text x="300" y="185" textAnchor="middle" fontFamily="serif" fontSize="36" fontWeight="800" fill={p[3]} letterSpacing="4">民俗</text>
      {/* silhouettes of seated customers */}
      <g fill={p[0]} opacity="0.85">
        <ellipse cx="140" cy="270" rx="22" ry="30" />
        <circle cx="140" cy="240" r="14" />
        <ellipse cx="240" cy="275" rx="20" ry="28" />
        <circle cx="240" cy="248" r="13" />
        <ellipse cx="360" cy="272" rx="22" ry="30" />
        <circle cx="360" cy="242" r="14" />
        <ellipse cx="460" cy="275" rx="20" ry="28" />
        <circle cx="460" cy="248" r="13" />
      </g>
    </svg>
  );
}

function PortraitPlaceholder({ style = {}, tone = 'ink' }) {
  const p = tone === 'paper' ? ['#EDE4D2','#8A6E2E','#4A3820'] : ['#1A1510','#4A3820','#8A6E2E'];
  return (
    <svg viewBox="0 0 300 400" preserveAspectRatio="xMidYMid slice" style={{ width:'100%', height:'100%', display:'block', ...style }}>
      <rect width="300" height="400" fill={p[0]} />
      <ellipse cx="150" cy="150" rx="80" ry="90" fill={p[1]} opacity="0.8" />
      <circle cx="150" cy="125" r="55" fill={p[2]} opacity="0.9" />
      <ellipse cx="150" cy="330" rx="130" ry="100" fill={p[1]} opacity="0.7" />
    </svg>
  );
}

Object.assign(window, { DishPlaceholder, StorePlaceholder, PortraitPlaceholder });