"use client";

import { Plus, Quote, X } from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
import Image from "next/image";
import { useState } from "react";
import AnimatedBackground from "@/components/ui/animated-gradientbg";

// Sample data for the testimonials grid
const testimonials = [
  {
    id: "brightwave",
    type: "person",
    name: "BrightWave",
    personName: "Sarah Chen",
    position: "VP of Marketing at BrightWave",
    bgColor: "bg-orange-300",
    logo: "/customer/doordash.png",
    image:
      "https://images.unsplash.com/photo-1633332755192-727a05c4013d?q=80&w=2080&auto=format&fit=crop",
    hasModal: true,
    quote:
      "TechFlow has revolutionized our development pipeline. Their platform has enabled our team to ship features twice as fast while maintaining code quality. The automated testing suite alone has saved us countless hours of manual QA work.",
    stats: [
      { label: "DEPLOYMENT TIME", value: "-65%" },
      { label: "TEAM PRODUCTIVITY", value: "+87%" },
    ],
  },
  {
    id: "codeverse",
    type: "logo",
    name: "Codeverse",
    bgColor: "bg-white",
    image: "/customer/netflix.png",
    hasModal: false,
  },
  {
    id: "emily",
    type: "quote",
    name: "Emily Rodriguez",
    personName: "Emily Rodriguez",
    position: "CTO at Quantum Solutions",
    quote:
      "Implementing TechFlow's infrastructure automation has been transformative for our DevOps practices. We've reduced our cloud costs by 40% while improving system reliability.",
    fullQuote:
      "Implementing TechFlow's infrastructure automation has been transformative for our DevOps practices. We've reduced our cloud costs by 40% while improving system reliability. Their platform gives us complete visibility into our infrastructure, making it easy to identify and resolve bottlenecks. The support team has been exceptional, helping us optimize our architecture for both performance and cost.",
    bgColor: "bg-yellow-200",
    hasModal: true,
    image:
      "https://images.unsplash.com/photo-1563237023-b1e970526dcb?q=80&w=1965&auto=format&fit=crop",
    logo: "/customer/eventbrite.png",
    stats: [
      { label: "CLOUD COSTS", value: "-40%" },
      { label: "SYSTEM UPTIME", value: "99.99%" },
    ],
  },
  {
    id: "nexustech",
    type: "logo",
    name: "NexusTech",
    bgColor: "bg-white",
    image: "/customer/alibaba.png",
    hasModal: false,
  },
  {
    id: "marcus",
    type: "person",
    name: "Elevate AI",
    personName: "Marcus Johnson",
    position: "Product Lead at Elevate AI",
    bgColor: "bg-cyan-300",
    image:
      "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=2080&auto=format&fit=crop",
    logo: "/customer/eventbrite.png",
    hasModal: true,
    quote:
      "TechFlow's API integration platform saved us months of development time. We were able to connect our AI models to 15 different data sources in just weeks, accelerating our time to market significantly.",
    stats: [
      { label: "INTEGRATIONS", value: "15+" },
      { label: "TIME SAVED", value: "4 months" },
    ],
  },
  {
    id: "pulsedata",
    type: "logo",
    name: "PulseData",
    bgColor: "bg-white",
    image: "/customer/tesla.png",
    hasModal: false,
  },

  {
    id: "jason",
    type: "quote",
    name: "Jason Wei",
    personName: "Jason Wei",
    position: "Founder & CEO at DataSphere",
    quote:
      "TechFlow's analytics platform has transformed how we understand our customers. The insights we've gained have directly influenced our product roadmap and go-to-market strategy.",
    fullQuote:
      "TechFlow's analytics platform has transformed how we understand our customers. The insights we've gained have directly influenced our product roadmap and go-to-market strategy. Their machine learning models identified user behavior patterns we had completely missed, leading to a complete redesign of our onboarding flow that increased conversion by 35%. The platform is intuitive enough for our non-technical team members while providing the depth our data scientists need.",
    bgColor: "bg-purple-400",
    hasModal: true,
    image:
      "https://images.unsplash.com/photo-1504257432389-52343af06ae3?q=80&w=1974&auto=format&fit=crop",
    logo: "/customer/eventbrite.png",
    stats: [
      { label: "CONVERSION LIFT", value: "+35%" },
      { label: "CUSTOMER INSIGHTS", value: "10x deeper" },
    ],
  },

  {
    id: "fusion",
    type: "logo",
    name: "Fusion",
    bgColor: "bg-white",
    image: "/customer/amazon.png",
    hasModal: false,
  },
  {
    id: "priya",
    type: "person",
    name: "Wavelength",
    personName: "Priya Sharma",
    position: "Head of Innovation at Wavelength",
    bgColor: "bg-gray-800 text-white",
    image:
      "https://images.unsplash.com/photo-1512485694743-9c9538b4e6e0?q=80&w=1974&auto=format&fit=crop",
    logo: "/customer/eventbrite.png",
    hasModal: true,
    quote:
      "TechFlow's developer tools have become indispensable for our engineering team. The code quality has improved dramatically, and our sprint velocity has nearly doubled since implementation.",
    stats: [
      { label: "CODE QUALITY", value: "+78%" },
      { label: "SPRINT VELOCITY", value: "1.9x" },
    ],
  },
];

