/* ── Zafa — cover imagery: realistic category photos, droppable via image-slot ── */

function _hash(s) { let h = 0; s = String(s); for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) | 0; return Math.abs(h); }

// theme key for a category id (stable, varied)
function catTheme(id) { return THEME_KEYS[_hash(id) % THEME_KEYS.length]; }

// one strong photo keyword per category (for realistic stock imagery)
const CAT_KW = {
  flowers:'bouquet', photography:'wedding,photography', videography:'wedding,videography', makeup:'makeup',
  hair:'hairstyle', stage:'wedding', lighting:'lights', food:'banquet', kiosk:'market',
  hospitality:'waiter', decor:'decoration', venue:'ballroom', planning:'wedding',
  invitations:'invitation', cake:'cake', dates:'dates', coffee:'coffee', jewelry:'jewelry',
  attire:'gown', suits:'suit', cars:'car', henna:'henna', perfume:'perfume', dj:'dj',
  band:'band', dancers:'dance', fireworks:'fireworks', drone:'drone', photobooth:'party',
  tents:'tent', furniture:'furniture', gifts:'gift', calligraphy:'calligraphy', spa:'spa',
  nails:'manicure', ushers:'event', valet:'car', security:'security', transport:'bus',
  balloons:'balloons', stationery:'stationery', rings:'ring', bukhoor:'incense',
  chocolate:'chocolate', screens:'screen', sound:'speaker', flowers2:'flowers', mc:'microphone',
};

// realistic photo URL (LoremFlickr serves a real photo per keyword; deterministic via lock)
function photoURL(keyword, seed, w = 600, h = 420) {
  const kw = keyword || 'wedding';
  const lock = (_hash(seed != null ? seed : kw) % 98) + 1;
  return `https://loremflickr.com/${w}/${h}/${encodeURIComponent(kw)}?lock=${lock}`;
}

// solid-color SVG fallback (no gradients) — shown behind the photo while it loads / if it fails
function coverURI(themeKey, iconKey, seed = '') {
  const th = THEMES[themeKey] || THEMES.rose;
  const icon = ICONS[iconKey] || ICONS.spark;
  const paths = icon.split('M').filter(Boolean).map((s) => `<path d='M${s}'/>`).join('');
  const h = _hash(seed || iconKey);
  const rot = (h % 24) - 12;
  const gx = 232 + (h % 40), gy = 96 + ((h >> 3) % 40);
  const svg =
`<svg xmlns='http://www.w3.org/2000/svg' width='420' height='300' viewBox='0 0 420 300'>
<rect width='420' height='300' fill='${th.accent}'/>
<circle cx='360' cy='262' r='118' fill='#000' opacity='0.07'/>
<g transform='translate(${gx} ${gy}) rotate(${rot}) scale(7.6)' fill='none' stroke='#fff' stroke-opacity='0.30' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'>${paths}</g>
</svg>`;
  return 'data:image/svg+xml,' + encodeURIComponent(svg);
}

/* Realistic, droppable cover. id REQUIRED so a user drop persists.
   `cat` (category id) or `kw` (keyword) drives the photo; `theme`/`icon` give the fallback.
   arch=true clips a bridal-arch top. */
function CoverArt({ theme, icon, cat, kw, id, seed, radius = 0, fit = 'cover', ph, style, arch = false, archRadius = 150, w, h, src: srcOverride }) {
  const keyword = kw || CAT_KW[cat] || (icon && Object.keys(CAT_KW).find((k) => CAT_KW[k] === icon)) || 'wedding';
  const src = srcOverride || photoURL(keyword, seed != null ? seed : id, w, h);
  const fallback = coverURI(theme || catTheme(cat || keyword), icon || 'spark', seed != null ? seed : id);
  const slot = React.createElement('image-slot', {
    id, src, radius: String(radius), fit, placeholder: ph || '',
    // solid fallback art sits behind the loading/failed photo so it's never blank-white
    style: { width: '100%', height: '100%', display: 'block', backgroundImage: `url("${fallback}")`, backgroundSize: 'cover', backgroundPosition: 'center', ...(arch ? {} : style) },
  });
  if (!arch) return slot;
  return (
    <div style={{ width: '100%', height: '100%', overflow: 'hidden', borderRadius: `${archRadius}px ${archRadius}px 22px 22px`, ...style }}>
      {slot}
    </div>);

}

// branded monogram logo (initials in serif on a solid theme color) — droppable fallback
function monogramURI(name, themeKey, bg) {
  const th = THEMES[themeKey] || THEMES.rose;
  const fill = bg || th.accent;
  const initials = String(name || '').trim().split(/\s+/).slice(0, 2).map((w) => w[0] || '').join('').toUpperCase();
  const svg =
`<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'>
<rect width='240' height='240' fill='${fill}'/>
<circle cx='120' cy='120' r='84' fill='none' stroke='#fff' stroke-opacity='0.4' stroke-width='2'/>
<text x='120' y='118' text-anchor='middle' dominant-baseline='central' font-family='Playfair Display, Georgia, serif' font-size='96' font-weight='600' fill='#fff' letter-spacing='2'>${initials}</text>
<text x='120' y='190' text-anchor='middle' font-family='Montserrat, sans-serif' font-size='15' font-weight='600' letter-spacing='3' fill='#fff' fill-opacity='0.85'>EST. 2019</text>
</svg>`;
  return 'data:image/svg+xml,' + encodeURIComponent(svg);
}

Object.assign(window, { coverURI, photoURL, monogramURI, catTheme, CoverArt, CAT_KW, _hash });