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

function AboutHero({ up, res }: any) {
  return (
    <div className="container m-auto overflow-hidden w-[90%]">
      <div className="mx-auto max-w-4xl px-4 text-center">
        <h1>{up?.pageTitle}</h1>
        <div className="safe">
          <SafeHtmlRenderer htmlContent={up?.pageSubTitle} />
        </div>
      </div>

      {/* Hero Section */}
      <div className="container py-16 md:py-16">
        <div className="flex flex-col md:flex-row items-center justify-between gap-12">
          {/* Text Content */}
          <div className="w-full md:w-1/2">
            <div className="safe">
              <SafeHtmlRenderer htmlContent={up?.shortContent} />
            </div>
          </div>
          <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}${up?.mainImage}`}
                  alt="Digital transformation concept"
                  className="w-full h-full object-cover"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      {/* <div className="safe">
          <SafeHtmlRenderer htmlContent={up?.fullContent} />
        </div> */}
      {/* <HeroSlider sliders={res} /> */}
    </div>
  );
}

export default AboutHero;