import { Fragment } from "react"
import { strapiConfig } from "@/lib/strapi/config"
import type { LogisticsCompanyDetailsData } from "@/lib/strapi/types"

// Hardcoded icon for company points — sourced from the CMS uploads folder.
// Each point automatically gets this icon placed next to it when added in Strapi.
const POINT_ICON = `${strapiConfig.url}/uploads/icon_hope_452bbc9600.svg`

export default function LogisticsCompanyDetails({ data }: { data: LogisticsCompanyDetailsData }) {
  return (
    <section className="w-full max-w-[1296px] mx-auto px-5 md:px-6 py-8">
      <div className="flex flex-col md:flex-row md:items-start md:justify-between mb-[91px] md:mb-[25px] gap-5 md:gap-8">
        <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:max-w-[453px]">
          <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="relative">
        <p
          className="font-heading font-bold absolute -top-10 left-0 text-[rgba(16,36,67,0.13)] text-[64px] leading-[0.75] tracking-[-1.83px] pointer-events-none select-none md:hidden w-[353px]"
          aria-hidden="true"
        >
          {data.watermarkText}
        </p>
        <p
          className="font-heading font-bold absolute top-[-150px] left-0 text-[rgba(16,36,67,0.13)] text-[140px] leading-[0.75] tracking-[-4px] pointer-events-none select-none hidden lg:block"
          style={{ maxWidth: "800px" }}
          aria-hidden="true"
        >
          {data.watermarkText}
        </p>

        <div className="flex flex-col lg:flex-row gap-8 items-start lg:items-end">
          <div className="lcd-map relative w-full md:w-[580px] aspect-square shrink-0 mt-[70px] md:mt-0">
            <img
              src={data.mapImage}
              alt="MGM Map showing port locations"
              loading="lazy"
              className="w-full h-full object-contain"
            />
          </div>

          <div className="flex flex-col gap-5 md:gap-6 flex-1 w-full">
            <div
              className="relative rounded-2xl p-4 md:p-10 overflow-hidden"
              style={{
                background:
                  "radial-gradient(103.16% 88.37% at 41.64% 83.93%, rgba(244, 247, 251, 1) 10%, #F4F7FB 100%)",
              }}
            >
              <h3 className="font-heading text-[#101828] text-[16px] md:text-[24px] leading-[24px] font-medium mb-6">
                {data.companyInfoLabel}
              </h3>
              <div className="flex flex-col gap-4 relative">
                {data.companyPoints.map((point, i) => (
                  <div key={i} className="flex gap-[15px] md:gap-6 items-center">
                    <img
                      src={POINT_ICON}
                      alt=""
                      loading="lazy"
                      className="w-[17px] h-[16px] shrink-0"
                    />
                    <p className="font-sans text-[#4a5565] text-[14px] md:text-[20px] leading-[24px] font-medium">
                      {point}
                    </p>
                  </div>
                ))}
              </div>
            </div>

            <div
              className="relative rounded-2xl px-4 py-10 md:p-10 md:flex md:flex-col overflow-hidden"
              style={{
                background:
                  "radial-gradient(ellipse at 42% 84%, rgba(255,232,233,0) 0%, rgba(255,232,233,1) 100%)",
              }}
            >
              <h3 className="font-heading text-[#2a3036] text-[18px] md:text-[20px] leading-none font-semibold mb-6 md:mb-[28px]">
                {data.divisionOverviewLabel}
              </h3>

              <div className="flex flex-col gap-5 md:hidden relative">
                {data.divisionOverview.map((item, i) => (
                  <Fragment key={i}>
                    {i > 0 ? (
                      <div className="w-full h-0 border-t border-dashed border-[#d0d5dd]" />
                    ) : null}
                    <div className="flex flex-col gap-1 capitalize">
                      <p className="font-heading text-[#2a3036] text-[24px] leading-[40px]">
                        {item.value}
                      </p>
                      <p className="font-sans text-[rgba(42,48,54,0.7)] text-[16px] leading-[25px]">
                        {item.label}
                      </p>
                    </div>
                  </Fragment>
                ))}
              </div>

              <div className="hidden md:grid md:grid-cols-2 gap-6 lg:gap-8 items-start relative w-full">
                {data.divisionOverview.map((item, i) => (
                  <div key={i} className="flex flex-col gap-2 w-full">
                    <p className="font-heading text-[#2a3036] text-[26px] lg:text-[28px] leading-[36px] capitalize whitespace-nowrap">
                      {item.value}
                    </p>
                    <p className="font-sans text-[rgba(42,48,54,0.7)] text-[16px] leading-[25px]">
                      {item.label}
                    </p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}