// Painterly sky background — drifting gradient + procedural clouds that
// parallax left-to-right. Used as the base layer for most scenes.
//
// Exports: SkyBackdrop, Cloud

function SkyBackdrop({ palette = 'day' }) {
  const time = useTime();

  // Two palette modes: "day" (light blue/cream) and "dusk" (lavender/peach)
  const grads = {
    day: {
      a: '#cfe2f0', // top
      b: '#e9ecee', // mid
      c: '#f4ebe0', // bottom horizon
    },
    dusk: {
      a: '#b8b4d8',
      b: '#e0cfd6',
      c: '#f5e5d8',
    },
    dream: {
      a: '#c9c3e4',
      b: '#e4d9e6',
      c: '#f6ead9',
    },
  };
  const p = grads[palette] || grads.day;

  // Very slow breathing on the gradient for life
  const breathe = Math.sin(time * 0.25) * 0.5 + 0.5;

  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: `linear-gradient(180deg, ${p.a} 0%, ${p.b} 55%, ${p.c} 100%)`,
      transform: `scale(${1 + breathe * 0.01})`,
      transformOrigin: 'center',
    }} />
  );
}

// A soft, painterly cloud made of stacked offset blobs with blur.
// Drifts horizontally with `speed`; wraps around the stage.
function Cloud({
  y = 200,
  startX = 0,
  speed = 30,  // px/sec
  scale = 1,
  opacity = 1,
  tone = '#ffffff',
  stageWidth = 1920,
  blur = 30,
}) {
  const time = useTime();
  const x = ((startX + time * speed) % (stageWidth + 600)) - 300;

  const blobs = [
    { dx: 0,   dy: 0,   w: 260, h: 110, o: 0.95 },
    { dx: 120, dy: -30, w: 240, h: 120, o: 0.9 },
    { dx: 240, dy: 10,  w: 220, h: 100, o: 0.85 },
    { dx: -60, dy: 40,  w: 180, h: 90,  o: 0.8 },
    { dx: 350, dy: 40,  w: 200, h: 80,  o: 0.75 },
  ];

  return (
    <div style={{
      position: 'absolute',
      left: x, top: y,
      transform: `scale(${scale})`,
      transformOrigin: 'left center',
      opacity,
      filter: `blur(${Math.max(4, blur * 0.15)}px)`,
      pointerEvents: 'none',
    }}>
      {blobs.map((b, i) => (
        <div key={i} style={{
          position: 'absolute',
          left: b.dx, top: b.dy,
          width: b.w, height: b.h,
          background: tone,
          opacity: b.o,
          borderRadius: '50%',
          filter: `blur(${blur}px)`,
        }} />
      ))}
    </div>
  );
}

// A stylized sun/moon — subtle glow disk
function Sun({ x = 1500, y = 260, size = 160, color = '#fff4e0', opacity = 0.8 }) {
  return (
    <div style={{
      position: 'absolute',
      left: x - size / 2, top: y - size / 2,
      width: size, height: size,
      background: `radial-gradient(circle, ${color} 0%, ${color}99 40%, transparent 72%)`,
      opacity,
      pointerEvents: 'none',
    }} />
  );
}

// Vignette for depth
function Vignette({ strength = 0.35 }) {
  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: `radial-gradient(ellipse at center, transparent 40%, rgba(30,20,50,${strength}) 100%)`,
      pointerEvents: 'none',
      mixBlendMode: 'multiply',
    }} />
  );
}

// Soft grain overlay for painterly feel
function Grain({ opacity = 0.12 }) {
  // SVG noise turbulence, rendered once
  const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'>
    <filter id='n'>
      <feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/>
      <feColorMatrix values='0 0 0 0 0.4  0 0 0 0 0.35  0 0 0 0 0.3  0 0 0 0.5 0'/>
    </filter>
    <rect width='100%' height='100%' filter='url(%23n)'/>
  </svg>`;
  const enc = encodeURIComponent(svg).replace(/'/g, '%27');
  return (
    <div style={{
      position: 'absolute', inset: 0,
      backgroundImage: `url("data:image/svg+xml;utf8,${enc}")`,
      opacity,
      pointerEvents: 'none',
      mixBlendMode: 'overlay',
    }} />
  );
}

Object.assign(window, { SkyBackdrop, Cloud, Sun, Vignette, Grain });