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

type ValuesItems = {
  itemTitle1?: string;
  itemTitle2?: string;
  itemTitle3?: string;
  itemTitle4?: string;
  itemTitle5?: string;
  itemTitle6?: string;
  itemDescription1?: string;
  itemDescription2?: string;
  itemDescription3?: string;
  itemDescription4?: string;
  itemDescription5?: string;
  itemDescription6?: string;
};

type OurValuesData = {
  valuesTitle: string;
  valuesSubtitle: string;
  valuesExpert?: string | null;
  valuesImage?: ValuesImage;
  valuesItems: ValuesItems;
};


type OurValuesProps = {
  data: OurValuesData;
};

export default function OurValues({ data }: OurValuesProps) {
  const titles = [
    data.valuesItems.itemTitle1,
    data.valuesItems.itemTitle2,
    data.valuesItems.itemTitle3,
    data.valuesItems.itemTitle4,
    data.valuesItems.itemTitle5,
    data.valuesItems.itemTitle6,
  ].filter(Boolean);

  const descriptions = [
    data.valuesItems.itemDescription1,
    data.valuesItems.itemDescription2,
    data.valuesItems.itemDescription3,
    data.valuesItems.itemDescription4,
    data.valuesItems.itemDescription5,
    data.valuesItems.itemDescription6,
  ];

  return (
    <section className="relative bg-black text-white overflow-visible">
      {/* Background */}
      <div className="absolute inset-0 -z-10 bg-gradient-to-br from-black via-[#0d0d0d] to-black" />

      <div className="container mx-auto px-4 pt-28 pb-28">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-16">

          {/* LEFT CONTENT */}
          <div className="lg:col-span-5 relative">
            <span className="text-lg font-medium text-[#ffffff]/50 block mb-2">
              {data.valuesSubtitle}
            </span>

            <h2 className="text-2xl md:text-[40px] font-medium font-mono mb-4">
              {data.valuesTitle}
            </h2>
            {data.valuesExpert && (
              <div
                className="text-md lg:text-lg font-medium text-[#ffffff]/70"
                dangerouslySetInnerHTML={{ __html: data.valuesExpert }}
              />
            )}

            {/* PILLAR IMAGE — OUTSIDE SECTION FLOW */}
            {data.valuesImage?.node?.sourceUrl && (
              <div className="lg:absolute top-50 left-0 z-10">
                <Image
                  src={data.valuesImage.node.sourceUrl}
                  alt={data.valuesImage.node.altText || "Our Values"}
                  width={420}
                  height={780}
                  unoptimized
                  className="object-contain"
                />
              </div>
            )}

          </div>

          {/* RIGHT VALUES LIST */}
          <div className="lg:col-span-7 space-y-8">
            {titles.map((title, i) => (
              <div key={i} className="flex gap-5 items-start">
                {/* Icon */}
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="shrink-0 mt-1">
                  <path d="M20.79 5.72003C20.4076 5.33516 19.9525 5.03004 19.4513 4.82233C18.9501 4.61463 18.4126 4.50847 17.87 4.51003H8.66001C8.1169 4.51088 7.57932 4.61911 7.0782 4.82849C6.57707 5.03786 6.12229 5.34425 5.74001 5.73003C5.7121 5.75231 5.68839 5.77941 5.67001 5.81003L2.59001 10.02C2.20357 10.6154 1.99859 11.3103 2.00001 12.02C2.00906 12.7311 2.22066 13.4249 2.61001 14.02L5.67001 18.19L5.74001 18.28C6.12245 18.6649 6.57748 18.97 7.07872 19.1777C7.57996 19.3854 8.11744 19.4916 8.66001 19.49H17.87C18.9654 19.49 20.0158 19.0549 20.7904 18.2804C21.5649 17.5059 22 16.4554 22 15.36V8.59003C21.9899 7.51144 21.5552 6.48028 20.79 5.72003ZM17.23 10.66L13.31 14.58C13.15 14.741 12.96 14.87 12.75 14.96C12.5388 15.0526 12.3106 15.1003 12.08 15.1003C11.8494 15.1003 11.6213 15.0526 11.41 14.96C11.1974 14.871 11.0039 14.742 10.84 14.58L8.90001 12.64C8.7117 12.4517 8.60592 12.1963 8.60592 11.93C8.60592 11.6637 8.7117 11.4083 8.90001 11.22C9.08831 11.0317 9.34371 10.9259 9.61001 10.9259C9.87631 10.9259 10.1317 11.0317 10.32 11.22L12.08 12.99L15.82 9.25003C15.9097 9.14534 16.02 9.06032 16.144 9.0003C16.2681 8.94028 16.4032 8.90655 16.541 8.90123C16.6787 8.89591 16.816 8.91911 16.9443 8.96939C17.0727 9.01966 17.1892 9.09592 17.2867 9.19338C17.3841 9.29083 17.4604 9.40738 17.5106 9.5357C17.5609 9.66403 17.5841 9.80136 17.5788 9.93908C17.5735 10.0768 17.5398 10.2119 17.4797 10.336C17.4197 10.4601 17.3347 10.5704 17.23 10.66Z" fill="white"/>
                </svg>
                

                {/* Text */}
                <div>
                  <h3 className="font-mono text-xl lg:text-2xl font-medium mb-1">
                    {title}
                  </h3>
                  {descriptions[i] && (
                    <div
                      className="text-[#ffffff]/70 text-md lg:text-lg"
                      dangerouslySetInnerHTML={{ __html: descriptions[i] }}
                    />
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      
    </section>
  );
}