@windstream/react-shared-components 0.1.26 → 0.1.28

package/src/contentful/blocks/carousel/helper.tsx

@@ -1,356 +1,440 @@
-"use client";
-
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import {
-  CarouselWithProductCards,
-  CarouselWithTestimonialCards,
-  TabSwitchProps,
-} from "./types";
-
-import { Button } from "@shared/components/button";
-import { MaterialIcon } from "@shared/components/material-icon";
-import { ProductCard } from "@shared/contentful/blocks/cards/product-card";
-import { TestimonialCard } from "@shared/contentful/blocks/cards/testimonial-card";
-import { CheckPlansProps } from "@shared/types/micro-components";
-import { cx } from "@shared/utils";
-
-export function ProductCardCarousel({
-  fields,
-  renderCheckPlans,
-}: {
-  fields: CarouselWithProductCards;
-  onModalButtonClick?: (id?: string) => void;
-  renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
-}) {
-  const itemsExpanded = fields?.items?.items?.[0]?.benefitsExpanded || false;
-  const [desktopExpanded, setDesktopExpanded] = useState(itemsExpanded);
-  const [mobileExpandedStates, setMobileExpandedStates] = useState<
-    Record<number, boolean>
-  >({});
-  const [currentIndex, setCurrentIndex] = useState(0);
-  const items = fields?.items?.items || [];
-  const isCarousel = items.length > 2;
-  const cardsRef = useRef<(HTMLDivElement | null)[]>([]);
-
-  const prevSlide = useCallback(() => {
-    if (!isCarousel) return;
-    setCurrentIndex(prev => (prev + 3) % items.length);
-  }, [isCarousel, items.length]);
-
-  const nextSlide = useCallback(() => {
-    if (!isCarousel) return;
-    setCurrentIndex(prev => (prev - 3 + items.length) % items.length);
-  }, [isCarousel, items.length]);
-
-  // Equalize card heights
-  useEffect(() => {
-    if (!isCarousel) return;
-
-    const equalizeHeights = () => {
-      const cards = cardsRef.current.filter(Boolean) as HTMLDivElement[];
-      if (cards.length === 0) return;
-
-      // Reset heights first
-      cards.forEach(card => {
-        card.style.height = "auto";
-      });
-
-      // Find the tallest card
-      const maxHeight = Math.max(...cards.map(card => card.offsetHeight));
-
-      // Set all cards to the max height
-      cards.forEach(card => {
-        card.style.height = `${maxHeight}px`;
-      });
-    };
-
-    // Run on mount and when expanded state changes
-    equalizeHeights();
-
-    // Re-run after a short delay due to dynamic content
-    const timeoutId = setTimeout(equalizeHeights, 100);
-
-    return () => clearTimeout(timeoutId);
-  }, [isCarousel, desktopExpanded, items.length]);
-
-  if (!items.length && !fields?.title) {
-    return null;
-  }
-
-  const renderCard = (
-    item: any,
-    globalIndex: number,
-    isMobileView: boolean = false
-  ) => {
-    const planContent = item?.speed?.split("|");
-    const planName = planContent?.[0] || "";
-    const planSubtext = planContent?.[1] || "";
-    const priceCents = item?.priceSuffix?.split("/")?.[0] || "00";
-    const formattedPrice = `${item?.price || "0"}.${priceCents}`;
-    const features = item?.benefits?.items || [];
-    const bestValue = item?.highlighted || false;
-    const rawBadge = item?.giftRewards?.list?.items || [];
-    const innerBadge = {
-      badgeText: item.innerBadge || "",
-      badgeIcon: item.innerBadgeIcon?.url || "",
-    };
-
-    // Mobile: individual card state, Desktop: shared state
-    const isExpanded = isMobileView
-      ? mobileExpandedStates[globalIndex] || false
-      : desktopExpanded;
-
-    const handleToggle = () => {
-      if (isMobileView) {
-        setMobileExpandedStates(prev => ({
-          ...prev,
-          [globalIndex]: !prev[globalIndex],
-        }));
-      } else {
-        setDesktopExpanded(!desktopExpanded);
-      }
-    };
-
-    const handleCtaClick = () => {
-      return;
-    };
-
-    return (
-      <div
-        ref={
-          !isMobileView
-            ? el => {
-                if (el && !cardsRef.current.includes(el)) {
-                  cardsRef.current[globalIndex] = el;
-                }
-              }
-            : undefined
-        }
-        key={globalIndex}
-        className={cx(
-          isMobileView
-            ? "mx-auto w-full max-w-[392px]"
-            : "w-[392px] flex-shrink-0"
-        )}
-      >
-        <ProductCard
-          planName={planName}
-          planSubtext={planSubtext}
-          speed={item?.speed || ""}
-          techType={item?.techType || ""}
-          ismaxSpeed={item?.ismaxSpeed || ""}
-          price={formattedPrice}
-          description={item?.productCardDescription || ""}
-          giftBadge={rawBadge}
-          innerBadge={innerBadge}
-          theme={item?.highlighted ? "dark" : "light"}
-          bestValue={bestValue}
-          bestValueText={item?.topBadgeText || "best value"}
-          featuresTitle={item?.benefitsTitle}
-          features={features}
-          isExpanded={isExpanded}
-          onToggleExpand={handleToggle}
-          ctaText={item?.cta?.buttonLabel || "Select plan"}
-          onCtaClick={handleCtaClick}
-          renderCheckPlans={renderCheckPlans}
-          cta={item.cta}
-          hostType="smb"
-        />
-      </div>
-    );
-  };
-
-  // For infinite scroll with peeking, starting in the middle of the repeated array
-  const displayItems = [...items, ...items, ...items, ...items, ...items];
-  const offset = items.length * 2;
-
-  return !isCarousel ? (
-    <div className="flex w-full max-w-[1280px] flex-wrap justify-center gap-8 px-4">
-      {items.map((item, index) => renderCard(item, index))}
-    </div>
-  ) : (
-    <>
-      {/* Mobile/Tablet View: Vertical Stack */}
-      <div className="flex flex-col gap-6 md:hidden">
-        {items.map((item, index) => renderCard(item, index, true))}
-      </div>
-
-      {/* Desktop View: Horizontal Carousel */}
-      <div className="relative hidden w-full md:block">
-        {/* Navigation Arrows */}
-        <div className="pointer-events-none absolute -left-16 -right-16 top-[50%] z-30 flex -translate-y-1/2 justify-between px-4 md:px-10">
-          <Button
-            onClick={prevSlide}
-            className="pointer-events-auto flex h-12 w-12 items-center justify-center rounded-full border border-gray-100 bg-white p-2 text-text shadow-cardDrop transition-all hover:bg-gray-50"
-            aria-label="Previous"
-          >
-            <MaterialIcon name="arrow_back" size={24} />
-          </Button>
-
-          <Button
-            onClick={nextSlide}
-            className="pointer-events-auto flex h-12 w-12 items-center justify-center rounded-full border border-gray-100 bg-white p-2 text-text shadow-cardDrop transition-all hover:bg-gray-50"
-            aria-label="Next"
-          >
-            <MaterialIcon name="arrow_forward" size={24} />
-          </Button>
-        </div>
-
-        {/* Carousel Window */}
-        <div className="mx-auto max-w-[1280px] overflow-hidden">
-          <div
-            className="flex items-stretch gap-4 pb-4 transition-transform duration-500 ease-in-out"
-            style={{
-              transform: `translateX(calc(-${offset + currentIndex} * (392px + 12px)))`,
-            }}
-          >
-            {displayItems.map((item, index) => renderCard(item, index, false))}
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}
-
-export const TestimonialCarousel: React.FC<{
-  fields: CarouselWithTestimonialCards;
-}> = ({ fields }) => {
-  const testimonials = fields?.items?.items || [];
-  const [currentIndex, setCurrentIndex] = useState(0);
-  const timeoutRef = useRef<ReturnType<typeof setInterval> | null>(null);
-
-  const nextSlide = useCallback(() => {
-    if (testimonials.length === 0) return;
-    setCurrentIndex(prev => (prev + 1) % testimonials.length);
-  }, [testimonials.length]);
-
-  const prevSlide = useCallback(() => {
-    if (testimonials.length === 0) return;
-    setCurrentIndex(prev => (prev === 0 ? testimonials.length - 1 : prev - 1));
-  }, [testimonials.length]);
-
-  // Auto-scroll logic
-  useEffect(() => {
-    if (testimonials.length === 0) return;
-
-    timeoutRef.current = setInterval(() => {
-      nextSlide();
-    }, 8000); // 5 seconds per slide
-
-    return () => {
-      if (timeoutRef.current) clearInterval(timeoutRef.current);
-    };
-  }, [nextSlide, testimonials.length]);
-
-  if (!testimonials || testimonials.length === 0) {
-    return null;
-  }
-
-  return (
-    <div className="relative mx-auto max-w-[1280px] overflow-hidden md:px-24">
-      {/* Navigation Overlay - Left (Hidden on mobile) */}
-      <Button
-        onClick={prevSlide}
-        className="group absolute left-4 top-1/2 z-20 hidden h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full bg-white p-2 text-text shadow-md transition-colors hover:bg-gray-100 md:flex"
-        aria-label="Previous"
-      >
-        <MaterialIcon name="arrow_back" size={24} />
-      </Button>
-
-      {/* Slider Track Wrapper */}
-      <div className="grid grid-cols-1 justify-items-center">
-        {/* Slides */}
-        {testimonials.map((item, index) => {
-          let offset = index - currentIndex;
-          const len = testimonials.length;
-          if (offset > len / 2) offset -= len;
-          if (offset < -len / 2) offset += len;
-
-          const isActive = offset === 0;
-
-          return (
-            <div
-              key={index}
-              className={cx(
-                "col-start-1 row-start-1 w-full md:max-w-[815px]",
-                // Mobile: only show active card
-                isActive ? "opacity-100" : "opacity-0",
-                // Desktop: show active and peeking cards
-                "md:opacity-100"
-              )}
-              style={{
-                transform: `translateX(${isActive ? "0%" : offset * 105 + "%"})`,
-                zIndex: isActive ? 10 : 5,
-                visibility: Math.abs(offset) > 1 ? "hidden" : "visible",
-                transition: "all 0.5s ease-in-out",
-              }}
-            >
-              <TestimonialCard
-                {...item}
-                isActive={isActive}
-                className="h-full"
-              />
-            </div>
-          );
-        })}
-      </div>
-
-      {/* Navigation Overlay - Right (Hidden on mobile) */}
-      <Button
-        onClick={nextSlide}
-        className="group absolute right-4 top-1/2 z-20 hidden h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full bg-white p-2 text-text shadow-md transition-colors hover:bg-gray-100 md:flex"
-        aria-label="Next"
-      >
-        <MaterialIcon name="arrow_forward" size={24} />
-      </Button>
-
-      {/* Dots (Hidden on mobile) */}
-      <div className="mt-8 hidden justify-center gap-2 md:flex">
-        {testimonials.map((_, idx) => (
-          <button
-            key={idx}
-            onClick={() => setCurrentIndex(idx)}
-            className={cx(
-              "h-2 w-2 rounded-full transition-all duration-300",
-              currentIndex === idx
-                ? "w-6 bg-white"
-                : "bg-white/40 hover:bg-white/60"
-            )}
-            aria-label={`Go to slide ${idx + 1}`}
-          />
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export const TabSwitch: React.FC<TabSwitchProps> = ({
-  tabs,
-  activeTab,
-  onChange,
-  className,
-}) => {
-  return (
-    <div
-      className={cx(
-        "mx-auto flex w-fit rounded-2xl bg-bg-surface-active p-1",
-        className
-      )}
-    >
-      {tabs.map(tab => (
-        <button
-          key={tab}
-          onClick={() => onChange(tab)}
-          className={cx(
-            "min-w-[160px] whitespace-nowrap rounded-2xl bg-bg-surface-active px-4 py-2.5 text-label1 font-black transition-all duration-300",
-            activeTab === tab
-              ? "bg-bg-fill-brand text-white shadow-md"
-              : "text-text-info hover:bg-bg-surface-hover"
-          )}
-        >
-          {tab}
-        </button>
-      ))}
-    </div>
-  );
-};
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import {
+  CarouselWithProductCards,
+  CarouselWithTestimonialCards,
+  TabSwitchProps,
+} from "./types";
+
+import { Button } from "@shared/components/button";
+import { MaterialIcon } from "@shared/components/material-icon";
+import { ProductCard } from "@shared/contentful/blocks/cards/product-card";
+import { TestimonialCard } from "@shared/contentful/blocks/cards/testimonial-card";
+import { useCarouselSwipe } from "@shared/hooks/use-carousel-swipe";
+import { CheckPlansProps } from "@shared/types/micro-components";
+import { cx } from "@shared/utils";
+
+export function ProductCardCarousel({
+  fields,
+  renderCheckPlans,
+}: {
+  fields: CarouselWithProductCards;
+  onModalButtonClick?: (id?: string) => void;
+  renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
+}) {
+  const itemsExpanded = fields?.items?.items?.[0]?.benefitsExpanded || false;
+  const [desktopExpanded, setDesktopExpanded] = useState(itemsExpanded);
+  const [mobileExpandedStates, setMobileExpandedStates] = useState<
+    Record<number, boolean>
+  >({});
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const items = fields?.items?.items || [];
+  const isCarousel = items.length > 2;
+  const cardsRef = useRef<(HTMLDivElement | null)[]>([]);
+
+  const prevSlide = useCallback(() => {
+    if (!isCarousel) return;
+    setCurrentIndex(prev => (prev + 3) % items.length);
+  }, [isCarousel, items.length]);
+
+  const nextSlide = useCallback(() => {
+    if (!isCarousel) return;
+    setCurrentIndex(prev => (prev - 3 + items.length) % items.length);
+  }, [isCarousel, items.length]);
+
+  // Equalize card heights
+  useEffect(() => {
+    if (!isCarousel) return;
+
+    const equalizeHeights = () => {
+      const cards = cardsRef.current.filter(Boolean) as HTMLDivElement[];
+      if (cards.length === 0) return;
+
+      // Reset heights first
+      cards.forEach(card => {
+        card.style.height = "auto";
+      });
+
+      // Find the tallest card
+      const maxHeight = Math.max(...cards.map(card => card.offsetHeight));
+
+      // Set all cards to the max height
+      cards.forEach(card => {
+        card.style.height = `${maxHeight}px`;
+      });
+    };
+
+    // Run on mount and when expanded state changes
+    equalizeHeights();
+
+    // Re-run after a short delay due to dynamic content
+    const timeoutId = setTimeout(equalizeHeights, 100);
+
+    return () => clearTimeout(timeoutId);
+  }, [isCarousel, desktopExpanded, items.length]);
+
+  if (!items.length && !fields?.title) {
+    return null;
+  }
+
+  const renderCard = (
+    item: any,
+    globalIndex: number,
+    isMobileView: boolean = false
+  ) => {
+    const planContent = item?.speed?.split("|");
+    const planName = planContent?.[0] || "";
+    const planSubtext = planContent?.[1] || "";
+    const priceCents = item?.priceSuffix?.split("/")?.[0] || "00";
+    const formattedPrice = `${item?.price || "0"}.${priceCents}`;
+    const features = item?.benefits?.items || [];
+    const bestValue = item?.highlighted || false;
+    const rawBadge = item?.giftRewards?.list?.items || [];
+    const innerBadge = {
+      badgeText: item.innerBadge || "",
+      badgeIcon: item.innerBadgeIcon?.url || "",
+    };
+
+    // Mobile: individual card state, Desktop: shared state
+    const isExpanded = isMobileView
+      ? mobileExpandedStates[globalIndex] || false
+      : desktopExpanded;
+
+    const handleToggle = () => {
+      if (isMobileView) {
+        setMobileExpandedStates(prev => ({
+          ...prev,
+          [globalIndex]: !prev[globalIndex],
+        }));
+      } else {
+        setDesktopExpanded(!desktopExpanded);
+      }
+    };
+
+    const handleCtaClick = () => {
+      return;
+    };
+
+    return (
+      <div
+        ref={
+          !isMobileView
+            ? el => {
+                if (el && !cardsRef.current.includes(el)) {
+                  cardsRef.current[globalIndex] = el;
+                }
+              }
+            : undefined
+        }
+        key={globalIndex}
+        className={cx(
+          isMobileView
+            ? "mx-auto w-full max-w-[392px]"
+            : "w-[392px] flex-shrink-0"
+        )}
+      >
+        <ProductCard
+          planName={planName}
+          planSubtext={planSubtext}
+          speed={item?.speed || ""}
+          techType={item?.techType || ""}
+          ismaxSpeed={item?.ismaxSpeed || ""}
+          price={formattedPrice}
+          description={item?.productCardDescription || ""}
+          giftBadge={rawBadge}
+          innerBadge={innerBadge}
+          theme={item?.highlighted ? "dark" : "light"}
+          bestValue={bestValue}
+          bestValueText={item?.topBadgeText || "best value"}
+          featuresTitle={item?.benefitsTitle}
+          features={features}
+          isExpanded={isExpanded}
+          onToggleExpand={handleToggle}
+          ctaText={item?.cta?.buttonLabel || "Select plan"}
+          onCtaClick={handleCtaClick}
+          renderCheckPlans={renderCheckPlans}
+          cta={item.cta}
+          hostType="smb"
+        />
+      </div>
+    );
+  };
+
+  // For infinite scroll with peeking, starting in the middle of the repeated array
+  const displayItems = [...items, ...items, ...items, ...items, ...items];
+  const offset = items.length * 2;
+
+  return !isCarousel ? (
+    <div className="flex w-full max-w-[1280px] flex-wrap justify-center gap-8 px-4">
+      {items.map((item, index) => renderCard(item, index))}
+    </div>
+  ) : (
+    <>
+      {/* Mobile/Tablet View: Vertical Stack */}
+      <div className="flex flex-col gap-6 md:hidden">
+        {items.map((item, index) => renderCard(item, index, true))}
+      </div>
+
+      {/* Desktop View: Horizontal Carousel */}
+      <div className="relative hidden w-full md:block">
+        {/* Navigation Arrows */}
+        <div className="pointer-events-none absolute -left-16 -right-16 top-[50%] z-30 flex -translate-y-1/2 justify-between px-4 md:px-10">
+          <Button
+            onClick={prevSlide}
+            className="pointer-events-auto flex h-12 w-12 items-center justify-center rounded-full border border-gray-100 bg-white p-2 text-text shadow-cardDrop transition-all hover:bg-gray-50"
+            aria-label="Previous"
+          >
+            <MaterialIcon name="arrow_back" size={24} />
+          </Button>
+
+          <Button
+            onClick={nextSlide}
+            className="pointer-events-auto flex h-12 w-12 items-center justify-center rounded-full border border-gray-100 bg-white p-2 text-text shadow-cardDrop transition-all hover:bg-gray-50"
+            aria-label="Next"
+          >
+            <MaterialIcon name="arrow_forward" size={24} />
+          </Button>
+        </div>
+
+        {/* Carousel Window */}
+        <div className="mx-auto max-w-[1280px] overflow-hidden">
+          <div
+            className="flex items-stretch gap-4 pb-4 transition-transform duration-500 ease-in-out"
+            style={{
+              transform: `translateX(calc(-${offset + currentIndex} * (392px + 12px)))`,
+            }}
+          >
+            {displayItems.map((item, index) => renderCard(item, index, false))}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+/**
+ * Individual slide component for the testimonial carousel
+ * Memoized to prevent unnecessary re-renders of inactive slides
+ */
+const TestimonialCarouselSlide = React.memo<{
+  item: any;
+  index: number;
+  currentIndex: number;
+  totalItems: number;
+  swipeOffset: number;
+  isSwiping: boolean;
+  isMobile: boolean;
+  containerWidth: number;
+  cardOffsetPercentage: number;
+}>(
+  ({
+    item,
+    index,
+    currentIndex,
+    totalItems,
+    swipeOffset,
+    isSwiping,
+    isMobile,
+    containerWidth,
+    cardOffsetPercentage,
+  }) => {
+    // Calculate circular offset for infinite carousel feel
+    let offset = index - currentIndex;
+    const len = totalItems;
+    if (offset > len / 2) offset -= len;
+    if (offset < -len / 2) offset += len;
+
+    const isActive = offset === 0;
+    const isAdjacent = Math.abs(offset) === 1;
+
+    // Calculate card position with smooth swipe following
+    // Base position is determined by card index offset (105% spacing between cards)
+    const baseTransform = offset * cardOffsetPercentage;
+    // Convert swipe pixels to percentage for smooth finger-following during swipe
+    const swipePercentage = (swipeOffset / containerWidth) * 100;
+    const totalTransform = baseTransform + swipePercentage;
+
+    // Mobile: Show adjacent cards during swipe for preview effect
+    // Desktop: Cards always visible (handled by opacity check below)
+    const showOnMobile = isSwiping ? isActive || isAdjacent : isActive;
+
+    // Determine opacity visibility (mobile-specific behavior)
+    const isVisible = isMobile ? showOnMobile : true;
+
+    return (
+      <div
+        className={cx(
+          // Layout
+          "col-start-1 row-start-1 w-full md:max-w-[815px]",
+          // Performance: Hint browser to optimize transform and opacity animations
+          "will-change-[transform,opacity]",
+          // Z-index: Active slide on top
+          isActive ? "z-10" : "z-5",
+          // Visibility: Hide slides that are too far away (performance optimization)
+          Math.abs(offset) > 1 ? "invisible" : "visible",
+          // Opacity: Mobile fade effect for adjacent cards, desktop always visible
+          isVisible ? "opacity-100" : "opacity-0",
+          // Transitions: Faster during swipe, slower when snapping to position
+          isSwiping
+            ? "transition-opacity duration-200"
+            : "transition-[transform,opacity] duration-500 ease-[cubic-bezier(0.25,0.46,0.45,0.94)]"
+        )}
+        style={{
+          // Use CSS variable for dynamic transform value (can't be done with Tailwind)
+          transform: `translateX(${totalTransform}%)`,
+        }}
+      >
+        <TestimonialCard {...item} isActive={isActive} className="h-full" />
+      </div>
+    );
+  }
+);
+
+TestimonialCarouselSlide.displayName = "TestimonialCarouselSlide";
+
+export const TestimonialCarousel: React.FC<{
+  fields: CarouselWithTestimonialCards;
+  autoScroll?: boolean;
+  autoScrollInterval?: number;
+}> = ({ fields, autoScroll = true, autoScrollInterval = 8000 }) => {
+  const testimonials = fields?.items?.items || [];
+
+  if (!testimonials || testimonials.length === 0) {
+    return null;
+  }
+
+  // Use the generic carousel swipe hook
+  const carousel = useCarouselSwipe({
+    itemCount: testimonials.length,
+    cardOffsetPercentage: 105, // How far each card is offset (100% width + 5% gap)
+    swipeThreshold: 0.15, //  Need to swipe 15% of screen to change slide
+    mobileBreakpoint: 768, // Tailwind's md breakpoint, Mobile if width < 768px
+    autoScrollInterval: autoScrollInterval, // 8 seconds between slides transition
+    enableAutoScroll: autoScroll,
+  });
+
+  return (
+    <div>
+      <div className="relative max-w-[1280px] md:px-11">
+        {/* Navigation Overlay - Left (Hidden on mobile) */}
+        <Button
+          onClick={carousel.prevSlide}
+          className="group absolute left-5 top-1/2 z-50 hidden h-13 w-13 -translate-y-1/2 items-center justify-center rounded-full bg-white p-2 text-text shadow-md transition-colors hover:bg-gray-100 md:flex"
+          aria-label="Previous"
+        >
+          <MaterialIcon name="arrow_back" size={24} />
+        </Button>
+
+        {/* Navigation Overlay - Right (Hidden on mobile) */}
+        <Button
+          onClick={carousel.nextSlide}
+          className="group absolute right-5 top-1/2 z-50 hidden h-13 w-13 -translate-y-1/2 items-center justify-center rounded-full bg-white p-2 text-text shadow-md transition-colors hover:bg-gray-100 md:flex"
+          aria-label="Next"
+        >
+          <MaterialIcon name="arrow_forward" size={24} />
+        </Button>
+
+        {/* Slider Track Wrapper */}
+        <div
+          ref={carousel.containerRef}
+          className="select-none overflow-hidden rounded-card-sm will-change-transform"
+          onTouchStart={carousel.handleTouchStart}
+          onTouchMove={carousel.handleTouchMove}
+          onTouchEnd={carousel.handleTouchEnd}
+        >
+          <div className="grid grid-cols-1 justify-items-center">
+            {/* Slides */}
+            {testimonials.map((item, index) => (
+              <TestimonialCarouselSlide
+                key={index}
+                item={item}
+                index={index}
+                currentIndex={carousel.currentIndex}
+                totalItems={testimonials.length}
+                swipeOffset={carousel.swipeOffset}
+                isSwiping={carousel.isSwiping}
+                isMobile={carousel.isMobile}
+                containerWidth={carousel.containerWidth}
+                cardOffsetPercentage={carousel.constants.CARD_OFFSET_PERCENTAGE}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+      {/* Dots (Hidden on mobile) */}
+      <div className="mt-5 flex justify-center gap-2 md:mt-10">
+        {testimonials.map((_, idx) => (
+          <button
+            key={idx}
+            onClick={() => carousel.goToSlide(idx)}
+            className={cx(
+              "h-2 w-2 rounded-full transition-all duration-300",
+              carousel.currentIndex === idx
+                ? "w-6 bg-white"
+                : "bg-bg-fill-inverse-disabled hover:bg-white/60"
+            )}
+            aria-label={`Go to slide ${idx + 1}`}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export const TabSwitch: React.FC<TabSwitchProps> = ({
+  tabs,
+  activeTab,
+  onChange,
+  className,
+}) => {
+  const activeIndex = tabs.indexOf(activeTab);
+  const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);
+  const [indicatorStyle, setIndicatorStyle] = useState({ width: 0, left: 0 });
+
+  useEffect(() => {
+    const activeButton = buttonRefs.current[activeIndex];
+    if (activeButton) {
+      setIndicatorStyle({
+        width: activeButton.offsetWidth,
+        left: activeButton.offsetLeft,
+      });
+    }
+  }, [activeIndex, tabs]);
+
+  return (
+    <div className="flex w-full justify-center">
+      <div
+        className={cx(
+          "relative flex w-fit gap-1 rounded-button-lg bg-bg-surface-active p-1 transition-all duration-200 ease-out",
+          className
+        )}
+      >
+        {/* Sliding background indicator */}
+        <div
+          className="absolute bottom-1 top-1 rounded-button bg-bg-fill-brand shadow-md transition-all duration-300 ease-out"
+          style={{
+            width: `${indicatorStyle.width}px`,
+            left: `${indicatorStyle.left}px`,
+          }}
+        />
+
+        {tabs.map((tab, index) => (
+          <button
+            key={tab}
+            ref={el => {
+              buttonRefs.current[index] = el;
+            }}
+            onClick={() => onChange(tab)}
+            className={cx(
+              "label1 relative z-10 flex min-w-[160px] items-center justify-center whitespace-nowrap rounded-button px-4 py-2.5 transition-colors duration-200 focus:outline-none active:bg-transparent",
+              activeTab === tab
+                ? "text-text-inverse"
+                : "text-text-disabled hover:bg-bg-surface-hover"
+            )}
+          >
+            {tab}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};