import { MediaNode } from "@/app/contact/page";
import Image from "next/image";

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: {
    differenceTitle?: string;
    differenceDescription?: string;
    differenceImage?: { node?: MediaNode };
    featuresSubtitle?: string;
    featuresTitle?: string;
    featuresDescription?: string;
    featuresItems?: FeaturesItems;
    featuresCtaText?: string | null;
  };
};

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="bg-[#F3F3F3] py-10 md:py-12">
      <div className="container mx-auto px-4 grid grid-cols-1 lg:grid-cols-12 gap-[30px] items-center">

        {/* LEFT IMAGE */}
        <div className="lg:col-span-5">
            {data.differenceImage?.node?.sourceUrl && (
              <Image
                src={data.differenceImage.node.sourceUrl}
                alt={data.differenceImage.node.altText || "Services overview"}
                width={1600}
                height={800}
                className="w-full h-full object-cover rounded-2xl"
                priority
                unoptimized
              />
            )}
        </div>

        {/* RIGHT CONTENT */}
        <div className="lg:col-span-7">
          <h2 className="font-mono font-medium text-2xl md:text-4xl lg:text-[40px] text-[#202020] leading-tight mb-6">
            {data.differenceTitle}
          </h2>

          <div
            className="text-[#202020]/70 text-lg leading-relaxed space-y-4 font-medium"
            dangerouslySetInnerHTML={{
              __html: data.differenceDescription ?? "",
            }}
          />
        </div>
            
        

      </div>
    </section>
    <section className="relative bg-[#f3f3f3] py-5 md:py-0">
      <div className="relative bg-[#f3f3f3] rounded-[24px] container mx-auto px-4 py-6 md:px-4 md:py-8 lg:px-4 lg:py-8">
        {/* Header */}
        <div className="max-w-6xl 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>
            {data.featuresDescription && (
              <div
                className="text-[#202020]/70 text-lg font-medium"
                dangerouslySetInnerHTML={{
                  __html: data.featuresDescription,
                }}
              />
            )}
        </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 lg:px-[32px]">
          {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 transition-all duration-300 hover:bg-[#101010] hover:text-white group rounded-2xl p-8 lg:p-[20px] text-left transition"
              >
              {item.title && (
                <h3 
                className="font-mono font-medium text-lg lg:text-2xl text-[#202020] group-hover:text-white 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 }}
                  />
              )}
              {/* 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 className="max-w-4xl mx-auto text-center my-14">
          {data.featuresCtaText && (
            <div
              className="text-[#202020] text-2xl font-medium"
              dangerouslySetInnerHTML={{
                __html: data.featuresCtaText,
              }}
            />
          )}
        </div>
      </div>
    </section>
    </>
  );
}