---
/**
 * SolutionsHero - Hero section for Solutions/Services page
 * Pixel-perfect implementation based on Webflow design
 * Supports optional background image from CMS
 * Styled with Tailwind CSS
 */
interface Props {
  title?: string
  subtitle?: string
  backgroundImage?: {
    url?: string
    alt?: string
  }
}

const {
  title = '行銷解決方案',
  subtitle = '提供全方位的數位行銷服務，協助您的品牌在數位時代脫穎而出',
  backgroundImage,
} = Astro.props

// Determine if we have a background image
const hasBackgroundImage = backgroundImage?.url
const bgImageUrl = backgroundImage?.url || ''
---

<section
  class:list={[
    // Base styles - relative positioning for overlay
    'relative',
    'flex',
    'items-center',
    'justify-center',
    'overflow-hidden',
    'text-center',
    'px-5',
    // Background color fallback
    !hasBackgroundImage && 'bg-(--color-dark-blue)',
    // Background image styles
    hasBackgroundImage && 'bg-size-[120vw] bg-center bg-no-repeat',
    // Pull up to counteract layout's pt-20 padding (80px)
    '-mt-20',
    // Full viewport height
    'min-h-dvh',
    'z-0',
  ]}
  style={hasBackgroundImage ? `background-image: url('${bgImageUrl}')` : undefined}
>
  {/* Background image overlay for text readability */}
  {
    hasBackgroundImage && (
      <div
        class="absolute inset-0 bg-linear-to-b from-black/80 to-transparent z-1"
        aria-hidden="true"
      />
    )
  }

  {/* Content container - relative z-index above overlay */}
  <div class="relative z-2 max-w-6xl mx-auto">
    <!-- Main Title -->
    <h1 class="text-white text-shadow-md font-['Noto_Sans_TC',sans-serif]! font-bold leading-[1.2] -mb-1 text-6xl! md:text-5xl">
      {title}
    </h1>

    <!-- Subtitle -->
    <p class="text-gray-100 text-shadow-md font-['Quicksand'] font-thin leading-[1.2] max-w-3xl mx-auto text-3xl! md:text-2xl">
      {subtitle}
    </p>
  </div>
</section>
