(function() {
  const el = document.getElementById('weather-preview');
  if (!el) return;

  function getCachedWeather() {
    const now = Date.now();
    const keys = Object.keys(localStorage).filter(k => k.startsWith('weather:'));
    if (!keys.length) return null;

    let newest = null;

    for (const key of keys) {
      try {
        const entry = JSON.parse(localStorage.getItem(key));
        if (!entry || entry.expires < now) continue;
        if (!newest || entry.expires > newest.expires) newest = entry;
      } catch {
      }
    }

    return newest?.data || null;
  }

  function getIcon(iconCode) {
    const map = {
      '01d': 'clear-day-black',
      '01n': 'clear-night-black',
      '02d': 'partly-cloudy-day-black',
      '02n': 'partly-cloudy-night-black',
      '09d': 'light-rain',
      '09n': 'light-rain',
      '10d': 'rain-black',
      '10n': 'rain-black',
      '11d': 'thunderstorm-black',
      '11n': 'thunderstorm-black',
      '13d': 'snow-black',
      '13n': 'snow-black',
      '50d': 'fog-black',
      '50n': 'fog-black',
    };

    return `/wp-content/themes/stvnews/static/images/weather/${
      map[iconCode] || 'cloudy-black'
    }.png`;
  }

  function renderWeather(data) {
    const current = data.hourly?.[0];
    const location =
      localStorage.getItem('weather_favourites') &&
      JSON.parse(localStorage.getItem('weather_favourites'))[0]?.display_name
        ?.split(',')[0];

    if (!current || !location) return renderCTA();

    el.innerHTML = `
      <div class="p-3 lg:hidden">
        <a href="/weather" class="block">
          <div class="flex items-center justify-between rounded-xl bg-white p-1.5 shadow-sm">
          <div class="flex items-center gap-4">
            <div class="leading-none opacity-40">
              <img src="${getIcon(current.weather[0].icon)}" class="w-14" alt="">
            </div>

            <div>
              <div class="flex items-center gap-3">
                <span class="text-base font-semibold text-gray-900">${location}</span>
                <span class="rounded-full bg-yellow-100 px-2 py-0.5 text-sm font-semibold text-gray-900">
                  ${Math.round(current.temp)}°C
                </span>
              </div>

            <div class="mt-1 flex items-center gap-4 text-sm text-gray-600">

  <!-- Wind -->
  <span class="flex items-center gap-1">
    <img
      src="/wp-content/themes/stvnews/static/images/weather/WindIcon.svg"
      class="w-4"
      alt=""
      style="transform: rotate(${current.wind_deg - 180}deg)"
    />
    ${Math.round(current.wind_speed * 2.237)}mph
  </span>

  <!-- Rain -->
  <span class="flex items-center gap-1">
    <img
      src="/wp-content/themes/stvnews/static/images/weather/RainIcon.svg"
      class="w-4"
      alt=""
    />
    ${Math.round(current.pop * 100)}%
  </span>

</div>
            </div>
          </div>

      <div class="ml-4 flex shrink-0 items-center px-2 py-2 rounded-lg h-full bg-[#70cbf4]">
            <div class="text-right">
              <div class="text-xs font-medium text-red-600">Sponsored by</div>
              <img
                src="/wp-content/themes/stvnews/static/images/weather/tui/tui-logo-red.svg"
                alt="TUI"
                class="mt-1 h-6 mx-auto"
              />
            </div>
          </div>

        </div>
      </a>
</div>
    `;
  }

  function renderCTA() {
    el.innerHTML = `
<div class="p-3 lg:hidden">
<a href="/weather" class="block">
        <div class="flex items-center justify-between rounded-xl bg-white p-1.5 shadow-sm">
          <div class="flex items-center gap-4">
            <div class="text-4xl text-yellow-400">
              <img src="/wp-content/themes/stvnews/static/images/weather/clear-day-black.png" class="w-14" alt="">
            </div>
            <div class="leading-tight">
              <div class="font-semibold text-gray-900">
                Weather where you are
              </div>
              <div class="flex items-center gap-1 text-sm leading-none text-gray-600">
                Find your location
                <span class="text-lg">›</span>
              </div>
            </div>
          </div>
      <div class="ml-4 flex shrink-0 items-center px-2 py-2 rounded-lg h-full bg-[#70cbf4]">
            <div class="text-right">
              <div class="text-xs font-medium text-red-600">Sponsored by</div>
              <img
                src="/wp-content/themes/stvnews/static/images/weather/tui/tui-logo-red.svg"
                alt="TUI"
                class="mt-1 h-6 mx-auto"
              />
            </div>
          </div>

        </div>
      </a>
</div>
    `;
  }

  const weather = getCachedWeather();
  weather ? renderWeather(weather) : renderCTA();
})();