---
/**
 * BenefitsSection - Work benefits section for Teams page
 * Pixel-perfect implementation based on Webflow design
 * Features 6 benefit cards with alternating layout
 */

interface BenefitItem {
  title: string;
  img: string;
}

interface Props {
  benefits?: BenefitItem[];
}

const defaultBenefits: BenefitItem[] = [
  {
    title: "高績效、高獎金\n新人開張獎金",
    img: "/api/media/file/61f24aa108528b79b2942d05_Make%20it%20rain-bro-%E6%96%B0%E4%BA%BA%E9%96%8B%E5%BC%B5%E7%8D%8E%E9%87%91.svg",
  },
  {
    title: "生日慶生、電影日\n員工下午茶",
    img: "/api/media/file/61f24aa108528be590942d06_Blowing%20out%20Birthday%20candles-bro-%E7%94%9F%E6%97%A5%E6%85%B6%E7%94%9F.svg",
  },
  {
    title: "教育訓練補助",
    img: "/api/media/file/61f24aa108528be22a942d03_Online%20learning-bro-%E6%95%99%E8%82%B2%E8%A8%93%E7%B7%B4%E8%A3%9C%E5%8A%A9.svg",
  },
  {
    title: "寬敞的工作空間",
    img: "/api/media/file/61f24aa108528be064942d08_Shared%20workspace-bro-%E5%AF%AC%E6%95%9E%E7%9A%84%E5%B7%A5%E4%BD%9C%E7%A9%BA%E9%96%93.svg",
  },
  {
    title: "員工國內外旅遊\n部門聚餐、年終活動",
    img: "/api/media/file/61f24aa108528b0960942d04_Flight%20Booking-bro-%E5%93%A1%E5%B7%A5%E6%97%85%E9%81%8A.svg",
  },
  {
    title: "入職培訓及團隊建設",
    img: "/api/media/file/61f24aa108528bf90b942d02_Brainstorming-bro-%E5%85%A5%E8%81%B7%E5%9F%B9%E8%A8%93.svg",
  },
];

const benefits = Astro.props.benefits || defaultBenefits;
import SectionHeader from "../components/SectionHeader.astro";
---

<section
  class="py-15 px-5 bg-white md:py-10 md:px-4"
  aria-labelledby="benefits-heading"
>
  <div class="max-w-6xl mx-auto">
    <!-- Section Header -->
    <SectionHeader
      title="工作福利"
      subtitle="Benefit Packages"
      sectionBg="bg-white"
    />

    <!-- Benefits Grid: 2 cards per row -->
    <div
      class="max-w-md md:max-w-3xl mx-auto grid grid-cols-1 gap-x-2 gap-y-2 md:gap-y-6 md:grid-cols-2 py-18"
    >
      {
        benefits.map((benefit, index) => {
          const isLeft = index % 2 === 0;
          return (
            <div class="grid grid-cols-2 gap-2 items-center">
              <div
                class:list={[
                  isLeft ? "order-1 text-right" : "order-2 text-left",
                ]}
              >
                <h3 class="text-xl md:text-base lg:text-xl font-semibold text-(--color-enchunblue) whitespace-pre-wrap leading-snug">
                  {benefit.title}
                </h3>
              </div>
              <div
                class:list={[
                  "flex items-center",
                  isLeft ? "order-2 justify-start" : "order-1 justify-end",
                ]}
              >
                <img
                  src={`https://enchun-cms.anlstudio.cc${benefit.img}`}
                  alt={benefit.title}
                  class="size-35 object-contain"
                  loading="lazy"
                  decoding="async"
                />
              </div>
            </div>
          );
        })
      }
    </div>
  </div>
</section>