export default function TestimonialGrid() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [activeTestimonial, setActiveTestimonial] = useState<any>(null);

  const handleOpenModal = (testimonial: any) => {
    setActiveTestimonial(testimonial);
    setIsModalOpen(true);
  };

  return (
    <div className="container mx-auto px-4 py-12">
      <h1 className="text-4xl text-center py-2 pb-10">
        Don't just take our word for it.
      </h1>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {testimonials.map((item) => (
          <div
            key={item.id}
            className={`rounded-xl overflow-hidden relative h-80 ${item.bgColor} ${
              item.type === "quote" ? "md:col-span-2 lg:col-span-1" : ""
            }`}
          >
            {item.type === "person" && (
              <div className="relative h-full  w-full">
                <Image
                  src={item.image || "/placeholder.svg"}
                  alt={item.name}
                  fill
                  className="object-cover"
                />
                <div className="absolute bottom-4 w-[90%] left-[5%] right-[5%]  text-white font-bold text-xl flex justify-between">
                  <p>{item.name}</p>
                  {item.hasModal && (
                    <button
                      onClick={() => handleOpenModal(item)}
                      className=" bg-black rounded-lg p-1 hover:bg-gray-800 transition-colors"
                      aria-label="Open testimonial"
                    >
                      <Plus className="h-6 w-6" />
                    </button>
                  )}
                </div>
              </div>
            )}

            {item.type === "logo" && (
              <div className="h-full w-full flex items-center justify-center p-8 relative group border border-gray-100 overflow-hidden">
                <AnimatedBackground className="-top-10 scale-125" />
                <Image
                  src={item.image || "/placeholder.svg"}
                  alt={item.name}
                  width={150}
                  height={150}
                  className="object-contain"
                />
              </div>
            )}

            {item.type === "quote" && (
              <div className="p-6 h-full flex flex-col">
                <p className="text-lg font-medium mb-4">“{item.quote}”</p>
                <div className="mt-auto">
                  <p className="font-bold">{item.name}</p>
                  <p className="text-sm">{item.position}</p>
                </div>
                {item.hasModal && (
                  <button
                    onClick={() => handleOpenModal(item)}
                    className="absolute right-4 bottom-4 bg-white rounded-lg p-1 hover:bg-gray-100 transition-colors"
                    aria-label="Open testimonial"
                  >
                    <Plus className="h-6 w-6" />
                  </button>
                )}
              </div>
            )}
          </div>
        ))}
      </div>

      <AnimatePresence>
        {isModalOpen && activeTestimonial && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            key="overlay"
            className="bg-black/40 backdrop-blur-lg fixed inset-0 z-50 top-0 left-0 bottom-0 right-0 w-full h-full flex items-center justify-center p-4"
            onClick={() => {
              setIsModalOpen(false);
            }}
          >
            <motion.div
              layoutId="testimonial-dialog"
              onClick={(e) => e.stopPropagation()}
              className="w-full max-w-4xl lg:h-auto h-[70vh] overflow-auto mx-auto rounded-2xl relative  shadow-xl flex flex-col md:flex-row"
            >
              {/* Left side - Image */}
              <div className="relative w-full md:w-2/5 bg-gray-100">
                <div className="relative h-64 md:h-full w-full">
                  <Image
                    src={activeTestimonial.image || "/placeholder.svg"}
                    alt={activeTestimonial.personName || activeTestimonial.name}
                    fill
                    className="object-cover"
                  />
                  <div className="absolute bottom-4 left-4 bg-black/90 p-2 rounded-lg">
                    <Image
                      src={
                        `${process.env.NEXT_PUBLIC_ANIMATION_URL}${activeTestimonial.logo}` ||
                        "/placeholder.svg"
                      }
                      alt={activeTestimonial.name}
                      width={120}
                      height={50}
                      className="object-contain"
                    />
                  </div>
                </div>
              </div>

              {/* Right side - Content */}
              <div
                className={`${activeTestimonial.bgColor} p-8 w-full md:w-3/5 flex flex-col`}
              >
                <div className="text-4xl font-serif mb-4 ">
                  <Quote className="fill-black rotate-180" />
                </div>
                <p className="text-lg font-medium mb-6">
                  {activeTestimonial.fullQuote || activeTestimonial.quote}
                </p>

                <div className="mt-auto">
                  <p className="font-bold text-xl">
                    {activeTestimonial.personName}
                  </p>
                  <p className="text-sm mb-6">{activeTestimonial.position}</p>

                  {activeTestimonial.stats && (
                    <div className="flex flex-wrap gap-8 mt-4">
                      {activeTestimonial.stats.map(
                        (stat: any, index: number) => (
                          <div key={index} className="flex flex-col">
                            <span className="text-xs font-semibold opacity-75">
                              {stat.label}
                            </span>
                            <span className="text-2xl font-bold">
                              {stat.value}
                            </span>
                          </div>
                        ),
                      )}
                    </div>
                  )}
                </div>

                <button
                  onClick={() => setIsModalOpen(false)}
                  className="absolute right-4 top-4 p-2 text-black bg-white/80 hover:bg-white rounded-full transition-colors"
                  type="button"
                  aria-label="Close dialog"
                >
                  <X size={20} />
                </button>
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}
testimonials10
