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

export type DevelopmentTeamData = {
  clientLogo?: ImageNode;

  developmentTitle?: string | null;
  developmentDescription?: string | null;

  resourcesLabel?: string | null;
  resourcesMembers?: string | null;

  timeLabel?: string | null;
  months?: string | null;
};

type Props = {
  data: DevelopmentTeamData;
};

export default function DevelopmentTeam({ data }: Props) {
  return (
    <section className="relative bg-[#f3f3f3] py-5 md:py-5">
      <div className="relative bg-[#f3f3f3] rounded-[24px] container mx-auto p-4 md:mt-[-120px] md:p-5 lg:p-5">
        <div className="bg-white rounded-lg border border-[#202020]/15 px-6 py-12 md:px-6 md:py-8 text-center">

          {/* LOGO */}
          {data.clientLogo?.node?.sourceUrl && (
            <div className="flex justify-center mb-6">
              <div className="w-[184px] overflow-hidden flex items-center justify-center">
                <Image
                  src={data.clientLogo.node.sourceUrl}
                  alt={data.clientLogo.node.altText || "Client Logo"}
                  width={96}
                  height={96}
                  unoptimized
                  className="w-[160px] h-[106px] object-cover"
                />
              </div>
            </div>
          )}

          {/* TITLE */}
          <h2 className="text-2xl md:text-4xl font-mono font-medium text-[#202020] mb-4">
            {data.developmentTitle ?? "Development Team and Time"}
          </h2>

          {/* DESCRIPTION */}
          {data.developmentDescription && (
            <p className="text-sm md:text-lg font-medium text-[#202020] max-w-5xl mx-auto mb-10">
              {data.developmentDescription}
            </p>
          )}

          {/* STATS */}
          <div className="flex flex-col sm:flex-row justify-center gap-8 sm:gap-24">

            {/* RESOURCES */}
            <div className="flex items-center gap-2">
              <IconBox>
                <UsersIcon />
              </IconBox>

              <div className="text-left">
                <p className="text-lg md:text-[20px] text-[#202020]/50">
                  {data.resourcesLabel ?? "Number of Resources"}
                </p>
                <p className="text-lg md:text-2xl font-mono font-medium text-[#202020]">
                  {data.resourcesMembers ?? "-"}
                </p>
              </div>
            </div>

            {/* TIME */}
            <div className="flex items-center gap-2">
              <IconBox>
                <CalendarIcon />
              </IconBox>

              <div className="text-left">
                <p className="text-lg md:text-[20px] text-[#202020]/50">
                  {data.timeLabel ?? "Time Frame"}
                </p>
                <p className="text-lg md:text-2xl font-mono font-medium text-[#202020]">
                  {data.months ?? "-"}
                </p>
              </div>
            </div>

          </div>
        </div>
      </div>
    </section>
  );
}
function IconBox({ children }: { children: React.ReactNode }) {
  return (
    <div className="w-16 h-16 rounded bg-[#202020] flex items-center justify-center text-white">
      {children}
    </div>
  );
}
function UsersIcon() {
  return (
    <svg width="64" height="64" viewBox="0 0 64 64" fill="currentColor" xmlns="http://www.w3.org/2000/svg" className="shrink-0">
      <rect width="64" height="64" rx="8" fill="#202020"/>
      <path d="M31.9948 28.6663C33.7629 28.6663 35.4586 27.964 36.7088 26.7137C37.9591 25.4635 38.6615 23.7678 38.6615 21.9997C38.6615 20.2316 37.9591 18.5359 36.7088 17.2856C35.4586 16.0354 33.7629 15.333 31.9948 15.333C30.2267 15.333 28.531 16.0354 27.2807 17.2856C26.0305 18.5359 25.3281 20.2316 25.3281 21.9997C25.3281 23.7678 26.0305 25.4635 27.2807 26.7137C28.531 27.964 30.2267 28.6663 31.9948 28.6663ZM21.1615 33.6663C22.2665 33.6663 23.3263 33.2274 24.1077 32.446C24.8891 31.6646 25.3281 30.6047 25.3281 29.4997C25.3281 28.3946 24.8891 27.3348 24.1077 26.5534C23.3263 25.772 22.2665 25.333 21.1615 25.333C20.0564 25.333 18.9966 25.772 18.2152 26.5534C17.4338 27.3348 16.9948 28.3946 16.9948 29.4997C16.9948 30.6047 17.4338 31.6646 18.2152 32.446C18.9966 33.2274 20.0564 33.6663 21.1615 33.6663ZM46.9948 29.4997C46.9948 30.6047 46.5558 31.6646 45.7744 32.446C44.993 33.2274 43.9332 33.6663 42.8281 33.6663C41.7231 33.6663 40.6632 33.2274 39.8818 32.446C39.1004 31.6646 38.6615 30.6047 38.6615 29.4997C38.6615 28.3946 39.1004 27.3348 39.8818 26.5534C40.6632 25.772 41.7231 25.333 42.8281 25.333C43.9332 25.333 44.993 25.772 45.7744 26.5534C46.5558 27.3348 46.9948 28.3946 46.9948 29.4997ZM31.9948 30.333C34.2049 30.333 36.3245 31.211 37.8873 32.7738C39.4502 34.3366 40.3281 36.4562 40.3281 38.6663V48.6663H23.6615V38.6663C23.6615 36.4562 24.5394 34.3366 26.1022 32.7738C27.665 31.211 29.7847 30.333 31.9948 30.333ZM20.3281 38.6663C20.3281 37.5113 20.4948 36.3963 20.8081 35.343L20.5248 35.3663C19.0963 35.5232 17.7759 36.2019 16.8169 37.2722C15.8579 38.3425 15.3278 39.7292 15.3281 41.1663V48.6663H20.3281V38.6663ZM48.6615 48.6663V41.1663C48.6616 39.6803 48.0947 38.2502 47.0762 37.168C46.0578 36.0858 44.6648 35.433 43.1815 35.343C43.4931 36.3963 43.6615 37.5113 43.6615 38.6663V48.6663H48.6615Z" fill="white"/>
    </svg>
  );
}

