// FloatingDecor.jsx — drifting hearts, petals, sparkles across the page

// Shared hook — subscribe to LL store for a given key
window.useLL = function useLL(key) {
  const [val, setVal] = React.useState(() => window.LL ? window.LL.get(key) : null);
  React.useEffect(() => {
    const on = () => setVal(window.LL.get(key));
    window.addEventListener('ll:change', on);
    return () => window.removeEventListener('ll:change', on);
  }, [key]);
  return val;
};

function FloatingDecor({ density = 20 }) {
  const items = React.useMemo(() => {
    const kinds = ['heart-solid', 'heart-outline', 'cherry-blossom', 'sparkle-pink', 'sparkle'];
    return Array.from({ length: density }, (_, i) => ({
      id: i,
      kind: kinds[i % kinds.length],
      left: Math.random() * 100,
      delay: Math.random() * 20,
      duration: 18 + Math.random() * 18,
      size: 16 + Math.random() * 28,
      opacity: 0.35 + Math.random() * 0.5,
    }));
  }, [density]);

  return (
    <div style={{
      position: 'fixed', inset: 0, pointerEvents: 'none', overflow: 'hidden', zIndex: 1,
    }}>
      {items.map(it => (
        <img
          key={it.id}
          src={`assets/icons/${it.kind}.svg`}
          style={{
            position: 'absolute',
            left: `${it.left}%`,
            bottom: '-60px',
            width: it.size, height: it.size,
            opacity: it.opacity,
            animation: `drift-up ${it.duration}s linear ${it.delay}s infinite`,
          }}
        />
      ))}
    </div>
  );
}

// Static sparkle cluster — decorative accent
function SparkleCluster({ style = {} }) {
  return (
    <div style={{ position: 'absolute', pointerEvents: 'none', ...style }}>
      <img src="assets/icons/sparkle.svg" style={{ width: 20, animation: 'twinkle 2s ease-in-out infinite' }}/>
      <img src="assets/icons/sparkle-pink.svg" style={{ width: 14, position: 'absolute', left: 22, top: 18, animation: 'twinkle 2.4s ease-in-out .5s infinite' }}/>
      <img src="assets/icons/sparkle.svg" style={{ width: 10, position: 'absolute', left: -8, top: 12, animation: 'twinkle 1.8s ease-in-out 1s infinite' }}/>
    </div>
  );
}

Object.assign(window, { FloatingDecor, SparkleCluster });