---
import BackgroundEffect from '@@/components/ui/BackgroundEffect.astro';
import Card from '@@/components/ui/Card.astro';
import { Icon } from 'astro-icon/components';
import myImage from '@/assets/placeholder.png';
---

<section class="relative overflow-hidden">
  <BackgroundEffect
    gradientType="var(--gradient-top-fade-linear)"
    patternType="none"
    noiseType="none"
  />

  <div class="container">
    <div class="mb-10 text-center">
      <div
        class="rounded-card mb-4 inline-flex items-center gap-2 px-4 py-2 text-sm"
        data-scheme="shift"
      >
        <span class="bg-accent h-2 w-2 rounded-full"></span>
        Testimonials
      </div>
      <h2 class="h2 mb-4">
        What People Say About <span class="sp-emphasis">Pablo</span>
      </h2>
      <p class="text-fg-sub mx-auto max-w-3xl text-lg md:text-xl">
        Discover how Pablo is transforming the way people build websites
      </p>
    </div>

    <!-- Carousel -->
    <div
      class="relative -ml-[calc(50vw-50%)] mt-10 w-screen sm:mt-16"
      data-carousel-root
    >
      <!-- Viewport -->
      <div class="overflow-hidden">
        <div
          data-carousel-track
          class="flex w-full items-stretch gap-4 pl-[10vw] transition-transform duration-500 sm:gap-6"
        >
          {/** Slide 1 **/}
          <div
            data-slide="0"
            data-slide-original
            class="flex w-[80vw] min-w-[80vw] shrink-0"
          >
            <Card
              className="shadow-8 h-full w-full flex-1 overflow-hidden lg:rounded-2xl"
            >
              <div class="grid h-full grid-cols-1 lg:grid-cols-2">
                <!-- Left: Text Content -->
                <div
                  class="flex flex-col justify-center p-6 sm:p-8 md:p-10 lg:p-12 xl:p-16"
                >
                  <blockquote
                    class="text-fg mb-8 text-xl font-medium sm:text-2xl lg:text-3xl"
                  >
                    "Pablo brought clarity to complex problems and delivered
                    innovative solutions."
                  </blockquote>
                  <div>
                    <p class="text-fg font-semibold">John Doe</p>
                    <p class="text-fg-sub text-sm">CEO, Tech Innovations</p>
                  </div>
                </div>
                <!-- Right: Image -->
                <div class="relative h-64 lg:h-auto">
                  <img
                    src={myImage.src}
                    width={myImage.width}
                    height={myImage.height}
                    alt="Product screenshot"
                    class="h-full w-full object-cover"
                  />
                </div>
              </div>
            </Card>
          </div>

          {/** Slide 2 **/}
          <div
            data-slide="1"
            data-slide-original
            class="flex w-[80vw] min-w-[80vw] shrink-0"
          >
            <Card
              className="shadow-8 h-full w-full flex-1 overflow-hidden lg:rounded-2xl"
            >
              <div class="grid h-full grid-cols-1 lg:grid-cols-2">
                <!-- Left: Text Content -->
                <div
                  class="flex flex-col justify-center p-6 sm:p-8 md:p-10 lg:p-12 xl:p-16"
                >
                  <blockquote
                    class="text-fg mb-8 text-xl font-medium sm:text-2xl lg:text-3xl"
                  >
                    "Turned insights into tangible outcomes incredibly fast.
                    Highly recommended."
                  </blockquote>
                  <div>
                    <p class="text-fg font-semibold">Jane Smith</p>
                    <p class="text-fg-sub text-sm">Product Lead, Orbit</p>
                  </div>
                </div>
                <!-- Right: Image -->
                <div class="relative h-64 lg:h-auto">
                  <img
                    src={myImage.src}
                    width={myImage.width}
                    height={myImage.height}
                    alt="Product screenshot"
                    class="h-full w-full object-cover"
                  />
                </div>
              </div>
            </Card>
          </div>

          {/** Slide 3 **/}
          <div
            data-slide="2"
            data-slide-original
            class="flex w-[80vw] min-w-[80vw] shrink-0"
          >
            <Card
              className="shadow-8 h-full w-full flex-1 overflow-hidden lg:rounded-2xl"
            >
              <div class="grid h-full grid-cols-1 lg:grid-cols-2">
                <!-- Left: Text Content -->
                <div
                  class="flex flex-col justify-center p-6 sm:p-8 md:p-10 lg:p-12 xl:p-16"
                >
                  <blockquote
                    class="text-fg mb-8 text-xl font-medium sm:text-2xl lg:text-3xl"
                  >
                    "Practical systems thinking that drives measurable growth
                    and success."
                  </blockquote>
                  <div>
                    <p class="text-fg font-semibold">Alex Walker</p>
                    <p class="text-fg-sub text-sm">Founder, Nova Labs</p>
                  </div>
                </div>
                <!-- Right: Image -->
                <div class="relative h-64 lg:h-auto">
                  <img
                    src={myImage.src}
                    width={myImage.width}
                    height={myImage.height}
                    alt="Product screenshot"
                    class="h-full w-full object-cover"
                  />
                </div>
              </div>
            </Card>
          </div>
        </div>
      </div>

      <!-- Controls -->
      <div class="mt-6 flex items-center justify-center gap-2 px-6 lg:px-8">
        <button
          type="button"
          data-action="prev"
          aria-label="Previous"
          class="carousel-btn group"
        >
          <span
            data-scheme="bg"
            class="shadow-2 inline-flex h-10 w-10 items-center justify-center rounded-full"
          >
            <Icon name="lucide:chevron-left" size={18} />
          </span>
        </button>
        <button
          type="button"
          data-action="next"
          aria-label="Next"
          class="carousel-btn group"
        >
          <span
            data-scheme="bg"
            class="shadow-2 inline-flex h-10 w-10 items-center justify-center rounded-full"
          >
            <Icon name="lucide:chevron-right" size={18} />
          </span>
        </button>
      </div>
    </div>
  </div>
