import Link from "next/link";

type FeaturesItems = {
  item1?: string;
  itemDescription1?: string;
  item2?: string;
  itemDescription2?: string;
  item3?: string;
  itemDescription3?: string;
  item4?: string;
  itemDescription4?: string;
  item5?: string;
  itemDescription5?: string;
  item6?: string;
  itemDescription6?: string;
};

type FeaturesSectionProps = {
  data: {
    featuresSubtitle?: string;
    featuresTitle?: string;
    featuresItems?: FeaturesItems;
    featuresButtonText?: string;
    featuresButtonLink?: string;
  };
};

export default function FeaturesGrid({ data }: FeaturesSectionProps) {
  const items = [
    { title: data.featuresItems?.item1, desc: data.featuresItems?.itemDescription1 },
    { title: data.featuresItems?.item2, desc: data.featuresItems?.itemDescription2 },
    { title: data.featuresItems?.item3, desc: data.featuresItems?.itemDescription3 },
    { title: data.featuresItems?.item4, desc: data.featuresItems?.itemDescription4 },
    { title: data.featuresItems?.item5, desc: data.featuresItems?.itemDescription5 },
    { title: data.featuresItems?.item6, desc: data.featuresItems?.itemDescription6 },
  ].filter(
    (i): i is { title: string; desc: string | undefined } =>
      typeof i.title === "string" && i.title.trim() !== ""
  );


  if (!items.length) return null;

  return (
    <section className="relative bg-[#f3f3f3] py-5 md:py-5">
      <div className="relative bg-[#f3f3f3] rounded-[24px] container mx-auto px-4 py-6 md:px-0 md:py-0 lg:px-0 lg:py-8">
        {/* Header */}
        <div className="max-w-4xl mx-auto text-center mb-16">
            <h2 className="font-mono font-medium text-2xl md:text-4xl lg:text-[40px] text-[#202020] leading-tight mb-3">
              {data.featuresTitle}
            </h2>
            {data.featuresSubtitle && (
            <span className="text-[#202020]/70 text-lg font-medium">
                {data.featuresSubtitle}
            </span>
            )}

            
        </div>

        {/* Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4 lg:gap-[30px]">
          {items.map((item, index) => {
            return (
              <div
              key={index}
              className="relative bg-white text-[#202020] transition-all duration-300 hover:bg-[#101010] hover:text-white border border-[#202020]/15 group rounded-2xl p-8 lg:p-[30px]"
              >
              {item.title && (
                <h3 
                className="font-mono font-medium text-lg lg:text-2xl text-[#202020] group-hover:text-white mb-[30px]"
                dangerouslySetInnerHTML={{ __html: item.title }}
                />
              )}
              {item.desc && (
                  <div
                  className="text-sm lg:text-lg text-[#202020]/70 group-hover:text-white font-medium leading-relaxed"
                  dangerouslySetInnerHTML={{ __html: item.desc }}
                  />
              )}
              </div>
            );
          })}
        </div>
      </div>
      <div className="relative bg-[#f3f3f3] rounded-2xl max-w-max mx-auto px-8 py-6 md:mb-[-50px] text-center">
        {/* CTA */}
        {data.featuresButtonText && (
          <Link
            href={data.featuresButtonLink ?? "#"}
            className="inline-flex items-center gap-2 border border-[#202020]/50 px-6 py-3 rounded text-[16px] font-medium text-[#202020] hover:bg-[#202020] hover:text-white transition"
          >
            {data.featuresButtonText}
            <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><path d="M17.2999 8.73828L0.5 8.73828" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path>
            </svg>
          </Link>
        )}
      </div>
    </section>
  );
}