---
/**
 * ServiceFeatures - Service features grid section
 */
import ServiceFeatureCard from '@/components/ServiceFeatureCard.astro'
import type { HomeData, ServiceFeature } from '@/lib/api/home'

interface Props {
  homeData?: HomeData | null
}

const { homeData } = Astro.props

// Default service features if not provided by CMS
const defaultFeatures: ServiceFeature[] = [
  {
    icon: '🎯',
    title: 'Google 商家關鍵字',
    description: '專業的關鍵字優化服務，提升您在 Google 搜尋結果的排名，讓客戶更容易找到您。',
  },
  {
    icon: '📱',
    title: '社群代操',
    description: '全方位社群媒體經營，從內容策劃到數據分析，提供一站式社群行銷服務。',
  },
  {
    icon: '💬',
    title: '論壇行銷',
    description: '深耕各大論壇社群，建立品牌口碑，提升用戶信任度與互動參與度。',
  },
  {
    icon: '🎨',
    title: '網站設計',
    description: '現代化響應式網站設計，結合美學與功能，打造獨特的品牌形象和優質用戶體驗。',
  },
]

const serviceFeatures: ServiceFeature[] = (homeData && homeData.serviceFeatures && homeData.serviceFeatures.length > 0)
  ? homeData.serviceFeatures
  : defaultFeatures
---

<section class="py-16 md:py-24 bg-[var(--color-surface)]" aria-labelledby="services-heading">
  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Section Header -->
    <div class="text-center mb-12 md:mb-16">
      <h2
        id="services-heading"
        class="text-3xl md:text-4xl font-bold text-[var(--color-text-primary)] mb-4"
      >
        我們的服務
      </h2>
      <p class="text-lg text-[var(--color-text-muted)] max-w-2xl mx-auto">
        提供全方位的數位行銷解決方案，協助您的品牌在數位時代脫穎而出
      </p>
    </div>

    <!-- Services Grid -->
    <ul
      class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8"
      role="list"
    >
      {
        serviceFeatures.map((feature) => (
          <ServiceFeatureCard feature={feature} />
        ))
      }
    </ul>
  </div>
</section>
