import { WhyChooseSectionProps } from "./types";
import ImageWithFallback from "@/shared/ImageWithFallback";

function CardIcon({ icon, title }: { icon: string; title: string }) {
  return (
    <div className="flex justify-start mb-6">
      <div className="relative w-16 h-16">
        <ImageWithFallback
          src={icon}
          alt={title}
          fill
          className="object-contain"
          style={{
            filter:
              "invert(10%) sepia(80%) saturate(600%) hue-rotate(310deg) brightness(65%)",
          }}
        />
      </div>
    </div>
  );
}

export default function WhyChooseSection({
  heading,
  subHeading,
  cards,
}: WhyChooseSectionProps) {
  return (
    <section className="py-14 bg-white">
      <div className="container lg:px-16 px-4">
        {/* Heading — start-aligned (right in RTL) */}
        <h2
          data-aos="fade-down"
          className="text-3xl lg:text-4xl font-bold text-start text-primary mb-4"
        >
          {heading}
        </h2>

        {subHeading && (
          <p
            data-aos="fade-up"
            className="text-dark text-base lg:text-lg text-start mb-12"
          >
            {subHeading}
          </p>
        )}

        {/* Cards grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {cards.map((card, index) => (
            <div
              key={index}
              data-aos="fade-up"
              data-aos-delay={String(index * 150)}
              className="relative  border border-t-thirdy border-r-thirdy border-l-0 border-b-0 bg-white pt-8 pb-8 px-6 flex flex-col overflow-hidden"
            >
              {/* Folded corner — always top-right visually, use fixed right:0 to bypass RTL */}
              <span
                aria-hidden="true"
                className="absolute top-0 w-0 h-0"
                style={{
                  right: 0,
                  borderStyle: "solid",
                  borderWidth: "0 24px 24px 0",
                  borderColor: "transparent #70192C transparent transparent",
                }}
              />

              {/* Icon — centered */}
              <CardIcon icon={card.icon} title={card.title} />

              {/* Title — right-aligned */}
              <h3 className="text-lg lg:text-xl font-bold text-dark mb-4 text-start">
                {card.title}
              </h3>

              {/* Description — right-aligned */}
              <p className="text-textgrey text-sm lg:text-base leading-relaxed text-start">
                {card.description}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}