"use client";

import React from "react";
import { withCDN } from "@/src/lib/utils";

export default function TestimonialSkeleton() {
  return (
    <>
      <style>{`
        @keyframes shimmer {
          0% {
            background-position: -1000px 0;
          }
          100% {
            background-position: 1000px 0;
          }
        }

        .shimmer {
          background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.05) 0%,
            rgba(255, 255, 255, 0.15) 50%,
            rgba(255, 255, 255, 0.05) 100%
          );
          background-size: 1000px 100%;
          animation: shimmer 2s infinite;
        }
      `}</style>

      <section
        className="relative w-full overflow-hidden bg-transparent"
        style={{
          backgroundImage: `url('${withCDN("/testimonials.png")}')`,
          backgroundSize: "cover",
          backgroundPosition: "center",
          backgroundRepeat: "no-repeat",
          minHeight: "1200px",
        }}
      >
        <div className="max-w-7xl mx-auto sm:pt-34 md:pt-36 px-4 mt-40 md:mt-12 sm:px-6 md:px-8">
          {/* Skeleton Heading */}
          <div className="flex justify-center mb-10 sm:mb-14 md:mb-16">
            <div className="shimmer h-12 md:h-16 w-64 md:w-80 rounded-lg" />
          </div>

          {/* Skeleton Testimonial Cards */}
          <div className="relative">
            <div className="flex gap-4 sm:gap-6 md:gap-8 overflow-x-auto scroll-smooth no-scrollbar px-1 sm:px-2">
              {[1, 2, 3, 4].map((index) => (
                <div
                  key={index}
                  className="
                    flex-none 
                    w-[260px] sm:w-[320px] md:w-[547px] 
                    min-h-[220px] sm:min-h-60 md:min-h-[262px] 
                    border border-white/30 rounded-2xl 
                    p-4 sm:p-6 md:p-10 
                    flex flex-col justify-between bg-transparent
                  "
                >
                  {/* Quote Skeleton */}
                  <div className="space-y-3 mb-4 sm:mb-6">
                    <div className="shimmer h-5 md:h-6 rounded w-full" />
                    <div className="shimmer h-5 md:h-6 rounded w-5/6" />
                    <div className="shimmer h-5 md:h-6 rounded w-4/5" />
                  </div>

                  {/* Author Skeleton */}
                  <div className="shimmer h-6 md:h-7 rounded w-2/3 mt-auto" />
                </div>
              ))}
            </div>

            {/* Navigation Arrows Skeleton (only for md and up) */}
            <div className="hidden md:flex gap-4 justify-end mt-8">
              <div className="shimmer w-10 h-10 rounded-full" />
              <div className="shimmer w-10 h-10 rounded-full" />
            </div>
          </div>

          {/* Icons Row Section Skeleton */}
          <div className="mt-14 sm:mt-16 md:mt-20">
            {/* Mobile/Tablet: 2x2 grid centered layout */}
            <div className="block md:hidden text-center">
              <div className="flex justify-center mb-10 sm:mb-12">
                <div className="shimmer h-6 w-48 rounded" />
              </div>

              <div className="grid grid-cols-2 gap-6 sm:gap-8 max-w-[500px] mx-auto">
                {[1, 2, 3, 4].map((index) => (
                  <div key={index} className="flex flex-col items-center">
                    <div className="shimmer w-14 h-14 sm:w-16 sm:h-16 rounded-full" />
                    <div className="shimmer h-4 w-20 rounded mt-3 sm:mt-4" />
                  </div>
                ))}
              </div>
            </div>

            {/* Desktop: Grid layout */}
            <div className="hidden md:grid md:grid-cols-5 md:items-center md:gap-16">
              {/* Left text skeleton */}
              <div className="md:col-span-1 flex justify-start">
                <div className="shimmer h-6 w-40 rounded" />
              </div>

              {/* Icons row skeleton */}
              <div className="md:col-span-4 grid grid-cols-4 gap-8">
                {[1, 2, 3, 4].map((index) => (
                  <div key={index} className="flex flex-col items-start">
                    <div className="shimmer w-16 h-16 rounded-full" />
                    <div className="shimmer h-4 w-20 rounded mt-4" />
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}