import type { VitalStatsData, VitalStatCardData } 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%)"
const cardRadialOverlay = `url("data:image/svg+xml;utf8,<svg viewBox='0 0 351 205' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%25' width='100%25' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(16.107 -15.483 26.509 14.405 146.17 172.05)'><stop stop-color='rgba(219,233,255,0)' offset='0'/><stop stop-color='rgba(219,233,255,1)' offset='1'/></radialGradient></defs></svg>")`

function StatsCard({ icon, title, description }: VitalStatCardData) {
  return (
    <>
      <div
        className="relative rounded-2xl p-6 flex items-center overflow-clip h-[205px] md:hidden"
        style={{ backgroundImage: `${cardGradientMobile}, ${cardRadialOverlay}` }}
      >
        <div
          className="absolute pointer-events-none"
          style={{ right: "-40px", top: "50%", transform: "translateY(-50%) rotate(25deg)" }}
          aria-hidden="true"
        >
          <img
            src="/assets/vital-industries/vector-card-decorative.svg"
            alt=""
            loading="lazy"
            className="w-[297px] h-[286px]"
          />
        </div>
        <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-accent text-white text-[32px] leading-[1.04] tracking-[-0.96px] capitalize font-bold">
              {title}
            </p>
            <p className="text-white text-[14px] leading-[24px] capitalize">
              {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" }}
      >
        <div
          className="absolute flex items-center justify-center pointer-events-none"
          style={{
            right: "-136px",
            left: "calc(50% + 62px)",
            top: "calc(50% - 5px)",
            transform: "translate(-50%, -50%) rotate(0deg)",
          }}
          aria-hidden="true"
        >
          <img
            src="/assets/vital-industries/vector-card-decorative.svg"
            alt=""
            loading="lazy"
            className="w-[297px] h-[286px]"
          />
        </div>
        <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-accent text-white text-[40px] leading-[40px] capitalize font-bold">
              {title}
            </p>
            <p className="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 VitalStats({ data }: { data: VitalStatsData }) {
  const rows = chunk(data.cards, 3)
  return (
    <section className="w-full max-w-[1296px] mx-auto px-4 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-3 md:gap-6">
          {row.map((card, ci) => (
            <StatsCard key={`${ri}-${ci}`} {...card} />
          ))}
        </div>
      ))}
    </section>
  )
}