CloudProxy/components/MainContent.tsx

'use client';

interface MainContentProps {
    t: {
        hero: {
            title: string;
            subtitle: string;
            description: string;
            cta: string;
            learn: string;
        };
        features: {
            title: string;
            performance: string;
            performanceDesc: string;
            security: string;
            securityDesc: string;
            support: string;
            supportDesc: string;
        };
    };
    isLoaded: boolean;
}

export default function MainContent({ t, isLoaded }: MainContentProps) {
    return (
        <main className="relative z-10 max-w-7xl mx-auto px-6 py-12" data-oid=".j--5ns">
            <div
                className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center min-h-[80vh]"
                data-oid="41giswt"
            >
                {/* Left Content - Larger Column */}
                <div
                    className={`lg:col-span-7 transition-all duration-1000 delay-300 ${
                        isLoaded ? 'translate-x-0 opacity-100' : '-translate-x-20 opacity-0'
                    }`}
                    data-oid="4tz35gu"
                >
                    <div className="space-y-8" data-oid="y7em3yz">
                        <div
                            className="inline-block px-4 py-2 bg-gradient-to-r from-purple-900/50 to-pink-900/50 rounded-full border border-purple-500/30"
                            data-oid="q9yx9m4"
                        >
                            <span
                                className="text-purple-300 text-sm font-medium"
                                data-oid="9se36lr"
                            >
                                {t.hero.subtitle}
                            </span>
                        </div>

                        <h1
                            className="text-5xl lg:text-7xl font-bold leading-tight"
                            data-oid="1w7zf3-"
                        >
                            <span
                                className="bg-gradient-to-r from-white via-purple-200 to-pink-200 bg-clip-text text-transparent"
                                data-oid="4ngnjab"
                            >
                                {t.hero.title}
                            </span>
                        </h1>

                        <p
                            className="text-xl text-gray-300 max-w-2xl leading-relaxed"
                            data-oid="2gymhik"
                        >
                            {t.hero.description}
                        </p>

                        <div className="flex flex-col sm:flex-row gap-4" data-oid="gdu:yfk">
                            <button
                                className="px-8 py-4 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg font-semibold hover:from-purple-700 hover:to-pink-700 transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-purple-500/25"
                                data-oid="7l9.r_1"
                            >
                                {t.hero.cta}
                            </button>
                            <button
                                className="px-8 py-4 border border-gray-600 rounded-lg font-semibold hover:border-purple-500 hover:bg-purple-500/10 transition-all duration-300"
                                data-oid="6hf8obo"
                            >
                                {t.hero.learn}
                            </button>
                        </div>
                    </div>
                </div>

                {/* Right Content - Smaller Column with Complex Visual Elements */}
                <div
                    className={`lg:col-span-5 transition-all duration-1000 delay-500 ${
                        isLoaded ? 'translate-x-0 opacity-100' : 'translate-x-20 opacity-0'
                    }`}
                    data-oid="u:.ooqw"
                >
                    <div className="relative" data-oid="9r6pkki">
                        {/* Complex Layered Cards */}
                        <div className="relative space-y-4" data-oid="xtwnf9w">
                            <div
                                className="bg-gradient-to-br from-gray-800 to-gray-900 p-6 rounded-2xl border border-gray-700 transform rotate-3 hover:rotate-0 transition-transform duration-300"
                                data-oid="c7fwd.f"
                            >
                                <div
                                    className="flex items-center space-x-3 mb-4"
                                    data-oid="y2oebwv"
                                >
                                    <div
                                        className="w-3 h-3 bg-green-500 rounded-full animate-pulse"
                                        data-oid="c9yryff"
                                    ></div>
                                    <span
                                        className="text-green-400 font-semibold"
                                        data-oid="5j7r0_9"
                                    >
                                        99.9% Uptime
                                    </span>
                                </div>
                                <div className="text-2xl font-bold text-white" data-oid=".qsjisu">
                                    24/7
                                </div>
                                <div className="text-gray-400" data-oid="1gjxrcx">
                                    Monitoring
                                </div>
                            </div>

                            <div
                                className="bg-gradient-to-br from-purple-900/50 to-pink-900/50 p-6 rounded-2xl border border-purple-500/30 transform -rotate-2 hover:rotate-0 transition-transform duration-300 ml-8"
                                data-oid="z_1aduy"
                            >
                                <div
                                    className="flex items-center space-x-3 mb-4"
                                    data-oid="uuaby_k"
                                >
                                    <div
                                        className="w-3 h-3 bg-purple-500 rounded-full animate-pulse"
                                        data-oid="x53_tv2"
                                    ></div>
                                    <span
                                        className="text-purple-400 font-semibold"
                                        data-oid="ug1hkwo"
                                    >
                                        Global CDN
                                    </span>
                                </div>
                                <div className="text-2xl font-bold text-white" data-oid="tw2ake:">
                                    150+
                                </div>
                                <div className="text-gray-400" data-oid="ffb:gez">
                                    Locations
                                </div>
                            </div>

                            <div
                                className="bg-gradient-to-br from-blue-900/50 to-cyan-900/50 p-6 rounded-2xl border border-blue-500/30 transform rotate-1 hover:rotate-0 transition-transform duration-300"
                                data-oid="tdp6iuk"
                            >
                                <div
                                    className="flex items-center space-x-3 mb-4"
                                    data-oid="ljtlt30"
                                >
                                    <div
                                        className="w-3 h-3 bg-blue-500 rounded-full animate-pulse"
                                        data-oid="ruv4og3"
                                    ></div>
                                    <span
                                        className="text-blue-400 font-semibold"
                                        data-oid="s9gsoyh"
                                    >
                                        Enterprise Grade
                                    </span>
                                </div>
                                <div className="text-2xl font-bold text-white" data-oid="23tv.1d">
                                    SSL
                                </div>
                                <div className="text-gray-400" data-oid="xf7d.62">
                                    Security
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {/* Features Section - Dense Information Layout */}
            <div
                className={`mt-32 transition-all duration-1000 delay-700 ${
                    isLoaded ? 'translate-y-0 opacity-100' : 'translate-y-20 opacity-0'
                }`}
                data-oid="oxcy9id"
            >
                <h2
                    className="text-4xl font-bold text-center mb-16 bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent"
                    data-oid="d8f19u3"
                >
                    {t.features.title}
                </h2>

                <div
                    className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
                    data-oid=".3y60w6"
                >
                    {[
                        {
                            title: t.features.performance,
                            desc: t.features.performanceDesc,
                            color: 'from-red-500 to-orange-500',
                        },
                        {
                            title: t.features.security,
                            desc: t.features.securityDesc,
                            color: 'from-green-500 to-emerald-500',
                        },
                        {
                            title: t.features.support,
                            desc: t.features.supportDesc,
                            color: 'from-blue-500 to-purple-500',
                        },
                    ].map((feature, index) => (
                        <div key={index} className="group relative" data-oid=":ltu:nr">
                            <div
                                className="bg-gray-800/50 backdrop-blur-sm p-8 rounded-2xl border border-gray-700 hover:border-gray-600 transition-all duration-300 hover:transform hover:scale-105"
                                data-oid="u88ho4d"
                            >
                                <div
                                    className={`w-12 h-12 bg-gradient-to-r ${feature.color} rounded-lg mb-6 flex items-center justify-center`}
                                    data-oid="xrerr6u"
                                >
                                    <div
                                        className="w-6 h-6 bg-white rounded opacity-80"
                                        data-oid="7.unx4:"
                                    ></div>
                                </div>
                                <h3
                                    className="text-xl font-bold mb-4 text-white"
                                    data-oid="9ex9lv3"
                                >
                                    {feature.title}
                                </h3>
                                <p className="text-gray-400 leading-relaxed" data-oid="_hgq_t4">
                                    {feature.desc}
                                </p>
                            </div>
                            <div
                                className={`absolute inset-0 bg-gradient-to-r ${feature.color} opacity-0 group-hover:opacity-10 rounded-2xl transition-opacity duration-300`}
                                data-oid="2o6c62b"
                            ></div>
                        </div>
                    ))}
                </div>
            </div>
        </main>
    );
}