import { Fragment } from "react"
import type { VitalPackagingData } from "@/lib/strapi/types"

function chunk<T>(arr: T[], size: number): T[][] {
  const rows: T[][] = []
  for (let i = 0; i < arr.length; i += size) rows.push(arr.slice(i, i + size))
  return rows
}

function Bullet({ bullet, mobile }: { bullet: string; mobile: boolean }) {
  const parts = bullet.split(" – ")
  const title = parts[0]
  const desc = parts[1] ? " – " + parts.slice(1).join(" – ") : ""
  return (
    <div className={`flex gap-${mobile ? "[15px]" : "6"} items-center`}>
      <img
        src="/assets/vital-industries/vector-badge-red.svg"
        alt=""
        loading="lazy"
        className="w-[17px] h-[16px] shrink-0"
      />
      <p className={`font-sans text-[#4a5565] ${mobile ? "text-[14px]" : "text-[20px]"} leading-[24px]`}>
        <span className="font-heading font-bold text-[#101828]">{title}</span>
        {desc}
      </p>
    </div>
  )
}

export default function VitalPackaging({ data }: { data: VitalPackagingData }) {
  const statPairs = chunk(data.stats, 2)

  return (
    <section className="w-full max-w-[1296px] mx-auto px-4 md:px-6 py-8">
      <div className="flex flex-col gap-5 md:gap-6 md:items-end">
        <div className="flex flex-col md:flex-row md:items-start md:justify-between w-full gap-5 md:gap-0">
          <div className="bg-[#ebebeb] rounded-full px-6 py-3 flex gap-2 items-center w-fit">
            <img
              src={data.badgeIcon}
              alt=""
              loading="lazy"
              className="w-[17px] h-[16px]"
            />
            <span className="font-heading text-black text-[16px] leading-none uppercase">
              {data.badge}
            </span>
          </div>
          <div className="flex flex-col gap-4 md:gap-6 md:w-[52%]">
            <p className="font-sans text-[rgba(32,38,43,0.6)] md:text-[#4a5565] text-[16px] leading-[1.5] md:leading-[24px] font-medium">
              {data.description}
            </p>
            <div className="w-full h-0 border-t border-[#e5e7eb]" />
          </div>
        </div>

        <div className="flex flex-col lg:flex-row gap-5 lg:gap-6 lg:items-stretch items-start w-full">
          <div className="flex flex-col gap-5 lg:gap-6 w-full lg:flex-1">
            {statPairs.map((pair, pi) => (
              <div
                key={pi}
                className="relative rounded-2xl px-4 py-10 lg:p-10 overflow-hidden flex-1"
                style={{
                  background:
                    "radial-gradient(ellipse at 42% 84%, rgba(255,232,233,0) 0%, rgba(255,232,233,1) 100%)",
                }}
              >
                <div
                  className="absolute pointer-events-none lg:hidden"
                  style={{ left: "148px", top: "-144px" }}
                  aria-hidden="true"
                >
                  <img
                    src="/assets/vital-industries/vector-decorative-light.svg"
                    alt=""
                    loading="lazy"
                    className="w-[267px] h-[257px]"
                    style={{ transform: "rotate(-48.53deg)" }}
                  />
                </div>
                <div
                  className="absolute right-[-175px] top-[-125px] hidden lg:flex items-center justify-center pointer-events-none"
                  aria-hidden="true"
                >
                  <img
                    src="/assets/vital-industries/vector-decorative-light.svg"
                    alt=""
                    loading="lazy"
                    className="w-[297px] h-[286px] rotate-[25deg]"
                  />
                </div>
                <div className="flex flex-nowrap gap-3 md:gap-5 lg:gap-8 items-start relative w-full">
                  {pair.map((stat, si) => (
                    <Fragment key={si}>
                      {si > 0 ? (
                        <div className="w-px bg-[#e5e7eb] shrink-0 h-[87px] lg:h-auto lg:self-stretch" />
                      ) : null}
                      <div className="flex-1 flex flex-col gap-1 lg:gap-2 min-w-0">
                        <p className="font-heading font-bold text-[#2a3036] text-[clamp(16px,4vw,18px)] md:text-[24px] lg:text-[32px] leading-[1.2] lg:leading-[40px] capitalize whitespace-nowrap overflow-hidden text-ellipsis">
                          {stat.value}
                        </p>
                        <p className="text-[rgba(42,48,54,0.7)] lg:text-[rgba(16,36,67,0.7)] text-[12px] md:text-[14px] lg:text-[16px] leading-[1.4] md:leading-[25px]">
                          {stat.label}
                        </p>
                      </div>
                    </Fragment>
                  ))}
                </div>
              </div>
            ))}
          </div>

          <div
            className="relative rounded-2xl overflow-clip w-full lg:hidden"
            style={{
              backgroundImage:
                "radial-gradient(ellipse at 42% 84%, rgba(244,247,251,0) 0%, rgba(244,247,251,1) 100%), radial-gradient(ellipse at 42% 84%, rgba(255,232,233,0) 0%, rgba(255,232,233,1) 100%)",
            }}
          >
            <div
              className="absolute pointer-events-none"
              style={{ right: "-80px", top: "-82px" }}
              aria-hidden="true"
            >
              <img
                src="/assets/vital-industries/vector-decorative-light.svg"
                alt=""
                loading="lazy"
                className="w-[343px] h-[311px] rotate-[25deg]"
              />
            </div>
            <div className="relative flex flex-col gap-6 w-full max-w-[319px] mx-auto py-8 px-4">
              <p className="font-heading text-[#101828] text-[16px] leading-[24px] font-medium">
                {data.companyInfoLabel}
              </p>
              <div className="flex flex-col gap-4">
                {data.bullets.map((bullet, i) => (
                  <Bullet key={i} bullet={bullet} mobile />
                ))}
              </div>
            </div>
          </div>

          <div
            className="relative rounded-2xl p-10 flex-1 overflow-hidden hidden lg:block"
            style={{
              background:
                "radial-gradient(at 42% 84%, rgba(244, 247, 251, 0) 0%, rgb(221 228 238) 100%)",
            }}
          >
            <div className="flex flex-col gap-4 relative">
              {data.bullets.map((bullet, i) => (
                <Bullet key={i} bullet={bullet} mobile={false} />
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}