// Shared placeholder + decorative components used across all variations.

// Photo placeholder with monospace explainer ("photo shot" style).
function PhotoSlot({ label, ratio = '4/5', radius = 24, tone = 'purple', style = {} }) {
  const tones = {
    purple: { bg: 'var(--c-purple-100)', stripe: 'var(--c-purple-200)', text: 'var(--c-purple-700)' },
    cream:  { bg: 'var(--c-cream-deep)', stripe: 'var(--c-peach-soft)', text: 'var(--c-purple-700)' },
    deep:   { bg: 'var(--c-purple-700)',  stripe: 'rgba(255,255,255,0.10)', text: 'var(--c-purple-100)' },
  };
  const t = tones[tone] || tones.purple;
  return (
    <div style={{
      aspectRatio: ratio,
      borderRadius: radius,
      background: `repeating-linear-gradient(135deg, ${t.bg} 0 14px, ${t.stripe} 14px 28px)`,
      position: 'relative',
      overflow: 'hidden',
      ...style,
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase',
        color: t.text, padding: '8px 16px', textAlign: 'center',
      }}>
        <div style={{
          background: 'rgba(255,255,255,0.7)',
          padding: '6px 12px', borderRadius: 999,
          backdropFilter: 'blur(4px)',
        }}>
          {label}
        </div>
      </div>
    </div>
  );
}

// Soft organic blob, used decoratively.
function Blob({ d, fill, style = {}, size = 320 }) {
  return (
    <svg viewBox="0 0 200 200" width={size} height={size} style={{ position: 'absolute', ...style }} aria-hidden="true">
      <path d={d} fill={fill} />
    </svg>
  );
}

const BLOB_PATHS = {
  cloud:   'M44.5,-66.7C57.4,-58.3,67.1,-44.6,71.6,-29.7C76.1,-14.8,75.4,1.2,70.9,15.5C66.4,29.8,58.1,42.3,46.6,52.2C35.1,62.1,20.5,69.4,4.4,64.4C-11.7,59.4,-29.1,42.1,-42.3,25.7C-55.4,9.3,-64.4,-6.2,-62.7,-20.6C-61,-35,-48.7,-48.3,-34.7,-56.5C-20.7,-64.7,-5.1,-67.8,9.7,-67.4C24.5,-67,49,-63.1,44.5,-66.7Z',
  petal:   'M38.5,-58.6C50.5,-50.4,61.2,-40.5,67.5,-27.7C73.8,-14.8,75.7,1.1,71.4,15.4C67.1,29.6,56.6,42.3,44.1,52.5C31.7,62.7,17.3,70.4,1.2,68.8C-15,67.1,-32.9,56.1,-44.7,42.6C-56.5,29.1,-62.2,13.2,-61.6,-2.4C-61,-18,-54.1,-33.4,-43,-44.3C-31.9,-55.2,-15.9,-61.7,-1.4,-59.6C13.2,-57.6,26.4,-66.8,38.5,-58.6Z',
  pebble:  'M52.4,-58.4C66.6,-46.5,75.6,-29,75.4,-12.7C75.3,3.7,66,18.9,55,32.3C44,45.7,31.4,57.3,15.7,63.7C0,70,-18.7,71.1,-32.6,63.6C-46.5,56.1,-55.6,40,-62.8,22.6C-70.1,5.3,-75.5,-13.4,-69.6,-27.4C-63.7,-41.4,-46.5,-50.7,-30.5,-60.5C-14.4,-70.4,0.6,-80.7,15.6,-80.1C30.6,-79.4,38.2,-70.3,52.4,-58.4Z',
  smooth:  'M40,-54.5C52.4,-46.6,62.9,-35.5,68.4,-22C73.9,-8.5,74.4,7.4,68.6,20.5C62.7,33.6,50.6,43.9,37.6,52.6C24.7,61.3,10.9,68.5,-2.7,72C-16.3,75.6,-29.7,75.6,-41.6,68.4C-53.5,61.3,-63.9,47,-67.6,31.7C-71.4,16.4,-68.4,0.1,-63.5,-13.7C-58.6,-27.4,-51.7,-38.6,-41.6,-47.2C-31.5,-55.7,-18.1,-61.7,-3.8,-57.4C10.5,-53.1,27.6,-62.4,40,-54.5Z',
};

// Heart icon — abstract, used sparingly.
function HeartGlyph({ size = 24, color = 'currentColor', style = {} }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={style} aria-hidden="true">
      <path d="M12 21s-7.5-4.6-9.5-9.5C1.1 7.6 4 4 7.5 4c2 0 3.6 1.1 4.5 2.7C12.9 5.1 14.5 4 16.5 4 20 4 22.9 7.6 21.5 11.5 19.5 16.4 12 21 12 21Z"
        stroke={color} strokeWidth="1.5" strokeLinejoin="round" fill="none"/>
    </svg>
  );
}

// Monospace caption for placeholder explainers.
function MonoNote({ children, style = {} }) {
  return (
    <span style={{
      fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.1em',
      textTransform: 'uppercase', color: 'var(--c-ink-mute)',
      ...style,
    }}>{children}</span>
  );
}

// Logo Calinange — cœur de la marque (uploads/logo-icon.png) + wordmark.
function LogoMark({ variant = 'purple', size = 36, tagline = false }) {
  const fg = variant === 'cream' ? 'var(--c-cream)' : 'var(--c-purple-600)';
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <img src="uploads/logo-icon.png" alt="Calinange" width={size + 6} height={size + 6}
        style={{ display: 'block', objectFit: 'contain' }}/>
      <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1 }}>
        <span style={{
          fontFamily: 'var(--serif)', fontSize: size * 0.58, fontWeight: 500,
          color: fg, letterSpacing: '-0.01em',
        }}>Calinange</span>
        {tagline && <span style={{
          fontFamily: 'var(--mono)', fontSize: 9.5, letterSpacing: '0.14em',
          textTransform: 'uppercase', color: variant === 'cream' ? 'rgba(253,248,240,0.7)' : 'var(--c-ink-mute)',
          marginTop: 5,
        }}>Le relais douceur</span>}
      </div>
    </div>
  );
}

Object.assign(window, { PhotoSlot, Blob, BLOB_PATHS, HeartGlyph, MonoNote, LogoMark });