// Cinematic placeholder imagery — warm dark gradients with subtle noise/lighting
// Each variant evokes a specific mood; SVG-based so it composites nicely on dark UI.

const Placeholder = ({ variant = 'portrait', label, tone = 'warm' }) => {
  // Predefined gradients evoking warm low-light barbershop interiors
  const palettes = {
    portrait: ['#2a1d12', '#0d0907', '#1f160e'],
    interior: ['#1a1208', '#070504', '#241910'],
    detail:   ['#2c2014', '#100a06', '#1c1209'],
    product:  ['#191210', '#070605', '#241814'],
    dark:     ['#0f0b08', '#050403', '#0a0807'],
    moody:    ['#231910', '#0a0706', '#15100a'],
  };
  const p = palettes[variant] || palettes.portrait;
  const id = React.useMemo(() => 'g' + Math.random().toString(36).slice(2, 9), []);

  return (
    <div className="placeholder-img" style={{ position: 'relative' }}>
      <svg width="100%" height="100%" viewBox="0 0 400 500" preserveAspectRatio="xMidYMid slice" style={{ display: 'block' }}>
        <defs>
          <radialGradient id={id + 'r'} cx="60%" cy="35%" r="70%">
            <stop offset="0%" stopColor={p[0]} />
            <stop offset="55%" stopColor={p[2]} />
            <stop offset="100%" stopColor={p[1]} />
          </radialGradient>
          <linearGradient id={id + 'l'} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="rgba(200,169,106,0.08)" />
            <stop offset="100%" stopColor="rgba(0,0,0,0.4)" />
          </linearGradient>
          <pattern id={id + 'p'} x="0" y="0" width="3" height="3" patternUnits="userSpaceOnUse">
            <rect width="3" height="3" fill="transparent" />
            <circle cx="0.5" cy="0.5" r="0.4" fill="rgba(255,255,255,0.012)" />
          </pattern>
        </defs>
        <rect width="400" height="500" fill={`url(#${id}r)`} />
        <rect width="400" height="500" fill={`url(#${id}l)`} />
        <rect width="400" height="500" fill={`url(#${id}p)`} />
        {/* Subtle warm light beam */}
        <ellipse cx="280" cy="120" rx="180" ry="90" fill="rgba(200,169,106,0.05)" />
        {/* Vignette */}
        <radialGradient id={id + 'v'} cx="50%" cy="50%" r="65%">
          <stop offset="55%" stopColor="rgba(0,0,0,0)" />
          <stop offset="100%" stopColor="rgba(0,0,0,0.85)" />
        </radialGradient>
        <rect width="400" height="500" fill={`url(#${id}v)`} />
      </svg>
      {label && (
        <div style={{
          position: 'absolute', bottom: 14, left: 14,
          fontFamily: 'ui-monospace, Menlo, monospace',
          fontSize: 9, letterSpacing: '0.18em',
          color: 'rgba(200,169,106,0.55)',
          textTransform: 'uppercase',
          padding: '4px 8px',
          border: '1px solid rgba(200,169,106,0.25)',
        }}>
          {label}
        </div>
      )}
    </div>
  );
};

window.Placeholder = Placeholder;