// shared.jsx — utilities and asset map used across all three artboards

// Unsplash photo URLs — tea country, colonial interiors, hill-station mood.
// Format: photo-<id> with consistent crop params.
const UNSPLASH = (id, w = 1600, h = null) => {
  const base = `https://images.unsplash.com/${id}?auto=format&fit=crop&q=80&w=${w}`;
  return h ? `${base}&h=${h}` : base;
};

const IMG = {
  // Tea country / landscape
  teaFields:   'photo-1582793988951-9aed5509eb97',
  teaPicker:   'photo-1597318181409-cf64d0b5d8a2',
  mistMountain:'photo-1464822759023-fed622ff2c3b',
  hillsDawn:   'photo-1506905925346-21bda4d32df4',
  greenValley: 'photo-1518495973542-4542c06a5843',
  // Colonial / heritage interiors
  verandah:    'photo-1564540583246-934409427776',
  vintageRoom: 'photo-1586023492125-27b2c045efd7',
  library:     'photo-1513519245088-0e12902e5a38',
  hallway:     'photo-1582719508461-905c673771fd',
  chair:       'photo-1505693416388-ac5ce068fe85',
  // Suites
  suite:       'photo-1551882547-ff40c63fe5fa',
  bed:         'photo-1631049307264-da0ec9d70304',
  bath:        'photo-1552321554-5fefe8c9ef14',
  // Dining / tea
  teaCup:      'photo-1556679343-c7306c1976bc',
  highTea:     'photo-1559305616-3f99cd43e353',
  diningRoom:  'photo-1592861956120-e524fc739696',
  // Garden / exterior
  garden:      'photo-1418065460487-3e41a6c84dc5',
  facade:      'photo-1542314831-068cd1dbfeeb',
  pathway:     'photo-1520250497591-112f2f40a3f4',
  // Nuwara Eliya tea estates (confirmed location)
  aerialTea:      'photo-ueBzLdRhhxQ',
  teaFieldDetail: 'photo-lzzPbPGaOjY',
};

// Local photo overrides — hotel's own images. Keys match IMG map above.
const LOCAL = {
  verandah:     '/images/front-proch-1.jpg',
  mistMountain: '/images/hotelside.jpg',
  hillsDawn:    '/images/nuwara1.jpg',
  vintageRoom:  '/images/stair-shadow-1.jpg',
  library:      '/images/artwork-1.jpg',
  diningRoom:   '/images/breakfastnew.jpg',
  highTea:      '/images/hightea.jpg',
  teaCup:       '/images/dinner-music-opt.jpg',
  bed:          '/images/room1-1.jpg',
  suite:        '/images/room2-1.jpg',
  chair:        '/images/upper-room-1.jpg',
  hallway:      '/images/upper-hallway-1.jpg',
  aerialTea:    '/images/tours-1.jpg',
  gallery4:     '/images/upper-room-2-1.jpg',
  gallery5:     '/images/upper-staircase-1.jpg',
  gallery7:     '/images/hillside-1.jpg',
  story2:       '/images/upper-staircase-1.jpg',
  doorGlass:    '/images/door-glass-detail-1.jpg',
  doorDetail1:  '/images/door-detail-1.jpg',
  doorDetail2:  '/images/door-detail2-1.jpg',
  phonograph:    '/images/phonograph-detail.jpg',
  goldLamp:      '/images/gold-lamp-detail.jpg',
  phoneDetail:   '/images/phone-detail.jpg',
  bath:          '/images/bath-1.jpg',
  garden:        '/images/garden-1.jpg',
  teaFieldDetail:'/images/town.jpg',
  outdoorTable:  '/images/outdoor-table-1.jpg',
  bedroom:       '/images/bedroom-1.jpg',
};

const img = (key, w, h) => LOCAL[key] || UNSPLASH(IMG[key] || IMG.facade, w, h);

// CSS filter strings for the imagery-treatment Tweak. Applied via a
// CSS var --img-filter on each artboard.
const IMG_FILTERS = {
  color:   'none',
  bw:      'grayscale(1) contrast(1.05)',
  sepia:   'sepia(0.55) contrast(1.02) saturate(0.85) brightness(0.98)',
  duotone: 'grayscale(1) sepia(1) hue-rotate(155deg) saturate(1.6) brightness(0.92)',
};

// Curated palette options. Each entry is { id, label, swatches: [3] } where
// swatches are [accent, ink, paper]. Each artboard interprets these in its
// own register so the broad mood stays distinct.
const PALETTES = [
  { id: 'house',    label: 'House',    swatches: ['#7a2e1f', '#1f1a14', '#f5efe4'] },
  { id: 'estate',   label: 'Estate',   swatches: ['#3d5a3c', '#1a1f1a', '#eef0e8'] },
  { id: 'monsoon',  label: 'Monsoon',  swatches: ['#2c4a5c', '#10171d', '#e8ecef'] },
  { id: 'tobacco',  label: 'Tobacco',  swatches: ['#8a5a2b', '#221a10', '#f1e9dc'] },
];

// Labeled image-placeholder fallback if Unsplash blocks. Striped SVG with
// mono caption. Wrap an <img onerror={()=>...}> if needed.
const stripedPlaceholder = (label, w = 800, h = 600, color = '#cbb89a') => {
  const svg = `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 ${w} ${h}'>
    <defs><pattern id='p' width='12' height='12' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'>
    <rect width='12' height='12' fill='${color}'/><line x1='0' y1='0' x2='0' y2='12' stroke='rgba(0,0,0,0.07)' stroke-width='6'/></pattern></defs>
    <rect width='100%' height='100%' fill='url(%23p)'/>
    <text x='50%' y='50%' text-anchor='middle' dy='.3em' font-family='ui-monospace,monospace' font-size='14' fill='rgba(0,0,0,0.5)'>${label}</text>
  </svg>`.replace(/\n/g, '').replace(/#/g, '%23');
  return `data:image/svg+xml;utf8,${svg}`;
};

Object.assign(window, { IMG, img, UNSPLASH, IMG_FILTERS, PALETTES, stripedPlaceholder });