import * as motion from "motion/react-client"

import { cn } from "@/lib/utils"

type TestimonialItem = {
  name: string
  title: string
  image: string
  body: string
}

const testimonialData: TestimonialItem[] = [
  {
    name: "Emma Wilson",
    title: "Product Designer, TechCorp",
    image:
      "https://cdn.badtz-ui.com/images/components/avatar-proof/avatar-2.webp",
    body: "This design system has transformed our workflow. The components are intuitive and well-documented.",
  },
  {
    name: "Lucas Chen",
    title: "Frontend Developer, WebFlow",
    image:
      "https://cdn.badtz-ui.com/images/components/avatar-proof/avatar-1.webp",
    body: "The components are well-structured and customizable. They've significantly reduced our development time.",
  },
  {
    name: "Sophia Martinez",
    title: "UI/UX Lead, DesignHub",
    image:
      "https://cdn.badtz-ui.com/images/components/avatar-proof/avatar-5.webp",
    body: "Every component feels polished and professional. It's become our go-to resource for all projects.",
  },
  {
    name: "Oliver Thompson",
    title: "Creative Director, StudioX",
    image:
      "https://cdn.badtz-ui.com/images/components/avatar-proof/avatar-4.webp",
    body: "This design system brings consistency and efficiency to our creative process. Beautiful and functional.",
  },
]

type TestimonialCardProps = {
  item: TestimonialItem
}

function TestimonialCard({ item }: TestimonialCardProps) {
  return (
    <div
      className="border-border bg-secondary hover:bg-secondary/70 relative flex h-full w-full flex-col items-start justify-between rounded-xl border p-4 shadow-md transition-colors"
      aria-label={`Testimonial from ${item.name}, ${item.title}`}
    >
      <span className="text-muted-foreground mb-4 text-sm">{item.body}</span>
      <div className="mt-auto flex items-center gap-3 sm:gap-4">
        <div className="relative h-8 w-8 overflow-hidden rounded-full sm:h-10 sm:w-10">
          <img
            src={item.image}
            alt={item.name}
            aria-label={`Profile picture of ${item.name}`}
            className="h-full w-full object-cover"
          />
        </div>
        <div className="flex flex-col">
          <div className="text-foreground text-sm font-medium">{item.name}</div>
          <div className="text-muted-foreground text-xs">{item.title}</div>
        </div>
      </div>
    </div>
  )
}

type VerticalTestimonialMarqueeProps = {
  testimonials: TestimonialItem[]
  direction?: "up" | "down"
  speed?: number
  className?: string
}

function VerticalTestimonialMarquee({
  testimonials,
  direction = "up",
  speed = 20,
  className,
}: VerticalTestimonialMarqueeProps) {
  return (
    <div
      className={cn("h-full w-full overflow-hidden", className)}
      aria-label={`Testimonials scrolling ${direction}`}
    >
      <motion.div
        className="flex flex-col gap-4"
        animate={{
          y: direction === "up" ? ["0%", "-50%"] : ["-50%", "0%"],
        }}
        transition={{
          duration: speed,
          repeat: Infinity,
          ease: "linear",
        }}
      >
        {[...testimonials, ...testimonials].map((testimonial, index) => (
          <div key={`${testimonial.name}-${index}`} className="w-full shrink-0">
            <TestimonialCard item={testimonial} />
          </div>
        ))}
      </motion.div>
    </div>
  )
}

export function Testimonials() {
  return (
    <section
      className="bg-background px-6 py-24 lg:px-8"
      aria-label="Customer testimonials section"
    >
      <div className="mx-auto max-w-6xl">
        <div className="mx-auto flex max-w-3xl flex-col items-center gap-4 text-center">
          <h2 className="text-primary font-medium">Testimonials</h2>
          <p className="text-foreground text-4xl text-[clamp(40px,10vw,44px)] leading-[1.2] font-bold tracking-tighter text-balance sm:text-5xl">
            What our customers say
          </p>
          <p className="text-muted-foreground leading-7 font-normal text-pretty sm:max-w-[600px] sm:text-lg">
            We are a team of experienced professionals who are dedicated to
            providing the best possible service to our customers.
          </p>
        </div>
        <div
          className="relative mt-14 grid h-[60vh] grid-cols-1 gap-4 overflow-hidden sm:h-[70vh] md:grid-cols-2 lg:grid-cols-3"
          aria-label="Vertical testimonials carousel"
        >
          <div
            className="from-background absolute inset-x-0 top-0 z-10 h-16 w-full bg-linear-to-b md:h-24"
            aria-hidden="true"
          ></div>
          <div
            className="from-background absolute inset-x-0 bottom-0 z-10 h-16 w-full bg-linear-to-t md:h-24"
            aria-hidden="true"
          ></div>
          <div className={cn("block w-full")}>
            <VerticalTestimonialMarquee
              testimonials={testimonialData.slice(0, 4)}
              direction="up"
              speed={25}
              className="h-full"
            />
          </div>
          <div className={cn("hidden w-full md:block")}>
            <VerticalTestimonialMarquee
              testimonials={testimonialData.slice(0, 4)}
              direction="down"
              speed={20}
              className="h-full"
            />
          </div>
          <div className={cn("hidden w-full lg:block")}>
            <VerticalTestimonialMarquee
              testimonials={testimonialData.slice(0, 4)}
              direction="up"
              speed={30}
              className="h-full"
            />
          </div>
        </div>
      </div>
    </section>
  )
}
Testimonials 01

Testimonials 02

Testimonials 03
