"use client";

import useIsMobile from "@/hooks/useMobile";
import clsx from "clsx";
import FadeInWhenVisible from "../fade-in-when-visible/FadeInWhenVisible";
import { presentationIcons2 } from "@/data/data";
import { FaCheckCircle } from "react-icons/fa";
import Image from "next/image";

export type PresentationItem = {
  icon?: string | React.ComponentType<React.SVGProps<SVGSVGElement>>;
  content: string;
  is2x?: boolean;
};

function ComparisonStyleCard({
  item,
  index,
  isMobile,
}: {
  item: PresentationItem;
  index: number;
  isMobile: boolean;
}) {
  return (
    <FadeInWhenVisible
      hiddenPosX={0}
      hiddenPosY={0}
      delay={isMobile ? 0.1 * index : 0}
      className="flex flex-col bg-gradient-to-br from-[#213d4d] to-[#102530] border border-white/10 rounded-2xl overflow-hidden shadow-md hover:shadow-lg transition-transform duration-300 h-full"
    >
      <div className="flex justify-center items-center p-4 bg-white/5">
        {item.is2x ? (
          <p
            className={clsx(
              "font-bold text-[#F8A20E] select-none",
              isMobile ? "text-lg" : "text-3xl"
            )}
          >
            2x
          </p>
        ) : typeof item.icon === "string" ? (
          <div
            className={clsx("relative", isMobile ? "w-10 h-10" : "w-12 h-12")}
          >
            <Image
              src={`/${item.icon}`}
              alt={item.content}
              fill
              className="object-contain"
            />
          </div>
        ) : item.icon ? (
          <item.icon
            className={clsx(
              "text-[#F8A20E]",
              isMobile ? "w-8 h-8" : "w-10 h-10"
            )}
          />
        ) : null}
      </div>

      <div className="h-px bg-white/10" />

      {/* Conteúdo */}
      <div
        className={clsx(
          "flex items-start gap-3 p-4",
          isMobile ? "text-xs" : "text-sm"
        )}
      >
        <FaCheckCircle
          className={clsx(
            "text-green-400 flex-shrink-0 mt-[2px]",
            isMobile ? "text-base" : "text-lg"
          )}
        />
        <p
          className={clsx(
            "text-white font-semibold",
            isMobile ? "text-xs" : "text-base leading-relaxed"
          )}
        >
          {item.content}
        </p>
      </div>
    </FadeInWhenVisible>
  );
}

export default function PresentationCards() {
  const isMobile = useIsMobile();

  return (
    <section className="relative lg:w-7/8 mx-auto mb-16 px-6 py-12">
      <div className="flex flex-col gap-8">
        {/* Primeiros 4 cards */}
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-6">
          {presentationIcons2.slice(0, 4).map((item, index) => (
            <ComparisonStyleCard
              key={index}
              item={item}
              index={index}
              isMobile={isMobile}
            />
          ))}
        </div>

        {/* Divider + Title */}
        <div className="flex flex-col items-center my-8">
          <div className="w-full h-px bg-white/10 mb-6" />
          <h2 className="text-2xl lg:text-4xl font-bold text-center text-[#F8A20E] ">
            Optional Add-Ons
          </h2>
          <div className="w-full h-px bg-white/10 mt-6" />
        </div>

        {/* Últimos 2 centralizados */}
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-6">
          <div className="lg:col-start-2">
            <ComparisonStyleCard
              item={presentationIcons2[4]}
              index={4}
              isMobile={isMobile}
            />
          </div>
          <div>
            <ComparisonStyleCard
              item={presentationIcons2[5]}
              index={5}
              isMobile={isMobile}
            />
          </div>
        </div>
      </div>
    </section>
  );
}