import Image from "next/image";

type StepsItems = {
  title1?: string;
  description1?: string;
  title2?: string;
  description2?: string;
  title3?: string;
  description3?: string;
  title4?: string;
  description4?: string;
  title5?: string;
  description5?: string;
  title6?: string;
  description6?: string;
};

type StepsSectionProps = {
  data: {
    stepsSubtitle?: string;
    stepsTitle?: string;
    stepsItems?: StepsItems;
  };
};

export default function StepsTimelineSection({ data }: StepsSectionProps) {
  const steps = [
    { title: data.stepsItems?.title1, desc: data.stepsItems?.description1 },
    { title: data.stepsItems?.title2, desc: data.stepsItems?.description2 },
    { title: data.stepsItems?.title3, desc: data.stepsItems?.description3 },
    { title: data.stepsItems?.title4, desc: data.stepsItems?.description4 },
    { title: data.stepsItems?.title5, desc: data.stepsItems?.description5 },
    { title: data.stepsItems?.title6, desc: data.stepsItems?.description6 },
  ].filter((s) => s.title);

  if (!steps.length) return null;

  const topSteps = steps.slice(0, 3);
  const bottomSteps = steps.slice(3, 6);

  return (
    <section className="relative bg-[#101010] pt-20 pb-32 text-white overflow-hidden">
      {/* Background */}
      {/* <div className="absolute inset-0 -z-10">
        <Image
          src="/benefits-bg-single.webp"
          alt="Timeline background"
          fill
          className="object-cover"
          priority
        />
      </div> */}

      <div className="container mx-auto px-4">
        {/* Header */}
        <div className="text-center mb-24">
          {data.stepsSubtitle && (
            <span className="block text-base tracking-widest text-[#ffffff]/50 mb-3">
              {data.stepsSubtitle}
            </span>
          )}
          <h2 className="font-mono text-3xl md:text-4xl lg:text-[42px]">
            {data.stepsTitle}
          </h2>
        </div>

        {/* Timeline */}
        <div className="relative">
          {/* Main horizontal line */}
          <div className="hidden lg:block absolute left-0 right-0 top-1/2 -translate-y-1/2">
            <svg width="1362" height="12" viewBox="0 0 1362 12" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-full">
                <path d="M10 4.77344L-5.04736e-07 -6.53267e-05L5.04736e-07 11.5469L10 6.77344L10 4.77344ZM1352 6.77332L1362 11.5468L1362 -0.000184397L1352 4.77332L1352 6.77332ZM9 5.77344L9 6.77344L1353 6.77332L1353 5.77332L1353 4.77332L9 4.77344L9 5.77344Z" fill="white"/>
            </svg>
          </div>

          {/* TOP ROW */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-12 mb-0 lg:mb-[120px]">
            {topSteps.map((step, i) => (
              <div key={i} className="relative text-center">
                {/* Connector */}
                <div className="hidden lg:block absolute left-1/2 top-full -translate-x-1/2">
                    <svg width="11" height="63" viewBox="0 0 11 63" fill="none" xmlns="http://www.w3.org/2000/svg" className="overflow-visible">
                        <path d="M-0.00130224 5.33301C-0.00130224 8.27853 2.38651 10.6663 5.33203 10.6663C8.27755 10.6663 10.6654 8.27853 10.6654 5.33301C10.6654 2.38749 8.27755 -0.00032568 5.33203 -0.00032568C2.38651 -0.00032568 -0.00130224 2.38749 -0.00130224 5.33301ZM4.33203 61.333V62.333H6.33203V61.333H5.33203H4.33203ZM5.33203 5.33301H4.33203V61.333H5.33203H6.33203V5.33301H5.33203Z" fill="white"/>
                    </svg>
                </div>

                <h4 className="font-mono font-medium text-xl lg:text-xl mt-4 mb-2">{step.title}</h4>
                {step.desc && (
                  <div
                    className="text-lg text-white/70 h-[80px]"
                    dangerouslySetInnerHTML={{ __html: step.desc }}
                  />
                )}
              </div>
            ))}
          </div>

          {/* BOTTOM ROW */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-12">
            {bottomSteps.map((step, i) => (
              <div key={i} className="relative text-center">
                {/* Connector */}
                <div className="hidden lg:block absolute left-1/2 bottom-full -translate-x-1/2">
                    <svg width="11" height="63" viewBox="0 0 11 63" fill="none" xmlns="http://www.w3.org/2000/svg" className="overflow-visible">
                        <path d="M6.33203 1C6.33203 0.447715 5.88432 0 5.33203 0C4.77975 0 4.33203 0.447715 4.33203 1H5.33203H6.33203ZM-0.00130224 57C-0.00130224 59.9455 2.38651 62.3333 5.33203 62.3333C8.27755 62.3333 10.6654 59.9455 10.6654 57C10.6654 54.0545 8.27755 51.6667 5.33203 51.6667C2.38651 51.6667 -0.00130224 54.0545 -0.00130224 57ZM5.33203 1H4.33203V57H5.33203H6.33203V1H5.33203Z" fill="white"/>
                    </svg>
                </div>

                <h4 className="font-mono font-medium text-xl lg:text-xl mt-4 mb-2">{step.title}</h4>
                {step.desc && (
                  <div
                    className="text-lg text-white/70 h-[80px]"
                    dangerouslySetInnerHTML={{ __html: step.desc }}
                  />
                )}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}