---
const slides = [
  "/assets/preview-phone.png",
  "/assets/preview-phone.png",
  "/assets/preview-phone.png",
]
---

<section class="bg-[#fef0eb] w-full flex flex-col gap-[60px] items-center pt-[120px] px-[130px] overflow-hidden">
  <!-- Heading -->
  <div class="flex flex-col gap-[40px] items-start overflow-clip w-[940px]">
    <p class="font-bold text-[#1a1a1a] text-[48px] text-center tracking-[-1.16px] leading-[1.2] w-full">
      A Familiar App Experience, Reimagined with a Modern Look
    </p>
    <p class="font-normal text-[#7a726d] text-[18px] text-center tracking-[-0.33px] leading-[1.5] w-full">
      TalkPro keeps the communication experience familiar while refining the visual layer with updated icons, colors, spacing, and interface details.
    </p>
  </div>

  <!-- Carousel -->
  <div class="flex gap-[20px] items-end justify-center shrink-0" id="carousel">

    <!-- Left phone -->
    <div class="relative h-[396px] w-[336px] opacity-20 shrink-0 overflow-hidden pointer-events-none transition-opacity duration-300">
      <img id="phone-left" alt="" class="absolute h-[175.34%] left-0 max-w-none top-[-0.03%] w-full transition-opacity duration-300" src={slides[slides.length - 1]} />
    </div>

    <!-- Prev button -->
    <div class="flex items-end self-stretch shrink-0">
      <div class="flex items-center justify-center h-full">
        <button id="btn-prev" class="bg-[#f08458] flex items-center justify-center rounded-[9999px] size-[48px] hover:bg-[#e07a3b] active:scale-95 transition-all shrink-0 cursor-pointer">
          <img alt="Previous" class="block size-[24px]" src="/assets/preview-arrow-left.svg" />
        </button>
      </div>
    </div>

    <!-- Center phone -->
    <div class="relative h-[542px] w-[459px] shrink-0 overflow-hidden pointer-events-none">
      <img id="phone-center" alt="TalkPro app preview" class="absolute h-[175.34%] left-0 max-w-none top-[-0.03%] w-full transition-opacity duration-300" src={slides[0]} />
    </div>

    <!-- Next button -->
    <div class="flex items-end self-stretch shrink-0">
      <div class="flex items-center justify-center h-full">
        <button id="btn-next" class="bg-[#f08458] flex items-center justify-center rounded-[9999px] size-[48px] hover:bg-[#e07a3b] active:scale-95 transition-all shrink-0 cursor-pointer">
          <img alt="Next" class="block size-[24px] rotate-180" src="/assets/preview-arrow-right.svg" />
        </button>
      </div>
    </div>

    <!-- Right phone -->
    <div class="relative h-[396px] w-[336px] opacity-20 shrink-0 overflow-hidden pointer-events-none transition-opacity duration-300">
      <img id="phone-right" alt="" class="absolute h-[175.34%] left-0 max-w-none top-[-0.03%] w-full transition-opacity duration-300" src={slides[1]} />
    </div>

  </div>
</section>

<script>
  const slides: string[] = (window as any).__carouselSlides || [];

  // Read slides injected via data attribute
  const carousel = document.getElementById('carousel')!;
  const allSlides: string[] = JSON.parse(carousel.dataset.slides || '[]');

  const leftImg   = document.getElementById('phone-left')   as HTMLImageElement;
  const centerImg = document.getElementById('phone-center') as HTMLImageElement;
  const rightImg  = document.getElementById('phone-right')  as HTMLImageElement;
  const btnPrev   = document.getElementById('btn-prev')!;
  const btnNext   = document.getElementById('btn-next')!;

  let current = 0;

  function mod(n: number, m: number) { return ((n % m) + m) % m; }

  function transition(next: number) {
    [leftImg, centerImg, rightImg].forEach(img => img.style.opacity = '0');
    setTimeout(() => {
      current = mod(next, allSlides.length);
      leftImg.src   = allSlides[mod(current - 1, allSlides.length)];
      centerImg.src = allSlides[current];
      rightImg.src  = allSlides[mod(current + 1, allSlides.length)];
      [leftImg, centerImg, rightImg].forEach(img => img.style.opacity = '1');
    }, 200);
  }

  btnPrev.addEventListener('click', () => transition(current - 1));
  btnNext.addEventListener('click', () => transition(current + 1));
</script>

<script define:vars={{ slides }}>
  document.getElementById('carousel').dataset.slides = JSON.stringify(slides);
</script>
