"use client";

import Link from "next/link";
import Image from "next/image";
import { routes } from "@/src/config/routes";
import ImageFallback from "@/src/components/custom-components/image-fallback";

export default function AboutBanner({ aboutUs }: { aboutUs: any }) {
    return (
        <section
            className="
                relative
                flex
                w-full
                min-h-[500px]
                sm:min-h-[500px]
                lg:min-h-[500px]
                items-end
                overflow-hidden
                pt-20
                sm:pt-24
                lg:pt-32
                pb-12
                sm:pb-16
                lg:pb-20
            "
        >
            <div className="absolute inset-0">
                <ImageFallback
                    src={process.env.NEXT_PUBLIC_API_IMAGE_URL + aboutUs?.aboutImageUrl}
                    alt="About Banner"
                    fill
                    priority
                    className="object-cover object-center"
                />

            </div>
            <div
                className="
                    relative
                    z-10
                    mx-auto
                    w-full
                    px-5
                    sm:px-5
                    md:px-8
                    lg:px-30
                    2xl:px-45
                "
            >
                <div className="max-w-4xl text-left">
                    <h1
                        className="
                            text-3xl
                            sm:text-4xl
                            md:text-5xl
                            lg:text-6xl
                            font-semibold
                            text-white
                        "
                    >
                        {aboutUs?.pageTitle}
                    </h1>
                    <div
                        className="
                            mt-4
                            sm:mt-6
                            text-base
                            sm:text-lg
                            leading-7
                            sm:leading-8
                            text-white/80
                        "
                    >
                        {aboutUs?.aboutTitle}
                        <br />
                        <Link
                            href={routes.contact}
                            className="
                                mt-6
                                inline-flex
                                items-center
                                justify-center
                                rounded-sm
                                bg-secondary
                                px-6
                                py-3
                                text-sm
                                font-semibold
                                text-white
                                transition
                                hover:bg-white
                                hover:text-secondary
                            "
                        >
                            {aboutUs?.subTitle}
                        </Link>
                    </div>
                </div>
            </div>
        </section>
    );
}