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 },
  ].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>
        <div className="max-w-[740px] mx-auto relative">

        {/* TOP ROW */}
        <div className="grid md:grid-cols-2 gap-[30px] md:gap-[86px] mt-[30px] md:mb-[120px] relative z-10">
          {items.slice(0, 2).map((item, index) => (
            <Card key={index} item={item} />
          ))}

          {/* TOP ARROW → */}
          <div className="hidden lg:block absolute top-1/2 left-1/2 translate-x-[-50%]">
            <ArrowRight />
          </div>
        </div>

        {/* CURVE CONNECTOR */}
        <div className="hidden lg:block absolute left-[-4%] right-[0%] top-[180px]">
          <svg width="794" height="395" viewBox="0 0 794 395" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M19.5 393.44C19.5 393.992 20.1764 394.383 20.6547 394.107L28.3453 389.667C28.8236 389.391 28.8236 388.609 28.3453 388.333L20.6547 383.893C20.1764 383.617 19.5 384.008 19.5 384.56V393.44ZM764.5 1V2H769V1V0H764.5V1ZM793 25H792V171H793H794V25H793ZM769 195V194H25V195V196H769V195ZM1 219H0V365H1H2V219H1ZM1 365H0C0 378.807 11.1929 390 25 390V389V388C12.2975 388 2 377.703 2 365H1ZM25 195V194C11.1929 194 0 205.193 0 219H1H2C2 206.297 12.2974 196 25 196V195ZM793 171H792C792 183.703 781.703 194 769 194V195V196C782.807 196 794 184.807 794 171H793ZM769 1V2C781.703 2 792 12.2975 792 25H793H794C794 11.1929 782.807 0 769 0V1Z" fill="#202020"/>
          </svg>
        </div>

        {/* BOTTOM ROW */}
        <div className="grid md:grid-cols-2 gap-[30px] md:gap-[86px] mt-[30px] md:mt-[80px] relative z-10">
          {items.slice(2, 4).map((item, index) => (
            <Card key={index + 2} item={item} />
          ))}

          {/* BOTTOM ARROW → */}
          <div className="hidden lg:block absolute top-1/2 left-1/2 translate-x-[-50%]">
            <ArrowRight />
          </div>
        </div>

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

function Card({ item }: { item: { title: string; desc?: string } }) {
  return (
    <div className="relative bg-white border border-[#202020]/15 transition-all duration-300 hover:bg-[#101010] hover:text-white group rounded-2xl p-8 lg:p-[45px] text-left transition">
      <h3
        className="steps-title font-mono font-medium text-lg lg:text-2xl group-hover:text-white text-[#202020] mb-3"
        dangerouslySetInnerHTML={{ __html: item.title }}
      />
      {item.desc && (
        <div
          className="text-sm lg:text-lg text-[#202020]/70 font-medium group-hover:text-white leading-relaxed"
          dangerouslySetInnerHTML={{ __html: item.desc }}
        />
      )}
    </div>
  );
}

function ArrowRight() {
  return (
    <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>
  );
}