import ShimmerButton from "@/components/ui/shimmer-button";
import * as HoverCard from "@radix-ui/react-hover-card";
import Image from "next/image";
import Link from "next/link";
export default function ReferencesSection() {
  // Sample data for profile images - in production this would come from a database or CMS
  const profiles = Array(16)
    .fill(null)
    .map((_, i) => ({
      id: i,
      src: `https://avatar.vercel.sh/${i + "4"}`,
      alt: `Profile ${i + 1}`,
      avatar: `https://avatar.vercel.sh/${i + "4"}`,
      name: `User ${i + 1}`,
      username: `user${i + 1}`,
      bio: `This is the bio for User ${i + 1}. Building cool things with UI.`,
      followingCount: Math.floor(Math.random() * 100),
      followerCount: Math.floor(Math.random() * 10000),
    }));

  return (
    <div className="max-w-6xl mx-auto px-4 py-16 space-y-20">
      {/* References Grid */}
      <section className="space-y-8">
        <h2 className="text-4xl font-medium text-center">
          References of colleagues
          <br />
          and clients
        </h2>
        <div className="grid grid-cols-4 md:grid-cols-8 gap-4 max-w-3xl mx-auto">
          {profiles.map((profile) => (
            <HoverCard.Root key={profile.id} openDelay={100} closeDelay={100}>
              <HoverCard.Trigger asChild>
                <div className="aspect-square">
                  <Image
                    src={profile.src || "/placeholder.svg"}
                    alt={profile.alt}
                    width={80}
                    height={80}
                    className="rounded-full object-cover w-full h-full"
                  />
                </div>
              </HoverCard.Trigger>

              <HoverCard.Portal>
                <HoverCard.Content
                  className="w-[300px] rounded-md bg-neutral-50 border border-neutral-200 p-5 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=top]:animate-slideDownAndFade data-[state=open]:transition-all"
                  sideOffset={5}
                >
                  <div className="flex flex-col gap-[7px]">
                    <img
                      className="block size-[60px] rounded-full"
                      src={profile.avatar || "/placeholder.svg"}
                      alt={profile.name || "User"}
                    />
                    <div className="flex flex-col gap-[15px]">
                      <div>
                        <div className="m-0 text-[15px] font-medium text-mauve12">
                          {profile.name}
                        </div>
                        <div className="m-0 text-[15px] text-mauve10">
                          @{profile.username}
                        </div>
                      </div>
                      <div className="m-0 text-[15px] text-mauve12">
                        {profile.bio || "No bio available."}
                      </div>
                      <div className="flex gap-[15px]">
                        <div className="flex gap-[5px]">
                          <div className="m-0 text-[15px] font-medium text-mauve12">
                            {profile.followingCount || 0}
                          </div>
                          <div className="m-0 text-[15px] text-mauve10">
                            Following
                          </div>
                        </div>
                        <div className="flex gap-[5px]">
                          <div className="m-0 text-[15px] font-medium text-mauve12">
                            {profile.followerCount || 0}
                          </div>
                          <div className="m-0 text-[15px] text-mauve10">
                            Followers
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <HoverCard.Arrow className="fill-neutral-200" />
                </HoverCard.Content>
              </HoverCard.Portal>
            </HoverCard.Root>
          ))}
        </div>
      </section>

      {/* Testimonial */}
      <section className="max-w-3xl mx-auto text-center space-y-8">
        <img
          src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/customer/tesla.png`}
          alt="Company seal"
          width={60}
          height={60}
          className="mx-auto"
        />
        <blockquote className="text-2xl md:text-3xl leading-relaxed">
          "Completely changed the UX of our website, resulting in a significant
          rise of traffic and subsequently business contracts."
        </blockquote>
        <div className="space-y-4">
          <p className="text-gray-600">
            Mike Lentonin, Chief Operations Officer
          </p>
          <img
            src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/people/aam1.png`}
            alt="Mike Lentonin"
            className="rounded-full w-16 h-16 object-cover  mx-auto"
          />
        </div>
      </section>

      {/* Contact Section */}
      <section className="text-center space-y-6">
        <h2 className="text-3xl md:text-4xl font-medium">
          Contact me,
          <br />
          Let's get in touch
        </h2>
        <ShimmerButton className="rounded-full px-8 w-fit mx-auto">
          Contact
        </ShimmerButton>
      </section>

      {/* Navigation */}
      <nav className="border-t pt-8">
        <ul className="flex flex-wrap justify-center gap-8 text-gray-600">
          <li>
            <Link href="#case-studies">Case Studies</Link>
          </li>
          <li>
            <Link href="#clients">Clients</Link>
          </li>
          <li>
            <Link href="#about">About me</Link>
          </li>
          <li>
            <Link href="#references">References</Link>
          </li>
          <li>
            <Link href="#contact">Contact</Link>
          </li>
          <li>
            <Link href="#instagram">Instagram</Link>
          </li>
          <li>
            <Link href="#linkedin">LinkedIn</Link>
          </li>
          <li>
            <Link href="#dribbble">Dribbble</Link>
          </li>
        </ul>
      </nav>
    </div>
  );
}
testimonials15
