import type { LogisticsStatsData, LogisticsStatCardData } from "@/lib/strapi/types"

const cardGradient = "linear-gradient(159.3deg, rgb(42, 48, 54) 16.68%, rgb(27, 31, 35) 95.23%)"
const cardGradientMobile = "linear-gradient(163.7deg, rgb(42, 48, 54) 16.68%, rgb(27, 31, 35) 95.23%)"

function StatsCard({ icon, title, description }: LogisticsStatCardData) {
  return (
    <>
      <div
        className="relative rounded-2xl p-6 flex items-center overflow-clip h-[205px] md:hidden"
        style={{ background: cardGradientMobile }}
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="297"
          height="286"
          viewBox="0 0 135 231"
          fill="none"
          className="absolute pointer-events-none"
          style={{ right: -130, top: -50, transform: "rotate(24.975deg)" }}
          aria-hidden="true"
        >
          <path d="M128.255 126.951C133.027 122.394 128.13 114.568 121.945 116.867L3.9601 160.712C0.353847 162.052 -1.11345 166.365 0.927358 169.626L27.8948 212.722C29.9356 215.983 34.456 216.549 37.238 213.892L128.255 126.951Z" fill="white" fillOpacity="0.03" />
          <path d="M154.874 101.362C150.937 106.658 142.569 102.76 144.09 96.3394L173.098 -26.1406C173.985 -29.8843 178.085 -31.8707 181.572 -30.2463L227.656 -8.78115C231.143 -7.15675 232.261 -2.74021 229.966 0.347351L154.874 101.362Z" fill="white" fillOpacity="0.03" />
          <path d="M141.842 133.505C142.196 126.916 151.324 125.54 153.605 131.732L197.117 249.84C198.447 253.45 196.128 257.371 192.324 257.945L142.055 265.523C138.25 266.097 134.878 263.034 135.085 259.192L141.842 133.505Z" fill="white" fillOpacity="0.03" />
          <path d="M134.693 97.2677C138.376 102.743 131.914 109.335 126.367 105.764L20.5339 37.6295C17.299 35.5469 16.7911 31.0196 19.484 28.272L55.0685 -8.03525C57.7614 -10.7829 62.298 -10.366 64.4452 -7.17375L134.693 97.2677Z" fill="white" fillOpacity="0.03" />
          <path d="M161.13 109.582C154.57 110.286 153.681 119.474 159.985 121.422L280.238 158.596C283.914 159.732 287.707 157.208 288.077 153.378L292.973 102.777C293.344 98.9476 290.106 95.743 286.28 96.1535L161.13 109.582Z" fill="white" fillOpacity="0.03" />
        </svg>
        <div className="relative flex flex-col items-start justify-between h-[173px] w-full">
          <img src={icon} alt="" loading="lazy" className="w-[45px] h-[45px]" />
          <div className="flex flex-col gap-2 w-full">
            <p className="font-heading text-white text-[32px] leading-[1.04] tracking-[-0.96px] font-bold">
              {title}
            </p>
            <p className="font-sans text-white text-[14px] leading-[24px]">
              {description}
            </p>
          </div>
        </div>
      </div>

      <div
        className="relative hidden md:flex flex-1 min-w-[280px] rounded-2xl p-6 items-center justify-between min-h-[231px]"
        style={{ background: cardGradient, overflow: "clip" }}
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="297"
          height="286"
          viewBox="0 0 135 231"
          fill="none"
          className="absolute pointer-events-none"
          style={{ right: -100, top: -127, transform: "rotate(47.975deg)" }}
          aria-hidden="true"
        >
          <path d="M128.255 126.951C133.027 122.394 128.13 114.568 121.945 116.867L3.9601 160.712C0.353847 162.052 -1.11345 166.365 0.927358 169.626L27.8948 212.722C29.9356 215.983 34.456 216.549 37.238 213.892L128.255 126.951Z" fill="white" fillOpacity="0.03" />
          <path d="M154.874 101.362C150.937 106.658 142.569 102.76 144.09 96.3394L173.098 -26.1406C173.985 -29.8843 178.085 -31.8707 181.572 -30.2463L227.656 -8.78115C231.143 -7.15675 232.261 -2.74021 229.966 0.347351L154.874 101.362Z" fill="white" fillOpacity="0.03" />
          <path d="M141.842 133.505C142.196 126.916 151.324 125.54 153.605 131.732L197.117 249.84C198.447 253.45 196.128 257.371 192.324 257.945L142.055 265.523C138.25 266.097 134.878 263.034 135.085 259.192L141.842 133.505Z" fill="white" fillOpacity="0.03" />
          <path d="M134.693 97.2677C138.376 102.743 131.914 109.335 126.367 105.764L20.5339 37.6295C17.299 35.5469 16.7911 31.0196 19.484 28.272L55.0685 -8.03525C57.7614 -10.7829 62.298 -10.366 64.4452 -7.17375L134.693 97.2677Z" fill="white" fillOpacity="0.03" />
          <path d="M161.13 109.582C154.57 110.286 153.681 119.474 159.985 121.422L280.238 158.596C283.914 159.732 287.707 157.208 288.077 153.378L292.973 102.777C293.344 98.9476 290.106 95.743 286.28 96.1535L161.13 109.582Z" fill="white" fillOpacity="0.03" />
        </svg>
        <div className="relative flex flex-col gap-10 items-start flex-1">
          <img src={icon} alt="" loading="lazy" className="w-[45px] h-[45px]" />
          <div className="flex flex-col gap-2 w-full">
            <p className="font-heading text-white text-[40px] leading-[40px] capitalize font-bold">
              {title}
            </p>
            <p className="font-sans text-[rgba(255,255,255,0.7)] text-[20px] leading-[25px] capitalize max-w-[285px]">
              {description}
            </p>
          </div>
        </div>
      </div>
    </>
  )
}

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
}

export default function LogisticsStats({ data }: { data: LogisticsStatsData }) {
  const rows = chunk(data.cards, 4)
  return (
    <section className="w-full max-w-[1296px] mx-auto px-5 md:px-6 py-8 md:py-16 flex flex-col gap-5 md:gap-6">
      <div className="flex flex-col md:hidden gap-5">
        {data.cards.map((card, i) => (
          <StatsCard key={i} {...card} />
        ))}
      </div>
      {rows.map((row, ri) => (
        <div key={ri} className="hidden md:grid md:grid-cols-4 md:gap-6">
          {row.map((card, ci) => (
            <StatsCard key={`${ri}-${ci}`} {...card} />
          ))}
        </div>
      ))}
    </section>
  )
}