// Photo helpers — Unsplash sources + atmospheric overlays + parallax photo

// Curated botanical garden / jungle / Lisbon imagery from Unsplash.
// Use ?w= param to control resolution.
const PHOTOS = {
  heroCanopy: 'https://images.unsplash.com/photo-1518495973542-4542c06a5843', // tree canopy looking up, sunlight through leaves
  jungleArch: 'https://images.unsplash.com/photo-1469474968028-56623f02e42e', // misty jungle path with light
  greenhouse: 'https://images.unsplash.com/photo-1545241047-6083a3684587', // botanical greenhouse interior
  monsteraDark: 'https://images.unsplash.com/photo-1545239351-1141bd82e8a6', // monstera leaves macro
  fernsBlur: 'https://images.unsplash.com/photo-1502082553048-f009c37129b9', // ferns / forest depth
  jacaranda: 'https://images.unsplash.com/photo-1597474561103-0a3a6cab809a', // jacaranda violet bloom
  lisbonStreet: 'https://images.unsplash.com/photo-1555881400-74d7acaacd8b', // lisbon tiled facade
  lisbonView: 'https://images.unsplash.com/photo-1513735492246-483525079686', // lisbon rooftops
  palmsSky: 'https://images.unsplash.com/photo-1502082553048-f009c37129b9', // palm canopy sky
  flowersMacro: 'https://images.unsplash.com/photo-1490750967868-88aa4486c946', // pink wildflowers
  weddingHands: 'https://images.unsplash.com/photo-1519741497674-611481863552', // hands / rings detail
  weddingTable: 'https://images.unsplash.com/photo-1519225421980-715cb0215aed', // outdoor reception table
  couple: 'https://images.unsplash.com/photo-1606800052052-a08af7148866', // couple in garden
  ceremonyArch: 'https://images.unsplash.com/photo-1519741497674-611481863552', // floral arch
  pathLight: 'https://images.unsplash.com/photo-1448375240586-882707db888b', // forest path sunbeams
  vineWall: 'https://images.unsplash.com/photo-1542273917363-3b1817f69a2d', // ivy covered wall
  orchids: 'https://images.unsplash.com/photo-1567592135130-faf9b2a92c5a', // orchids
  greenLeaves: 'https://images.unsplash.com/photo-1416879595882-3373a0480b5b', // green leaves macro
  tropicalDense: 'https://images.unsplash.com/photo-1500964757637-c85e8a162699', // tropical foliage dense
  wildflowers: 'https://images.unsplash.com/photo-1469259943454-aa100abba749' // wildflower meadow
};

function imgUrl(key, w = 1800) {
  const base = resolvePhotoBase(key);
  if (!base) return '';
  if (base.startsWith('/') || !base.includes('images.unsplash.com')) return base;
  return `${base}?auto=format&fit=crop&w=${w}&q=80`;
}

function resolvePhotoBase(keyOrUrl) {
  if (!keyOrUrl) return '';
  if (/^(https?:)?\/\//.test(keyOrUrl) || String(keyOrUrl).startsWith('/')) return keyOrUrl;
  const managed = window.__SITE_CONTENT?.media?.photos || {};
  return managed[keyOrUrl] || PHOTOS[keyOrUrl] || '';
}

// Full-bleed photo with Ken Burns slow zoom
function PhotoBackdrop({ src, opacity = 1, scrim = 'dark', kenBurns = true, blur = 0, style }) {
  const scrimGrad = {
    dark: 'linear-gradient(180deg, rgba(20,30,22,0.55) 0%, rgba(20,30,22,0.35) 40%, rgba(20,30,22,0.65) 100%)',
    bottom: 'linear-gradient(180deg, transparent 0%, transparent 50%, rgba(20,30,22,0.75) 100%)',
    soft: 'linear-gradient(180deg, rgba(250,250,246,0.15) 0%, rgba(20,30,22,0.45) 100%)',
    paper: 'linear-gradient(180deg, rgba(250,250,246,0.0) 0%, rgba(250,250,246,0.85) 100%)',
    none: 'transparent'
  }[scrim] || scrim;
  return (
    <div className="photo-backdrop" style={{ ...style, opacity }}>
      <div
        className={kenBurns ? 'photo-bg ken-burns' : 'photo-bg'}
        style={{ backgroundImage: `url("${src}")`, filter: blur ? `blur(${blur}px)` : 'none' }} />
      
      <div className="photo-scrim" style={{ background: scrimGrad }} />
      <div className="dappled-light" />
    </div>);

}

// Parallax photo card — image moves slower than scroll
function PhotoCard({ src, caption, ratio = '4/5', strength = 0.15, style, className = '' }) {
  const ref = React.useRef(null);
  const imgRef = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    const img = imgRef.current;
    if (!el || !img) return;
    const onScroll = () => {
      const rect = el.getBoundingClientRect();
      const center = rect.top + rect.height / 2;
      const offset = (window.innerHeight / 2 - center) * strength;
      img.style.transform = `translate3d(0, ${offset}px, 0) scale(1.15)`;
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, [strength]);
  return (
    <div ref={ref} className={`photo-card ${className}`} style={{ aspectRatio: ratio, ...style }}>
      <div ref={imgRef} className="photo-card-img" style={{ backgroundImage: `url("${src}")` }} />
      {caption && <span className="photo-card-cap">{caption}</span>}
    </div>);

}

// Full-bleed photo band — section divider
function PhotoBand({ src, height = 520, caption, scrim = 'soft', kenBurns = true }) {
  return (
    <section className="photo-band" style={{ height }}>
      <PhotoBackdrop src={src} scrim={scrim} kenBurns={kenBurns} />
      {caption &&
      <div className="photo-band-caption">
          <span className="eyebrow" style={{ opacity: 0.85, color: "rgb(80, 56, 11)", fontSize: "14px" }}>— {caption}</span>
        </div>
      }
    </section>);

}

Object.assign(window, { PHOTOS, imgUrl, resolvePhotoBase, PhotoBackdrop, PhotoCard, PhotoBand });