// Striped SVG placeholders for fashion imagery - editorial style
const StripePlaceholder = ({ label, ratio = '3/4', tint = 'lavender', className = '', style = {} }) => {
  const tints = {
    lavender: { a: '#DCDAF5', b: '#C9C4EC', ink: '#5B4AA3' },
    deep:     { a: '#9467E1', b: '#7F55C9', ink: '#FEFBFF' },
    warm:     { a: '#F2ECEE', b: '#E6DEE2', ink: '#3C2F38' },
    ink:      { a: '#1A1620', b: '#0B0A0F', ink: '#DCDAF5' },
    mint:     { a: '#D8EAE0', b: '#C3DDCE', ink: '#2E4A3C' },
  };
  const t = tints[tint] || tints.lavender;
  const [w, h] = ratio.split('/').map(Number);
  const pad = 6;
  return (
    <div
      className={`placeholder ${className}`}
      style={{
        aspectRatio: `${w}/${h}`,
        background: t.a,
        borderRadius: 30,
        overflow: 'hidden',
        position: 'relative',
        ...style,
      }}
    >
      <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0 }}>
        <defs>
          <pattern id={`stripes-${tint}-${label?.replace(/\s/g, '') || 'x'}`} width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
            <rect width="8" height="8" fill={t.a} />
            <rect width="4" height="8" fill={t.b} />
          </pattern>
        </defs>
        <rect width="100" height="100" fill={`url(#stripes-${tint}-${label?.replace(/\s/g, '') || 'x'})`} opacity="0.55" />
      </svg>
      <div style={{
        position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column',
        justifyContent: 'space-between', padding: pad * 2,
        fontFamily: '"Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif',
        color: t.ink, fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase',
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', opacity: 0.7 }}>
          <span>◆ img</span>
          <span>{w}:{h}</span>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
          <span style={{ maxWidth: '70%', lineHeight: 1.3 }}>{label}</span>
          <span style={{ opacity: 0.5 }}>stoodio</span>
        </div>
      </div>
    </div>
  );
};

// A "video" placeholder with a play glyph
const VideoPlaceholder = ({ label, ratio = '4/5', tint = 'ink', className = '', style = {} }) => (
  <div style={{ position: 'relative', ...style }} className={className}>
    <StripePlaceholder label={label} ratio={ratio} tint={tint} />
    <div style={{
      position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
      width: 88, height: 88, borderRadius: '50%',
      background: 'rgba(254, 251, 255, 0.92)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      backdropFilter: 'blur(8px)',
    }}>
      <svg width="22" height="24" viewBox="0 0 22 24" fill="none">
        <path d="M2 2L20 12L2 22V2Z" fill="#0B0A0F" />
      </svg>
    </div>
    <div style={{
      position: 'absolute', bottom: 20, left: 20,
      fontFamily: '"Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif', fontSize: 10,
      letterSpacing: '0.1em', textTransform: 'uppercase',
      color: '#FEFBFF', background: 'rgba(11,10,15,0.6)',
      padding: '6px 10px', borderRadius: 999,
      display: 'flex', alignItems: 'center', gap: 6,
    }}>
      <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#E8FF47', display: 'inline-block' }} />
      REC · LOOP
    </div>
  </div>
);

Object.assign(window, { StripePlaceholder, VideoPlaceholder });