import Image from "next/image";

/* ----------------------------- TYPES ----------------------------- */

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

export type CaseStudyFeaturesData = {
  featureTopImage?: ImageNode;

  featureFirstImage?: ImageNode;
  featureFirstTitle?: string | null;
  featureFirstDescription?: string | null;

  featureSecondImage?: ImageNode;
  featureSecondTitle?: string | null;
  featureSecondDescription?: string | null;

  featureThirdImage?: ImageNode;
  featureThirdTitle?: string | null;
  featureThirdDescription?: string | null;
};

type Props = {
  data: CaseStudyFeaturesData;
};

/* ----------------------------- PAGE ----------------------------- */

export default function CaseStudyFeatures({ data }: Props) {
  return (
    <section className="bg-[#f3f3f3] py-16 md:py-20">
      <div className="container mx-auto px-4 space-y-[30px]">

        {/* TOP IMAGE */}
        {data.featureTopImage?.node?.sourceUrl && (
          <div className="overflow-hidden">
            <Image
              src={data.featureTopImage.node.sourceUrl}
              alt={data.featureTopImage.node.altText || "Feature overview"}
              width={1600}
              height={800}
              className="w-full object-cover"
              priority
              unoptimized
            />
          </div>
        )}

        {/* FEATURE ROWS */}
        <FeatureRow
          image={data.featureFirstImage}
          title={data.featureFirstTitle}
          description={data.featureFirstDescription}
          reverse={false}
        />

        <FeatureRow
          image={data.featureSecondImage}
          title={data.featureSecondTitle}
          description={data.featureSecondDescription}
          reverse
        />

        <FeatureRow
          image={data.featureThirdImage}
          title={data.featureThirdTitle}
          description={data.featureThirdDescription}
          reverse={false}
        />

      </div>
    </section>
  );
}

/* ----------------------------- SUB COMPONENT ----------------------------- */

type FeatureRowProps = {
  image?: ImageNode;
  title?: string | null;
  description?: string | null;
  reverse?: boolean;
};

function FeatureRow({
  image,
  title,
  description,
  reverse = false,
}: FeatureRowProps) {
  return (
    <div
      className={`grid grid-cols-1 lg:grid-cols-3 gap-[30px] items-stretch`}
    >
      {/* IMAGE */}
      <div
        className={`flex ${
          reverse ? "lg:order-2" : "lg:order-1"
        }`}
      >
        {image?.node?.sourceUrl && (
          <div className="w-full flex items-center justify-center">
            <Image
              src={image.node.sourceUrl}
              alt={image.node.altText || title || "Feature image"}
              width={420}
              height={760}
              className="object-contain max-h-[520px]"
              unoptimized
            />
          </div>
        )}
      </div>

      {/* CONTENT */}
      <div
        className={`flex lg:col-span-2 ${
          reverse ? "lg:order-1" : "lg:order-2"
        }`}
      >
        <div className="w-full bg-black text-white rounded-lg p-8 md:p-10 flex flex-col justify-center">
          {title && (
            <h3 className="font-mono text-lg md:text-2xl mb-4">
              {title}
            </h3>
          )}

          {description && (
            <div
              className="text-white/70 text-sm md:text-lg leading-relaxed"
              dangerouslySetInnerHTML={{ __html: description }}
            />
          )}
        </div>
      </div>
    </div>
  );
}