"use client"
import MGMButton from './MGMButton'

interface Newsletter {
  title: string
  date: string
  image: string
  pdfUrl: string
}

const newsletters: Newsletter[] = [
  {
    title: 'Global Hospitality Expansion',
    date: 'January 2025',
    image: '/assets/newsletters/card1.jpg',
    pdfUrl: '#',
  },
  {
    title: 'Entertainment Parks Update',
    date: 'February 2025',
    image: '/assets/newsletters/card2.jpg',
    pdfUrl: '#',
  },
  {
    title: 'Sustainable Energy Initiatives',
    date: 'March 2025',
    image: '/assets/newsletters/card3.jpg',
    pdfUrl: '#',
  },
]

export default function NewsletterSection() {
  return (
    <section className="relative py-16 lg:py-20 overflow-hidden">
      {/* Background Gradient */}
      <div className="absolute inset-0 pointer-events-none">
        <img
          src="https://www.figma.com/api/mcp/asset/59794667-8407-4f07-a297-7d82814c4cb4"
          alt=""
          loading="lazy"
          className="w-full h-full object-cover"
        />
      </div>
      <div className="relative max-w-[1296px] mx-auto px-6 lg:px-10">
        {/* Cards Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {newsletters.map((item) => (
            <div
              key={item.title}
              className="rounded-2xl overflow-hidden bg-white"
            >
              {/* Image Area */}
              <div className="relative h-[300px] lg:h-[429px] overflow-hidden">
                <img
                  src={item.image}
                  alt={item.title}
                  loading="lazy"
                  className="absolute inset-0 w-full h-full object-cover"
                />
                {/* Date Badge */}
                <div className="absolute top-6 left-6 flex items-center gap-2 bg-white/90 border border-white rounded-2xl px-3 py-1.5">
                    <img
                      src="/assets/newsletters/calendar-icon.svg"
                      alt=""
                      loading="lazy"
                      className="w-[18px] h-[19px]"
                    />
                  <span className="font-funnel text-sm text-[#2a3036]/80 whitespace-nowrap">
                    {item.date}
                  </span>
                </div>
              </div>

              {/* Text Area */}
              <div className="flex items-center gap-6 px-6 py-6">
                <h3 className="flex-1 font-heading font-bold text-[#2a3036] text-2xl leading-normal">
                  {item.title}
                </h3>
                <a
                  href={item.pdfUrl}
                  className="flex items-center gap-2.5 shrink-0"
                >
                  <span className="font-sans font-medium text-[#2a3036] text-sm tracking-[0.7px] uppercase whitespace-nowrap">
                    View PDF
                  </span>
                  <svg 
                    width="6" 
                    height="10" 
                    viewBox="0 0 8 14" 
                    fill="none" 
                    xmlns="http://www.w3.org/2000/svg"
                    className="ml-1"
                  >
                    <path 
                      d="M1 1L7 7L1 13" 
                      stroke="#d20010" 
                      strokeWidth="2.5" 
                      strokeLinecap="round" 
                      strokeLinejoin="round"
                    />
                  </svg>
                </a>
              </div>
            </div>
          ))}
        </div>

        {/* View More CTA */}
        <div className="flex justify-center mt-10">
          <MGMButton text="View more" href="#newsletters" />
        </div>
      </div>
    </section>
  )
}