// Photo — realistic cinematic placeholder (seppia, film grain, figures hinted)
function Photo({ src, caption, tint='warm', index=1, alt='' }){
  // Su mobile usa immagini più leggere sostituendo la larghezza nell'URL Unsplash
  const mobileSrc = React.useMemo(() => {
    if (!src || !src.startsWith('http')) return src;
    if (window.innerWidth < 768) return src.replace(/w=\d+/, 'w=800');
    return src;
  }, [src]);

  // If src is a URL, render it; otherwise render SVG placeholder
  if (src && src.startsWith('http')) {
    return (
      <div style={{position:'relative', width:'100%', height:'100%', overflow:'hidden', background:'var(--ink-2)'}}>
        <img src={mobileSrc} alt={alt} style={{
          width:'100%', height:'100%', objectFit:'cover',
          filter: tint==='warm' ? 'sepia(.25) contrast(1.08) saturate(.85) brightness(.95)'
                : tint==='deep' ? 'contrast(1.15) saturate(.7) brightness(.8) hue-rotate(-5deg)'
                : tint==='red'  ? 'sepia(.3) saturate(1.6) hue-rotate(-20deg) contrast(1.05) brightness(.88)'
                : 'contrast(1.05)',
        }}/>
        <div style={{position:'absolute', inset:0, pointerEvents:'none', opacity:.14, mixBlendMode:'overlay',
          backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' seed='${index}'/><feColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.4  0 0 0 0 0.3  0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")`,
        }}/>
        {caption && <div className="italiana" style={{
          position:'absolute', bottom:12, left:14, fontSize:9, letterSpacing:3,
          color:'var(--cream)', opacity:.9, textShadow:'0 1px 4px rgba(0,0,0,.8)', textTransform:'uppercase',
        }}>· {caption}</div>}
      </div>
    );
  }
  // SVG placeholder fallback
  const palettes = {
    warm: { bg:'#2a1a14', fg:'#8a6a54', hi:'#d4a583' },
    deep: { bg:'#1a1512', fg:'#5a4538', hi:'#9a8572' },
    red:  { bg:'#3a0f10', fg:'#8b0a1a', hi:'#c8102e' },
    none: { bg:'#1a1512', fg:'#4a4037', hi:'#7a6f62' },
  };
  const p = palettes[tint] || palettes.warm;
  return (
    <div style={{position:'relative', width:'100%', height:'100%', overflow:'hidden', background:p.bg}}>
      <svg viewBox="0 0 400 500" preserveAspectRatio="xMidYMid slice" style={{width:'100%', height:'100%', display:'block'}}>
        <defs>
          <linearGradient id={`pg${index}`} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor={p.hi} stopOpacity=".4"/>
            <stop offset="100%" stopColor={p.bg} stopOpacity="1"/>
          </linearGradient>
          <filter id={`bl${index}`}><feGaussianBlur stdDeviation="8"/></filter>
        </defs>
        <rect width="400" height="500" fill={p.bg}/>
        <rect width="400" height="500" fill={`url(#pg${index})`}/>
        <ellipse cx={160 + (index*37)%80} cy={180 + (index*19)%60} rx="55" ry="70" fill={p.fg} opacity=".55" filter={`url(#bl${index})`}/>
        <ellipse cx={240 - (index*23)%70} cy={200 + (index*13)%40} rx="50" ry="65" fill={p.fg} opacity=".45" filter={`url(#bl${index})`}/>
        <ellipse cx="200" cy="450" rx="180" ry="80" fill={p.hi} opacity=".18" filter={`url(#bl${index})`}/>
      </svg>
      <div style={{position:'absolute', inset:0, pointerEvents:'none', opacity:.22, mixBlendMode:'overlay',
        backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.8' numOctaves='2' seed='${index}'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")`,
      }}/>
      {caption && <div className="italiana" style={{
        position:'absolute', bottom:12, left:14, fontSize:9, letterSpacing:3,
        color:'var(--cream)', opacity:.8, textTransform:'uppercase',
      }}>· {caption}</div>}
    </div>
  );
}

// Unsplash wedding-mood photos (warm tones, editorial)
const PHOTOS = {
  hero_main:   'https://images.unsplash.com/photo-1519741497674-611481863552?w=2000&q=80',
  kiss:        'https://images.unsplash.com/photo-1515934751635-c81c6bc9a2d8?w=1600&q=80',
  coffee:      'https://images.unsplash.com/photo-1509042239860-f550ce710b93?w=1400&q=80',
  lisbon:      'https://images.unsplash.com/photo-1513735492246-483525079686?w=1400&q=80',
  home:        'https://images.unsplash.com/photo-1522708323590-d24dbb6b0267?w=1400&q=80',
  cucina:      'https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=1400&q=80',
  positano:    'https://images.unsplash.com/photo-1499678329028-101435549a4e?w=1400&q=80',
  church:      'https://images.unsplash.com/photo-1548032885-b5e38734688a?w=1400&q=80',
  villa:       'https://images.unsplash.com/photo-1571896349842-33c89424de2d?w=1400&q=80',
  veil:        'https://images.unsplash.com/photo-1519741497674-611481863552?w=1200&q=80',
  bouquet:     'https://images.unsplash.com/photo-1519225421980-715cb0215aed?w=1200&q=80',
  rings:       'https://images.unsplash.com/photo-1513278974582-3e1b4a4fa21e?w=1200&q=80',
  dinner:      'https://images.unsplash.com/photo-1529634597503-139d3726fed5?w=1400&q=80',
};

Object.assign(window, { Photo, PHOTOS });