// Decorative SVG ornaments used across the LP.
// All stroke/fill via currentColor so they re-tint per theme.

const CloudShape = ({ style, color = '#fff', opacity = 0.85 }) => (
  <svg viewBox="0 0 220 110" style={style} aria-hidden>
    <defs>
      <radialGradient id="cloudGrad" cx="50%" cy="40%" r="60%">
        <stop offset="0%" stopColor={color} stopOpacity={opacity}/>
        <stop offset="100%" stopColor={color} stopOpacity={opacity * 0.2}/>
      </radialGradient>
    </defs>
    <path d="M30 70 Q10 70 14 50 Q18 28 44 32 Q50 14 78 18 Q98 8 118 22 Q146 14 156 38 Q188 32 196 56 Q210 70 188 80 Q150 92 110 86 Q70 92 44 84 Q24 82 30 70 Z"
      fill="url(#cloudGrad)"/>
  </svg>
);

const Twinkle = ({ size = 18, color = 'currentColor', style }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" style={style} aria-hidden>
    <path d="M12 2 L13.6 9.4 L21 11 L13.6 12.6 L12 20 L10.4 12.6 L3 11 L10.4 9.4 Z"
      fill={color} opacity="0.9"/>
    <path d="M19 3 L19.6 5.4 L22 6 L19.6 6.6 L19 9 L18.4 6.6 L16 6 L18.4 5.4 Z"
      fill={color} opacity="0.6"/>
  </svg>
);

const Star4 = ({ size = 12, color = 'currentColor', style }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" style={style} aria-hidden>
    <path d="M12 2 L13.4 10.6 L22 12 L13.4 13.4 L12 22 L10.6 13.4 L2 12 L10.6 10.6 Z" fill={color}/>
  </svg>
);

const MoonCrescent = ({ size = 60, color = '#fff', style }) => (
  <svg width={size} height={size} viewBox="0 0 60 60" style={style} aria-hidden>
    <defs>
      <radialGradient id="moonG" cx="35%" cy="35%" r="65%">
        <stop offset="0%" stopColor="#fff" stopOpacity="1"/>
        <stop offset="100%" stopColor={color} stopOpacity="0.85"/>
      </radialGradient>
    </defs>
    <circle cx="30" cy="30" r="22" fill="url(#moonG)"/>
    <circle cx="38" cy="26" r="20" fill="var(--bg-3, #f7d9ea)" opacity="0.85"/>
  </svg>
);

const RibbonShape = ({ style, color = 'var(--gold)' }) => (
  <svg viewBox="0 0 240 60" style={style} aria-hidden>
    <path d="M5 30 Q40 5 80 30 Q120 55 160 30 Q200 5 235 30"
      stroke={color} strokeWidth="1" fill="none" opacity="0.6"/>
    <path d="M5 32 Q40 7 80 32 Q120 57 160 32 Q200 7 235 32"
      stroke={color} strokeWidth="0.5" fill="none" opacity="0.35"/>
  </svg>
);

// A floating ornament layer that sits behind hero content.
const HeroSky = () => (
  <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none' }}>
    {/* upper clouds */}
    <CloudShape style={{
      position: 'absolute', top: '6%', left: '-12%', width: '70%',
      animation: 'floatY 9s ease-in-out infinite',
    }} color="#ffffff" opacity={0.9}/>
    <CloudShape style={{
      position: 'absolute', top: '14%', right: '-18%', width: '72%',
      animation: 'floatY 11s ease-in-out infinite 1s',
    }} color="#ffffff" opacity={0.78}/>
    <CloudShape style={{
      position: 'absolute', top: '38%', left: '-8%', width: '55%',
      animation: 'floatY 13s ease-in-out infinite 2s',
    }} color="#fff5f8" opacity={0.7}/>
    <CloudShape style={{
      position: 'absolute', bottom: '8%', right: '-10%', width: '60%',
      animation: 'floatY 10s ease-in-out infinite 0.5s',
    }} color="#f3e6f7" opacity={0.7}/>

    {/* moon */}
    <MoonCrescent size={80} color="#fff5f8" style={{
      position: 'absolute', top: '8%', right: '10%',
      filter: 'drop-shadow(0 6px 18px rgba(217, 122, 153, 0.25))',
    }}/>

    {/* sparkles */}
    {[
      { top: '18%', left: '14%', size: 14, delay: 0 },
      { top: '32%', right: '22%', size: 10, delay: 1.4 },
      { top: '50%', left: '20%', size: 16, delay: 0.6 },
      { top: '62%', right: '14%', size: 12, delay: 2 },
      { top: '78%', left: '36%', size: 9, delay: 1 },
      { top: '24%', left: '46%', size: 8, delay: 1.8 },
    ].map((s, i) => (
      <Twinkle key={i} size={s.size} color="var(--gold)" style={{
        position: 'absolute', ...s,
        animation: `twinkle 3.4s ease-in-out infinite ${s.delay}s`,
      }}/>
    ))}
  </div>
);

Object.assign(window, { CloudShape, Twinkle, Star4, MoonCrescent, RibbonShape, HeroSky });