---
/**
 * ServicesList - Services list with zig-zag alternating layout
 * Pixel-perfect implementation based on Webflow design
 */

import { sanitizeSvg } from '../lib/sanitize'
import { PLACEHOLDER_IMAGE } from '../lib/api/marketing-solution'

interface ServicesListItem {
  id: string
  title: string
  description: string
  category: string
  iconType?: 'preset' | 'svg' | 'upload'
  icon?: string
  iconSvg?: string
  iconImage?: {
    url?: string
    alt?: string
  }
  isHot?: boolean
  image?: string | { url?: string; alt?: string }
  link?: string
}

interface Props {
  services?: ServicesListItem[]
}

const {
  services,
} = Astro.props

// Default services data (can be fetched from CMS)
const defaultServices: ServicesListItem[] = [
  {
    id: 'social-media',
    title: '社群經營代操',
    category: '海洋專案',
    iconType: 'preset',
    icon: 'facebook',
    isHot: false,
    image: 'https://enchun-cms.anlstudio.cc/api/media/file/61f24aa108528b3ab4942cf1_%E7%A4%BE%E7%BE%A4%E7%B6%93%E7%87%9F%E4%BB%A3%E6%93%8D.svg',
    description: '專業社群媒體經營團隊，從內容策劃、社群經營到數據分析，提供一站式社群代操服務。我們擅長經營 Facebook、Instagram 等主流平台，幫助品牌建立強大的社群影響力。',
  },
  {
    id: 'google-business',
    title: 'Google 商家關鍵字',
    category: 'Google',
    iconType: 'preset',
    icon: 'google',
    isHot: false,
    image: 'https://enchun-cms.anlstudio.cc/api/media/file/61f24aa108528b5a4c942cec_%E5%95%86%E5%AE%B6%E9%97%9C%E9%8D%B5%E5%AD%97.svg',
    description: '優化 Google 商家列表，提升在地搜尋排名。透過關鍵字策略、評論管理和商家資訊優化，讓您的商家在 Google 地圖和搜尋結果中脫穎而出。',
  },
  {
    id: 'google-ads',
    title: 'Google Ads 關鍵字',
    category: 'Google',
    iconType: 'preset',
    icon: 'ads',
    isHot: false,
    image: 'https://enchun-cms.anlstudio.cc/api/media/file/61f24aa108528b3898942cde_Google%20ADS.svg',
    description: '專業的 Google Ads 投放服務，從關鍵字研究、廣告文案撰寫到出價策略優化，精準觸達目標受眾，最大化廣告投資報酬率。',
  },
  {
    id: 'news-media',
    title: '網路新聞媒體',
    category: '媒體行銷',
    iconType: 'preset',
    icon: 'news',
    isHot: false,
    image: 'https://enchun-cms.anlstudio.cc/api/media/file/61f24aa108528b0b57942cee_%E7%B6%B2%E8%B7%AF%E6%96%B0%E8%81%9E%E5%AA%92%E9%AB%94.svg',
    description: '與各大新聞媒體合作，提供新聞發佈、媒體採訪、品牌曝光等服務。透過專業的新聞行銷策略，提升品牌知名度和公信力。',
  },
  {
    id: 'influencer',
    title: '網紅行銷專案',
    category: '口碑行銷',
    iconType: 'preset',
    icon: 'youtube',
    isHot: false,
    image: 'https://enchun-cms.anlstudio.cc/api/media/file/61f24aa108528b2267942cf2_%E7%B6%B2%E7%B4%85%E8%A1%8C%E9%8A%B7%E5%B0%88%E6%A1%88.svg',
    description: '連結品牌與網紅/KOL，打造影響者行銷活動。從網紅篩選、活動策劃到內容製作，提供完整的網紅行銷解決方案，快速建立品牌口碑。',
  },
  {
    id: 'forum',
    title: '論壇行銷專案',
    category: '口碑行銷',
    iconType: 'preset',
    icon: 'forum',
    isHot: false,
    image: 'https://enchun-cms.anlstudio.cc/api/media/file/61f24aa108528be8e0942cf0_%E8%AB%96%E5%A3%87%E8%A1%8C%E9%8A%B7%E5%B0%88%E6%A1%88.svg',
    description: '深耕各大論壇社群，包括 Dcard、PTT 等平台。透過專業的論壇行銷策略，建立品牌口碑，提升用戶信任度和互動參與度。',
  },
  {
    id: 'website-design',
    title: '形象網站設計',
    category: '品牌行銷',
    iconType: 'preset',
    icon: 'web',
    isHot: false,
    image: 'https://enchun-cms.anlstudio.cc/api/media/file/61f24aa108528bc016942cef_%E5%BD%A2%E8%B1%A1%E7%B6%B2%E7%AB%99%E8%A8%AD%E8%A8%88.svg',
    description: '現代化響應式網站設計服務，結合美學與功能，打造獨特的品牌形象。從 UI/UX 設計到前端開發，提供完整的網站解決方案。',
  },
  {
    id: 'brand-video',
    title: '品牌形象影片',
    category: '品牌行銷',
    iconType: 'preset',
    icon: 'video',
    isHot: false,
    image: 'https://enchun-cms.anlstudio.cc/api/media/file/61f24aa108528b678d942ced_%E5%93%81%E7%89%8C%E5%BD%A2%E8%B1%A1%E5%BD%B1%E7%89%87.svg',
    description: '專業影片製作團隊，從腳本創作、拍攝到後製剪輯，打造高品質的品牌形象影片。透過視覺故事說，傳達品牌核心價值。',
  },
]

