"use client"
import MGMButton from './MGMButton'
import { ChevronRight } from 'lucide-react'

const sparkleIcon = '/assets/leaders/sparkle-icon.svg'
const calendarIcon = '/assets/newsletters/calendar-icon.svg'

interface Newsletter {
  id: number
  image: string
  date: string
  title: string
}

const newsletters: Newsletter[] = [
  {
    id: 1,
    image: '/assets/newsletters/thumbnails/MGM Newsletter Apr 2023.pdf.png',
    date: 'January 2025',
    title: 'Global Hospitality Expansion',
  },
  {
    id: 2,
    image: '/assets/newsletters/thumbnails/MGM Newsletter Apr 2024.pdf.png',
    date: 'February 2025',
    title: 'Entertainment Parks Update',
  },
  {
    id: 3,
    image: '/assets/newsletters/thumbnails/MGM Newsletter Oct 2025.pdf.png',
    date: 'March 2025',
    title: 'Sustainable Energy Initiatives',
  },
]

export default function NewslettersSection() {
  return (
    <section className="relative overflow-hidden">
      {/* Dark background header area */}
      <div
        className="pt-16 lg:pt-20 pb-32 lg:pb-40"
        style={{ background: 'linear-gradient(180deg, #1a1d21 0%, #2a3036 100%)'
        }}
      >
        <div className="w-full px-6 lg:px-[72px]"><div className="max-w-[1297px] mx-auto">
          {/* Header: Badge + Description */}
          <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-6">
            {/* Badge */}
            <div>
              <span className="inline-flex items-center gap-2 px-6 py-3 bg-[#ebebeb] rounded-full">
                <img
                  src={sparkleIcon}
                  alt=""
                  loading="lazy"
                  className="w-[17px] h-4"
                />
                <span className="font-heading text-black text-base uppercase leading-none">
                  Newsletters
                </span>
              </span>
            </div>

            {/* Description */}
            <div className="max-w-[461px]">
              <p className="font-sans font-medium text-base text-white/60 leading-[1.5]">
                Monthly insights and updates from across our business divisions
              </p>
              <div className="mt-6 border-b border-white/20" />
            </div>
          </div>
        </div></div>
      </div>

      {/* White background cards area with transition */}
      <div className="bg-white -mt-24 lg:-mt-32 relative z-10 pt-8 pb-16 lg:pb-20">
        <div className="w-full px-6 lg:px-[72px]"><div className="max-w-[1297px] mx-auto">
          {/* Newsletter Cards */}
          <div className="flex flex-col gap-10 items-center">
            <div className="flex flex-col lg:flex-row gap-6">
              {newsletters.map((newsletter) => (
                <div
                  key={newsletter.id}
                  className="w-[340px] lg:w-[416px] rounded-2xl overflow-hidden border-[0.833px] border-[rgba(229,231,235,0.5)]"
                  style={{ background: 'radial-gradient(ellipse at bottom left, rgba(255,232,233,1), rgba(255,232,233,0) 50%), #fff',
                  }}
                >
                  {/* Image container */}
                  <div className="relative h-[280px] lg:h-[429px]">
                    <img
                      src={newsletter.image}
                      alt={newsletter.title}
                      loading="lazy"
                      className="absolute inset-0 w-full h-full object-cover"
                    />
                    {/* Date badge */}
                    <div className="absolute top-6 left-6 inline-flex items-center gap-2 px-3 py-[6px] bg-white/90 border border-white rounded-2xl">
                      <img
                        src={calendarIcon}
                        alt=""
                        loading="lazy"
                        className="w-[17.625px] h-[19.125px]"
                      />
                      <span className="font-funnel text-sm text-[rgba(42,48,54,0.8)]">
                        {newsletter.date}
                      </span>
                    </div>
                  </div>
                  {/* Content */}
                  <div className="p-6 flex items-center justify-between gap-6">
                    <h3 className="font-heading font-bold text-2xl text-[#2a3036] leading-normal">
                      {newsletter.title}
                    </h3>
                    <a
                      href="#"
                      className="flex items-center gap-2.5 shrink-0 hover:opacity-70 transition-opacity"
                    >
                      <span className="font-sans font-medium text-sm text-[#2a3036] uppercase tracking-[0.7px]">
                        View PDF
                      </span>
                      <div className="flex items-center justify-center w-[18px] h-[18px] bg-[#d20010] rounded-sm">
                        <ChevronRight size={12} strokeWidth={3} className="text-white" />
                      </div>
                    </a>
                  </div>
                </div>
              ))}
            </div>

            {/* View more CTA */}
            <div className="flex justify-center mt-12">
              <MGMButton text="View more" href="/about" />
            </div>
           </div>
        </div></div>
      </div>
    </section>
  )
}