import Image from "next/image";
type FeatureItems = {
  items1?: string | null;
  items2?: string | null;
  items3?: string | null;
  items4?: string | null;
  items5?: string | null;
  items6?: string | null;
  items7?: string | null;
  items8?: string | null;
};

type ImageNode = {
  node: {
    sourceUrl: string;
    altText?: string | null;
  };
} | null;

export type FeaturesData = {
  featuresSubtitle?: string | null;
  featuresTitle?: string | null;
  featuresItems?: FeatureItems | null;
  featuresImage?: ImageNode;
};

type Props = {
  data: FeaturesData;
};

export default function Features({ data }: Props) {
  const items = Object.values(data.featuresItems ?? {}).filter(
    (item): item is string => Boolean(item)
  );

  const leftItems = items.slice(0, 4);
  const rightItems = items.slice(4, 8);

  return (
    <section className="bg-[#f3f3f3] pt-10 md:pt-10">
      <div className="container mx-auto px-4">

        {/* TEXT */}
        <div className="text-center mb-14 md:mb-20">
          <span className="block text-lg font-medium text-[#202020]/60 mb-3">
            {data.featuresSubtitle}
          </span>

          <h2 className="font-mono font-medium text-3xl md:text-4xl lg:text-4xl text-[#202020] leading-tight mb-6">
            {data.featuresTitle}
          </h2>
        </div>

        {/* CONTENT */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-14 items-center">

          {/* LEFT FEATURES */}
          <ul className="space-y-4 order-1">
            {leftItems.map((item, index) => (
              <FeatureItem key={index} label={item} />
            ))}
          </ul>

          {/* IMAGE */}
          {data.featuresImage?.node?.sourceUrl && (
            <div className="flex justify-center order-3 lg:order-2">
              <Image
                src={data.featuresImage.node.sourceUrl}
                alt={data.featuresImage.node.altText || "App features"}
                width={360}
                height={720}
                className="w-full max-w-[260px] md:max-w-[350px]"
                unoptimized
                priority
              />
            </div>
          )}

          {/* RIGHT FEATURES */}
          <ul className="space-y-4 order-2 lg:order-3 lg:pl-14">
            {rightItems.map((item, index) => (
              <FeatureItem key={index} label={item} />
            ))}
          </ul>

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

function FeatureItem({ label }: { label: string }) {
  return (
    <li className="flex items-center gap-4 text-sm md:text-lg font-mono font-medium text-[#202020]">
      <span className="inline-flex">
        <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect width="40" height="40" rx="4" fill="#202020"/>
          <path d="M18.1042 25.0649L14.2946 21.2987L15.6375 19.9711L18.1042 22.4003L24.3804 16.1955L25.7232 17.5325M20.0089 10L11.4375 13.7662V19.4156C11.4375 24.6412 15.0946 29.5279 20.0089 30.7143C24.9232 29.5279 28.5804 24.6412 28.5804 19.4156V13.7662L20.0089 10Z" fill="white"/>
        </svg>
      </span>
      {label}
    </li>
  );
}