"use client"
import MGMButton from './MGMButton'
import type { LegacyData } from '@/lib/strapi/types'

interface LegacySectionProps {
  data: LegacyData
}

export default function LegacySection({ data }: LegacySectionProps) {
  return (
    <section className="relative lg:px-5">
      {/* Legacy Section with rounded top corners */}
      <div className="relative overflow-hidden px-5 lg:px-0 py-10 lg:py-[40px] max-w-[1297px] mx-auto">

        {/* Decorative vector watermark */}
        <div className="absolute pointer-events-none z-0 lg:hidden" style={{ top: -83, left: 90, width: 455, height: 438 }}>
          <img
            src="/assets/legacy/vector-watermark.png"
            alt=""
            loading="lazy"
            className="w-full h-full object-contain opacity-[0.06]"
            aria-hidden="true"
          />
        </div>

        {/* Content */}
        <div className="relative z-10 flex flex-col items-start lg:items-center gap-10 w-full">
          {/* Badge */}
          <div className="flex justify-start w-full">
              <span className="inline-flex items-center gap-2 px-6 py-3 bg-white rounded-full">
              <img
                src={data.header.badgeIcon || "/assets/legacy/sparkle-icon.svg"}
                alt=""
                loading="lazy"
                className="w-[17px] h-4"
              />
              <span className="font-heading text-[#102443] text-base uppercase leading-none">
                {data.header.badge || 'The MGM Legacy'}
              </span>
            </span>
          </div>

          {/* Two-column layout (desktop) / Stacked layout (mobile) */}
          <div className="flex flex-col gap-5 lg:flex-row lg:gap-8 w-full items-stretch">
            {/* Left: Ship Image */}
            <div className="legacy-img relative rounded-2xl overflow-hidden w-full lg:w-[558px] h-[316px] lg:h-[314px] flex-shrink-0">
              <img
                src={data.image}
                alt="Shipping and logistics operations"
                loading="lazy"
                className="w-full h-full object-cover"
              />
            </div>

            {/* Right: Info Card */}
            <div className="relative flex-1 bg-white border border-[#e5e7eb] rounded-2xl p-6 lg:p-[40px] flex flex-col justify-start gap-8 lg:gap-10 overflow-hidden lg:min-h-[314px]">
              {/* Description */}
              <p className="font-sans font-medium text-sm lg:text-base text-[#4a5565] leading-[22px] lg:leading-[24px]">
               {data.description}
              </p>

              {/* Decorative watermark */}
              <div className="absolute right-[-30px] top-[-60px] lg:top-1/2 lg:-translate-y-1/2 opacity-[0.06] pointer-events-none">
                <img
                  src="/assets/legacy/vector-watermark.png"
                  alt=""
                  loading="lazy"
                  className="w-[297px] h-[286px] rotate-[25deg]"
                  aria-hidden="true"
                />
              </div>

              {/* CTA Button */}
              <div className="mt-auto flex justify-center lg:justify-start">
                <MGMButton text={data.ctaLabel || "Read Our Complete Story"} href={data.ctaHref || "/about"} className="font-sans !text-sm" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}