---
/**
 * TeamsHero - Hero section for Teams page
 * Pixel-perfect implementation based on Webflow design
 */
interface Props {
  title?: string;
  subtitle?: string;
  backgroundImage?: {
    url?: string;
    alt?: string;
  };
}

const {
  title = "恩群大本營",
  subtitle = "Team members of Enchun",
  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-cover 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>