---
/**
 * Marketing Solutions Page - 行銷方案頁面
 * Pixel-perfect implementation based on Webflow design
 * Data fetched from Payload CMS Pages Collection API
 */
import Layout from "../layouts/Layout.astro";
import SolutionsHero from "../sections/SolutionsHero.astro";
import ServicesList from "../sections/ServicesList.astro";
import { getMarketingSolutionsPage } from "../lib/api/marketing-solution";
import SectionHeader from "../components/SectionHeader.astro";
import CtaSection from "../components/CtaSection.astro";

// Fetch page data from CMS
const pageData = await getMarketingSolutionsPage();

// Use CMS data or fallback to defaults
const heroTitle = pageData?.heroTitle || "行銷解決方案";
const heroSubtitle =
  pageData?.heroSubtitle ||
  "提供全方位的數位行銷服務，協助您的品牌在數位時代脫穎而出";
const heroImage = pageData?.heroImage;
const services = pageData?.services || [];

// Metadata for SEO
const title = "行銷解決方案 | 恩群數位行銷";
const description =
  "恩群數位行銷提供全方位的數位行銷服務，包括 Google Ads、社群代操、論壇行銷、網紅行銷、網站設計等，協助您的品牌在數位時代脫穎而出。";
---

<Layout title={title} description={description}>
  <!-- Hero Section -->
  <SolutionsHero
    title={heroTitle}
    subtitle={heroSubtitle}
    backgroundImage={heroImage}
  />
  <!-- Section Header -->
  <SectionHeader
    title="行銷方案"
    subtitle="Marketing solutions"
    sectionBg="bg-white"
  />
  <!-- Services List -->
  <ServicesList services={services} />
  <CtaSection />
</Layout>
