<template>
  <div class="animated-background">
    <!-- Fondo día -->
    <div class="landscape day-landscape" :class="{ active: !isNight }">
      <!-- Cielo diurno con gradiente -->
      <svg class="sky" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid slice">
        <defs>
          <linearGradient id="daySkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" style="stop-color:#87CEEB;stop-opacity:1" />
            <stop offset="100%" style="stop-color:#E0F6FF;stop-opacity:1" />
          </linearGradient>
        </defs>
        <rect width="1920" height="1080" fill="url(#daySkyGradient)" />
      </svg>

      <!-- Sol -->
      <svg class="sun" viewBox="0 0 200 200" width="120" height="120">
        <defs>
          <radialGradient id="sunGradient">
            <stop offset="0%" style="stop-color:#FFF176;stop-opacity:1" />
            <stop offset="100%" style="stop-color:#FFD54F;stop-opacity:0.8" />
          </radialGradient>
        </defs>
        <circle cx="100" cy="100" r="50" fill="url(#sunGradient)" />
        <g class="sun-rays">
          <line x1="100" y1="20" x2="100" y2="0" stroke="#FFD54F" stroke-width="3" stroke-linecap="round" />
          <line x1="150" y1="35" x2="165" y2="20" stroke="#FFD54F" stroke-width="3" stroke-linecap="round" />
          <line x1="180" y1="100" x2="200" y2="100" stroke="#FFD54F" stroke-width="3" stroke-linecap="round" />
          <line x1="150" y1="165" x2="165" y2="180" stroke="#FFD54F" stroke-width="3" stroke-linecap="round" />
          <line x1="100" y1="180" x2="100" y2="200" stroke="#FFD54F" stroke-width="3" stroke-linecap="round" />
          <line x1="50" y1="165" x2="35" y2="180" stroke="#FFD54F" stroke-width="3" stroke-linecap="round" />
          <line x1="20" y1="100" x2="0" y2="100" stroke="#FFD54F" stroke-width="3" stroke-linecap="round" />
          <line x1="50" y1="35" x2="35" y2="20" stroke="#FFD54F" stroke-width="3" stroke-linecap="round" />
        </g>
      </svg>

      <!-- Nubes diurnas -->
      <svg class="cloud cloud-1" viewBox="0 0 200 100" width="180" height="90">
        <path d="M 30,60 Q 30,40 50,40 Q 50,20 70,20 Q 90,20 90,40 Q 110,40 110,60 Q 110,80 90,80 L 50,80 Q 30,80 30,60 Z"
              fill="#FFFFFF" opacity="0.9" />
      </svg>
      <svg class="cloud cloud-2" viewBox="0 0 200 100" width="150" height="75">
        <path d="M 30,60 Q 30,40 50,40 Q 50,20 70,20 Q 90,20 90,40 Q 110,40 110,60 Q 110,80 90,80 L 50,80 Q 30,80 30,60 Z"
              fill="#FFFFFF" opacity="0.8" />
      </svg>
      <svg class="cloud cloud-3" viewBox="0 0 200 100" width="200" height="100">
        <path d="M 30,60 Q 30,40 50,40 Q 50,20 70,20 Q 90,20 90,40 Q 110,40 110,60 Q 110,80 90,80 L 50,80 Q 30,80 30,60 Z"
              fill="#FFFFFF" opacity="0.7" />
      </svg>

      <!-- Montañas lejanas (más claras) -->
      <svg class="mountains mountains-far" viewBox="0 0 1920 600" preserveAspectRatio="xMidYMid slice">
        <path d="M 0,400 L 400,150 L 600,250 L 900,100 L 1200,200 L 1500,120 L 1920,300 L 1920,600 L 0,600 Z"
              fill="#A7C7E7" opacity="0.6" />
      </svg>

      <!-- Montañas cercanas -->
      <svg class="mountains mountains-near" viewBox="0 0 1920 700" preserveAspectRatio="xMidYMid slice">
        <path d="M 0,500 L 300,250 L 500,350 L 800,200 L 1100,320 L 1400,180 L 1700,350 L 1920,250 L 1920,700 L 0,700 Z"
              fill="#4A7C94" opacity="0.8" />
      </svg>

      <!-- Colinas con césped -->
      <svg class="hills" viewBox="0 0 1920 400" preserveAspectRatio="xMidYMid slice">
        <path d="M 0,250 Q 240,150 480,200 T 960,220 T 1440,180 T 1920,240 L 1920,400 L 0,400 Z"
              fill="#7CB342" />
      </svg>
    </div>

    <!-- Fondo noche -->
    <div class="landscape night-landscape" :class="{ active: isNight }">
      <!-- Cielo nocturno con gradiente -->
      <svg class="sky" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid slice">
        <defs>
          <linearGradient id="nightSkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" style="stop-color:#0B1026;stop-opacity:1" />
            <stop offset="100%" style="stop-color:#1A2150;stop-opacity:1" />
          </linearGradient>
        </defs>
        <rect width="1920" height="1080" fill="url(#nightSkyGradient)" />
      </svg>

      <!-- Estrellas -->
      <svg class="stars" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid slice">
        <circle cx="200" cy="100" r="2" fill="#FFFFFF" class="star star-1" />
        <circle cx="400" cy="150" r="1.5" fill="#FFFFFF" class="star star-2" />
        <circle cx="600" cy="80" r="2" fill="#FFFFFF" class="star star-3" />
        <circle cx="800" cy="200" r="1" fill="#FFFFFF" class="star star-4" />
        <circle cx="1000" cy="120" r="2" fill="#FFFFFF" class="star star-1" />
        <circle cx="1200" cy="180" r="1.5" fill="#FFFFFF" class="star star-2" />
        <circle cx="1400" cy="90" r="1" fill="#FFFFFF" class="star star-3" />
        <circle cx="1600" cy="160" r="2" fill="#FFFFFF" class="star star-4" />
        <circle cx="1800" cy="110" r="1.5" fill="#FFFFFF" class="star star-1" />

        <circle cx="300" cy="300" r="1" fill="#FFFFFF" class="star star-2" />
        <circle cx="500" cy="350" r="2" fill="#FFFFFF" class="star star-3" />
        <circle cx="700" cy="280" r="1.5" fill="#FFFFFF" class="star star-4" />
        <circle cx="900" cy="320" r="1" fill="#FFFFFF" class="star star-1" />
        <circle cx="1100" cy="290" r="2" fill="#FFFFFF" class="star star-2" />
        <circle cx="1300" cy="340" r="1" fill="#FFFFFF" class="star star-3" />
        <circle cx="1500" cy="310" r="1.5" fill="#FFFFFF" class="star star-4" />
        <circle cx="1700" cy="330" r="2" fill="#FFFFFF" class="star star-1" />

        <circle cx="150" cy="450" r="1.5" fill="#FFFFFF" class="star star-3" />
        <circle cx="350" cy="480" r="1" fill="#FFFFFF" class="star star-4" />
        <circle cx="550" cy="420" r="2" fill="#FFFFFF" class="star star-1" />
        <circle cx="750" cy="460" r="1" fill="#FFFFFF" class="star star-2" />
        <circle cx="950" cy="440" r="1.5" fill="#FFFFFF" class="star star-3" />
        <circle cx="1150" cy="470" r="2" fill="#FFFFFF" class="star star-4" />
        <circle cx="1350" cy="430" r="1" fill="#FFFFFF" class="star star-1" />
        <circle cx="1550" cy="450" r="1.5" fill="#FFFFFF" class="star star-2" />
      </svg>

      <!-- Luna -->
      <svg class="moon" viewBox="0 0 200 200" width="100" height="100">
        <defs>
          <radialGradient id="moonGradient">
            <stop offset="0%" style="stop-color:#F5F5DC;stop-opacity:1" />
            <stop offset="100%" style="stop-color:#E6E6D0;stop-opacity:0.9" />
          </radialGradient>
        </defs>
        <circle cx="100" cy="100" r="45" fill="url(#moonGradient)" />
        <!-- Cráteres -->
        <circle cx="85" cy="90" r="8" fill="#D0D0C0" opacity="0.3" />
        <circle cx="110" cy="105" r="6" fill="#D0D0C0" opacity="0.3" />
        <circle cx="95" cy="115" r="5" fill="#D0D0C0" opacity="0.3" />
        <circle cx="115" cy="85" r="4" fill="#D0D0C0" opacity="0.3" />
      </svg>

      <!-- Montañas lejanas nocturnas -->
      <svg class="mountains mountains-far" viewBox="0 0 1920 600" preserveAspectRatio="xMidYMid slice">
        <path d="M 0,400 L 400,150 L 600,250 L 900,100 L 1200,200 L 1500,120 L 1920,300 L 1920,600 L 0,600 Z"
              fill="#1A2340" opacity="0.7" />
      </svg>

      <!-- Montañas cercanas nocturnas -->
      <svg class="mountains mountains-near" viewBox="0 0 1920 700" preserveAspectRatio="xMidYMid slice">
        <path d="M 0,500 L 300,250 L 500,350 L 800,200 L 1100,320 L 1400,180 L 1700,350 L 1920,250 L 1920,700 L 0,700 Z"
              fill="#0D1428" opacity="0.9" />
      </svg>

      <!-- Colinas nocturnas -->
      <svg class="hills" viewBox="0 0 1920 400" preserveAspectRatio="xMidYMid slice">
        <path d="M 0,250 Q 240,150 480,200 T 960,220 T 1440,180 T 1920,240 L 1920,400 L 0,400 Z"
              fill="#1B3A28" />
      </svg>
    </div>
  </div>
