import { serverFetch } from '@/app/hooks/serverFetch';
import { Parser } from "html-to-react";
const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;

export default async function About({ apiUrl }) {
    const home = await serverFetch(apiUrl);
    return (
        <section >
            <div className="about-us flex relative pb-6 pt-15">

                <div className="container relative z-[1]">
                    <div >
                        <div className="lg:float-left w-full md:max-w-[480px] relative pb-24 lg:mr-10 lg:pl-14">
                            <span className='bg-amber-400 w-4 h-[80%] rounded-t-full absolute left-1 animate-bounce bottom-0'></span>
                            <span className='bg-[#6112a0] w-4 h-[90%] rounded-t-full absolute left-7 animate-pulse  bottom-0'></span>
                            <img src={home?.img} alt={home?.shortDescription || home?.name} title={home?.shortDescription || home?.name} className="max-w-full  w-full  rounded-2xl" />
                            <div className="absolute bottom-0 left-0 flex items-end">
                                <div className='p-3 bg-white rounded-lg'>
                                    <img className=' lg:max-w-54 max-w-36 rounded-lg' src={home?.icon} alt={home?.shortDescription || home?.name} title={home?.shortDescription || home?.name} />
                                </div>
                                <div className="px-4 py-2 bg-white border rounded-lg mb-3">
                                    <div className='flex gap-2 items-center'>
                                        <p className='lg:text-6xl text-4xl'>35+</p>
                                        <span>Years of Experience</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="">
                            {/* Small Label */}
                            <div className="flex items-center gap-3 text-amber-600 font-semibold text-sm uppercase tracking-wide ">
                                <span className="h-[1px] w-8 bg-amber-300"></span>
                                About Us
                            </div>
                            <h1 className="block text-2xl md:text-[40px] font-semibold font">{home?.shortDescription}</h1>
                            {Parser().parse(home?.description || "")}
                        </div>
                    </div>
                </div>

            </div>
        </section>
    )
}