import { MoveRight } from "lucide-react";
import AnimatedBackground from "@/components/ui/animated-gradientbg";

export default function TestimonialSection() {
  return (
    <section className="px-4 py-16 sm:px-6 lg:px-8 bg-black text-white relative">
      <h1 className="text-4xl font-semibold text-gray-200 mb-8 text-center  mx-auto pb-4">
        The world’s most innovative Tech <br /> teams{" "}
        <span className="italic">scale</span> with Routable
      </h1>
      <div className="max-w-screen-xl mx-auto xl:px-0 px-4">
        <div className="md:grid grid-cols-1 md:grid-cols-12 border border-neutral-900">
          {/* 1st */}
          <div className="col-span-6 bg-neutral-950 p-8">
            <p className="text-neutral-300 mb-8 leading-[150%]">
              Thanks to DevDeck, we’re now shipping updates at lightning speed.{" "}
              <span className="bg-yellow-500/20 border px-1 border-yellow-500">
                Our workflow has never been smoother
              </span>
              , and we’re able to focus more on innovation and less on
              maintenance.
            </p>
            <div className="border-t border-gray-900 pt-6 flex justify-between items-center">
              <div className="flex items-center gap-4">
                <div className="h-8 w-8 rounded-full bg-emerald-500 flex items-center justify-center">
                  <span className="sr-only">Lena M.</span>
                </div>
                <div>
                  <p className="font-medium">Lena M.</p>
                  <p className="text-gray-300">Head of Product Strategy</p>
                </div>
              </div>
              <div className="w-fit px-2 bg-neutral-900 rounded-full flex items-center justify-center group">
                <img
                  src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/customer/eventbrite.png`}
                  alt="logos"
                  className="w-24 grayscale group-hover:grayscale-0"
                />
                <MoveRight className="shrink-0 text-gray-400" />
              </div>
            </div>
          </div>
          {/* 2nd */}
          <div className="col-span-6 bg-neutral-900 p-8 flex flex-col justify-between">
            <p className="text-neutral-300 mb-8">
              The modular layout system gave us unmatched freedom in designing
              custom pages —{" "}
              <span className="italic text-white">
                no templates, no limits.
              </span>
            </p>
            <div className="border-t border-dashed border-neutral-950 pt-6 flex justify-between items-center">
              <div className="flex items-center gap-4">
                <div className="h-8 w-8 rounded-full bg-orange-500 flex items-center justify-center">
                  <span className="sr-only">Jamir O.</span>
                </div>
                <div>
                  <p className="font-medium">Jamir O.</p>
                  <p className="text-gray-300">Creative Developer</p>
                </div>
              </div>
              <div className="w-fit px-2 bg-neutral-950 rounded-full flex items-center justify-center group">
                <img
                  src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/customer/eventbrite.png`}
                  alt="logos"
                  className="w-24 grayscale group-hover:grayscale-0"
                />
                <MoveRight className="shrink-0 text-gray-400" />
              </div>
            </div>
          </div>
          {/* 3rd */}
          <div className="col-span-6 bg-blue-600 p-8 relative flex flex-col justify-between">
            <img
              src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/logos/Logo-1.svg`}
              alt="logo"
              className="w-44 -translate-x-6"
              width={200}
              height={200}
            />
            <div className="space-y-4 py-2 pb-4">
              <h1 className="text-2xl space-y-2">
                We never imagined building sites so easy
                <span className="bg-white/40 border border-white px-0.5 block w-fit">
                  Until Ui-Layouts changed everything.
                </span>
              </h1>
            </div>
            <div className="border-t mt-auto border-blue-500 pt-6 flex justify-between items-center">
              <div>
                <p className="font-medium">Isabelle Thorne</p>
                <p className="text-gray-300">Co-Founder & Tech Lead</p>
              </div>
              <div className="h-12 w-12 rounded-full overflow-hidden bg-gray-200 relative">
                <img
                  src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/people/aam3.jpg`}
                  alt="Isabelle Thorne"
                  width={48}
                  height={48}
                  className="object-cover"
                />
              </div>
            </div>
          </div>
          {/* 4th */}
          <div className="col-span-3 bg-neutral-950 p-8 relative grid place-content-center group overflow-hidden transition-all">
            <div className="absolute bottom-0 left-0 w-full h-0.5 border border-dashed border-neutral-900"></div>
            <img
              alt="netflix"
              src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/customer/netflix.png`}
              className="scale-100 group-hover:scale-90 transition-all duration-300"
            />
            <div className="absolute top-[150%] transition-all duration-300 ease-in group-hover:top-0 left-0 flex flex-col justify-between p-8 h-full bg-neutral-950/60">
              <AnimatedBackground />
              <p className="text-neutral-300 mb-8">
                We rolled out new campaign pages within minutes — the intuitive
                tools saved us hours of manual work.
              </p>
              <div className="border-t border-red-700 pt-6 flex justify-between items-center">
                <div className="flex items-center gap-4">
                  <div className="h-10 w-10 rounded-full bg-emerald-500 flex items-center justify-center">
                    <span className="sr-only">Nico R.</span>
                    <img
                      src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/people/aam3.jpg`}
                      alt="Nico R"
                      className="w-full h-full rounded-full object-cover"
                    />
                  </div>
                  <div>
                    <p className="font-medium">Nico R.</p>
                    <p className="text-gray-600">Growth Marketer</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          {/* 5th */}
          <div className="col-span-3 bg-neutral-900 p-8 flex flex-col justify-between relative">
            <div className="absolute top-0 left-0 w-full h-0.5 border border-dashed border-neutral-950"></div>
            <p className="text-neutral-300 mb-8">
              It’s a breeze to scale and manage content across multiple teams —
              no technical blockers anymore.
            </p>
            <div className="border-t border-neutral-950 pt-6 flex justify-between items-center">
              <div className="flex items-center gap-4">
                <div className="h-10 w-10 rounded-full bg-emerald-500 flex items-center justify-center">
                  <span className="sr-only">Rina A.</span>
                  <img
                    src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/people/aam4.jpg`}
                    alt="Rina A."
                    className="w-full h-full rounded-full object-cover"
                  />
                </div>
                <div>
                  <p className="font-medium">Rina A.</p>
                  <p className="text-gray-600">Operations Director</p>
                </div>
              </div>
            </div>
          </div>
          {/* 6th */}
          <div className="col-span-3 bg-blue-600 p-8 flex flex-col justify-between relative">
            <div className="absolute top-0 w-full left-0 h-0.5 border border-dashed border-neutral-950"></div>
            <p className="text-neutral-300 mb-8">
              Truly the most flexible CMS we’ve ever integrated — perfect for
              creative teams and devs alike.
            </p>
            <div className="border-t border-blue-500 pt-6 flex justify-between items-center">
              <div className="flex items-center gap-4">
                <div className="h-10 w-10 rounded-full bg-emerald-500 flex items-center justify-center">
                  <span className="sr-only">Devon L.</span>
                  <img
                    src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/people/aam1.png`}
                    alt="Devon L."
                    className="w-full h-full rounded-full object-cover"
                  />
                </div>
                <div>
                  <p className="font-medium">Devon L.</p>
                  <p className="text-gray-300">UX Designer</p>
                </div>
              </div>
            </div>
          </div>
          {/* 7th */}
          <div className="col-span-6 bg-neutral-950 p-8 flex flex-col justify-between">
            <p className="text-neutral-300 mb-8">
              Truly the most flexible CMS we’ve ever integrated — perfect for
              creative teams and devs alike.
            </p>
            <div className="border-t border-gray-900 pt-6 flex justify-between items-center">
              <div className="flex items-center gap-4">
                <div className="h-10 w-10 rounded-full bg-emerald-500 flex items-center justify-center">
                  <span className="sr-only">Devon L.</span>
                  <img
                    src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/people/aam1.png`}
                    alt="Devon L."
                    className="w-full h-full rounded-full object-cover"
                  />
                </div>
                <div>
                  <p className="font-medium">Devon L.</p>
                  <p className="text-gray-600">UX Designer</p>
                </div>
              </div>
              <div className="w-fit px-2 bg-neutral-900 rounded-full flex items-center justify-center group">
                <img
                  src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/customer/eventbrite.png`}
                  alt="logos"
                  className="w-24 grayscale group-hover:grayscale-0"
                />
                <MoveRight className="shrink-0 text-gray-400" />
              </div>
            </div>
          </div>
          {/* 8th */}
          <div className="col-span-3 md:bg-neutral-950 bg-neutral-900 p-8 flex flex-col justify-between relative">
            <div className="absolute top-0 left-0 md:w-0.5 w-full md:h-full h-0.5 border border-dashed border-neutral-900"></div>
            <p className="text-neutral-300 mb-8">
              Truly the most flexible CMS we’ve ever integrated — perfect for
              creative teams and devs alike.
            </p>
            <div className="border-t border-gray-900 pt-6 flex justify-between items-center">
              <div className="flex items-center gap-4">
                <div className="h-10 w-10 rounded-full bg-emerald-500 flex items-center justify-center">
                  <span className="sr-only">Devon L.</span>
                  <img
                    src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/people/aam1.png`}
                    alt="Devon L."
                    className="w-full h-full rounded-full object-cover"
                  />
                </div>
                <div>
                  <p className="font-medium">Devon L.</p>
                  <p className="text-gray-600">UX Designer</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
testimonials7
