Testimonial 4

"use client";

import { ChevronLeft, ChevronRight } from "lucide-react";
import Image from "next/image";
import React, { useCallback } from "react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Carousel,
  type CarouselApi,
  CarouselContent,
  CarouselItem,
} from "@/components/ui/carousel";

const testimonials = [
  {
    avatar:
      "https://res.cloudinary.com/dvwtcsh5v/image/upload/v1770279333/a1.jpg",
    company: "Amplitude",
    companyLogo: "https://www.amplitude.com/hubfs/amplitude-logo-inline.svg",
    content:
      "Switching to VoxFlow was the best infrastructure decision we made this year. Our remote team went from juggling four fragmented tools—separate video, chat, tasks, and calendar apps—to one unified platform. Onboarding is faster, context-switching is gone, and our engineers actually enjoy stand-ups now.",
    date: "Dec 12, 2025",
    handle: "@arcjoan",
    id: 1,
    name: "Arc Joan",
    role: "Developer",
  },
  {
    avatar:
      "https://res.cloudinary.com/dvwtcsh5v/image/upload/v1770279333/a2.jpg",
    company: "Verox Floor",
    companyLogo: "https://placeholder.svg?height=24&width=80&query=verox-logo",
    content:
      "One-click join, zero friction. VoxFlow cut our stand-up prep in half.",
    date: "Dec 12, 2025",
    handle: "@angelamoss",
    id: 2,
    name: "Angela Moss",
    role: "Developer",
  },
  {
    avatar:
      "https://res.cloudinary.com/dvwtcsh5v/image/upload/v1770279333/a3.jpg",
    company: "Verox Floor",
    companyLogo: "https://placeholder.svg?height=24&width=80&query=verox-logo",
    content:
      "We piloted VoxFlow during a single sprint and it immediately became part of how we work. The smart calendar saved us hours of scheduling back-and-forth, the task manager keeps our backlog visible to everyone, and the AI suggested replies in chat have been surprisingly useful. It's the kind of tool that quietly makes your whole team sharper.",
    date: "Dec 12, 2025",
    handle: "@alexrivera",
    id: 3,
    name: "Alex Rivera",
    role: "Product Manager",
  },
  {
    avatar:
      "https://res.cloudinary.com/dvwtcsh5v/image/upload/v1770279333/a4.jpg",
    company: "Amplitude",
    companyLogo: "https://www.amplitude.com/hubfs/amplitude-logo-inline.svg",
    content:
      "AI auto-framing in VoxFlow meetings is a game-changer. Everyone feels present.",
    date: "Dec 12, 2025",
    handle: "@riyapatel",
    id: 4,
    name: "Riya Patel",
    role: "Designer",
  },
  {
    avatar:
      "https://res.cloudinary.com/dvwtcsh5v/image/upload/v1770279333/a5.jpg",
    company: "Verox Floor",
    companyLogo: "https://placeholder.svg?height=24&width=80&query=verox-logo",
    content:
      "Before VoxFlow, coordinating across time zones was a constant headache. Meetings got missed, tasks fell through the cracks, and keeping everyone aligned felt like a second job. Now the messaging hub keeps the whole team in sync, auto-prioritization surfaces what actually matters, and I finally feel in control of our roadmap again.",
    date: "Dec 12, 2025",
    handle: "@davidkim",
    id: 5,
    name: "David Kim",
    role: "Engineering Lead",
  },
  {
    avatar:
      "https://res.cloudinary.com/dvwtcsh5v/image/upload/v1770279333/a6.jpg",
    company: "Amplitude",
    companyLogo: "https://www.amplitude.com/hubfs/amplitude-logo-inline.svg",
    content:
      "VoxFlow just works. Replaced three tools, clarity went up immediately.",
    date: "Dec 12, 2025",
    handle: "@lenahoward",
    id: 6,
    name: "Lena Howard",
    role: "Founder",
  },
];

export default function Component() {
  const [api, setApi] = React.useState<CarouselApi | null>(null);

  React.useEffect(() => {
    if (!api) return;

    const onSelect = () => {
      api.selectedScrollSnap();
    };

    api.on("select", onSelect);
    onSelect();

    return () => {
      api.off("select", onSelect);
    };
  }, [api]);

  const scrollPrev = useCallback(() => {
    api?.scrollPrev();
  }, [api]);

  const scrollNext = useCallback(() => {
    api?.scrollNext();
  }, [api]);

  return (
    <section className="relative w-full max-w-full overflow-hidden py-24 text-black dark:bg-white">
      <div className="relative z-10 mx-auto w-full max-w-full px-5 md:px-10">
        <div className="flex flex-wrap items-end justify-between gap-6">
          <div>
            <Badge className="mb-4 rounded-none bg-[#e1fcad] px-3 py-0.5 font-medium text-black text-sm dark:bg-[#e1fcad]">
              Testimonials
            </Badge>
            <h2 className="font-kanturmuy font-medium text-4xl tracking-tight md:text-5xl">
              Client Testimonials
            </h2>
          </div>
          <div className="flex items-center gap-3">
            <Button
              className="rounded-none py-3 shadow-none not-disabled:not-active:not-data-pressed:before:shadow-none dark:border-neutral-200"
              onClick={scrollPrev}
              variant="outline"
            >
              <ChevronLeft className="size-6" />
            </Button>
            <Button
              className="rounded-none py-3 shadow-none not-disabled:not-active:not-data-pressed:before:shadow-none dark:border-neutral-200"
              onClick={scrollNext}
              variant="outline"
            >
              <ChevronRight className="size-6" />
            </Button>
          </div>
        </div>
      </div>

      <div className="relative mx-auto mt-8 max-w-full overflow-hidden px-5 md:px-4">
        <Carousel
          className="relative z-10"
          opts={{ align: "start", loop: true }}
          setApi={setApi}
        >
          <CarouselContent className="ml-0 gap-4">
            {testimonials.map((testimonial) => (
              <CarouselItem
                className="bg-[#122023] p-0 md:basis-1/2 lg:basis-[26%]"
                key={testimonial.id}
              >
                <div className="flex h-full flex-col justify-between space-y-6 rounded-none p-6">
                  <p className="flex-1 text-[#e1fcad] text-lg">
                    {testimonial.content}
                  </p>

                  <div className="mt-auto flex items-start gap-3 pt-10">
                    <Image
                      alt={testimonial.name}
                      className="h-12 w-12 rounded-full object-cover"
                      height={400}
                      src={testimonial.avatar}
                      width={400}
                    />
                    <div className="flex flex-col">
                      <p className="font-semibold text-[#e1fcad]">
                        {testimonial.name}
                      </p>
                      <p className="text-[#e1fcad] text-sm">
                        {testimonial.handle}
                      </p>
                    </div>
                  </div>
                </div>
              </CarouselItem>
            ))}
          </CarouselContent>
        </Carousel>
      </div>
    </section>
  );
}