Testimonial 1

"use client";

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

import { Icons } from "@/components/icons";
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 bg-gray-50 px-4 py-12 sm:py-24 md:px-0 dark:bg-background">
      <svg
        className="absolute top-0 right-40 text-neutral-200/75 dark:text-neutral-800"
        fill="none"
        height="313"
        viewBox="0 0 615 413"
        width="615"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g clipPath="url(#clip0_568_896)">
          <path
            d="M53.6842 -174C10.9702 -71.2132 6.62611 40.7282 53.6842 105.688C108.466 181.309 232.908 193.262 447.569 52.9833C191.422 724.946 730.375 87.8948 560.032 392"
            stroke="currentColor"
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="40"
          />
        </g>
        <defs>
          <clipPath id="clip0_568_896">
            <rect fill="white" height="413" width="615" />
          </clipPath>
        </defs>
      </svg>

      <div className="relative z-40 mx-auto w-full max-w-7xl">
        <div className="flex flex-wrap items-end justify-between gap-6">
          <div className="flex flex-col gap-4">
            <Badge
              className="w-fit border-none bg-white py-0.5 font-medium shadow dark:bg-neutral-800"
              variant="secondary"
            >
              <Icons.zap className="size-3 fill-neutral-400 text-neutral-400" />
              Real Feedback
            </Badge>

            <div className="flex flex-col gap-3">
              <h2 className="font-medium text-4xl text-gray-900 tracking-tight md:text-5xl dark:text-neutral-100">
                VoxFlow Testimonials
              </h2>
              <p className="max-w-xl text-base text-gray-600 md:text-lg dark:text-neutral-400">
                Real stories from hybrid teams connecting better with VoxFlow.
              </p>
            </div>
          </div>
          <div className="flex items-center gap-3">
            <Button
              className="rounded-xl p-2"
              onClick={scrollPrev}
              variant="outline"
            >
              <ChevronLeft className="size-5" />
            </Button>
            <Button
              className="rounded-xl p-2"
              onClick={scrollNext}
              variant="outline"
            >
              <ChevronRight className="size-5" />
            </Button>
          </div>
        </div>
      </div>

      <div className="relative mx-auto max-w-7xl overflow-hidden px-6 lg:px-0">
        <div className="absolute left-0 z-20 h-full w-10 bg-linear-to-r from-gray-50 dark:from-background" />
        <div className="absolute right-0 z-20 h-full w-10 bg-linear-to-l from-gray-50 dark:from-background" />

        <Carousel
          className="relative z-10 flex flex-col gap-12"
          opts={{ align: "start", loop: true }}
          setApi={setApi}
        >
          <CarouselContent className="my-8 ml-0 gap-1">
            {testimonials.map((testimonial) => (
              <CarouselItem
                className="group mt-auto h-fit pl-4 md:basis-1/2 lg:basis-[28%]"
                key={testimonial.id}
              >
                <div className="h-full space-y-6 rounded-3xl bg-white p-7 shadow dark:bg-neutral-900">
                  <div className="flex items-start justify-between gap-4 border-b pb-6 dark:border-neutral-800">
                    <div className="flex items-start gap-3">
                      <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-gray-900 dark:text-neutral-100">
                          {testimonial.name}
                        </p>
                        <p className="text-gray-700 text-sm dark:text-neutral-400">
                          {testimonial.handle}
                        </p>
                      </div>
                    </div>
                    <span className="rounded-full bg-gray-100 px-3 py-1 font-medium text-black text-xs dark:bg-neutral-800 dark:text-neutral-100">
                      {testimonial.role}
                    </span>
                  </div>

                  <p className="flex-1 text-sm dark:text-neutral-300">
                    {testimonial.content}
                  </p>

                  <div className="flex items-center justify-end">
                    <span className="text-gray-500 text-xs dark:text-neutral-500">
                      {testimonial.date}
                    </span>
                  </div>
                </div>
              </CarouselItem>
            ))}
          </CarouselContent>
        </Carousel>
      </div>

      <div className="mx-auto flex w-full max-w-7xl flex-col gap-8 md:flex-row md:items-end md:justify-between">
        <div className="flex flex-col gap-6 md:flex-row md:gap-12">
          <div className="flex flex-col gap-2">
            <p className="font-medium text-3xl text-gray-900 md:text-4xl dark:text-neutral-100">
              4.6
            </p>
            <p className="font-medium text-gray-500 text-xs uppercase dark:text-neutral-400">
              Stars out of 5
            </p>
          </div>

          <div className="flex flex-col gap-2">
            <p className="font-medium text-3xl text-gray-900 md:text-4xl dark:text-neutral-100">
              4 minutes
            </p>
            <p className="font-medium text-gray-500 text-xs uppercase dark:text-neutral-400">
              Response time
            </p>
          </div>
        </div>

        <Button className="border-blue-700 bg-blue-700 text-white hover:bg-blue-700">
          See 96+ Reviews on Trustpilot
        </Button>
      </div>
    </section>
  );
}