"use client"

import type { CareersDemographicsData } from '@/lib/strapi/types'

const FALLBACK_STATS = [
  {
    icon: '/assets/careers/demographics/icon-employees-15.svg',
    value: '200+',
    label: 'Number of Employees (15+ year)',
  },
  {
    icon: '/assets/careers/demographics/icon-employees-30.svg',
    value: '300+',
    label: 'Number of Employees (30+ year)',
  },
  {
    icon: '/assets/careers/demographics/icon-avg-age.svg',
    value: '32+',
    label: 'Avg Age Group',
  },
]

const FALLBACK_DESCRIPTION =
  'We celebrate a diverse workforce that reflects our core values. We seek passionate team members eager to drive positive change across our varied business sectors.'

export default function EmployeeDemographicsSection({ data }: { data?: CareersDemographicsData } = {}) {
  const badge = data?.badge ?? 'Our Employee Demographics'
  const badgeIcon = data?.badgeIcon ?? '/assets/careers/icon-sparkle.svg'
  const description = data?.description ?? FALLBACK_DESCRIPTION
  const teamImage = data?.teamImage ?? '/assets/careers/demographics/team-photo-3.png'
  const stats = data?.stats ?? FALLBACK_STATS

  return (
    <section className="bg-[#f4f7fb] py-[40px] lg:py-[64px]">
      <div className="max-w-[1440px] mx-auto px-[20px] lg:px-[72px]">
        {/* Header */}
        <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-[20px] lg:gap-[24px]">
          {/* Badge */}
          <div className="inline-flex items-center gap-[8px] bg-[#ebebeb] rounded-full px-[24px] py-[12px] self-start shrink-0">
            <img
              src={badgeIcon}
              alt=""
              className="w-[17px] h-[16px]"
            />
            <span
              className="font-heading text-[16px] text-black uppercase leading-none"
            >
              {badge}
            </span>
          </div>

          {/* Description */}
          <div className="flex flex-col gap-[16px] lg:gap-[24px] lg:max-w-[510px]">
            <p
              className="font-sans text-[16px] leading-[1.5] lg:leading-[24px] text-[rgba(35,35,35,0.6)] lg:text-[#4a5565] font-medium lg:font-normal"
            >
              {description}
            </p>
            <div className="w-full h-px bg-[rgba(42,48,54,0.2)]" />
          </div>
        </div>

        {/* Content Area */}
        <div className="flex flex-col lg:flex-row gap-[24px] lg:gap-[24px] mt-[32px] lg:mt-[40px] lg:items-end">
          {/* Stat Cards - left on desktop, below image on mobile */}
          <div className="flex flex-col gap-[20px] lg:gap-[24px] lg:w-[416px] lg:shrink-0 order-2 lg:order-1">
            {stats.map((stat, i) => (
              <div
                key={stat.value ?? i}
                className="relative overflow-hidden rounded-[16px] p-[20px] lg:p-[24px] h-[170px] lg:h-auto"
                style={{ backgroundImage:
                    'linear-gradient(170deg, rgb(156, 29, 53) 12.14%, rgb(210, 0, 16) 90.25%)',
                }}
              >
                {/* Decorative background */}
                <img
                  src="/assets/careers/icon-sparkle.svg"
                  alt=""
                  className="absolute pointer-events-none"
                  style={{ width: 297,
                    height: 286,
                    top: -100,
                    right: -80,
                    transform: 'rotate(25deg)',
                    opacity: 0.05,
                  }}
                />

                {/* Card content */}
                <div className="relative z-10 flex flex-col justify-between h-full lg:flex-row lg:items-start lg:gap-[40px]">
                  {/* Mobile layout: icon top, then value+label bottom */}
                  <div className="lg:hidden flex flex-col justify-between h-full">
                    <img
                      src={stat.icon}
                      alt=""
                      className="w-[45px] h-[45px]"
                    />
                    <div className="flex flex-col gap-[8px]">
                      <p
                        className="font-heading text-[32px] leading-[1.04] tracking-[-0.96px] text-white font-bold"
                      >
                        {stat.value}
                      </p>
                      <p
                        className="font-sans text-[14px] leading-[24px] text-white font-normal"
                      >
                        {stat.label}
                      </p>
                    </div>
                  </div>

                  {/* Desktop layout: icon left, value+label right */}
                  <img
                    src={stat.icon}
                    alt=""
                    className="hidden lg:block w-[45px] h-[45px] shrink-0"
                  />
                  <div className="hidden lg:flex flex-col gap-[8px] flex-1">
                    <p
                      className="font-heading text-[40px] leading-[40px] text-white font-bold capitalize"
                    >
                      {stat.value}
                    </p>
                    <p
                      className="font-sans text-[16px] leading-[25px] text-[rgba(255,255,255,0.7)] capitalize"
                    >
                      {stat.label}
                    </p>
                  </div>
                </div>
              </div>
            ))}
          </div>

          {/* Image - right on desktop, above cards on mobile */}
          <div className="flex-1 h-[411px] rounded-[16px] overflow-hidden order-1 lg:order-2">
            <img
              src={teamImage}
              alt="Team collaboration"
              loading="lazy"
              className="w-full h-full object-cover"
            />
          </div>
        </div>
      </div>
    </section>
  )
}