---
import SectionHeader from "@/components/SectionHeader.astro";

/**
 * ComparisonSection - 恩群數位 vs 其他行銷公司 對比表格
 * Custom layout based on new design specs with Tailwind CSS
 */

const otherCompanyItems = [
  "缺乏經驗",
  "沒有成效保證",
  "售後無服務",
  "沒有策略",
  "不了解客戶需求",
  "沒有接受客戶反饋",
];

const enchunItems = [
  "實際執行經驗豐富",
  "實際成效",
  "售後服務架構完善",
  "行銷策略有方",
  "熟悉客戶需求",
  "最多客戶回饋",
];
---

<section
  class="bg-[#f8f9fa] py-10 px-3 md:py-[60px] md:px-4 lg:py-20 lg:px-5"
  aria-labelledby="comparison-heading"
>
  <div class="max-w-[1000px] mx-auto">
    <!-- Section Header -->
    <SectionHeader
      title="恩群與其他公司有什麼不同"
      subtitle="What make us different from others"
    />

    <!-- Comparison Cards Layout -->
    <div
      class="relative bg-white rounded-2xl shadow-xl overflow-hidden mt-10 md:mt-12 max-w-4xl mx-auto border border-gray-100"
    >
      <!-- Winning Medal (Absolute Positioned) -->
      <div
        class="absolute -top-2 right-6 md:right-12 w-16 h-16 md:w-20 md:h-20 z-10 drop-shadow-lg"
      >
        <img
          src="https://cdn.prod.website-files.com/61f24aa108528b1962942c95/61f24aa108528b7eab942cd9_winning%20medal.svg"
          loading="lazy"
          alt="Winning Medal"
          class="w-full h-full object-contain"
        />
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2">
        <!-- Left Column: Other Companies -->
        <div
          class="p-8 md:p-12 border-b md:border-b-0 md:border-r border-gray-200 bg-gray-50 flex flex-col gap-6"
        >
          <h3
            class="text-2xl md:text-3xl font-bold text-gray-800 tracking-tight font-['Noto_Sans_TC',sans-serif]"
          >
            其他行銷公司
          </h3>
          <p
            class="text-gray-500 text-sm md:text-base leading-relaxed h-[60px]"
          >
            市場上每間行銷公司想要讓自己的公司服務可以被看見，有時候客戶只能成為待宰羔羊
          </p>
          <div class="h-px w-full bg-gray-200 my-2"></div>
          <ul role="list" class="flex flex-col gap-4 md:gap-5 mt-2">
            {
              otherCompanyItems.map((item) => (
                <li class="flex items-center gap-3">
                  <span class="text-gray-700 font-medium text-base md:text-lg flex-1">
                    {item}
                  </span>
                  <div class="flex-shrink-0 flex items-center justify-center w-6 h-6 rounded-full bg-red-50 relative top-1">
                    <img
                      src="https://cdn.prod.website-files.com/61f24aa108528b1962942c95/61f24aa108528b9634942cdb_wrong.svg"
                      loading="lazy"
                      alt="Cross Icon"
                      class="w-3 h-3"
                    />
                  </div>
                </li>
              ))
            }
          </ul>
        </div>

        <!-- Right Column: Enchun Digital -->
        <div class="p-8 md:p-12 flex flex-col gap-6 relative bg-white">
          <h3
            class="text-2xl md:text-3xl font-bold text-[var(--color-enchunblue)] tracking-tight font-['Noto_Sans_TC',sans-serif]"
          >
            恩群數位
          </h3>
          <p
            class="text-gray-600 text-sm md:text-base leading-relaxed h-[60px]"
          >
            在恩群數位每個客戶都是我們最重視的拍檔，不論合作的項目大小，我們珍惜與客戶的合作關係
          </p>
          <div class="h-px w-full bg-blue-100 my-2"></div>
          <ul role="list" class="flex flex-col gap-4 md:gap-5 mt-2">
            {
              enchunItems.map((item) => (
                <li class="flex items-center gap-3">
                  <span class="text-gray-800 font-medium text-base md:text-lg flex-1">
                    {item}
                  </span>
                  <div class="flex-shrink-0 flex items-center justify-center w-6 h-6 rounded-full bg-green-50 relative top-1">
                    <img
                      src="https://cdn.prod.website-files.com/61f24aa108528b1962942c95/61f24aa108528b7a79942cda_checked.svg"
                      loading="lazy"
                      alt="Check Icon"
                      class="w-4 h-4"
                    />
                  </div>
                </li>
              ))
            }
          </ul>
        </div>
      </div>
    </div>

    <!-- CTA Button -->
    <div class="mt-12 flex justify-center">
      <a
        href="https://heyform.itslouis.cc/form/7mYtUNjA"
        target="_blank"
        class="inline-flex items-center justify-center bg-[var(--color-enchunblue)] text-white font-bold text-lg px-10 py-4 rounded-full shadow-[0_8px_20px_-6px_rgba(43,83,186,0.5)] hover:shadow-[0_12px_24px_-8px_rgba(43,83,186,0.6)] hover:opacity-95 transition-all duration-300 transform hover:-translate-y-1"
      >
        <div class="tracking-wide">跟行銷顧問聊聊</div>
      </a>
    </div>
  </div>
</section>