const servicesList = services && services.length > 0 ? services : defaultServices

// Helper to get image URL from string or object
const getImageUrl = (image: ServicesListItem['image']) => {
  if (!image) return PLACEHOLDER_IMAGE
  return typeof image === 'string' ? image : image.url || PLACEHOLDER_IMAGE
}

// Preset icon SVG components
const presetIcons: Record<string, string> = {
  facebook: `<svg viewBox="0 0 24 24" class="w-6 h-6" fill="currentColor"><path d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.879V14.89h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.989C18.343 21.129 22 16.99 22 12c0-5.523-4.477-10-10-10z"/></svg>`,
  google: `<svg viewBox="0 0 24 24" class="w-6 h-6"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>`,
  ads: `<svg viewBox="0 0 24 24" class="w-6 h-6" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>`,
  news: `<svg viewBox="0 0 24 24" class="w-6 h-6" fill="currentColor"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>`,
  youtube: `<svg viewBox="0 0 24 24" class="w-6 h-6" fill="currentColor"><path d="M23.5 6.188c-1.258-2.667-4.636-4.764-8.148-5.36-.734-.12-3.32-.264-3.352-.264-3.032 0-2.618.144-3.352.264-3.512.596-6.89 2.693-8.148 5.36-.438.928-.796 2.622-1.028 5.578l-.01.232c0 .046-.004.136-.004.232 0 .096.004.186.004.232l.01.232c.232 2.956.59 4.65 1.028 5.578 1.258 2.667 4.636 4.764 8.148 5.36.734.12 3.32.264 3.352.264 3.032 0 2.618-.144 3.352-.264 3.512-.596 6.89-2.693 8.148-5.36.438-.928.796-2.622 1.028-5.578l.01-.232c0-.046.004-.136.004-.232 0-.096-.004-.186-.004-.232l-.01-.232c-.232-2.956-.59-4.65-1.028-5.578zM9.5 15.5v-7l6 3.5-6 3.5z"/></svg>`,
  forum: `<svg viewBox="0 0 24 24" class="w-6 h-6" fill="currentColor"><path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4l4 4 4-4h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/></svg>`,
  web: `<svg viewBox="0 0 24 24" class="w-6 h-6" fill="currentColor"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-5 14H4v-4h11v4zm0-5H4V9h11v4zm5 5h-4V9h4v9z"/></svg>`,
  video: `<svg viewBox="0 0 24 24" class="w-6 h-6" fill="currentColor"><path d="M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-3l-2 4h-3l2-4h-2z"/></svg>`,
}

