---
/**
 * ClientCasesSection - Client testimonials carousel
 * Features: Auto-play carousel, 2-column grid, responsive
 */
import type { HomeData } from '@/lib/api/home'

interface Props {
  homeData?: HomeData | null
}

const { homeData } = Astro.props

// Client cases data - matching reference HTML exactly
const clientCases = [
  {
    id: 1,
    name: '落日精品咖啡',
    title: '王孟梵 老闆',
    company: '',
    image: '/placeholder-client-1.jpg',
    review: '業務專業、能反應需求、良好溝通一起努力達成目標，比起自己下廣告，合作更能將每分錢用在刀口上。',
  },
  {
    id: 2,
    name: 'Gee hair salon',
    title: 'Ivan 店長',
    company: '',
    image: '/placeholder-client-2.jpg',
    review: '與恩群合作多年，疫情時期，不指定、網路指定客數量不減反增，讓在店周圍客人們就進更能找到合適自己的髮型師。',
  },
  {
    id: 3,
    name: '高雄欣興租車',
    title: 'ANDY 店長',
    company: '',
    image: '/placeholder-client-3.jpg',
    review: '感謝團隊的專業指導與耐心的溝通，讓商家的理念可以轉換成實際的成果，發揮廣告效應最大化！特別是後勤團隊高效的執行能力，深受店家放心😊',
  },
  {
    id: 4,
    name: '這健小事運動工作室',
    title: 'Nash嘉慶 老闆',
    company: '',
    image: '/placeholder-client-4.jpg',
    review: '對於我們預算有限的自營小工作室的人真的最佳選擇，謝謝你們，讓更多需要運動的人，看見我們',
  },
  {
    id: 5,
    name: '即刻體能運動空間',
    title: 'Peter 老闆',
    company: '',
    image: '/placeholder-client-5.jpg',
    review: '在疫情期間開業的我們，很慶幸有恩群的協助，讓喜愛健身的客人能搜尋到我們、並給我們機會。感謝恩群團隊，讓我們感受到滿滿的服務熱忱及設身處地為客戶著想的心，非常推薦！',
  },
]
---

<section class="section-client-case" aria-labelledby="client-cases-heading">
  <div class="max-w-6xl mx-auto px-4">
    <!-- Section Header - H1 "客戶案例" -->
    <div class="section-header-w-line">
      <h1 id="client-cases-heading" class="client-case-heading">
        客戶案例
      </h1>
      <p class="client-case-sub">clients who work with us</p>
      <p class="client-case-description">
        恩群數位的客戶真實示範，增加流量就是這麼簡單！
      </p>
    </div>

    <!-- Carousel Container -->
    <div class="case-slider-wrapper" id="case-carousel">
      <!-- Slides Container -->
      <div class="case-slides-container">
        {
          clientCases.map((caseItem, index) => (
            <div
              class={`case-slide ${index === 0 ? 'active' : ''}`}
              data-slide={index}
            >
              <div class="case-content-grid">
                <!-- Image Side -->
                <div class="case-image-side">
                  <div class="case-image-wrapper">
                    <img
                      src={caseItem.image}
                      alt={caseItem.name}
                      class="case-slide-image"
                      loading="lazy"
                    />
                  </div>
                </div>

                <!-- Content Side -->
                <div class="case-content-side">
                  <h3 class="case-heading">{caseItem.name}</h3>
                  <p class="case-job-title">
                    {caseItem.title}
                  </p>
                  <p class="case-review">「{caseItem.review}」</p>
                </div>
              </div>
            </div>
          ))
        }
      </div>

      <!-- Navigation Arrows -->
      <button class="carousel-nav carousel-nav-prev" aria-label="previous slide">
        <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
          <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
        </svg>
      </button>
      <button class="carousel-nav carousel-nav-next" aria-label="next slide">
        <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
          <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
        </svg>
      </button>

      <!-- Slide Counter -->
      <div class="slide-counter" aria-live="polite">
        Slide <span id="current-slide">1</span> of <span id="total-slides">5</span>.
      </div>

      <!-- Carousel Indicators -->
      <div class="carousel-indicators">
        {
          clientCases.map((_, index) => (
            <button
              class={`indicator ${index === 0 ? 'active' : ''}`}
              data-slide={index}
              aria-label={`Go to slide ${index + 1}`}
            ></button>
          ))
        }
      </div>
    </div>
  </div>
</section>

