"use client"

import { useEffect, useState } from "react"
import { ChevronLeft, ChevronRight } from "@aliimam/icons"

import { Button } from "@/components/ui/button"

export function TestimonialsSection() {
  const [activeTestimonial, setActiveTestimonial] = useState(0)
  const [isTransitioning, setIsTransitioning] = useState(false)

  const testimonials = [
    {
      quote:
        "Working with this team elevated our entire product experience. Every interaction now feels intentional and beautifully crafted.",
      name: "Aarav Mehta",
      company: "Founder, Nova Labs",
      image: "https://github.com/shadcn.png",
    },
    {
      quote:
        "Their design thinking completely reshaped our platform. The clarity, usability, and visual polish exceeded our expectations.",
      name: "Emily Carter",
      company: "Head of Product, Lumina",
      image: "https://github.com/vercel.png",
    },
    {
      quote:
        "From branding to interface design, the attention to detail was exceptional. Our launch received incredible feedback from users.",
      name: "Daniel Kim",
      company: "CEO, Horizon Tech",
      image: "https://github.com/claude.png",
    },
  ]

  useEffect(() => {
    const interval = setInterval(() => {
      setIsTransitioning(true)
      setTimeout(() => {
        setActiveTestimonial((prev) => (prev + 1) % testimonials.length)
        setTimeout(() => {
          setIsTransitioning(false)
        }, 100)
      }, 300)
    }, 12000)

    return () => clearInterval(interval)
  }, [testimonials.length])

  const handleNavigationClick = (index: number) => {
    setIsTransitioning(true)
    setTimeout(() => {
      setActiveTestimonial(index)
      setTimeout(() => {
        setIsTransitioning(false)
      }, 100)
    }, 300)
  }

  return (
    <div className="flex min-h-svh w-full flex-col items-center justify-center">
      <div className="bg-background flex items-center justify-start self-stretch overflow-hidden border border-t-0 border-r-0 border-b border-l-0 px-2">
        <div className="flex flex-1 flex-col items-end justify-center gap-6 py-16 md:flex-row md:py-17">
          <div className="flex flex-col items-start justify-center gap-4 self-stretch px-3 md:flex-row md:px-12">
            <img
              className="h-24 w-24 rounded-md object-cover transition-all duration-700 ease-in-out md:h-50 md:w-50"
              style={{
                opacity: isTransitioning ? 0.6 : 1,
                transform: isTransitioning ? "scale(0.95)" : "scale(1)",
                transition:
                  "opacity 0.7s ease-in-out, transform 0.7s ease-in-out",
              }}
              src={testimonials[activeTestimonial].image || "/placeholder.svg"}
              alt={testimonials[activeTestimonial].name}
            />
            <div className="flex flex-1 flex-col items-start justify-start gap-3 overflow-hidden md:px-6">
              <div
                className="line-clamp-5 flex h-40 flex-col justify-start self-stretch overflow-hidden text-2xl font-medium tracking-tight transition-all duration-700 ease-in-out md:text-4xl"
                style={{
                  filter: isTransitioning ? "blur(4px)" : "blur(0px)",
                  transition: "filter 0.7s ease-in-out",
                }}
              >
                {testimonials[activeTestimonial].quote}
              </div>
              <div
                className="flex items-start justify-start gap-1 self-stretch transition-all duration-700 ease-in-out"
                style={{
                  filter: isTransitioning ? "blur(4px)" : "blur(0px)",
                  transition: "filter 0.7s ease-in-out",
                }}
              >
                <div className="flex flex-col justify-center self-stretch text-lg font-medium">
                  {testimonials[activeTestimonial].name} -
                </div>
                <div className="text-muted-foreground flex flex-col justify-center self-stretch text-lg font-medium">
                  {testimonials[activeTestimonial].company}
                </div>
              </div>
            </div>
          </div>

          <div className="flex items-start justify-start gap-3 pr-6">
            <Button
              size={"icon"}
              variant={"outline"}
              onClick={() =>
                handleNavigationClick(
                  (activeTestimonial - 1 + testimonials.length) %
                    testimonials.length
                )
              }
            >
              <ChevronLeft />
            </Button>
            <Button
              size={"icon"}
              variant={"outline"}
              onClick={() =>
                handleNavigationClick(
                  (activeTestimonial + 1) % testimonials.length
                )
              }
            >
              <ChevronRight />
            </Button>
          </div>
        </div>
      </div>

      <div className="relative h-12 self-stretch overflow-hidden border-b">
        <div className="absolute inset-0 h-full w-full overflow-hidden">
          <div className="relative h-full w-full">
            {Array.from({ length: 300 }).map((_, i) => (
              <div
                key={i}
                className="outline-primary/40 absolute h-4 w-full origin-top-left -rotate-45 outline-[0.5px] outline-offset-[-0.25px]"
                style={{
                  top: `${i * 16 - 120}px`,
                  left: "-100%",
                  width: "300%",
                }}
              ></div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}

import { Quote } from "@aliimam/icons"

export function TestimonialDemo() {
  const testimonials = [
    {
      avatar: "https://github.com/claude.png",
      name: "Aarav Mehta",
      title: "Creative Director",
      quote:
        "The design system completely transformed our workflow. Our team now ships consistent, polished interfaces and many...",
    },
    {
      avatar: "https://github.com/vercel.png",
      name: "Sofia Khan",
      title: "UI/UX Designer",
      quote:
        "From typography to spacing, every component feels thoughtfully crafted. It helped us build a seamless user experience...",
    },
    {
      avatar: "https://github.com/shadcn.png",
      name: "Daniel Lee",
      title: "Product Designer",
      quote:
        "The attention to visual hierarchy and interaction design is outstanding. It gave our product a modern, premium feel...",
    },
  ]

  return (
    <section className="relative flex min-h-svh w-full flex-col items-center justify-center overflow-hidden py-10">
      <div
        className="absolute inset-0 z-0"
        style={{
          background:
            "linear-gradient(to bottom, var(--background) 0%, var(--background) 45%, rgba(255,255,255,0) 100%), radial-gradient(ellipse at 50% 120%, var(--primary) 0%, var(--background) 75%)",
          opacity: 0.7,
        }}
      >
        <div
          style={{
            WebkitMaskImage:
              "linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%)",
            backgroundImage:
              "linear-gradient(var(--primary) 1px, transparent 1px), linear-gradient(90deg, var(--primary) 1px, transparent 1px)",
            backgroundSize: "50px 30px",
            bottom: "-10%",
            height: "70%",
            left: "50%",
            maskImage:
              "linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%)",
            pointerEvents: "none",
            position: "absolute",
            transform: "translateX(-50%) perspective(300px) rotateX(45deg)",
            width: "200%",
          }}
        />
      </div>
      <div className="relative z-10 container">
        <div className="max-w-xl sm:text-center md:mx-auto">
          <h3 className="text-3xl font-semibold tracking-tighter sm:text-4xl">
            Loved by designers worldwide
          </h3>
          <p className="text-muted-foreground mt-3">
            Built for creators who care about details. Craft beautiful,
            scalable, and consistent user experiences with confidence.
          </p>
        </div>
        <div className="mt-12">
          <ul className="grid items-center gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {testimonials.map((item, idx) => (
              <li
                key={idx}
                className="bg-background rounded-md border shadow-xl"
              >
                <div className="p-4">
                  <Quote className="fill-primary text-primary h-8 w-8" />
                </div>
                <figure>
                  <blockquote>
                    <p className="px-4 py-1 text-lg font-normal tracking-tighter">
                      {item.quote}
                    </p>
                  </blockquote>
                  <div className="bg-page-gradient mt-6 flex items-center gap-x-4 p-4">
                    <img
                      src={item.avatar}
                      alt={item.name}
                      className="h-16 w-16 rounded-md border-2"
                    />
                    <div>
                      <span className="block font-semibold">{item.name}</span>
                      <span className="text-muted-foreground mt-0.5 block text-sm">
                        {item.title}
                      </span>
                    </div>
                  </div>
                </figure>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  )
}

import Image from "next/image"

const testimonials = [
  [
    {
      content:
        "This design system gave our product a completely new identity. The polish and consistency instantly elevated our brand.",
      author: {
        name: "Aarav Mehta",
        role: "Creative Director",
        image: "https://github.com/claude.png",
      },
    },
    {
      content:
        "The components are thoughtfully crafted and incredibly flexible. It feels like it was built by designers who truly care.",
      author: {
        name: "Sofia Khan",
        role: "UI/UX Designer",
        image: "https://github.com/vercel.png",
      },
    },
    {
      content:
        "From spacing to typography, everything just works. We shipped our redesign faster than ever before.",
      author: {
        name: "Daniel Lee",
        role: "Product Designer",
        image: "https://github.com/shadcn.png",
      },
    },
    {
      content:
        "Our dashboard now feels modern and premium. Users immediately noticed the improved experience.",
      author: {
        name: "Maya Patel",
        role: "Head of Design",
        image: "https://github.com/octocat.png",
      },
    },
    {
      content:
        "The visual hierarchy and layout structure made complex data feel simple and approachable.",
      author: {
        name: "Ryan Brooks",
        role: "UX Strategist",
        image: "https://github.com/torvalds.png",
      },
    },
  ],
  [
    {
      content:
        "Collaboration between design and development has never been smoother. Everything feels systemized and scalable.",
      author: {
        name: "Isabella Cruz",
        role: "Design Lead",
        image: "https://github.com/mojombo.png",
      },
    },
    {
      content:
        "The micro-interactions add subtle delight without overwhelming the user experience.",
      author: {
        name: "Noah Kim",
        role: "Interaction Designer",
        image: "https://github.com/defunkt.png",
      },
    },
    {
      content:
        "We were able to maintain brand consistency across multiple products effortlessly.",
      author: {
        name: "Emma Wilson",
        role: "Brand Designer",
        image: "https://github.com/gaearon.png",
      },
    },
    {
      content:
        "It strikes the perfect balance between minimalism and functionality.",
      author: {
        name: "Liam Anderson",
        role: "Frontend Architect",
        image: "https://github.com/sindresorhus.png",
      },
    },
    {
      content:
        "The layout grids and spacing system helped us create clean, structured interfaces every time.",
      author: {
        name: "Olivia Martin",
        role: "Senior UI Designer",
        image: "https://github.com/yyx990803.png",
      },
    },
  ],
  [
    {
      content:
        "We reduced design inconsistencies by over 70% after adopting this system.",
      author: {
        name: "Ethan Wright",
        role: "Product Manager",
        image: "https://github.com/jashkenas.png",
      },
    },
    {
      content:
        "The dark mode implementation is flawless and visually stunning.",
      author: {
        name: "Ava Thompson",
        role: "Visual Designer",
        image: "https://github.com/dhh.png",
      },
    },
    {
      content:
        "It helped us turn complex workflows into intuitive, elegant user journeys.",
      author: {
        name: "James Rodriguez",
        role: "UX Researcher",
        image: "https://github.com/tj.png",
      },
    },
    {
      content: "The reusable components saved us weeks of development time.",
      author: {
        name: "Charlotte Nguyen",
        role: "Design Systems Engineer",
        image: "https://github.com/rauchg.png",
      },
    },
    {
      content:
        "Clean, scalable, and beautifully structured — exactly what modern products need.",
      author: {
        name: "Benjamin Scott",
        role: "Founder & Designer",
        image: "https://github.com/bradtraversy.png",
      },
    },
  ],
]

export function TestimonialDemo() {
  return (
    <section className="relative py-10">
      <div
        className="absolute inset-0 z-0"
        style={{
          WebkitMaskImage:
            "radial-gradient(ellipse 90% 90% at 50% 50%, black 50%, transparent 80%)",
          backgroundImage:
            "radial-gradient(circle at 0.5px 0.5px, var(--primary) 0.5px, transparent 0)",
          backgroundSize: "8px 8px",
          maskImage:
            "radial-gradient(ellipse 90% 90% at 50% 50%, black 50%, transparent 80%)",
          opacity: 0.2,
        }}
      />
      <div className="relative container">
        <div className="mx-auto max-w-2xl md:text-center">
          <h2 className="text-3xl tracking-tighter sm:text-6xl">
            Loved by businesses worldwide.
          </h2>
          <p className="text-muted-foreground mt-4 text-lg tracking-tight">
            Our software is so simple that people can’t help but fall in love
            with it. Simplicity is easy when you just skip tons of
            mission-critical features.
          </p>
        </div>
        <ul
          role="list"
          className="mx-auto mt-6 grid max-w-2xl grid-cols-1 gap-6 sm:gap-8 lg:mt-20 lg:max-w-none lg:grid-cols-3"
        >
          {testimonials.map((column, columnIndex) => (
            <li key={columnIndex}>
              <ul role="list" className="flex flex-col gap-y-6 sm:gap-y-8">
                {column.map((testimonial, testimonialIndex) => (
                  <li key={testimonialIndex}>
                    <figure className="bg-background relative transform-gpu rounded-md border p-6 shadow-xl [box-shadow:0_-20px_80px_-20px_#8686f01f_inset]">
                      <blockquote className="relative">
                        <p className="text-lg tracking-tight">
                          {testimonial.content}
                        </p>
                      </blockquote>
                      <figcaption className="relative mt-6 flex items-center justify-between border-t pt-6">
                        <div>
                          <div className="font-display text-base">
                            {testimonial.author.name}
                          </div>
                          <div className="text-muted-foreground mt-1 text-sm">
                            {testimonial.author.role}
                          </div>
                        </div>
                        <div className="overflow-hidden rounded-md">
                          <Image
                            className="h-14 w-14 object-cover"
                            src={testimonial.author.image}
                            alt=""
                            width={56}
                            height={56}
                          />
                        </div>
                      </figcaption>
                    </figure>
                  </li>
                ))}
              </ul>
            </li>
          ))}
        </ul>
      </div>
    </section>
  )
}

import { Vercel } from "@aliimam/logos"

import { Marquee } from "@/registry/aliimam/components/marquee"
import { Separator } from "@/components/ui/separator"

const testimonials = [
  {
    name: "Alena Zhukova",
    profession: "Software Engineer",
    description:
      "This design system helped us build modern, scalable, and consistent user interfaces with ease.",
  },
  {
    name: "Aiko",
    profession: "Design Engineer",
    description:
      "This design system helped us build modern, scalable, and consistent user interfaces with ease.",
  },
  {
    name: "Alena Zhukova",
    profession: "Software Engineer",
    description:
      "This design system helped us build modern, scalable, and consistent user interfaces with ease.",
  },
  {
    name: "Lisa Kemp",
    profession: "Frontend Developer",
    description:
      "This design system helped us build modern, scalable, and consistent user interfaces with ease.",
  },
  {
    name: "Saud",
    profession: "Game Developer",
    description:
      "This design system helped us build modern, scalable, and consistent user interfaces with ease.",
  },
  {
    name: "Paula Smith",
    profession: "UX Designer",
    description:
      "This design system helped us build modern, scalable, and consistent user interfaces with ease.",
  },
]

const FUITestimonialWithSlide = () => {
  return (
    <div className="relative flex min-h-svh w-full flex-col items-center justify-center overflow-hidden py-10">
      <div className="mx-auto w-full">
        <div className="mb-10">
          <p className="mx-auto mt-8 max-w-2xl text-center text-5xl tracking-tight">
            What Our Clients Say
          </p>
          <p className="text-muted-foreground mx-auto mt-4 max-w-xl text-center text-lg tracking-tight">
            Trusted by designers and developers to build modern, scalable, and
            beautifully crafted user experiences.
          </p>
        </div>

        <div className="relative flex shrink-0 justify-around gap-5 overflow-hidden">
          <Marquee pauseOnHover fade={true} gap={6} className="w-full">
            {testimonials.map((testimonial, indx) => {
              return (
                <div
                  key={indx}
                  className="bg-background flex h-full w-120 flex-col space-x-4 rounded-md border last:mr-2"
                >
                  <p className="text-text-primary dark:text-dark-text-primary px-5 py-5 text-xl font-extralight tracking-tighter text-pretty sm:text-xl md:text-2xl">
                    &quot;{testimonial.description}.&quot;
                  </p>
                  <div className="flex w-full gap-1 overflow-hidden border-t-[1.2px]">
                    <div className="flex w-3/4 items-center gap-3 px-4 py-3">
                      <img
                        className="h-16 w-16 rounded-md"
                        src="/ali.jpg"
                        alt="ali"
                      />
                      <div className="flex flex-1 flex-col items-start justify-start gap-0">
                        <h5 className="text-base font-medium md:text-lg">
                          {testimonial.name}
                        </h5>
                        <p className="text-text-tertiary dark:text-dark-text-tertiary -mt-1 text-sm">
                          {testimonial.profession}
                        </p>
                      </div>
                    </div>
                    <Separator orientation="vertical" />
                    <div className="self-center pl-10">
                      <Vercel />
                    </div>
                  </div>
                </div>
              )
            })}
          </Marquee>
        </div>
      </div>
    </div>
  )
}
export FUITestimonialWithSlide

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar"

export function TestimonialDemo() {
  return (
    <section className="relative flex min-h-svh w-full flex-col items-center justify-center overflow-hidden py-10">
      <div className="mx-auto max-w-5xl">
        <div className="mx-auto max-w-2xl text-center">
          <blockquote>
            <p className="text-lg font-medium sm:text-xl md:text-3xl">
              Adopting this design system transformed the way we build products.
              It brings clarity, consistency, and a premium feel to every
              interface we ship.
            </p>

            <div className="mt-12 flex items-center justify-center gap-6">
              <Avatar className="size-12">
                <AvatarImage
                  src="/ali.jpg"
                  alt="Ali Imam"
                  height="400"
                  width="400"
                  loading="lazy"
                />
                <AvatarFallback>AI</AvatarFallback>
              </Avatar>

              <div className="space-y-1 border-l pl-6">
                <cite className="font-medium">Ali Imam</cite>
                <span className="text-muted-foreground block text-sm">
                  Creative Design Engineer
                </span>
              </div>
            </div>
          </blockquote>
        </div>
      </div>
    </section>
  )
}