</template>

<script setup lang="ts">
const { isNight } = useTheme()
</script>

<style scoped>
.animated-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

.landscape {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  pointer-events: none;
}

.landscape.active {
  opacity: 1;
}

.sky {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Sol */
.sun {
  position: absolute;
  top: 10%;
  right: 15%;
  animation: sunFloat 20s ease-in-out infinite;
}

.sun-rays {
  transform-origin: center;
  animation: sunRotate 30s linear infinite;
}

@keyframes sunFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

@keyframes sunRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Luna */
.moon {
  position: absolute;
  top: 8%;
  right: 12%;
  animation: moonFloat 25s ease-in-out infinite;
}

@keyframes moonFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
}

/* Estrellas */
.stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60%;
}

.star {
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.star-1 { animation-name: twinkle1; }
.star-2 { animation-name: twinkle2; animation-delay: 0.5s; }
.star-3 { animation-name: twinkle3; animation-delay: 1s; }
.star-4 { animation-name: twinkle4; animation-delay: 1.5s; }

@keyframes twinkle1 {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes twinkle2 {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 0.2; }
}

@keyframes twinkle3 {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@keyframes twinkle4 {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.1; }
}

/* Nubes */
.cloud {
  position: absolute;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.cloud-1 {
  top: 15%;
  left: -10%;
  animation: cloudFloat1 60s linear infinite;
}

.cloud-2 {
  top: 25%;
  left: -10%;
  animation: cloudFloat2 80s linear infinite;
}

.cloud-3 {
  top: 35%;
  left: -10%;
  animation: cloudFloat3 100s linear infinite;
}

@keyframes cloudFloat1 {
  from { transform: translateX(0); }
  to { transform: translateX(calc(100vw + 200px)); }
}

@keyframes cloudFloat2 {
  from { transform: translateX(0); }
  to { transform: translateX(calc(100vw + 200px)); }
}

@keyframes cloudFloat3 {
  from { transform: translateX(0); }
  to { transform: translateX(calc(100vw + 200px)); }
}

/* Montañas y colinas */
.mountains, .hills {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}

.mountains-far {
  bottom: 15%;
  animation: mountainFloat 40s ease-in-out infinite;
}

.mountains-near {
  bottom: 8%;
  animation: mountainFloat 35s ease-in-out infinite reverse;
}

.hills {
  bottom: 0;
  animation: hillFloat 30s ease-in-out infinite;
}

@keyframes mountainFloat {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-20px); }
}

@keyframes hillFloat {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(15px); }
}

/* Responsive */
@media (max-width: 768px) {
  .sun, .moon {
    width: 80px;
    height: 80px;
    top: 8%;
    right: 10%;
  }

  .cloud {
    transform: scale(0.7);
  }
}
</style>