<style>
  /* Client Cases Section Styles - Pixel-perfect from Webflow */
  .section-client-case {
    padding: 64px 0;
  }

  /* Section Header */
  .section-header-w-line {
    text-align: center;
    margin-bottom: 3rem;
  }

  .client-case-heading {
    font-family: "Noto Sans TC", sans-serif;
    font-size: 1.8em; /* 34.2px at 19px base - matching reference */
    font-weight: 700;
    color: var(--color-dark-blue, #062841);
    text-align: center;
    margin-bottom: 0.5rem;
  }

  .client-case-sub {
    font-family: "Quicksand", "Noto Sans TC", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-gray-600, #666);
    text-align: center;
    margin: 0.5rem 0;
    text-transform: lowercase;
  }

  .client-case-description {
    font-family: "Noto Sans TC", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-gray-600, #666);
    text-align: center;
    margin: 0.5rem 0 1rem;
  }

  /* Carousel Container */
  .case-slider-wrapper {
    position: relative;
    height: 77vh;
    overflow: hidden;
  }

  .case-slides-container {
    position: relative;
    height: 100%;
  }

  /* Individual Slide */
  .case-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    pointer-events: none;
  }

  .case-slide.active {
    opacity: 1;
    pointer-events: auto;
  }

  /* Content Grid */
  .case-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 55px;
    grid-row-gap: 55px;
    align-items: center;
    height: 100%;
    padding: 0 32px;
  }

  /* Image Side */
  .case-image-side {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .case-image-wrapper {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 12px;
    overflow: hidden;
    background: var(--color-gray-100);
  }

  .case-slide-image {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  /* Content Side */
  .case-content-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .case-heading {
    font-size: 1.7em;
    color: var(--color-dark-blue);
    font-family: "Noto Sans TC", sans-serif;
    margin-bottom: 8px;
    font-weight: 600;
  }

  .case-job-title {
    font-size: 18px;
    color: var(--color-enchunblue-dark);
    font-weight: 100;
    margin-bottom: 16px;
  }

  .case-review {
    font-size: 18px;
    color: var(--color-gray-700);
    font-weight: 100;
    line-height: 1.6;
  }

  /* Carousel Indicators */
  .carousel-indicators {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
  }

  .indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background 0.3s ease;
  }

  .indicator:hover {
    background: rgba(255, 255, 255, 0.8);
  }

  .indicator.active {
    background: var(--color-enchunblue);
    width: 32px;
    border-radius: 6px;
  }

  /* Navigation Arrows */
  .carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid var(--color-enchunblue);
    color: var(--color-enchunblue);
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
  }

  .carousel-nav:hover {
    background: var(--color-enchunblue);
    color: white;
  }

  .carousel-nav-prev {
    left: 16px;
  }

  .carousel-nav-next {
    right: 16px;
  }

  /* Slide Counter */
  .slide-counter {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    font-family: "Quicksand", sans-serif;
    font-size: 14px;
    color: var(--color-gray-600);
    background: rgba(255, 255, 255, 0.9);
    padding: 4px 12px;
    border-radius: 16px;
  }

  /* Responsive Adjustments */
  @media (max-width: 991px) {
    .case-slider-wrapper {
      height: auto;
    }

    .case-slide {
      position: relative;
      opacity: 1;
      pointer-events: auto;
    }

    .case-slide:not(.active) {
      display: none;
    }

    .case-content-grid {
      grid-template-columns: 1fr;
      grid-column-gap: 32px;
      grid-row-gap: 32px;
      padding: 24px;
    }

    .case-heading {
      font-size: 1.4em;
    }
  }

  @media (max-width: 767px) {
    .case-slider-wrapper {
      height: 59vh;
    }

    .client-case-sub {
      font-size: 20px;
      margin-top: 32px;
    }

    .case-content-grid {
      padding: 16px;
    }

    .case-heading {
      font-size: 1.2em;
    }

    .case-job-title,
    .case-review {
      font-size: 16px;
    }
  }
</style>

<script>
  // Carousel functionality
  function initClientCasesCarousel() {
    const slides = document.querySelectorAll('.case-slide')
    const indicators = document.querySelectorAll('.indicator')
    const prevBtn = document.querySelector('.carousel-nav-prev')
    const nextBtn = document.querySelector('.carousel-nav-next')
    const currentSlideEl = document.getElementById('current-slide')
    const totalSlidesEl = document.getElementById('total-slides')

    let currentSlide = 0
    const totalSlides = slides.length
    const autoplayDelay = 2500 // 2.5 seconds
    let autoplayTimer: number | undefined

    // Update total slides display
    if (totalSlidesEl) {
      totalSlidesEl.textContent = totalSlides.toString()
    }

    function showSlide(index: number) {
      // Wrap around
      if (index >= totalSlides) index = 0
      if (index < 0) index = totalSlides - 1

      // Remove active class from all
      slides.forEach(slide => slide.classList.remove('active'))
      indicators.forEach(ind => ind.classList.remove('active'))

      // Add active class to current
      slides[index].classList.add('active')
      indicators[index].classList.add('active')

      // Update counter
      if (currentSlideEl) {
        currentSlideEl.textContent = (index + 1).toString()
      }

      currentSlide = index
    }

    function nextSlide() {
      showSlide(currentSlide + 1)
    }

    function prevSlide() {
      showSlide(currentSlide - 1)
    }

    function startAutoplay() {
      stopAutoplay()
      autoplayTimer = window.setInterval(nextSlide, autoplayDelay)
    }

    function stopAutoplay() {
      if (autoplayTimer !== undefined) {
        clearInterval(autoplayTimer)
        autoplayTimer = undefined
      }
    }

    // Click handlers for indicators
    indicators.forEach((indicator, index) => {
      indicator.addEventListener('click', () => {
        showSlide(index)
        stopAutoplay()
        startAutoplay()
      })
    })

    // Navigation buttons
    if (prevBtn) {
      prevBtn.addEventListener('click', () => {
        prevSlide()
        stopAutoplay()
        startAutoplay()
      })
    }

    if (nextBtn) {
      nextBtn.addEventListener('click', () => {
        nextSlide()
        stopAutoplay()
        startAutoplay()
      })
    }

    // Pause on hover
    const carousel = document.getElementById('case-carousel')
    if (carousel) {
      carousel.addEventListener('mouseenter', stopAutoplay)
      carousel.addEventListener('mouseleave', startAutoplay)
    }

    // Start autoplay
    startAutoplay()
  }

  // Initialize when DOM is ready
  document.addEventListener('DOMContentLoaded', initClientCasesCarousel)
  if (document.readyState !== 'loading') {
    initClientCasesCarousel()
  }
</script>
