"use client"

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

type IconStyle = { width: number; height: number; top: number; right: number }
type RenderCard = { icon: string; title: string; description: string; iconStyle: IconStyle }

const FALLBACK_CARDS: RenderCard[] = [
  {
    title: 'Career Growth',
    description: ' Continuous learning opportunities with clear paths for career advancement.',
    icon: '/assets/careers/icon-career-growth.svg',
    iconStyle: { width: 142, height: 125, top: 25, right: 85 },
  },
  {
    title: 'Competitive Benefits',
    description: 'Comprehensive compensation packages with performance-based rewards.',
    icon: '/assets/careers/icon-competitive-benefits.svg',
    iconStyle: { width: 142, height: 104, top: 25, right: 85 },
  },
  {
    title: 'Diverse Culture',
    description: 'Collaborate with talented professionals across varied industries.',
    icon: '/assets/careers/icon-diverse-culture.svg',
    iconStyle: { width: 142, height: 104, top: 25, right: 85 },
  },
  {
    title: 'Work-Life Balance',
    description: ' Flexible work options and strong focus on employee wellness and balance.',
    icon: '/assets/careers/icon-work-life-balance.svg',
    iconStyle: { width: 142, height: 122, top: 25, right: 85 },
  },
]

export default function WhyWorkWithUsSection({ data }: { data?: CareersWhyWorkUsData } = {}) {
  const badge = data?.badge ?? 'Why Work With Us'
  const badgeIcon = data?.badgeIcon ?? '/assets/careers/icon-sparkle.svg'
  const sourceCards = data?.cards ?? FALLBACK_CARDS
  const cards: RenderCard[] = sourceCards.map((c, i) => ({
    icon: c.icon,
    title: c.title,
    description: c.description,
    iconStyle: FALLBACK_CARDS[i]?.iconStyle ?? FALLBACK_CARDS[0].iconStyle,
  }))

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

        {/* Cards Grid */}
        <div className="flex flex-col lg:flex-row gap-[20px] lg:gap-[24px]">
          {cards.map((card) => (
            <div
              key={card.title}
              className="relative flex flex-col justify-end overflow-hidden rounded-[16px] h-[205px] lg:h-[299px] lg:flex-1 p-[24px] border border-[rgba(229,231,235,0.5)]"
              style={{ backgroundImage:
                  'linear-gradient(154deg, rgb(42, 48, 54) 16.68%, rgb(27, 31, 35) 95.23%)',
              }}
            >
              {/* Background Icon */}
              <img
                src={card.icon}
                alt=""
                className="absolute opacity-100 pointer-events-none"
                style={{ width: card.iconStyle.width,
                  height: card.iconStyle.height,
                  top: card.iconStyle.top,
                  right: card.iconStyle.right,
                }}
              />

              {/* Content */}
              <div className="relative z-10 flex flex-col gap-[8px] lg:gap-[16px] text-white">
                <h3
                  className="font-heading text-[24px] leading-[1.04] lg:leading-[40px] tracking-[-0.96px] lg:tracking-[-0.64px] font-bold"
                >
                  {card.title}
                </h3>
                <p
                  className="font-sans text-[14px] lg:text-[16px] leading-[24px] lg:leading-[18px] font-normal"
                >
                  {card.description}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}