---
/**
 * FeatureSection - Service features section with 4 cards
 * Pixel-perfect implementation based on Webflow design
 */
interface Props {
  title?: string
  subtitle?: string
}

const {
  title = '我們的服務特色',
  subtitle = '為什麼選擇恩群數位？',
} = Astro.props

// Four features data
const features = [
  {
    img: 'https://enchun-cms.anlstudio.cc/api/media/file/61f24aa108528bec64942cd5_address-Bro-%E5%9C%A8%E5%9C%B0%E5%8C%96%E5%84%AA%E5%85%88%201.svg',
    title: '在地化優先',
    description: '線上線下結合曝光渠道，整合多方資訊，帶給消費者最佳的使用體驗，展現商家的獨特之處，順利的將潛在使用者帶到你的實際門市。',
  },
  {
    img: 'https://enchun-cms.anlstudio.cc/api/media/file/61f24aa108528b582e942cd6_Banknote-bro-%E9%AB%98%E6%8A%95%E8%B3%87%E5%A0%B1%E9%85%AC%E7%8E%87%201.svg',
    title: '高投資轉換率',
    description: '你覺得網路行銷很貴嗎？恩群數位善用每一分廣告預算，讓你在網路上發揮最大效益，幫助店家鎖定精準客群，達成目標。',
  },
  {
    img: 'https://enchun-cms.anlstudio.cc/api/media/file/61f24aa108528b517f942cd8_Social%20Dashboard-bro-%E6%95%B8%E6%93%9A%E5%84%AA%E5%85%88%201.svg',
    title: '數據優先',
    description: '想要精準行銷？恩群數位從數據中萃取洞察，根據數據分析廣告成效，更聰明、有策略的幫您省下行銷預算。',
  },
  {
    img: 'https://enchun-cms.anlstudio.cc/api/media/file/61f24aa108528b26a1942cd7_Partnership-bro-%E9%97%9C%E4%BF%82%E5%84%AA%E5%85%88%201.svg',
    title: '關係優於銷售',
    description: '除了幫您拓展網路上的知名度，我們更是每家公司最專業的數位夥伴，你會知道有恩群的存在，事業路上你並不孤單。',
  },
]
import SectionHeader from '../components/SectionHeader.astro'
---

<section class="section_feature bg-white px-4 py-16 md:px-5 md:py-20" aria-labelledby="feature-heading">
  <div class="w-container mx-auto max-w-4xl">
    <!-- Section Header -->
    <SectionHeader
      title="恩群服務特色"
      subtitle="Why you can trust us"
      sectionBg="bg-white"
    />

    <!-- Features Grid -->
    <div class="grid grid-cols-2 gap-1 md:grid-cols-2 md:gap-2 lg:gap-6">
      {
        features.map((feature) => (
        <div class="feature_card bg-white p-5 transition-all duration-[var(--transition-base)] hover:-translate-y-1 md:p-6 lg:p-8">
          <div class="flex flex-col items-center gap-4 text-center md:flex-row md:items-start md:text-left lg:gap-6">
            <!-- Icon -->
            <div class="flex w-full max-w-[100px] shrink-0 items-center justify-center md:max-w-[110px] lg:max-w-[190px]">
              <img src={feature.img} alt={feature.title} class="h-auto w-full object-contain" />
            </div>

            <div class="flex flex-col gap-2">
              <!-- Title -->
              <h3 class="font-['Noto_Sans_TC'] text-2xl font-semibold text-(--color-dark-blue) lg:text-3xl">{feature.title}</h3>

              <!-- Description -->
              <p class="font-['Noto_Sans_TC'] text-sm font-thin leading-[1.6] text-grey-2 lg:text-base">{feature.description}</p>
            </div>
          </div>
        </div>
      ))
      }
    </div>
  </div>
</section>
