"use client";

import Image from "next/image";
import { useEffect, useState } from "react";
import { getTestimonials } from "@/lib/getTestimonials";

type Testimonial = {
  name: string;
  role: string;
  text: string;
  avatar?: string;
  alt?: string;
};

export default function ClientTestimonials() {
  const [testimonials, setTestimonials] = useState<Testimonial[]>([]);

  useEffect(() => {
    getTestimonials().then((data) => {
      const mapped = data.map((item) => ({
        name: item.title,
        role: item.testimonialFields?.designation ?? "",
        text: item.content,
        avatar: item.featuredImage?.node?.sourceUrl,
        alt: item.featuredImage?.node?.altText ?? item.title,
      }));
      setTestimonials(mapped);
    });
  }, []);

  const mid = Math.ceil(testimonials.length / 2);
  const column1 = testimonials.slice(0, mid);
  const column2 = testimonials.slice(mid);


  return (
    <section className="pt-16 lg:pt-0 relative overflow-hidden bg-[#101010]">
      {/* Background */}
      {/* <div
        className="absolute inset-0 -z-10 bg-[url('/testimonials/testimonials-bg.webp')]
        bg-cover bg-center bg-no-repeat"
      /> */}

      <div className="container mx-auto px-4 grid grid-cols-1 lg:grid-cols-2 gap-10 items-center">

        {/* LEFT */}
        <div>
          <span className="text-white/50 tracking-wide text-lg font-medium">
            Client Testimonials
          </span>

          <h2 className="mt-4 text-2xl lg:text-[40px] font-mono font-medium text-white">
            Take a look at what our past clients say about our mobile app
            development and other services.
          </h2>
        </div>

        {/* RIGHT */}
        <div className="relative h-[460px] sm:h-[560px] lg:h-[650px] grid grid-cols-1 md:grid-cols-2 gap-6 overflow-hidden">

          {/* Fade masks */}
          <div className="absolute top-0 left-0 right-0 h-[120px] bg-gradient-to-b from-black to-transparent z-10" />
          <div className="absolute bottom-0 left-0 right-0 h-[120px] bg-gradient-to-t from-black to-transparent z-10" />
           {/* Mobile & Column 1 */}
          <div className="animate-scroll-up space-y-6">
            {(column1).map((item, i) => (
              <TestimonialCard key={`col1-${i}`} item={item} />
            ))}
          </div>

          {/* Column 2 (desktop only) */}
          <div className="hidden md:block animate-scroll-down space-y-6">
            {column2.map((item, i) => (
              <TestimonialCard key={`col2-${i}`} item={item} />
            ))}
          </div>

        </div>
      </div>
    </section>
  );
}

function TestimonialCard({ item }: { item: Testimonial }) {
  return (
    <div className="relative overflow-hidden backdrop-blur border border-white/15 rounded-lg p-4 max-w-md transition">
      {/* Background */}
      <div
        className="absolute inset-0 -z-10 bg-[url('/testimonials/testimonials-card-bg.webp')]
        bg-cover bg-center bg-no-repeat"
      />
      <div className="flex items-center gap-3">
        {item.avatar && (
          <Image
            src={item.avatar}
            alt={item.alt ?? item.name}
            width={48}
            height={48}
            className="h-12 w-12 rounded-full border border-white/10"
            unoptimized
          />
        )}

        <div>
          <p className="text-white text-sm font-semibold">{item.name}</p>
          <p className="text-white text-xs">{item.role}</p>
        </div>
      </div>

      <div
        className="mt-3 text-white/80 text-[16px] font-medium border border-white/15 bg-[#ffffff]/5 rounded p-2"
        dangerouslySetInnerHTML={{ __html: item.text }}
      />
    </div>
  );
}