"use client";
import { cn } from "@/lib/utils";
import { ArrowDown, ArrowUp } from "lucide-react";
import { useState } from "react";
import AnimatedBackground from "@/components/ui/animated-gradientbg";

interface Testimonial {
  id: number;
  logo: string;
  companyName: string;
  quote: string;
  author: string;
  role: string;
  rounded?: boolean;
  explained?: boolean;
}
interface StatItem {
  percentage: string;
  label: string;
  isIncrease: boolean;
}

const stats: StatItem[] = [
  {
    percentage: "80%",
    label: "manual payment tasks",
    isIncrease: false,
  },
  {
    percentage: "30%",
    label: "international fees",
    isIncrease: false,
  },
  {
    percentage: "25%",
    label: "payment reconciliation",
    isIncrease: false,
  },
  {
    percentage: "$100K",
    label: "saved per year",
    isIncrease: true,
  },
];
const testimonials: Testimonial[] = [
  {
    id: 1,
    logo: `${process.env.NEXT_PUBLIC_ANIMATION_URL}/customer/doordash.png`,
    companyName: "Doordash",
    quote:
      "After testing 5+ different AP solutions, Routable was the clear winner. There's a long list of reasons why: better QuickBooks Online sync, user experience, vendor onboarding experience, quality.",
    author: "Matt Tait",
    role: "CEO @ Doordash",
  },
  {
    id: 2,
    logo: `${process.env.NEXT_PUBLIC_ANIMATION_URL}/customer/eventbrite.png`,
    companyName: "eventbrite",
    quote:
      "Routable's API has saved our team countless hours by automating thousands of outgoing payments every year.",
    author: "David McKay",
    rounded: true,
    role: "Co-founder and CEO",
  },
  {
    id: 3,
    logo: `${process.env.NEXT_PUBLIC_ANIMATION_URL}/customer/netflix.png`,
    companyName: "netflix",
    quote: "Hotplate efficiently manages their AP volume with Routable",
    author: "John Smith",
    role: "CFO @ Netflix",
  },
  {
    id: 4,
    logo: `${process.env.NEXT_PUBLIC_ANIMATION_URL}/customer/doordash.png`,
    companyName: "Doordash",
    quote:
      "After testing 5+ different AP solutions, Routable was the clear winner. There's a long list of reasons why: better QuickBooks Online sync, user experience, vendor onboarding experience, quality and timeliness of customer support, their product roadmap and velocity – it's just the best solution we've found.",
    author: "Matt Tait",
    role: "CEO @ Doordash",
    explained: true,
  },
  {
    id: 6,
    logo: `${process.env.NEXT_PUBLIC_ANIMATION_URL}/customer/zapier.png`,
    companyName: "Zapier",
    quote: "Hotplate efficiently manages their AP volume with Routable",
    author: "John Smith",
    role: "CEO @ Zapier",
  },
];

const TestimonialSection = () => {
  const [activeTestimonial, setActiveTestimonial] = useState<number | null>(
    null,
  );

  return (
    <div className="w-full py-16 bg-black min-h-screen">
      <div className="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
        <h1 className="sm:text-4xl text-3xl font-semibold text-gray-200 mb-8 text-center md:w-3/5 md:px-0 px-2 mx-auto pb-4">
          The world’s most innovative finance teams{" "}
          <span className="italic">scale</span> with Routable
        </h1>
        <div className="sm:grid sm:grid-cols-2 grid-cols-1 md:grid-cols-3 gap-8 sm:space-y-0 space-y-3">
          {testimonials.map((testimonial) => (
            <div
              key={testimonial.id}
              className={cn(
                "relative group",
                testimonial?.explained && " md:row-start-auto row-start-1 col-span-2",
              )}
              onMouseEnter={() => setActiveTestimonial(testimonial.id)}
              onMouseLeave={() => setActiveTestimonial(null)}
            >
              <div
                className={cn(
                  "w-full h-72 bg-neutral-950 border border-neutral-900 rounded-lg p-8 shadow-sm hover:shadow-md transition-all duration-300 ease-in-out",
                  testimonial?.rounded && "rounded-full",
                  testimonial?.explained &&
                    "h-full bg-gradient-to-t from-neutral-900 to-transparent ",
                )}
              >
                {testimonial?.explained && (
                  <>
                    <div className={cn("h-full flex flex-col justify-between")}>
                      <p className="text-gray-200 md:text-base text-sm leading-relaxed">
                        "{testimonial.quote}"
                      </p>
                      <div className="mt-4">
                        <div>
                          <p className="font-medium text-gray-400">
                            {testimonial.author}
                          </p>
                          <p className="text-sm text-gray-200">
                            {testimonial.role}
                          </p>
                        </div>
                      </div>
                    </div>
                  </>
                )}
                {/* Testimonial Content - Visible on Hover */}
                {!testimonial?.explained && (
                  <>
                    {/* Logo Container */}
                    <div className="h-full flex items-center justify-center">
                      <img
                        src={testimonial.logo}
                        alt={testimonial.companyName}
                        className="max-h-16 object-contain"
                      />
                    </div>
                    <div
                      className={cn(
                        "absolute inset-0 bg-neutral-800/95 p-6 rounded-lg transform transition-all duration-300 ease-in-out",
                        activeTestimonial === testimonial.id
                          ? "opacity-100 translate-y-0"
                          : "opacity-0 translate-y-4 pointer-events-none",
                        testimonial?.rounded &&
                          "rounded-full overflow-hidden grid place-content-center p-10",
                      )}
                    >
                      <AnimatedBackground />
                      <div className="h-full flex flex-col justify-between">
                        <p className="text-gray-200 md:text-sm text-xs leading-relaxed">
                          "{testimonial.quote}"
                        </p>
                        <div className="mt-4">
                          <p className="font-medium text-gray-200">
                            {testimonial.author}
                          </p>
                          <p className="text-sm text-gray-200">
                            {testimonial.role}
                          </p>
                        </div>
                      </div>
                    </div>
                  </>
                )}
              </div>
            </div>
          ))}
        </div>
        <div className="sm:flex  grid grid-cols-2 gap-8 bg-neutral-950 mt-8 px-8 py-6 border rounded-md border-neutral-900">
          {stats.map((stat, index) => (
            <div key={stat?.label} className="flex-1 flex gap-4 md:pl-10 px-2 relative">
              {index !== 0 && (
                <div className="w-0.5 h-9 border border-dashed absolute left-0" />
              )}
              <div>
                <div className="flex items-center gap-2 mb-2 relative">
                  {stat.isIncrease ? (
                    <ArrowUp className="w-6 h-6 text-green-500" />
                  ) : (
                    <ArrowDown className="w-6 h-6 text-gray-200" />
                  )}
                  <span className="md:text-4xl text-2xl font-semibold text-gray-300">
                    {stat.percentage}
                  </span>
                </div>
                <p className="text-gray-400 md:text-sm text-[0.7rem] capitalize">{stat.label}</p>
              </div>
              {/* Vertical divider, if not last */}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default TestimonialSection;
testimonials6
