"use client"

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

const FALLBACK_STEPS = [
  {
    number: '01',
    title: 'Apply Online',
    description: 'Submit your application through our portal.',
  },
  {
    number: '02',
    title: 'Initial Review',
    description: 'Our team evaluates your qualifications.',
  },
  {
    number: '03',
    title: 'Interview',
    description: 'Meet our hiring managers for discussion.',
  },
  {
    number: '04',
    title: 'Welcome Aboard',
    description: 'Join the MGM family and begin your journey!',
  },
]

function HorizontalArrow() {
  return (
    <div className="flex items-center flex-1 min-w-[40px]">
      <div className="h-px flex-1 bg-[rgba(42,48,54,0.15)]" />
      <div className="h-[6px] w-[6px] rounded-full bg-[rgba(42,48,54,0.2)] shrink-0" />
    </div>
  )
}

function VerticalArrow() {
  return (
    <svg
      width="6"
      height="39"
      viewBox="0 0 6 39"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className="lg:hidden ml-[35px]"
    >
      <line
        x1="3"
        y1="0"
        x2="3"
        y2="34"
        stroke="rgba(42,48,54,0.15)"
        strokeWidth="1.5"
      />
      <circle cx="3" cy="36" r="3" fill="rgba(42,48,54,0.2)" />
    </svg>
  )
}

export default function ApplicationProcessSection({ data }: { data?: CareersApplicationProcessData } = {}) {
  const badge = data?.badge ?? 'Application Process'
  const badgeIcon = data?.badgeIcon ?? '/assets/careers/icon-sparkle.svg'
  const steps = data?.steps ?? FALLBACK_STEPS

  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="inline-flex items-center gap-[8px] bg-[#ebebeb] rounded-full px-[24px] py-[12px] mb-[20px] lg:mb-[40px]">
          <img
            src={badgeIcon}
            alt=""
            className="w-[17px] h-[16px]"
          />
          <span
            className="font-heading text-[16px] text-black uppercase leading-none"
          >
            {badge}
          </span>
        </div>

        {/* Desktop Layout - horizontal */}
        <div className="hidden lg:flex items-start">
          {steps.map((step, index) => (
            <div key={step.number ?? index} className="flex items-start flex-1 last:flex-none">
              {/* Step */}
              <div className="flex flex-col gap-[8px] w-[200px] shrink-0">
                <span
                  className="font-heading text-[128px] leading-[132px] tracking-[-5.12px] text-[rgba(42,48,54,0.04)] font-bold"
                  style={{ WebkitTextStrokeWidth: '1px', WebkitTextStrokeColor: 'rgba(42, 48, 54, 0.10)' }}
                >
                  {step.number}
                </span>
                <h3
                  className="font-heading text-[20px] leading-[24px] text-[#2a3036]"
                >
                  {step.title}
                </h3>
                <p
                  className="font-sans text-[16px] leading-[22px] text-[#4a5565] font-normal"
                >
                  {step.description}
                </p>
              </div>
              {/* Arrow between steps — flexible width, vertically centered on the big number (132px line-height) */}
              {index < steps.length - 1 && (
                <div className="flex items-center h-[132px] px-[16px] xl:px-[24px] flex-1">
                  <HorizontalArrow />
                </div>
              )}
            </div>
          ))}
        </div>

        {/* Mobile Layout - vertical */}
        <div className="lg:hidden bg-white rounded-[16px] px-[20px]">
          {steps.map((step, index) => (
            <div key={step.number ?? index}>
              {/* Step row */}
              <div className="flex items-center gap-[39px] py-[4px]">
                <span
                  className="font-heading text-[60px] leading-[132px] tracking-[-2.4px] text-[rgba(42,48,54,0.04)] font-bold w-[76px] shrink-0 text-center"
                  style={{ WebkitTextStrokeWidth: '1px', WebkitTextStrokeColor: 'rgba(42, 48, 54, 0.10)' }}
                >
                  {step.number}
                </span>
                <div className="flex flex-col gap-[12px]">
                  <h3
                    className="font-heading text-[20px] leading-[24px] text-[#2a3036]"
                  >
                    {step.title}
                  </h3>
                  <p
                    className="font-sans text-[16px] leading-[22px] text-[#4a5565] font-normal"
                  >
                    {step.description}
                  </p>
                </div>
              </div>
              {/* Vertical arrow */}
              {index < steps.length - 1 && <VerticalArrow />}
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}