export default function Loading() {
    return (
        <div className="mt-24">
            {/* Header Section */}
            <div className="flex gap-y-4 flex-col xl:flex-row xl:items-center justify-between max-w-maxWidth mx-auto">
                <div className="h-8 w-48 bg-gray-200 rounded-md animate-pulse"></div>
                <div className="max-w-[300px]">
                    <div className="h-4 w-full bg-gray-200 rounded-md animate-pulse"></div>
                    <div className="h-4 w-full bg-gray-200 rounded-md animate-pulse mt-2"></div>
                    <div className="h-4 w-3/4 bg-gray-200 rounded-md animate-pulse mt-2"></div>
                </div>
            </div>

            {/* First Service Section - Consulting */}
            <div className="mt-20 flex flex-col-reverse xl:flex-row gap-x-32 gap-y-12 max-w-maxWidth mx-auto">
                <div className="flex-1">
                    <div className="flex gap-4 items-center">
                        <div className="size-12 bg-gray-200 rounded-2xl animate-pulse"></div>
                        <div className="h-6 w-28 bg-gray-200 rounded-md animate-pulse"></div>
                    </div>
                    <div className="mt-4 space-y-2">
                        <div className="h-4 w-full bg-gray-200 rounded-md animate-pulse"></div>
                        <div className="h-4 w-full bg-gray-200 rounded-md animate-pulse"></div>
                        <div className="h-4 w-full bg-gray-200 rounded-md animate-pulse"></div>
                        <div className="h-4 w-full bg-gray-200 rounded-md animate-pulse"></div>
                        <div className="h-4 w-full bg-gray-200 rounded-md animate-pulse"></div>
                        <div className="h-4 w-3/4 bg-gray-200 rounded-md animate-pulse"></div>
                    </div>
                </div>
                <div className="flex-1 xl:p-4 p-2 bg-gray-100 rounded-4xl">
                    <div className="w-full h-[300px] bg-gray-200 rounded-4xl animate-pulse"></div>
                </div>
            </div>

            {/* Second Service Section - Security */}
            <div className="w-full xl:py-32 py-20 bg-gray-100 xl:mt-40 mt-12 rounded-4xl">
                <div className="max-w-maxWidth px-4 xl:px-0 mx-auto flex xl:flex-row flex-col items-center xl:gap-32 gap-14">
                    <div className="flex-1 xl:p-4 p-2 bg-gray-200 rounded-4xl">
                        <div className="min-w-full h-[300px] bg-gray-300 rounded-4xl animate-pulse"></div>
                    </div>
                    <div className="flex-1">
                        <div className="flex gap-4 items-center">
                            <div className="size-12 bg-gray-200 rounded-2xl animate-pulse"></div>
                            <div className="h-6 w-36 bg-gray-200 rounded-md animate-pulse"></div>
                        </div>
                        <div className="mt-4 space-y-2">
                            <div className="h-4 w-full bg-gray-200 rounded-md animate-pulse"></div>
                            <div className="h-4 w-full bg-gray-200 rounded-md animate-pulse"></div>
                            <div className="h-4 w-full bg-gray-200 rounded-md animate-pulse"></div>
                            <div className="h-4 w-full bg-gray-200 rounded-md animate-pulse"></div>
                            <div className="h-4 w-full bg-gray-200 rounded-md animate-pulse"></div>
                            <div className="h-4 w-3/4 bg-gray-200 rounded-md animate-pulse"></div>
                        </div>
                    </div>
                </div>
            </div>

            {/* Third Service Section - Custom Solutions */}
            <div className="mt-20 flex flex-col-reverse xl:flex-row gap-x-32 gap-y-12 max-w-maxWidth mx-auto">
                <div className="flex-1">
                    <div className="flex gap-4 items-center">
                        <div className="size-12 bg-gray-200 rounded-2xl animate-pulse"></div>
                        <div className="h-6 w-44 bg-gray-200 rounded-md animate-pulse"></div>
                    </div>
                    <div className="mt-4 space-y-2">
                        <div className="h-4 w-full bg-gray-200 rounded-md animate-pulse"></div>
                        <div className="h-4 w-full bg-gray-200 rounded-md animate-pulse"></div>
                        <div className="h-4 w-full bg-gray-200 rounded-md animate-pulse"></div>
                        <div className="h-4 w-full bg-gray-200 rounded-md animate-pulse"></div>
                        <div className="h-4 w-full bg-gray-200 rounded-md animate-pulse"></div>
                        <div className="h-4 w-3/4 bg-gray-200 rounded-md animate-pulse"></div>
                    </div>
                </div>
                <div className="flex-1 xl:p-4 p-2 bg-gray-100 rounded-4xl">
                    <div className="w-full h-[300px] bg-gray-200 rounded-4xl animate-pulse"></div>
                </div>
            </div>

            {/* Fourth Service Section - Support */}
            <div className="w-full xl:py-32 py-20 bg-gray-100 xl:mt-40 mt-12 rounded-4xl">
                <div className="max-w-maxWidth px-4 xl:px-0 mx-auto flex xl:flex-row flex-col items-center xl:gap-32 gap-14">
                    <div className="flex-1 xl:p-4 p-2 bg-gray-200 rounded-4xl">
                        <div className="min-w-full h-[300px] bg-gray-300 rounded-4xl animate-pulse"></div>
                    </div>
                    <div className="flex-1">
                        <div className="flex gap-4 items-center">
                            <div className="size-12 bg-gray-200 rounded-2xl animate-pulse"></div>
                            <div className="h-6 w-40 bg-gray-200 rounded-md animate-pulse"></div>
                        </div>
                        <div className="mt-4 space-y-2">
                            <div className="h-4 w-full bg-gray-200 rounded-md animate-pulse"></div>
                            <div className="h-4 w-full bg-gray-200 rounded-md animate-pulse"></div>
                            <div className="h-4 w-full bg-gray-200 rounded-md animate-pulse"></div>
                            <div className="h-4 w-full bg-gray-200 rounded-md animate-pulse"></div>
                            <div className="h-4 w-full bg-gray-200 rounded-md animate-pulse"></div>
                            <div className="h-4 w-3/4 bg-gray-200 rounded-md animate-pulse"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
} 