import { BASE_URL } from "@/Constant";
import Arrow from "@/public/assest/gis_north-arrow.svg";
import Image from "next/image";
import SafeHtmlRenderer from "../SafeHtmlRenderer";

function ConductHero({ main }: any) {
  return (
    <div className="container m-auto overflow-hidden">
      <div className="mx-auto max-w-4xl px-4 text-center">
        <h1 className="mb-4 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
          {main?.coc?.pageTitle}
        </h1>
        <div className="safe">
          <SafeHtmlRenderer htmlContent={main?.coc?.shortContent} />
        </div>
      </div>
      <div className="">
        {/* Hero Section */}
        <div className="container mx-auto px-4 py-16 md:py-16">
          <div className="flex flex-col md:pl-[100px] md:flex-row items-start justify-between gap-12">
            {/* Text Content */}
            <div className="w-full md:w-1/2">
              <div className="safe w-full space-y-4">
                <SafeHtmlRenderer htmlContent={main?.coc?.fullContent} />
              </div>
            </div>

            {/* Image Grid */}
            <div className="w-full md:w-1/2 md:relative md:left-[55px]">
              <div className="bg-btn p-8 rounded-3xl">
                <div className=" p-6 bg-white">
                  <Image
                    src={`${BASE_URL}${main?.coc?.mainImage}`}
                    alt="Technology"
                    className="w-[100%] md:w-[100%] hover:transform hover:scale-105 transition-transform duration-300"
                    width={100}
                    height={100}
                    unoptimized={true}
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default ConductHero;