"use client";

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

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

function AboutUs({ data }: any) {
  return (
    <div className="container m-auto overflow-hidden">
      {/* Hero Section */}
      <div className="container mx-auto px-4 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">
            <h2>{data?.about?.pageTitle}</h2>
            <div className="safe">
              <SafeHtmlRenderer htmlContent={data?.about?.fullContent} />
            </div>

            <div className="flex rounded-lg md:w-1/4 bg-btn p-0.5 shadow-lg rgb-button will-change-transform">
              <Link
                href="/about"
                className="flex-1 font-normal text-md bg-white/90 px-6 py-3 hover:scale-105 rounded-lg hover:-translate-y-2 transition duration-500 items-center flex justify-center hover:shadow-md will-change"
              >
                <span className="will-change-transform">Read More</span>
              </Link>
            </div>
          </div>

          {/* Image Grid */}
          <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}${data?.about?.mainImage}`}
                    alt="Digital transformation concept"
                    className="w-full h-full object-cover"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default AboutUs;