// Helper to render icon based on type with XSS protection
const renderIcon = (service: ServicesListItem): string | null => {
  const iconType = service.iconType || 'preset'

  if (iconType === 'svg' && service.iconSvg) {
    // Sanitize user-provided SVG to prevent XSS attacks
    return sanitizeSvg(service.iconSvg)
  }

  if (iconType === 'upload' && service.iconImage?.url) {
    return `<img src="${service.iconImage.url}" alt="${service.iconImage.alt || service.title}" class="w-6 h-6 object-contain" />`
  }

  if (iconType === 'preset' && service.icon && presetIcons[service.icon]) {
    return presetIcons[service.icon]
  }

  return null
}
---

<section class="bg-white py-[60px] px-5 md:py-[60px] md:px-5 lg:py-[60px] lg:px-5" aria-labelledby="services-heading">
  <div class="max-w-3xl mx-auto flex flex-col gap-6">
    {
      servicesList.map((service, index) => {
        const isOdd = index % 2 === 0
        const iconHtml = renderIcon(service)
        return (
          <a
            href={service.link || '#'}
            class={`
              grid grid-cols-1 md:grid-cols-2 gap-10 md:gap-6 items-center mb-[60px] md:mb-10 relative
              transition-transform duration-300 hover:-translate-y-[2px]
              no-underline
              group
            `}
            aria-labelledby={`service-${service.id}-title`}
          >
            <!-- Content Side -->
            <div class={`service-item-content order-2 ${isOdd ? 'md:order-1' : 'md:order-2'}`}>
              <!-- Category Tag with Icon -->
              <div class="flex flex-col-reverse items-start gap-2 mb-4">
                <span class="inline-block text-(--color-enchunblue) text-3xl font-light">
                  {service.category}
                </span>
                {/* Icon displayed next to category */}
                {
                  iconHtml && (
                    <span class="inline-flex items-center justify-start w-8 h-8 ml-2 scale-150 text-(--color-enchunblue)" set:html={iconHtml} />
                  )
                }
              </div>

              <!-- Title -->
              <h2
                id={`service-${service.id}-title`}
                class="font-['Noto_Sans_TC',sans-serif] font-bold text-2xl md:text-xl text-(--color-dark-blue) mb-4 leading-[1.3] transition-colors duration-300 group-hover:text-(--color-enchunblue)"
              >
                {service.title}
              </h2>

              <!-- Divider -->
              <div class="w-fill h-[1px] bg-(--color-enchunblue) mb-4"></div>

              <!-- Description -->
              <p class="font-['Quicksand',_'Noto_Sans_TC',sans-serif] font-thin text-2xl md:text-xl text-gray-700 leading-[1.6]">
                {service.description}
              </p>
            </div>

            <!-- Image Side -->
            <div class={`service-item-image order-1 relative ${isOdd ? 'md:order-2' : 'md:order-1'}`}>
              <div class="aspect-[4/3] rounded-[12px] overflow-hidden bg-[var(--color-white)]">
                <img
                  src={getImageUrl(service.image)}
                  alt={service.title}
                  loading="lazy"
                  class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-[1.05]"
                />
              </div>

              <!-- Hot Badge -->
              {
                service.isHot && (
                  <span class="absolute top-4 right-4 md:top-3 md:right-3 bg-[var(--color-notification-red)] text-white px-[12px] py-[6px] md:px-[10px] md:py-[4px] rounded-[20px] text-[0.75rem] md:text-[0.7rem] font-bold uppercase">
                    HOT
                  </span>
                )
              }
            </div>
          </a>
        )
      })
    }
  </div>
</section>
