---
import Cloud from './Cloud.astro';
/**
 * Soft sky backdrop placed behind a product mock inside a feature
 * section. Lighter than the hero — sky-50 → white with a realistic
 * painterly cloud and a subtle sun bloom.
 */
interface Props {
  variant?: 'morning' | 'noon' | 'dusk';
  class?: string;
}
const { variant = 'morning', class: className = '' } = Astro.props;

const variants = {
  morning: {
    grad: 'radial-gradient(80% 60% at 28% 18%, #e0f2fe 0%, #f0f9ff 38%, #ffffff 80%)',
    sun:  { top: '8%',  right: '12%', color: 'rgba(186, 230, 253, 0.85)' },
    cloud: 4,
  },
  noon: {
    grad: 'radial-gradient(80% 70% at 70% 24%, #e0f2fe 0%, #f0f9ff 42%, #ffffff 82%)',
    sun:  { top: '4%',  right: '18%', color: 'rgba(186, 230, 253, 0.95)' },
    cloud: 5,
  },
  dusk: {
    grad: 'radial-gradient(80% 70% at 50% 16%, #ede9fe 0%, #f0f9ff 40%, #ffffff 82%)',
    sun:  { top: '10%', right: '22%', color: 'rgba(196, 181, 253, 0.65)' },
    cloud: 3,
  },
};
const v = variants[variant];
---
<div class={`absolute inset-0 pointer-events-none overflow-hidden rounded-[inherit] ${className}`} aria-hidden="true">
  <div class="absolute inset-0" style={`background: ${v.grad};`}></div>

  <div class="absolute" style={`top: ${v.sun.top}; right: ${v.sun.right}; width: 340px; height: 340px; border-radius: 9999px; background: radial-gradient(circle, ${v.sun.color} 0%, transparent 70%); filter: blur(40px);`}></div>

  <div class="cloud-drift cloud-2 absolute" style="top: -30px; left: -50px; width: 360px; opacity: 0.85;">
    <Cloud variant={v.cloud} opacity={0.9} />
  </div>
  <div class="cloud-drift cloud-3 absolute" style="bottom: 10%; right: 6%; width: 220px; opacity: 0.55;">
    <Cloud variant={2} opacity={0.7} />
  </div>
</div>
