import React from "react";

interface HeroSecondProps {
    title: string;
}

export default function HeroSecond({ title }: HeroSecondProps) {
    return (
        <>
            <div className="container max-w-5xl">
                <div className="flex justify-center items-center relative overflow-hidden mx-auto">
                    {/* Background Image */}
                    <img
                        src="/assets/hero-second.jpg"
                        alt="Hero Section"
                        className="w-full object-cover rounded-lg md:rounded-3xl"
                    />

                    {/* Overlay Content */}
                    <div className="absolute inset-0 flex flex-col items-center justify-center md:flex-row md:items-center md:justify-between md:p-8">
                        <div className="hidden md:flex md:w-1/3 md:justify-center">
                            <img
                                src="/assets/dlh-logo.svg"
                                alt=""
                                className="md:max-w-[170px] ml-28"
                            />
                        </div>
                        <div className="md:w-1/2 md:flex md:justify-center">
                            <h1 className="text-2xl md:text-5xl font-bold text-[#43b311] text-center">
                                {title}
                            </h1>
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
}
