// Shared visual primitives used across all three directions.
// Striped SVG placeholders for imagery, small icon set, Hebrew date helper.

// Striped placeholder — never a hand-drawn SVG illustration. Just diagonal
// stripes at varying densities w/ a mono label explaining what goes here.
function Placeholder({ label, tone = 'warm', density = 'med', style = {}, children, className, src, alt, objectPosition = 'center' }) {
  // If a real photo src is provided, skip the striped pattern and render the image.
  if (src) {
    return (
      <div className={className} style={{ position: 'relative', overflow: 'hidden', background: '#2a2824', ...style }}>
        <img src={src} alt={alt || label || ''} style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%',
          objectFit: 'cover', objectPosition, display: 'block',
        }}/>
        {children}
      </div>
    );
  }
  const palettes = {
    accent:  { a: '#cf6e44', b: '#b8532a', ink: '#fff' }, // matches p.accent terracotta
    warm:    { a: '#e8ddc9', b: '#d9c9a8', ink: '#6b5a3e' },
    cream:   { a: '#f0e8d5', b: '#e3d5b4', ink: '#7a6a4a' },
    espresso:{ a: '#3a2f22', b: '#4a3c2a', ink: '#c9b488' },
    olive:   { a: '#d9dac4', b: '#c4c6a8', ink: '#4d5138' },
    clay:    { a: '#d9b8a0', b: '#c49a7e', ink: '#5a3a26' },
    stone:   { a: '#e8e5de', b: '#d4cfc3', ink: '#5a5548' },
    charcoal:{ a: '#2a2824', b: '#3a3731', ink: '#c9c2b3' },
    ivory:   { a: '#f5f0e4', b: '#ebe3d0', ink: '#6a5f48' },
  };
  const p = palettes[tone] || palettes.warm;
  const gap = density === 'tight' ? 6 : density === 'loose' ? 18 : 11;
  const uid = React.useId().replace(/:/g, '');
  return (
    <div className={className} style={{
      position: 'relative',
      background: p.a,
      overflow: 'hidden',
      color: p.ink,
      ...style,
    }}>
      <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0 }} preserveAspectRatio="none" aria-hidden>
        <defs>
          <pattern id={`stripes-${uid}`} width={gap*2} height={gap*2} patternUnits="userSpaceOnUse" patternTransform="rotate(-35)">
            <rect width={gap*2} height={gap*2} fill={p.a}/>
            <rect width={gap} height={gap*2} fill={p.b}/>
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill={`url(#stripes-${uid})`} opacity="0.55"/>
      </svg>
      {label && (
        <div style={{
          position: 'absolute', inset: 0, display: 'flex', alignItems: 'flex-end',
          padding: '10px 12px', fontSize: 10, fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
          letterSpacing: '0.04em', textTransform: 'uppercase', opacity: 0.78,
          pointerEvents: 'none',
        }}>
          <span>▢ {label}</span>
        </div>
      )}
      {children}
    </div>
  );
}

