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

// Use local backend in development, production URL from dev.vars/wrangler
const isDev = import.meta.env.DEV;
const PAYLOAD_CMS_URL = isDev
    ? "http://localhost:3000" // Local backend in dev (port may vary)
    : import.meta.env.PAYLOAD_CMS_URL || "https://enchun-admin.anlstudio.cc";

// Fetch footer data from Payload CMS server-side
let footerNavItems: any[] = [];
try {
    const response = await fetch(
        `${PAYLOAD_CMS_URL}/api/globals/footer?depth=2&draft=false&locale=undefined&trash=false`,
    );
    if (response.ok) {
        const data = await response.json();
        footerNavItems = data?.navItems || data || [];
    }
} catch (error) {
    console.error("[Footer SSR] Failed to fetch footer:", error);
}

// Fetch categories from Payload CMS server-side
let categories: any[] = [];
try {
    const response = await fetch(
        `${PAYLOAD_CMS_URL}/api/categories?sort=order&limit=6&depth=0&draft=false`,
    );
    if (response.ok) {
        const data = await response.json();
        categories = (data?.docs || [])
            .sort((a: any, b: any) => (a.order || 0) - (b.order || 0))
            .slice(0, 6);
    }
} catch (error) {
    console.error("[Footer SSR] Failed to fetch categories:", error);
}

// Get current year for copyright
const currentYear = new Date().getFullYear();
---

<footer class="bg-(--color-tropical-blue) pt-10 mt-auto">
    <div class="max-w-4xl mx-auto px-12">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 mb-16">
            <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-(--color-st-tropaz) text-sm pr-0 md:pr-8 font-light leading-relaxed"
                >
                    恩群數位累積多年廣告行銷操作經驗，擁有全方位行銷人才，讓我們可以為客戶精準的規劃每一分廣告預算，讓你的品牌深入人心。更重要的是恩群的存在，為了成為每家公司最佳數位夥伴，作為彼此最堅強的後盾，你會知道有我們的陪伴
                    你並不孤單。
                </p>
            </div>
            <div>
                <h3 class="text-lg font-bold text-(--color-st-tropaz) mb-4">
                    聯絡我們
                </h3>
                <a
                    href="https://www.facebook.com/EnChun-Taiwan-100979265112420"
                    target="_blank"
                    rel="noopener noreferrer"
                    class="flex items-center mb-2 no-underline hover:underline transition-colors"
                >
                    <Image
                        src="/fb-icon.svg"
                        alt="Facebook Icon"
                        class="h-auto w-6 mb-2"
                        width={16}
                        height={16}
                        loading="eager"
                        decoding="async"
                    />
                </a>
                <p class="text-sm text-(--color-st-tropaz) mb-2">
                    諮詢電話:<br /> 02 5570 0527
                </p>
                <a
                    href="mailto:enchuntaiwan@gmail.com"
                    class="text-xs text-primary hover:text-secondary no-underline hover:underline transition-colors"
                    >enchuntaiwan@gmail.com</a
                >
            </div>
            <div>
                <h3 class="text-lg font-bold text-(--color-st-tropaz) mb-4">
                    行銷方案
                </h3>
                <ul
                    class="text-sm font-thin space-y-2"
                    id="marketing-solutions"
                >
                    {
                        footerNavItems.length > 0 &&
                        footerNavItems[0]?.childNavItems ? (
                            footerNavItems[0].childNavItems.map((item: any) => (
                                <li>
                                    <a
                                        href={item.link?.url || "#"}
                                        class="text-(--color-st-tropaz) hover:text-(--color-dark-blue) hover:font-light no-underline transition-colors duration-300"
                                    >
                                        {item.link?.label || "連結"}
                                    </a>
                                </li>
                            ))
                        ) : (
                            <li>
                                <span class="text-gray-500">載入中...</span>
                            </li>
                        )
                    }
                </ul>
            </div>
            <div>
                <h3 class="text-lg font-bold text-(--color-st-tropaz) mb-4">
                    行銷放大鏡
                </h3>
                <ul class="text-sm font-thin space-y-2" id="marketing-articles">
                    {
                        categories.length > 0 ? (
                            categories.map((cat: any) => (
                                <li>
                                    <a
                                        href={`/blog/category/${cat.slug}`}
                                        class="text-(--color-st-tropaz) hover:text-(--color-dark-blue) hover:font-light no-underline transition-colors duration-300"
                                        title={cat.nameEn || cat.title}
                                    >
                                        {cat.title}
                                    </a>
                                </li>
                            ))
                        ) : (
                            <li>
                                <span class="text-gray-500">暫無分類</span>
                            </li>
                        )
                    }
                </ul>
            </div>
        </div>
    </div>
    <div
        class="w-screen bg-(--color-amber) font-['Quicksand'] text-(--color-tarawera) py-2 text-xs text-center"
    >
        <p>
            copyright © Enchun digital 2018 - {currentYear}
        </p>
    </div>
</footer>
