"use client";

import Image from "next/image";
import Link from "next/link";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation } from "swiper/modules";

import "swiper/css";
import "swiper/css/navigation";

/* ---------------- TYPES ---------------- */

type CaseStudy = {
  title: string;
  slug: string;
  excerpt?: string | null;
  tags: {
    nodes: {
      name: string;
      slug: string;
    }[];
  };
  featuredImage?: {
    node?: {
      sourceUrl: string;
      altText?: string | null;
    };
  } | null;
};


type Props = {
  caseStudies: CaseStudy[];
};

/* ---------------- COMPONENT ---------------- */

export default function CaseStudySlider({ caseStudies }: Props) {
  return (
    <section className="pt-16 md:pt-[126px] pb-20 md:pb-24 bg-[#f3f3f3] overflow-hidden">
      <div className="container mx-auto px-4 grid grid-cols-1 lg:grid-cols-3 gap-8 items-start">

        {/* LEFT CONTENT */}
        <div>
          <p className="text-lg font-medium text-[#202020]/50 mb-2">
            Our Case Study
          </p>

          <h2 className="text-xl lg:text-2xl font-medium text-[#202020] font-mono">
            We aren’t just all talk company—rather we are go and build it experts.
            Take a look at our portfolio of successful projects.
          </h2>
        </div>

        {/* RIGHT SLIDER */}
        <div className="relative lg:col-span-2 w-full overflow-hidden">

          <Swiper
            modules={[Navigation]}
            spaceBetween={16}
            slidesPerView={1}
            breakpoints={{
              640: {
                slidesPerView: 1.1,
              },
              768: {
                slidesPerView: 2,
              },
              1024: {
                slidesPerView: 2.5,
              },
            }}
            navigation={{
              nextEl: ".case-next",
              prevEl: ".case-prev",
            }}
          >
            {caseStudies.map((item) => {
              const category =
                item.tags.nodes[0]?.name ?? "Case Study";

              return (
                <SwiperSlide key={item.slug}>
                  <div className="group relative bg-white rounded-xl overflow-hidden transition-all duration-300">

                    {/* HOVER OVERLAY */}
                    {/* <div className="absolute inset-0 z-10 opacity-0 group-hover:opacity-100 transition pointer-events-none">
                      <div className="absolute inset-0 bg-black/50 backdrop-blur-[8px]" />
                      <div className="relative z-10 flex items-center justify-center h-full pointer-events-auto">
                        <Link
                          href={`/case-study/${item.slug}`}
                          className="bg-white text-black px-6 py-3 rounded text-[16px] font-medium flex items-center gap-2"
                        >
                          Learn More
                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 36 36" className="rotate-90"><path fill="currentColor" d="M27.66 15.61L18 6l-9.66 9.61A1 1 0 1 0 9.75 17L17 9.81v19.13a1 1 0 1 0 2 0V9.81L26.25 17a1 1 0 0 0 1.41-1.42Z" className="clr-i-outline clr-i-outline-path-1"/><path fill="none" d="M0 0h36v36H0z"/></svg>
                        </Link>
                      </div>
                    </div> */}

                    {/* IMAGE */}
                    {item.featuredImage?.node?.sourceUrl && (
                      <div className="relative h-[300px] md:h-[300px] lg:h-[250px] w-full">
                        <Image
                          src={item.featuredImage.node.sourceUrl}
                          alt={
                            item.featuredImage.node.altText ||
                            item.title
                          }
                          fill
                          unoptimized
                          className="object-cover"
                        />
                      </div>
                    )}

                    {/* CONTENT */}
                    <div className="p-5 text-center">
                      <p className="text-xs text-[#202020]/60">
                        {category}
                      </p>

                      <h3 className="mt-2 text-2xl lg:text-[32px] font-extrabold text-[#202020]">
                        {item.title}
                      </h3>

                      {item.excerpt && (
                        <div
                          className="mt-2 text-sm md:text-[16px] text-[#202020]/70 line-clamp-3"
                          dangerouslySetInnerHTML={{
                            __html: item.excerpt,
                          }}
                        />
                      )}

                    </div>
                  </div>
                </SwiperSlide>
              );
            })}
          </Swiper>
          <div className="flex gap-4 justify-center md:justify-between items-center mt-[30px] md:mt-[86px] ">
            <Link
              href={`/case-study/`}
              className="
                group inline-flex items-center gap-2
                border border-[#202020]/50 px-6 py-3 rounded text-sm md:text-lg font-medium
                hover:bg-[#101010] text-[#202020] hover:text-white transition
              "
            >
              View all Case Study
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8.67188 0.5L17.3026 8.73842L8.67188 16.9768" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
                <path d="M17.2999 8.73828L0.5 8.73828" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </Link>
            {/* NAVIGATION */}
            <div className="flex gap-4 justify-end">
              <button className="case-prev text-xl text-[#202020] cursor-pointer hidden md:flex">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="rotate-270"><path fill="currentColor" fillRule="evenodd" d="M11.47 2.47a.75.75 0 0 1 1.06 0l7 6.987a.75.75 0 1 1-1.06 1.061L12.751 4.81L12.762 21a.75.75 0 0 1-1.5.002l-.01-16.194l-5.722 5.711a.75.75 0 1 1-1.06-1.061z" clipRule="evenodd"/></svg></button>
              <button className="case-next text-xl text-[#202020] cursor-pointer hidden md:flex">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="rotate-90"><path fill="currentColor" fillRule="evenodd" d="M11.47 2.47a.75.75 0 0 1 1.06 0l7 6.987a.75.75 0 1 1-1.06 1.061L12.751 4.81L12.762 21a.75.75 0 0 1-1.5.002l-.01-16.194l-5.722 5.711a.75.75 0 1 1-1.06-1.061z" clipRule="evenodd"/></svg></button>
            </div>
          </div>

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