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;
  };
};

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:mt-[-80px] md:px-4 md:py-8 lg:px-4 lg:py-8">
        {/* Header */}
        <div className="max-w-4xl mx-auto text-center mb-16">
            {data.featuresSubtitle && (
            <span className="block text-base tracking-widest text-[#202020]/60 mb-3">
                {data.featuresSubtitle}
            </span>
            )}

            <h2 className="font-mono font-medium text-2xl md:text-4xl lg:text-[40px] text-[#202020] leading-tight">
            {data.featuresTitle}
            </h2>
        </div>
        {/* DESKTOP CONNECTOR LINES */}
        <div className="relative hidden lg:block">
          {/* Curved connector */}
          <div className="absolute top-[140px] left-0 right-0 w-full">
            <svg width="1201" height="478" viewBox="0 0 1201 478" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-full h-full shrink-0 mx-auto">
              <path d="M19.5 476.44C19.5 476.992 20.1764 477.383 20.6547 477.107L28.3453 472.667C28.8236 472.391 28.8236 471.609 28.3453 471.333L20.6547 466.893C20.1764 466.617 19.5 467.008 19.5 467.56V476.44ZM1171.5 1V2H1176V1V0H1171.5V1ZM1200 25H1199V212.5H1200H1201V25H1200ZM1176 236.5V235.5H25V236.5V237.5H1176V236.5ZM1 260.5H0V448H1H2V260.5H1ZM1 448H0C0 461.807 11.1929 473 25 473V472V471C12.2975 471 2 460.703 2 448H1ZM25 236.5V235.5C11.1929 235.5 0 246.693 0 260.5H1H2C2 247.797 12.2974 237.5 25 237.5V236.5ZM1200 212.5H1199C1199 225.203 1188.7 235.5 1176 235.5V236.5V237.5C1189.81 237.5 1201 226.307 1201 212.5H1200ZM1176 1V2C1188.7 2 1199 12.2975 1199 25H1200H1201C1201 11.1929 1189.81 0 1176 0V1Z" fill="#202020"/>
            </svg>
          </div>
        </div>

        {/* Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[30px] lg:gap-[86px] lg:gap-y-[170px] relative z-10">
          {items.map((item, index) => {
            const showArrow =
              index % 3 !== 2 && index !== items.length - 1;

            return (
              <div
              key={index}
              className="relative bg-white border border-[#202020]/15 rounded-2xl p-8 lg:p-[45px] text-left transition"
              >
              {item.title && (
                <h3 
                className="font-mono font-medium text-lg lg:text-2xl text-[#202020] mb-3"
                dangerouslySetInnerHTML={{ __html: item.title }}
                />
              )}
              {item.desc && (
                  <div
                  className="text-sm lg:text-lg text-[#202020]/70 font-medium leading-relaxed"
                  dangerouslySetInnerHTML={{ __html: item.desc }}
                  />
              )}
              {/* ARROW (desktop only) */}
                {showArrow && (
                  <div className="hidden lg:flex absolute top-1/2 right-[-85px] translate-y-[-50%]">
                    <svg width="79" height="11" viewBox="0 0 79 11" fill="#202020" xmlns="http://www.w3.org/2000/svg" className="shrink-0">
                      <path d="M69 9.63792C69 10.1902 69.6764 10.5807 70.1547 10.3046L77.8453 5.86442C78.3236 5.58828 78.3236 4.80723 77.8453 4.53109L70.1547 0.0909181C69.6764 -0.185225 69 0.2053 69 0.757585V9.63792ZM0 5.19775V6.19775H70V5.19775V4.19775H0V5.19775Z"/>
                    </svg>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}