// Stylized clay placeholders — drop real photos into /images/ with the same filename
// to override. Each placeholder uses warm tones + faint vertical striations
// suggesting wheel-thrown ceramics.

const ClayPlaceholder = ({ label, code, ratio = '3/4', tone = 'warm', className = '', style = {} }) => {
  // Pure grey gallery palette — matches photo backdrops
  const palettes = {
    warm:    { bg: '#f0f0f0', stripe: '#e4e4e4', frame: '#c8c8c8', label: '#444' },
    clay:    { bg: '#e8e8e8', stripe: '#d8d8d8', frame: '#b8b8b8', label: '#444' },
    dark:    { bg: '#2a2a2a', stripe: '#363636', frame: '#4a4a4a', label: '#e8e8e8' },
    sand:    { bg: '#f4f4f4', stripe: '#eaeaea', frame: '#cccccc', label: '#444' },
    ash:     { bg: '#dcdcdc', stripe: '#cfcfcf', frame: '#b0b0b0', label: '#3a3a3a' },
  };
  const p = palettes[tone] || palettes.warm;

  return (
    <div
      className={`clay-ph ${className}`}
      style={{
        position: 'relative',
        aspectRatio: ratio,
        background: p.bg,
        overflow: 'hidden',
        ...style,
      }}
    >
      {/* faint vertical striations */}
      <svg
        viewBox="0 0 100 140"
        preserveAspectRatio="none"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.5 }}
      >
        {Array.from({ length: 24 }).map((_, i) => (
          <line
            key={i}
            x1={i * 4.2 + Math.sin(i) * 0.6}
            y1="0"
            x2={i * 4.2 - Math.cos(i) * 0.6}
            y2="140"
            stroke={p.stripe}
            strokeWidth="0.35"
          />
        ))}
        {/* horizontal "wheel rings" */}
        {Array.from({ length: 5 }).map((_, i) => (
          <line
            key={`h${i}`}
            x1="0" x2="100"
            y1={20 + i * 22} y2={20 + i * 22 + (i % 2 ? 0.4 : -0.4)}
            stroke={p.frame}
            strokeOpacity="0.3"
            strokeWidth="0.4"
          />
        ))}
      </svg>
      {/* faint vessel silhouette in the middle */}
      <svg
        viewBox="0 0 100 140"
        preserveAspectRatio="xMidYMid meet"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}
      >
        <path
          d="M 42 20 Q 42 12, 50 12 Q 58 12, 58 20 L 58 30 Q 72 36, 72 64 Q 72 96, 64 116 Q 60 124, 50 124 Q 40 124, 36 116 Q 28 96, 28 64 Q 28 36, 42 30 Z"
          fill={p.frame}
          fillOpacity="0.18"
        />
      </svg>
      {/* code label */}
      <div
        style={{
          position: 'absolute',
          left: 12, top: 10,
          fontFamily: 'var(--font-mono)',
          fontSize: 10,
          letterSpacing: '0.16em',
          textTransform: 'uppercase',
          color: p.label,
          opacity: 0.75,
        }}
      >
        {code}
      </div>
      {/* center label */}
      {label && (
        <div
          style={{
            position: 'absolute',
            left: 0, right: 0, bottom: 14,
            textAlign: 'center',
            fontFamily: 'var(--font-mono)',
            fontSize: 10,
            letterSpacing: '0.18em',
            textTransform: 'uppercase',
            color: p.label,
            opacity: 0.65,
          }}
        >
          {label}
        </div>
      )}
    </div>
  );
};

window.ClayPlaceholder = ClayPlaceholder;