/* Media placeholder — stands in for real wellness photography.
   Soft brand-tinted gradient panels with a faint icon. Swap for real
   images in production (this kit ships no licensed photos). */
const TONES = {
  sage:    { bg: 'radial-gradient(120% 120% at 20% 10%, #DDF0E3 0%, #B7DEC4 45%, #8FC9A6 100%)', ink: '#2E6B49' },
  mint:    { bg: 'radial-gradient(120% 120% at 80% 0%, #EAF7EF 0%, #CDEBD8 55%, #A9DBBC 100%)', ink: '#2E8B57' },
  forest:  { bg: 'linear-gradient(155deg, #2E6B49 0%, #0E3A24 100%)', ink: '#BFE6CD' },
  sky:     { bg: 'radial-gradient(120% 120% at 25% 15%, #E2F1FB 0%, #BFE0F4 55%, #8FC6E8 100%)', ink: '#1C6FAE' },
  sunrise: { bg: 'radial-gradient(120% 120% at 70% 10%, #FDF1DC 0%, #F6DCA9 55%, #EFC06A 100%)', ink: '#B57110' },
};

function Media({ tone = 'sage', icon = 'image', radius = 'var(--radius-xl)', ratio, height, label, children, style = {} }) {
  const t = TONES[tone] || TONES.sage;
  return React.createElement('div', {
    style: {
      position: 'relative', overflow: 'hidden', background: t.bg,
      borderRadius: radius, aspectRatio: ratio || undefined,
      height: height || undefined, width: '100%',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      ...style,
    },
  },
    React.createElement('div', { style: { position: 'absolute', inset: 0, opacity: 0.5,
      background: 'radial-gradient(60% 50% at 50% 120%, rgba(255,255,255,.5), transparent)' } }),
    !children && React.createElement(window.Icon, { name: icon, size: 40, stroke: 1.6, style: { color: t.ink, opacity: 0.55 } }),
    label && React.createElement('div', { style: { position: 'absolute', bottom: 12, left: 14,
      fontFamily: 'var(--font-mono)', fontSize: 11, color: t.ink, opacity: 0.7 } }, label),
    children,
  );
}

Object.assign(window, { Media });