"use client"

import type { GreenEnergyAboutData } from "@/lib/strapi/types"

export default function GreenEnergyAbout({ data }: { data: GreenEnergyAboutData }) {

  return (
    <section
      className="relative w-full max-w-[1296px] mx-auto rounded-2xl p-4 md:p-8 overflow-hidden"
      style={{
        background: `radial-gradient(ellipse at 42% 84%, rgba(231,190,198,0) 0%, rgba(231,190,198,1) 100%), linear-gradient(90deg, #fff 0%, #fff 100%)`,
      }}
    >
      <p
        className="font-heading font-bold absolute top-[73px] left-1/2 -translate-x-1/2 text-[rgba(102,15,32,0.04)] text-[72px] sm:text-[128px] leading-[0.7] tracking-[-1.83px] sm:tracking-[-5.13px] whitespace-nowrap pointer-events-none select-none text-center lg:hidden"
        aria-hidden="true"
      >
        {data.desktopWatermarkText}
      </p>

      <p
        className="font-heading font-bold absolute top-[10px] left-1/2 -translate-x-1/2 text-[rgba(42,48,54,0.04)] text-[300px] leading-[0.7] tracking-[-12px] whitespace-nowrap pointer-events-none select-none text-center hidden lg:block"
        aria-hidden="true"
      >
        {data.desktopWatermarkText}
      </p>

      <div className="relative flex flex-col gap-[88px] md:gap-[108px]">
        <div className="bg-white rounded-full px-6 py-3 flex gap-2 items-center w-fit">
          <img
            src={data.badgeIcon}
            alt=""
            loading="lazy"
            className="w-[17px] h-[16px]"
          />
          <span className="font-heading text-[#2a3036] text-[16px] leading-none uppercase">
            {data.badge}
          </span>
        </div>

        <div className="flex flex-col gap-[8px] md:gap-[16px] w-full">
          {data.paragraphs.map((para, i) => (
            <div key={i} className="relative bg-white rounded-[15px] p-[24px] overflow-hidden">
              <img
                src={data.decorativeImage}
                alt=""
                loading="lazy"
                className="absolute right-[-100px] top-1/2 -translate-y-1/2 w-[416px] h-[400px] pointer-events-none hidden lg:block opacity-[0.15]"
                aria-hidden="true"
              />
              <div className="max-w-[1000px] relative flex flex-col gap-4">
                <p
                  className="font-sans text-[rgba(0,0,0,0.6)] text-[16px] leading-[1.5] font-medium"
                >
                  {para}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}