import Image from "next/image";
type ImageNode = {
  node: {
    sourceUrl: string;
    altText?: string | null;
  };
} | null;

type FeatureItems = {
  featureLabel1?: string | null;
  featureContent1?: string | null;
  featureLabel2?: string | null;
  featureContent2?: string | null;
  featureLabel3?: string | null;
  featureContent3?: string | null;
  featureLabel4?: string | null;
  featureContent4?: string | null;
  featureLabel5?: string | null;
  featureContent5?: string | null;
};

export type ResultsData = {
  resultsSubtitle: string;
  resultsTitle: string;
  featureItems: FeatureItems;
  resultsImage: ImageNode;
};

type Props = {
  data: ResultsData;
};

export default function Results({ data }: Props) {
  const stats = [
    { label: data.featureItems.featureLabel1, value: data.featureItems.featureContent1 },
    { label: data.featureItems.featureLabel2, value: data.featureItems.featureContent2 },
    { label: data.featureItems.featureLabel3, value: data.featureItems.featureContent3 },
    { label: data.featureItems.featureLabel4, value: data.featureItems.featureContent4 },
    { label: data.featureItems.featureLabel5, value: data.featureItems.featureContent5 },
  ].filter((item) => item.label && item.value);

  return (
    <section className="relative bg-[#101010] text-white pt-20 md:pt-28 overflow-hidden">
      {/* Background Image */}
      {/* <div className="absolute inset-0 -z-10">
        <Image
          src="/result-bg.webp"   // put image in /public
          alt="Results background"
          fill
          className="object-cover"
          priority
        />
      </div> */}
      <div className="container mx-auto px-4">

        {/* TEXT */}
        <div className="max-w-3xl mx-auto text-center mb-14 md:mb-20">
          <span className="block text-lg font-medium text-white/60 mb-4">
            {data.resultsSubtitle}
          </span>

          <h2 className="font-mono text-lg sm:text-2xl md:text-2xl lg:text-2xl">
            {data.resultsTitle}
          </h2>
        </div>

        {/* STATS */}
        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4 items-center mb-16">
          {stats.map((item, index) => (
            <div
              key={index}
              className="relative px-4"
            >
              {/* Vertical divider (desktop only) */}
              {index !== 0 && (
                <span className="hidden lg:block absolute left-0 top-1/2 -translate-y-1/2 h-full w-px bg-white/20" />
              )}

              <div
                className="text-lg text-white/70 mb-2"
                dangerouslySetInnerHTML={{ __html: item.label ?? "" }}
              />
              <p className="text-lg md:text-2xl font-medium">
                {item.value}
              </p>
            </div>
          ))}
        </div>

        {/* IMAGE */}
        {data.resultsImage?.node?.sourceUrl && (
          <div className="relative flex justify-center">
            <Image
              src={data.resultsImage.node.sourceUrl}
              alt={data.resultsImage.node.altText || "Results & Impact"}
              width={900}
              height={600}
              className="w-full max-w-5xl object-contain"
              unoptimized
            />
          </div>
        )}

      </div>
    </section>
  );
}