// Tiny icon set — line icons at 1.5 stroke, inherit color.
function Ico({ name, size = 16, stroke = 1.5, style }) {
  const s = { width: size, height: size, stroke: 'currentColor', strokeWidth: stroke, fill: 'none', strokeLinecap: 'round', strokeLinejoin: 'round', ...style };
  switch (name) {
    case 'search': return <svg viewBox="0 0 24 24" style={s}><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>;
    case 'calendar': return <svg viewBox="0 0 24 24" style={s}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg>;
    case 'guests': return <svg viewBox="0 0 24 24" style={s}><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 3.5-7 8-7s8 3 8 7"/></svg>;
    case 'pin': return <svg viewBox="0 0 24 24" style={s}><path d="M12 22s7-7 7-12a7 7 0 1 0-14 0c0 5 7 12 7 12z"/><circle cx="12" cy="10" r="2.5"/></svg>;
    case 'bed': return <svg viewBox="0 0 24 24" style={s}><path d="M3 18v-7h18v7M3 14h18M7 11V9a2 2 0 0 1 2-2h3v4"/></svg>;
    case 'bath': return <svg viewBox="0 0 24 24" style={s}><path d="M3 11h18v4a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4v-4zM6 11V6a2 2 0 0 1 2-2h1M5 19l-1 2M19 19l1 2"/></svg>;
    case 'flame': return <svg viewBox="0 0 24 24" style={s}><path d="M12 3s5 4 5 9a5 5 0 0 1-10 0c0-2 1-3 2-4 0 2 1 3 2 3 0-3-1-5 1-8z"/></svg>;
    case 'candle': return <svg viewBox="0 0 24 24" style={s}><path d="M12 3c1.5 1.5 1.5 3 0 4.5-1.5-1.5-1.5-3 0-4.5z"/><rect x="9" y="8" width="6" height="12" rx="1"/><path d="M7 20h10"/></svg>;
    case 'book': return <svg viewBox="0 0 24 24" style={s}><path d="M4 4h7a3 3 0 0 1 3 3v14a2 2 0 0 0-2-2H4zM20 4h-7a3 3 0 0 0-3 3v14a2 2 0 0 1 2-2h8z"/></svg>;
    case 'shield': return <svg viewBox="0 0 24 24" style={s}><path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6z"/><path d="m9 12 2 2 4-4"/></svg>;
    case 'arrow': return <svg viewBox="0 0 24 24" style={s}><path d="M5 12h14M13 6l6 6-6 6"/></svg>;
    case 'arrowL': return <svg viewBox="0 0 24 24" style={s}><path d="M19 12H5M11 6l-6 6 6 6"/></svg>;
    case 'close': return <svg viewBox="0 0 24 24" style={s}><path d="m6 6 12 12M18 6 6 18"/></svg>;
    case 'check': return <svg viewBox="0 0 24 24" style={s}><path d="m5 12 5 5L20 7"/></svg>;
    case 'plus': return <svg viewBox="0 0 24 24" style={s}><path d="M12 5v14M5 12h14"/></svg>;
    case 'minus': return <svg viewBox="0 0 24 24" style={s}><path d="M5 12h14"/></svg>;
    case 'menu': return <svg viewBox="0 0 24 24" style={s}><path d="M4 7h16M4 12h16M4 17h16"/></svg>;
    case 'star': return <svg viewBox="0 0 24 24" style={{...s, fill: 'currentColor'}}><path d="m12 3 2.8 5.8 6.2.9-4.5 4.4 1 6.1L12 17.3 6.5 20.2l1-6.1L3 9.7l6.2-.9z"/></svg>;
    case 'heart': return <svg viewBox="0 0 24 24" style={s}><path d="M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.5A4 4 0 0 1 19 10c0 5.5-7 10-7 10z"/></svg>;
    case 'filter': return <svg viewBox="0 0 24 24" style={s}><path d="M4 5h16M7 12h10M10 19h4"/></svg>;
    case 'map': return <svg viewBox="0 0 24 24" style={s}><path d="m3 6 6-2 6 2 6-2v14l-6 2-6-2-6 2zM9 4v16M15 6v16"/></svg>;
    case 'wifi': return <svg viewBox="0 0 24 24" style={s}><path d="M2 9a15 15 0 0 1 20 0M5 13a10 10 0 0 1 14 0M8.5 16.5a5 5 0 0 1 7 0"/><circle cx="12" cy="20" r="1" fill="currentColor"/></svg>;
    case 'key': return <svg viewBox="0 0 24 24" style={s}><circle cx="8" cy="15" r="4"/><path d="m11 13 10-10M17 7l2 2M14 10l2 2"/></svg>;
    case 'dot': return <svg viewBox="0 0 24 24" style={s}><circle cx="12" cy="12" r="3" fill="currentColor"/></svg>;
    case 'home': return <svg viewBox="0 0 24 24" style={s}><path d="M3 11.5 12 4l9 7.5V20a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z"/></svg>;
    case 'scale': return <svg viewBox="0 0 24 24" style={s}><path d="M12 3v18M5 7h14M5 7l-2 6a4 4 0 0 0 8 0zM19 7l2 6a4 4 0 0 1-8 0z"/></svg>;
    case 'sparkle': return <svg viewBox="0 0 24 24" style={s}><path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5 18 18M6 18l2.5-2.5M15.5 8.5 18 6"/></svg>;
    default: return null;
  }
}

window.Placeholder = Placeholder;
window.Ico = Ico;