// Shared motifs: tulip silhouette (geometric), coffee-cup top view w/ grounds pattern,
// ornamental rule inspired by Ottoman border patterns (kept flat & geometric).

const Tulip = ({ size = 80, color = 'currentColor' }) => (
  <svg width={size} height={size * 1.3} viewBox="0 0 80 104" style={{ display:'block' }}>
    {/* Flat tulip — 3 petals, stem */}
    <path d="M 40 8 C 28 8 20 20 20 34 C 20 48 28 56 40 56 C 52 56 60 48 60 34 C 60 20 52 8 40 8 Z"
          fill={color} />
    <path d="M 40 12 L 40 54" stroke="#EFE8DA" strokeWidth="2.5" opacity="0.5"/>
    <path d="M 40 56 C 40 70 36 84 30 98" stroke={color} strokeWidth="2.5" fill="none"/>
    <path d="M 32 78 C 20 76 14 82 14 92" stroke={color} strokeWidth="2.5" fill="none"/>
  </svg>
);

// Coffee cup viewed from above — grounds as abstract shapes
const CupTop = ({ size = 180, palette }) => (
  <svg width={size} height={size} viewBox="0 0 180 180" style={{ display:'block' }}>
    <circle cx="90" cy="90" r="84" fill="none" stroke={palette.ink} strokeWidth="1.5"/>
    <circle cx="90" cy="90" r="70" fill={palette.paper}/>
    <circle cx="90" cy="90" r="70" fill="none" stroke={palette.ink} strokeWidth="1"/>
    {/* 'grounds' — organic splotches */}
    <path d="M 60 70 Q 75 55 95 65 Q 110 75 105 95 Q 100 115 80 112 Q 55 108 60 70 Z" fill={palette.ink} opacity="0.9"/>
    <path d="M 120 80 Q 135 90 130 110 Q 120 125 108 118" fill="none" stroke={palette.ink} strokeWidth="2"/>
    <circle cx="118" cy="70" r="3" fill={palette.ink}/>
    <circle cx="72" cy="120" r="2" fill={palette.ink}/>
    <circle cx="132" cy="120" r="4" fill={palette.ink}/>
  </svg>
);

// Ornamental divider — repeating diamond + circle motif (Ottoman-ish, but flat)
const Ornament = ({ width = 600, color = 'currentColor' }) => {
  const units = Math.floor(width / 24);
  const cells = Array.from({ length: units });
  return (
    <svg width={width} height="14" viewBox={`0 0 ${units*24} 14`} style={{ display:'block' }}>
      <line x1="0" y1="7" x2={units*24} y2="7" stroke={color} strokeWidth="0.8"/>
      {cells.map((_, i) => (
        <g key={i} transform={`translate(${i*24} 0)`}>
          {i % 2 === 0
            ? <circle cx="12" cy="7" r="2.5" fill={color}/>
            : <rect x="9" y="4" width="6" height="6" fill={color} transform="rotate(45 12 7)"/>}
        </g>
      ))}
    </svg>
  );
};

// Placeholder image block — striped, with a caption label
const Placeholder = ({ w, h, label, palette, variant = 'diag' }) => {
  const bg = palette.paper;
  const stripeColor = palette.ink;
  const pattern = variant === 'diag'
    ? `repeating-linear-gradient(45deg, ${stripeColor}10 0 1px, transparent 1px 12px)`
    : variant === 'dots'
      ? `radial-gradient(${stripeColor}30 1.2px, transparent 1.5px)`
      : `repeating-linear-gradient(0deg, ${stripeColor}10 0 1px, transparent 1px 10px)`;
  const bgSize = variant === 'dots' ? '12px 12px' : undefined;
  return (
    <div style={{
      width: w, height: h, background: bg,
      backgroundImage: pattern, backgroundSize: bgSize,
      border: `1px solid ${palette.ink}20`,
      position: 'relative', display: 'flex', alignItems: 'flex-end', padding: 10,
      overflow:'hidden'
    }}>
      <div className="mono" style={{ fontSize: 9.5, textTransform:'uppercase', letterSpacing:'0.14em', color: palette.ink, opacity: 0.7 }}>
        [ {label} ]
      </div>
    </div>
  );
};

window.Tulip = Tulip;
window.CupTop = CupTop;
window.Ornament = Ornament;
window.Placeholder = Placeholder;