import React from 'react';
import { createRoot } from 'react-dom/client';
import { Glass } from 'glisse';
import 'glisse/styles.css';

function addGlassSurface(slot, className) {
  createRoot(slot).render(
    <Glass
      className={className}
      aria-hidden="true"
      style={{
        '--lg-glass-bend': 0.42,
        '--lg-glass-dispersion': 0.32,
        '--lg-blur': '0px',
        '--lg-rim-shine': 0.16,
        background: 'rgba(255, 255, 255, .08)',
      }}
    />
  );
}

document.querySelectorAll('.product-card').forEach((card) => {
  const art = card.querySelector('.product-art');
  if (!art) return;

  const scene = document.createElement('div');
  scene.className = 'product-art-scene';
  scene.setAttribute('data-glisse-backdrop', '');
  const label = art.querySelector('.product-tag');
  [...art.children].forEach((child) => {
    if (child !== label) scene.append(child);
  });
  art.prepend(scene);

  const surface = document.createElement('div');
  surface.className = 'product-glass-mount';
  art.append(surface);
  addGlassSurface(surface, 'product-glass-surface');
});

document.querySelectorAll('.store-photo').forEach((photo) => {
  const image = photo.querySelector('img');
  if (!image) return;
  image.setAttribute('data-glisse-backdrop', '');

  const surface = document.createElement('div');
  surface.className = 'store-glass-mount';
  photo.append(surface);
  addGlassSurface(surface, 'store-glass-surface');
});