type ItemGroup = {
  items1?: string | null;
  items2?: string | null;
  items3?: string | null;
  items4?: string | null;
};

type ProcessMainTitle = {
  titleLabel1?: string | null;
  titleLabel2?: string | null;
  titleLabel3?: string | null;
};

export type DevelopmentProcessData = {
  developmentProcessTitle?: string | null;
  processMainTitle?: ProcessMainTitle | null;

  planningLabel?: string | null;
  planningItems?: ItemGroup | null;

  designLabel?: string | null;
  designItems?: ItemGroup | null;

  developmentLabel?: string | null;
  developmentItems?: ItemGroup | null;

  testingLabel?: string | null;
  testingItems?: ItemGroup | null;

  launchLabel?: string | null;
  launchItems?: ItemGroup | null;

  maintenanceLabel?: string | null;
  maintenanceItems?: ItemGroup | null;
};
type Props = {
  data: DevelopmentProcessData;
};

export default function DevelopmentProcess({ data }: Props) {
  const processTitles = {
    label1: data.processMainTitle?.titleLabel1 || "Explore",
    label2: data.processMainTitle?.titleLabel2 || "Implement",
    label3: data.processMainTitle?.titleLabel3 || "Execute",
  };


  return (
    <section className="bg-white py-20 md:py-28">
      <div className="container mx-auto px-4">

        <h2 className="text-2xl md:text-[40px] font-mono font-medium text-[#202020] text-center mb-16">
          {data.developmentProcessTitle ?? "Development Process"}
        </h2>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-5">

          <ProcessColumn
            title={processTitles.label1}
            blocks={[
              { label: data.planningLabel ?? "", items: data.planningItems ?? {} },
              { label: data.designLabel ?? "", items: data.designItems ?? {} },
            ]}
          />

          <ProcessColumn
            title={processTitles.label2}
            blocks={[
              { label: data.developmentLabel ?? "", items: data.developmentItems ?? {} },
              { label: data.testingLabel ?? "", items: data.testingItems ?? {} },
            ]}
          />

          <ProcessColumn
            title={processTitles.label3}
            blocks={[
              { label: data.launchLabel ?? "", items: data.launchItems ?? {} },
              { label: data.maintenanceLabel ?? "", items: data.maintenanceItems ?? {} },
            ]}
          />

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



type ProcessBlockData = {
  label: string;
  items: {
    items1?: string | null;
    items2?: string | null;
    items3?: string | null;
    items4?: string | null;
  };
};

type ColumnProps = {
  title: string;
  blocks: ProcessBlockData[];
};

function ProcessColumn({ title, blocks }: ColumnProps) {
  return (
    <div className="space-y-2">

      {/* MAIN PHASE LABEL */}
      <span className="inline-block bg-black text-white text-lg px-4 py-1 rounded">
        {title}
      </span>
      <div className="grid grid-cols-2 gap-5">
        {/* SUB BLOCKS */}
        {blocks.map((block, index) => (
          <div
            key={index}
            className=""
          >
            <h4 className="border border-[#202020]/15 rounded-r-md p-3 bg-[#f3f3f3] text-[#202020] text-lg font-medium">
              {block.label}
            </h4>

            <ul className="space-y-2 border-l border-[#202020]/15 text-sm p-3 text-[#202020] font-medium">
              {Object.values(block.items)
                .filter(Boolean)
                .map((item, i) => (
                  <li key={i}>{item}</li>
                ))}
            </ul>
          </div>
        ))}
      </div>
    </div>
  );
}