export function HomeStat() {
    return (
        <section className="mx-4 pt-12 border-t-0 lg:mx-auto max-w-5xl border border-gray-200">
        <div className="lg:-mt-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 divide-y sm:divide-y-0 lg:divide-y-0 lg:divide-x divide-gray-200">
            
            {/* CORES */}
            <div className="px-6 lg:px-12 py-12 flex flex-col items-start text-left">
            <span className="text-xs font-medium text-gray-500 uppercase tracking-wide px-2.5 py-1 border border-gray-300 rounded-md">
                CORES
            </span>
            <h2 className="mt-4 text-4xl font-semibold tracking-tight text-gray-900">
                54,958
            </h2>
            <p className="mt-2 text-sm text-gray-500 leading-relaxed">
                Total Central Processing Unit cores available on the grid.
            </p>
            </div>

            {/* NODES */}
            <div className="px-6 lg:px-12 py-12 flex flex-col items-start text-left">
            <span className="text-xs font-medium text-gray-500 uppercase tracking-wide px-2.5 py-1 border border-gray-300 rounded-md">
                NODES
            </span>
            <h2 className="mt-4 text-4xl font-semibold tracking-tight text-gray-900">
                1,493
            </h2>
            <p className="mt-2 text-sm text-gray-500 leading-relaxed">
                Total number of nodes on the grid.
            </p>
            </div>

            {/* SSD CAPACITY */}
            <div className="px-6 lg:px-12 py-12 flex flex-col items-start text-left">
            <span className="text-xs font-medium text-gray-500 uppercase tracking-wide px-2.5 py-1 border border-gray-300 rounded-md">
                SSD CAPACITY
            </span>
            <h2 className="mt-4 text-4xl font-semibold tracking-tight text-gray-900">
                5,388,956
            </h2>
            <p className="mt-2 text-sm text-gray-500 leading-relaxed">
                Total GB amount of storage (SSD, HDD, and RAM) on the grid.
            </p>
            </div>

            {/* COUNTRIES */}
            <div className="px-6 lg:px-12 py-12 flex flex-col items-start text-left">
            <span className="text-xs font-medium text-gray-500 uppercase tracking-wide px-2.5 py-1 border border-gray-300 rounded-md">
                COUNTRIES
            </span>
            <h2 className="mt-4 text-4xl font-semibold tracking-tight text-gray-900">
                44
            </h2>
            <p className="mt-2 text-sm text-gray-500 leading-relaxed">
                Total number of countries with active nodes.
            </p>
            </div>

        </div>
        </section>
    );
}