</section>

<style>
  .carousel-btn {
    cursor: pointer;
    transition:
      transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .carousel-btn:hover:not(:disabled) {
    transform: translateY(1px) scale(0.99);
    opacity: 0.9;
  }

  .carousel-btn:active:not(:disabled) {
    transform: translateY(2px) scale(0.98);
    opacity: 0.8;
  }

  .carousel-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
</style>

<script>
  function initTestimonialCarousel() {
    const root = document.querySelector("[data-carousel-root]");
    if (!root) return;

    const track = root.querySelector(
      "[data-carousel-track]",
    ) as HTMLElement | null;
    const prev = root.querySelector(
      '[data-action="prev"]',
    ) as HTMLButtonElement | null;
    const next = root.querySelector(
      '[data-action="next"]',
    ) as HTMLButtonElement | null;

    if (!track) return;

    const slides = Array.from(
      track.querySelectorAll("[data-slide-original]"),
    ) as HTMLElement[];
    if (slides.length === 0) return;

    let index = 0;
    let active = 0;

    // インデックスを循環させる
    const normalizeIndex = (i: number) => {
      const len = slides.length;
      return ((i % len) + len) % len;
    };

    // スライドを更新（ピクセルベースで計算）
    const updateSlide = () => {
      if (slides.length === 0) return;

      const firstSlide = slides[0];
      const slideWidth = firstSlide.offsetWidth;
      const gap = window.innerWidth >= 640 ? 24 : 16; // sm:gap-6 = 24px, gap-4 = 16px
      const moveDistance = slideWidth + gap;
      const offset = -active * moveDistance;

      track.style.transform = `translateX(${offset}px)`;
    };

    // ボタンの状態を更新（スライドが1つの場合は無効化）
    const updateButtonStates = () => {
      if (!prev || !next) return;
      const shouldDisable = slides.length <= 1;
      prev.disabled = shouldDisable;
      next.disabled = shouldDisable;
    };

    // インデックスを設定
    const setIndex = (newIndex: number) => {
      index = newIndex;
      active = normalizeIndex(index);
      updateSlide();
    };

    // 前へ
    const goPrev = () => {
      setIndex(index - 1);
    };

    // 次へ
    const goNext = () => {
      setIndex(index + 1);
    };

    prev?.addEventListener("click", goPrev);
    next?.addEventListener("click", goNext);

    // ウィンドウリサイズ時に再計算
    window.addEventListener("resize", () => {
      updateSlide();
    });

    // 初期表示
    updateSlide();
    updateButtonStates();
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", initTestimonialCarousel);
  } else {
    initTestimonialCarousel();
  }
</script>