import React from "react";

const Stats = () => {
  return (
    <div className="py-3 bg-white">
      <div className="max-w-7xl mx-auto mb-4">
        <div className="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-4 gap-8">
          <div className="flex flex-col items-center justify-center p-2 sm:p-6 border-r border-gray-200 last:border-r-0">
            <h3 className="text-4xl md:text-5xl font-bold text-blue-600 mb-2">4.9</h3>
            <p className="text-sm font-semibold text-center uppercase tracking-wider text-black mb-4">
              GOOGLE RATING
            </p>
            <p className="hidden sm:block text-gray-500 text-center">
              Highly rated for web development, design, and marketing services.
            </p>
          </div>

          <div className="flex flex-col items-center p-6 border-r border-gray-200 last:border-r-0">
            <h3 className="text-4xl md:text-5xl font-bold text-blue-600 mb-2">
              450<span className="text-4xl md:text-5xl">+</span>
            </h3>
            <p className="text-sm font-semibold uppercase text-center tracking-wider text-black mb-4">
              HAPPY CLIENTS
            </p>
            <p className="hidden sm:block text-gray-500 text-center">
              Businesses across industries trust our digital solutions.
            </p>
          </div>

          <div className="flex flex-col items-center p-6 border-r border-gray-200 last:border-r-0">
            <h3 className="text-4xl md:text-5xl font-bold text-blue-600 mb-2">
              1200<span className="text-4xl md:text-5xl">+</span>
            </h3>
            <p className="text-sm font-semibold uppercase text-center tracking-wider text-black mb-4">
              PROJECTS DELIVERED
            </p>
            <p className="hidden sm:block text-gray-500 text-center">
              From websites to mobile apps and marketing campaigns.
            </p>
          </div>

          <div className="flex flex-col items-center p-6">
            <h3 className="text-4xl md:text-5xl font-bold text-blue-600 mb-2">24/7</h3>
            <p className="text-sm font-semibold text-center uppercase tracking-wider text-black mb-4">
              CUSTOMER SUPPORT
            </p>
            <p className="hidden sm:block text-gray-500 text-center">
              Always available to assist you with your digital needs.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Stats;