function CalendarIcon() {
  return (
    <svg width="64" height="64" viewBox="0 0 64 64" fill="currentColor" xmlns="http://www.w3.org/2000/svg" className="shrink-0">
      <rect width="64" height="64" rx="8" fill="#202020"/>
      <path fillRule="evenodd" clipRule="evenodd" d="M38.6667 17C39.1087 17 39.5326 17.1756 39.8452 17.4882C40.1577 17.8007 40.3333 18.2246 40.3333 18.6667V20.3333H43.6667C44.5507 20.3333 45.3986 20.6845 46.0237 21.3096C46.6488 21.9348 47 22.7826 47 23.6667V32.88C45.0949 31.177 42.6101 30.2679 40.0557 30.3394C37.5014 30.4109 35.0713 31.4575 33.2644 33.2644C31.4575 35.0713 30.4109 37.5014 30.3394 40.0557C30.2679 42.6101 31.177 45.0949 32.88 47H20.3333C19.4493 47 18.6014 46.6488 17.9763 46.0237C17.3512 45.3986 17 44.5507 17 43.6667V23.6667C17 22.7826 17.3512 21.9348 17.9763 21.3096C18.6014 20.6845 19.4493 20.3333 20.3333 20.3333H23.6667V18.6667C23.6667 18.2246 23.8423 17.8007 24.1548 17.4882C24.4674 17.1756 24.8913 17 25.3333 17C25.7754 17 26.1993 17.1756 26.5118 17.4882C26.8244 17.8007 27 18.2246 27 18.6667V20.3333H37V18.6667C37 18.2246 37.1756 17.8007 37.4882 17.4882C37.8007 17.1756 38.2246 17 38.6667 17ZM40.3333 33.6667C42.1014 33.6667 43.7971 34.369 45.0474 35.6193C46.2976 36.8695 47 38.5652 47 40.3333C47 42.1014 46.2976 43.7971 45.0474 45.0474C43.7971 46.2976 42.1014 47 40.3333 47C38.5652 47 36.8695 46.2976 35.6193 45.0474C34.369 43.7971 33.6667 42.1014 33.6667 40.3333C33.6667 38.5652 34.369 36.8695 35.6193 35.6193C36.8695 34.369 38.5652 33.6667 40.3333 33.6667ZM40.3333 36.1667C39.9251 36.1667 39.5311 36.3166 39.226 36.5879C38.921 36.8591 38.7261 37.2329 38.6783 37.6383L38.6667 37.8333V40.3333C38.6667 40.7416 38.8166 41.1356 39.0879 41.4406C39.3591 41.7457 39.7329 41.9406 40.1383 41.9883L40.3333 42H42C42.4248 41.9995 42.8334 41.8369 43.1423 41.5453C43.4512 41.2536 43.6371 40.8551 43.662 40.431C43.6868 40.0069 43.5489 39.5894 43.2762 39.2636C43.0036 38.9379 42.6168 38.7285 42.195 38.6783L42 38.6667V37.8333C42 37.3913 41.8244 36.9674 41.5118 36.6548C41.1993 36.3423 40.7754 36.1667 40.3333 36.1667ZM26.1667 35.3333H25.3333C24.8913 35.3333 24.4674 35.5089 24.1548 35.8215C23.8423 36.134 23.6667 36.558 23.6667 37C23.6667 37.442 23.8423 37.8659 24.1548 38.1785C24.4674 38.4911 24.8913 38.6667 25.3333 38.6667H26.1667C26.6087 38.6667 27.0326 38.4911 27.3452 38.1785C27.6577 37.8659 27.8333 37.442 27.8333 37C27.8333 36.558 27.6577 36.134 27.3452 35.8215C27.0326 35.5089 26.6087 35.3333 26.1667 35.3333ZM30.3333 28.6667H25.3333C24.9085 28.6671 24.4999 28.8298 24.1911 29.1214C23.8822 29.413 23.6963 29.8116 23.6714 30.2357C23.6465 30.6597 23.7845 31.0773 24.0571 31.4031C24.3298 31.7288 24.7165 31.9382 25.1383 31.9883L25.3333 32H30.3333C30.7581 31.9995 31.1667 31.8369 31.4756 31.5453C31.7845 31.2536 31.9704 30.8551 31.9953 30.431C32.0202 30.0069 31.8822 29.5894 31.6096 29.2636C31.3369 28.9379 30.9502 28.7285 30.5283 28.6783L30.3333 28.6667Z" fill="white"/>
    </svg>
  );
}