export default function Loading() {
    return (
        <div>
            {/* Hero Section Skeleton */}
            <div className="mt-5 h-[400px] xl:h-[500px] bg-gray-200 rounded-4xl animate-pulse relative">
                <div className="absolute bottom-10 right-10">
                    <div className="h-10 w-36 xl:w-60 bg-gray-300 rounded-md animate-pulse"></div>
                    <div className="h-6 w-52 xl:w-96 bg-gray-300 rounded-md animate-pulse mt-4"></div>
                    <div className="h-6 w-48 xl:w-80 bg-gray-300 rounded-md animate-pulse mt-2"></div>
                    <div className="h-12 w-32 xl:w-40 bg-gray-300 rounded-md animate-pulse mt-6"></div>
                </div>
            </div>

            {/* Danak Suggested Service Skeleton */}
            <div className="mt-20">
                <div className="h-8 w-40 xl:w-60 bg-gray-200 rounded-md animate-pulse mx-auto"></div>
                <div className="h-4 w-52 xl:w-96 bg-gray-200 rounded-md animate-pulse mx-auto mt-4"></div>

                <div className="mt-10 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
                    {[1, 2, 3, 4].map((i) => (
                        <div key={`service-${i}`} className="bg-white rounded-4xl h-80 p-6 animate-pulse">
                            <div className="h-10 w-10 bg-gray-200 rounded-full mb-4"></div>
                            <div className="h-6 w-40 bg-gray-200 rounded-md"></div>
                            <div className="h-4 w-full bg-gray-200 rounded-md mt-4"></div>
                            <div className="h-4 w-full bg-gray-200 rounded-md mt-2"></div>
                            <div className="h-4 w-3/4 bg-gray-200 rounded-md mt-2"></div>
                            <div className="h-10 w-28 bg-gray-200 rounded-md mt-8"></div>
                        </div>
                    ))}
                </div>
            </div>

            {/* Why Danak Skeleton */}
            <div className="mt-20">
                <div className="h-8 w-40 xl:w-60 bg-gray-200 rounded-md animate-pulse mx-auto"></div>
                <div className="h-4 w-52 xl:w-96 bg-gray-200 rounded-md animate-pulse mx-auto mt-4"></div>

                <div className="mt-10 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
                    {[1, 2, 3].map((i) => (
                        <div key={`why-${i}`} className="bg-white rounded-4xl h-60 p-6 animate-pulse">
                            <div className="h-10 w-10 bg-gray-200 rounded-full mb-4"></div>
                            <div className="h-6 w-40 bg-gray-200 rounded-md"></div>
                            <div className="h-4 w-full bg-gray-200 rounded-md mt-4"></div>
                            <div className="h-4 w-full bg-gray-200 rounded-md mt-2"></div>
                            <div className="h-4 w-3/4 bg-gray-200 rounded-md mt-2"></div>
                        </div>
                    ))}
                </div>
            </div>

            {/* Blog Skeleton */}
            <div className="mt-20">
                <div className="h-8 w-40 xl:w-60 bg-gray-200 rounded-md animate-pulse mx-auto"></div>
                <div className="h-4 w-52 xl:w-96 bg-gray-200 rounded-md animate-pulse mx-auto mt-4"></div>

                <div className="mt-10 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
                    {[1, 2, 3].map((i) => (
                        <div key={`blog-${i}`} className="bg-white rounded-4xl h-80 p-0 animate-pulse overflow-hidden">
                            <div className="h-40 w-full bg-gray-200"></div>
                            <div className="p-4">
                                <div className="h-6 w-3/4 bg-gray-200 rounded-md"></div>
                                <div className="h-4 w-28 bg-gray-200 rounded-md mt-2"></div>
                                <div className="h-4 w-full bg-gray-200 rounded-md mt-4"></div>
                                <div className="h-4 w-full bg-gray-200 rounded-md mt-2"></div>
                                <div className="h-4 w-3/4 bg-gray-200 rounded-md mt-2"></div>
                            </div>
                        </div>
                    ))}
                </div>
            </div>

            {/* Collaboration Skeleton */}
            <div className="mt-20 mb-20">
                <div className="h-8 w-40 xl:w-60 bg-gray-200 rounded-md animate-pulse mx-auto"></div>
                <div className="h-4 w-52 xl:w-96 bg-gray-200 rounded-md animate-pulse mx-auto mt-4"></div>

                <div className="mt-10 grid grid-cols-2 md:grid-cols-3 xl:grid-cols-6 gap-6">
                    {[1, 2, 3, 4, 5, 6].map((i) => (
                        <div key={`collab-${i}`} className="bg-white rounded-4xl h-24 p-4 flex items-center justify-center animate-pulse">
                            <div className="h-12 w-20 xl:w-24 bg-gray-200 rounded-md"></div>
                        </div>
                    ))}
                </div>
            </div>
        </div>
    )
} 