import { BASE_URL } from "@/Constant";
import Image from "next/image";
import SafeHtmlRenderer from "../SafeHtmlRenderer";

function RoleHero({ data, card, coc }: any) {
  return (
    <div className="container m-auto overflow-hidden">
      <div className="mx-auto max-w-4xl px-4 text-center">
        <h1>{data?.role?.pageTitle}</h1>
        <div className="safe">
          <SafeHtmlRenderer htmlContent={data?.role?.shortContent} />
        </div>
      </div>
      <div className="container mx-auto mt-10 px-8 py-3 pb-14">
        <div className="grid gap-6 md:grid-cols-3">
          {card?.role?.map((feature: any, i: string) => (
            <div
              key={i}
              className="group rounded-lg overflow-hidden bg-white shadow-lg transition-transform duration-300 hover:-translate-y-1 hover:shadow-xl"
            >
              <div className="relative h-48 m-5">
                <Image
                  src={`${BASE_URL}${feature?.gallaryImage}`}
                  alt={feature.postTitle}
                  fill
                  unoptimized={true}
                  className="rounded-lg object-cover transition-transform duration-300 group-hover:scale-105"
                />
              </div>
              <div className="relative pb-6 px-6 h-full">
                <p className="text-xl leading-relaxed">{feature.postTitle}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
      <div className="px-8">
        <div className="md:flex gap-10 items-center">
          {/* Text Content */}

          <div className="safe md:w-1/2 flex-1">
            <SafeHtmlRenderer htmlContent={coc?.coc?.fullContent} />
          </div>

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

export default RoleHero;