// Shared placeholder for bake photography. Swap the internals once real photos arrive.

function BakePhoto({ tone = 'cream', icon = 'cake', ratio = '4 / 3', label }) {
  const palettes = {
    cream:     { bg: '#F7EDE2', fg: '#C97B4A' },
    terracotta:{ bg: '#D16D6A', fg: '#FFFBF5' },
    caramel:   { bg: '#C97B4A', fg: '#FFFBF5' },
    coffee:    { bg: '#3D2817', fg: '#F7EDE2' },
    rose:      { bg: '#E8A598', fg: '#FFFBF5' },
    peach:     { bg: '#F0E0CE', fg: '#8B5A2B' },
  };
  const p = palettes[tone] || palettes.cream;
  return (
    <div style={{ aspectRatio: ratio, width: '100%', background: p.bg, borderRadius: 18, overflow: 'hidden', position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <i data-lucide={icon} style={{ width: 48, height: 48, color: p.fg, opacity: 0.55 }}></i>
      {label && (
        <div style={{ position: 'absolute', bottom: 12, left: 14, fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.08em', color: p.fg, opacity: 0.7, fontWeight: 500 }}>{label}</div>
      )}
    </div>
  );
}

window.BakePhoto = BakePhoto;