"use client";
import { BASE_URL } from "@/Constant";
import dynamic from "next/dynamic";
import Image from "next/image";
import Link from "next/link";
import GlaApply from "./GlaApply";

const SafeHtmlRenderer = dynamic(
  () => import("../../components/SafeHtmlRenderer"),
  { ssr: false }
);

function GlaAccreditationBody({ main }: any) {
  return (
    <div className="container m-auto overflow-hidden">
      <div className="mx-auto max-w-4xl text-center">
        <h1>{main?.iaabs?.pageTitle}</h1>
        <div className="safe">
          <SafeHtmlRenderer htmlContent={main?.iaabs?.pageSubTitle} />
        </div>
      </div>
      <div className="">
        {/* Hero Section */}
        <div className="container mx-auto py-16 md:py-16">
          <div className="flex flex-col-reverse  gap-10 md:flex-row items-center justify-between">
            {/* Text Content */}

            <div className="flex-1">
              <div className="safe">
                <SafeHtmlRenderer htmlContent={main?.iaabs?.fullContent} />
              </div>
              {/* sqwsqws */}
              {/* <button
                  type="submit"
                  className=" inline-flex hover:bg-btnhover hover:scale-105 w-48 items-center justify-center px-6 py-2 border border-transparent text-sm font-medium rounded-full text-black bg-btn"
                >
                  Apply Here
                </button> */}

              <GlaApply />
            </div>

            {/* Image Grid */}
            <div className="md:w-[40%]">
              <div className="bg-white rounded-2xl p-4 shadow-lg">
                <div className="aspect-square rounded-lg overflow-hidden">
                  <Image
                    width={100}
                    height={100}
                    unoptimized={true}
                    src={`${BASE_URL}${main?.iaabs?.mainImage}`}
                    alt="Digital transformation concept"
                    className="w-full h-full object-cover"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default GlaAccreditationBody;