---
/**
 * CTASection - Call to action section (Pixel-perfect from Webflow)
 * Features: 2-column grid, notification-red button, hover effects
 */
import type { HomeData } from '@/lib/api/home'

interface Props {
  homeData?: HomeData | null
}

const { homeData } = Astro.props

// Get CTA config from CMS or use defaults - matching reference HTML
const ctaSection = homeData?.ctaSection
const headline = ctaSection?.headline || '準備好開始新的旅程了嗎 歡迎與我們聯絡'
const description = ctaSection?.description || '' // Reference has no description
const buttonText = ctaSection?.buttonText || '預約諮詢 phone_callback'
const buttonLink = ctaSection?.buttonLink || 'https://heyform.itslouis.cc/form/7mYtUNjA'
---

<section
  class="section-call4action"
  aria-labelledby="cta-heading"
>
  <div class="max-w-6xl mx-auto px-4">
    <div class="c4a-grid">
      <!-- Text Content -->
      <div class="c4a-content">
        <h3 id="cta-heading" class="c4a-heading">
          {headline}
        </h3>
        {
          description && (
            <p class="c4a-description">
              {description}
            </p>
          )
        }
      </div>

      <!-- CTA Button -->
      <a
        href={buttonLink}
        class="c4a-button"
      >
        <span class="c4a-button-text">
          {buttonText}
        </span>
      </a>
    </div>
  </div>
</section>

<style>
  /* CTA Section Styles - Pixel-perfect from Webflow */
  .section-call4action {
    padding: 105px 0 126px 0;
  }

  .c4a-grid {
    display: grid;
    grid-column-gap: 60px;
    grid-template-columns: max-content max-content;
    place-items: center;
    justify-content: center;
  }

  .c4a-content {
    text-align: left;
  }

  /* Heading - 1.88em */
  .c4a-heading {
    color: var(--color-dark-blue);
    font-size: 1.88em;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 16px;
  }

  /* Description */
  .c4a-description {
    font-size: 1.1em;
    color: var(--color-gray-700);
    line-height: 1.5;
  }

  /* Button */
  .c4a-button {
    background-color: var(--color-notification-red);
    border-radius: 15px;
    padding: 18px 24px;
    text-decoration: none;
    display: inline-block;
    transition: all var(--transition-base, 200ms ease-in-out);
  }

  .c4a-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }

  .c4a-button-text {
    color: #f2f2f2;
    font-size: 1.56em;
    line-height: 1.1;
    text-align: center;
    font-weight: 500;
    display: block;
  }

  /* Responsive Adjustments */
  @media (max-width: 991px) {
    .section-call4action {
      padding: 64px 0;
    }

    .c4a-grid {
      grid-template-columns: 1fr;
      grid-column-gap: 32px;
      text-align: center;
    }

    .c4a-content {
      text-align: center;
    }

    .c4a-heading {
      font-size: 1.5em;
    }
  }

  @media (max-width: 767px) {
    .section-call4action {
      padding: 48px 0;
    }

    .c4a-button {
      min-width: 160px;
    }

    .c4a-button-text {
      font-size: 1.2em;
    }
  }
</style>