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

interface VisionSectionProps {
  data: VisionData
}

export default function VisionSection({ data }: VisionSectionProps) {
  const stats = data.stats
  return (
    <section
      className="relative rounded-2xl overflow-hidden lg:px-5"
      style={{ padding: '70px 12px 129px',
        background:
          'radial-gradient(at 25% 190%, rgba(244, 247, 251, 0) 0%, rgb(244, 247, 251) 100%), rgb(244, 247, 251)',
      }}
    >
      <div className="w-full max-w-[1297px] mx-auto px-5 lg:px-0 flex flex-col gap-10">
        {/* Top Row: Badge + Description */}
        <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-8 lg:gap-6">
          {/* Badge Column (40%) */}
          <div className="w-full lg:w-[40%]">
            <div
              className="inline-flex items-center gap-2 shrink-0 uppercase whitespace-normal lg:whitespace-nowrap"
              style={{ padding: '12px 24px',
                backgroundColor: '#ebebeb',
                borderRadius: 66,
                
                fontSize: 16,
                lineHeight: 1,
                color: '#000',
              }}
              >
                <img
                  src={data.header.badgeIcon || "/assets/leaders/sparkle-icon.svg"}
                  alt=""
                  loading="lazy"
                  style={{ width: 17, height: 16 }}
                />
                {data.header.badge || 'One Vision. Multiple Industries.'}
              </div>
          </div>

          {/* Desktop Description Column (60%) */}
          <div className="hidden lg:flex w-full lg:w-[60%] flex-col gap-6">
            <p
              className="m-0"
              style={{ fontSize: 16,
                lineHeight: '24px',
                color: '#4a5565',
              }}
            >
              {data.description}
            </p>
            <div
              style={{ height: 0,
                borderTop: '1px solid rgba(0, 0, 0, 0.15)',
              }}
            />
          </div>
        </div>

        {/* Bottom Row: Stats + Image */}
        <div className="flex flex-col lg:flex-row lg:items-stretch gap-8 lg:gap-6">
          {/* Left Column (40%) - Mobile Description + Mobile Image + Stats */}
          <div className="w-full lg:w-[40%] flex flex-col gap-10 lg:gap-6">
            {/* Mobile: Description + Divider (shown below badge on mobile) */}
            <div className="flex flex-col gap-4 lg:hidden">
              <p
                className="m-0"
                style={{ fontSize: 16,
                  lineHeight: 1.5,
                  color: 'rgba(35,35,35,0.6)',
                }}
              >
                {data.description}
              </p>
              <div
                style={{ height: 0,
                  borderTop: '1px solid rgba(0, 0, 0, 0.15)',
                }}
              />
            </div>

            {/* Mobile: Team Photo */}
              <div className="lg:hidden w-full h-[324px] rounded-2xl overflow-hidden relative">
              <img
                src={data.mobileImage || data.image}
                alt="MGM Group leadership"
                loading="lazy"
                className="absolute inset-0 w-full h-full object-cover rounded-2xl"
              />
            </div>

            {/* Stat Cards */}
            <div className="flex flex-col gap-5 lg:gap-6">
              {stats.map((stat) => (
                <div
                  key={stat.label}
                  className="relative overflow-hidden rounded-2xl h-[156px] lg:h-[136px]"
                  style={{ padding: '16px 24px',
                    background:
                      'linear-gradient(164.67deg, rgb(156, 29, 53) 12.14%, rgb(210, 0, 16) 90.25%)',
                  }}
                >
                  {/* Decorative background element */}
                  <img
                    src="/assets/vision/card-decoration.svg"
                    alt=""
                    loading="lazy"
                    className="absolute pointer-events-none"
                    style={{ width: 297,
                      height: 286,
                      right: -45,
                      top: '50%',
                      transform: 'translateY(-50%) rotate(24.98deg)',
                      opacity: 0.15,
                    }}
                  />

                  {/* Mobile: Vertical layout */}
                  <div className="relative z-10 flex flex-col justify-between h-full lg:hidden">
                    {/* Icon */}
                    <img
                      src={stat.icon}
                      alt=""
                      loading="lazy"
                      className="shrink-0"
                      style={{ width: 45, height: 45 }}
                    />

                    {/* Text */}
                    <div className="flex flex-col gap-2">
                      <span
                        style={{ fontSize: 32,
                          lineHeight: 1.04,
                          letterSpacing: '-0.96px',
                          color: '#fff',
                        }}
                      >
                        {stat.value}
                      </span>
                      <span
                        style={{ fontSize: 14,
                          lineHeight: '24px',
                          color: '#fff',
                        }}
                      >
                        {stat.label}
                      </span>
                    </div>
                  </div>

                  {/* Desktop: Horizontal layout */}
                  <div className="relative z-10 hidden lg:flex items-center gap-8 h-full">
                    {/* Icon */}
                    <img
                      src={stat.icon}
                      alt=""
                      loading="lazy"
                      className="shrink-0"
                      style={{ width: 45, height: 45 }}
                    />

                    {/* Text */}
                    <div className="flex flex-col gap-1">
                      <span
                        className="capitalize"
                        style={{ fontSize: 36,
                          lineHeight: 1.1,
                          color: '#fff',
                        }}
                      >
                        {stat.value}
                      </span>
                      <span
                        className="capitalize"
                        style={{ fontSize: 14,
                          lineHeight: 1.4,
                          color: 'rgba(255,255,255,0.7)',
                        }}
                      >
                        {stat.label}
                      </span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Right Column: Desktop Image Column (60%) */}
          <div className="hidden lg:flex w-full lg:w-[60%] flex-col">
            <div className="flex-1 min-h-0 rounded-2xl overflow-hidden relative">
              <img
                src={data.image}
                alt="MGM Group leadership"
                loading="lazy"
                className="absolute inset-0 w-full h-full object-cover rounded-2xl"
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}