"use client"
import type { GlanceData } from '@/lib/strapi/types'

interface GlanceSectionProps {
  data: GlanceData
}

export default function GlanceSection({ data }: GlanceSectionProps) {
  const stats = data.stats
  return (
    <section className="relative bg-[#252a30] py-10 lg:py-20 overflow-hidden lg:px-5">
      {/* Decorative vector overlay on right side */}
      <div className="absolute right-0 top-0 lg:top-1/2 lg:-translate-y-1/2 w-[476px] lg:w-[600px] h-[458px] lg:h-auto pointer-events-none z-0">
        <img
          src="/assets/about/glance-overlay.png"
          alt=""
          loading="lazy"
          className="w-full h-full object-contain opacity-80"
          aria-hidden="true"
        />
      </div>

      <div className="relative z-10 w-full max-w-[1297px] mx-auto px-5 lg:px-0">
        {/* Top: Badge + Description */}
        <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-5 lg:gap-6 mb-8 lg:mb-14">
          {/* Badge */}
          <div>
            <span className="inline-flex items-center gap-2 px-6 py-3 bg-[#ebebeb] rounded-full">
              <img
                src={data.header.badgeIcon || "/assets/common/sparkle-vector.svg"}
                alt=""
                loading="lazy"
                className="w-[17px] h-4"
              />
              <span className="font-heading text-black text-base uppercase leading-none">
                {data.header.badge || 'MGM Group at a Glance'}
              </span>
            </span>
          </div>

          {/* Description */}
          <div className="max-w-full lg:max-w-[524px]">
            <p className="font-sans font-medium text-base text-white/60 leading-[1.5]">
                {data.header.description}
            </p>
            <div className="mt-4 lg:mt-6 border-b border-white/20" />
          </div>
        </div>

        {/* Stats Cards */}
        <div className="grid grid-cols-1 lg:grid-cols-4 gap-4 lg:gap-6">
          {stats.map((stat) => (
            <div
              key={stat.label}
              className="relative w-full h-[180px] lg:h-auto border border-[rgba(229,231,235,0.5)] rounded-2xl p-5 lg:p-6 overflow-hidden group hover:border-[rgba(229,231,235,0.8)] transition-colors"
              style={{ background: 'radial-gradient(ellipse at bottom right, rgba(255,232,233,1) 0%, rgba(255,232,233,0) 60%), linear-gradient(90deg, #fff 0%, #fff 100%)',
              }}
            >
              {/* Decorative vector in card */}
              <div className="absolute -right-10 lg:-right-20 top-1/2 -translate-y-1/2 lg:top-auto lg:translate-y-0 lg:-top-10 w-[297px] lg:w-[200px] h-[286px] lg:h-[200px] opacity-[0.06] lg:opacity-30 pointer-events-none">
                <img
                  src="/assets/about/decorative-vector.svg"
                  alt=""
                  loading="lazy"
                  className="w-full h-full object-contain rotate-[25deg]"
                  aria-hidden="true"
                />
              </div>

              {/* Content */}
              <div className="relative z-10 flex flex-col justify-between h-full lg:h-auto lg:gap-10">
                {/* Icon */}
                <div className="w-[45px] h-[45px]">
                  <img
                    src={stat.icon}
                    alt=""
                    loading="lazy"
                    className="w-full h-full object-contain"
                    aria-hidden="true"
                  />
                </div>

                {/* Value and Label */}
                <div className="flex flex-col gap-1">
                  <p className="font-heading font-bold text-[32px] lg:text-[40px] text-[#20262b] leading-[40px]">
                    {stat.value}
                  </p>
                  <p className="font-heading text-base lg:text-[20px] text-[rgba(32,38,43,0.7)] leading-[25px]">
                    {stat.label}
                  </p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}