---
import { Image } from 'astro:assets';
// Footer component with client-side data fetching
---

<footer class="bg-[var(--color-tropical-blue)] py-10 mt-auto">
  <div class="max-w-5xl mx-auto px-4">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 mb-8">
      <div class="col-span-2">
        <Image src="/enchun-logo.svg" 
        alt="Enchun Digital Logo" class="h-auto w-32 mb-4"
        width={919}
        height={201}
        loading="eager"
        decoding="async"
        />
        <p class="text-[var(--color-st-tropaz)] text-sm font-light leading-relaxed">恩群數位累積多年廣告行銷操作經驗，擁有全方位行銷人才，讓我們可以為客戶精準的規劃每一分廣告預算，讓你的品牌深入人心。更重要的是恩群的存在，為了成為每家公司最佳數位夥伴，作為彼此最堅強的後盾，你會知道有我們的陪伴 你並不孤單。</p>
      </div>
      <div>
        <h3 class="text-lg font-bold text-[var(--color-st-tropaz)] mb-4">聯絡我們</h3>
        <a href="https://www.facebook.com/EnChun-Taiwan-100979265112420" target="_blank" class="flex items-center mb-2">
          <Image src="/fb-icon.svg" 
          alt="Phone Icon" class="h-auto w-6 mb-2"
          width={16}
          height={16}
          loading="eager"
          decoding="async"
          />
        </a>
        <p class="text-[var(--color-st-tropaz)] mb-2">諮詢電話:<br> 02 5570 0527</p>
        <a href="mailto:enchuntaiwan@gmail.com" class="text-primary hover:text-secondary transition-colors">enchuntaiwan@gmail.com</a>
      </div>
      <div>
        <h3 class="text-lg font-bold text-[var(--color-st-tropaz)] mb-4">行銷方案</h3>
        <ul class="space-y-2" id="marketing-solutions">
          <li><span class="text-gray-500">載入中...</span></li>
        </ul>
      </div>
      <div>
        <h3 class="text-lg font-bold text-[var(--color-st-tropaz)] mb-4">行銷放大鏡</h3>
        <ul class="space-y-2" id="marketing-articles">
          <li><span class="text-gray-500">載入中...</span></li>
        </ul>
      </div>
    </div>
    <div class="absolute inset-x-0 w-screen bg-[var(--color-amber)] py-3 text-center">
      <p class="text-[var(--color-tarawera)]">copyright ©  Enchun digital  2018 - {new Date().getFullYear()}</p>
    </div>
  </div>
</footer>

<script>
  // Client-side data fetching for footer
  async function loadFooterData() {
    try {
      console.log('Fetching footer data...');
      const response = await fetch('/api/globals/footer?depth=2&draft=false&locale=undefined&trash=false');
      const data = await response.json();
      console.log('Footer data loaded:', data);

      // Update marketing solutions
      const marketingUl = document.getElementById('marketing-solutions');
      if (marketingUl && data.navItems?.[0]?.childNavItems) {
        const links = data.navItems[0].childNavItems.map(item =>
          `<li><a href="${item.link?.url || '#'}" class="font-normal text-[var(--color-st-tropaz)] hover:text-[var(--color-dove-gray)] transition-colors">${item.link?.label}</a></li>`
        ).join('');
        marketingUl.innerHTML = links;
      }

      // Update marketing articles (行銷放大鏡)
      const articlesUl = document.getElementById('marketing-articles');
      if (articlesUl && data.navItems?.[1]?.childNavItems) {
        const links = data.navItems[1].childNavItems.map(item =>
          `<li><a href="${item.link?.url || '#'}" class="font-normal text-[var(--color-st-tropaz)] hover:text-[var(--color-dove-gray)] transition-colors">${item.link?.label}</a></li>`
        ).join('');
        articlesUl.innerHTML = links;
      }
    } catch (error) {
      console.error('Failed to load footer data:', error);
    }
  }

  // Load footer data when DOM is ready
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', loadFooterData);
  } else {
    loadFooterData();
  }
</script>

